feat: add theme switcher

Tarow · Dec 28, 2023 · f189511 · f189511
1 parent e499b28
commit f189511
Show file tree

Hide file tree

Showing 18 changed files with 825 additions and 28 deletions.
diff --git a/internal/api/handler.go b/internal/api/handler.go
@@ -123,7 +123,7 @@ func (h Handler) EditGame(c echo.Context) error {
 		return slices.Index(form.Players, i.Name) - slices.Index(form.Players, j.Name)
 	})
 
-	updatedGame, err := h.service.EditGame(*game)
+	updatedGame, err := h.service.UpdateGame(*game)
 	if err != nil {
 		return err
 	}
@@ -227,7 +227,7 @@ func (h Handler) EditRound(c echo.Context) error {
 	}
 	round.ID = int32(parsedRoundId)
 
-	updatedRound, err := h.service.EditRound(round)
+	updatedRound, err := h.service.UpdateRound(round)
 	if err != nil {
 		c.Logger().Error(err)
 		return err

diff --git a/internal/skat/service.go b/internal/skat/service.go
@@ -145,7 +145,7 @@ func (s Service) Create(g Game) (Game, error) {
 	return g, nil
 }
 
-func (s Service) EditGame(g Game) (Game, error) {
+func (s Service) UpdateGame(g Game) (Game, error) {
 	tx, err := s.db.Begin()
 	if err != nil {
 		return Game{}, err
@@ -228,7 +228,7 @@ func (s Service) AddRound(round Round) (Round, error) {
 	return round, nil
 }
 
-func (s Service) EditRound(round Round) (Round, error) {
+func (s Service) UpdateRound(round Round) (Round, error) {
 	tx, err := s.db.Begin()
 	if err != nil {
 		return Round{}, err
@@ -245,7 +245,7 @@ func (s Service) EditRound(round Round) (Round, error) {
 
 	// Update round
 	updateRound := table.Round.UPDATE(
-		table.Round.AllColumns.Except(table.Round.ID),
+		table.Round.AllColumns.Except(table.Round.ID, table.Round.CreatedAt),
 	).WHERE(table.Round.ID.EQ(sqlite.Int32(round.ID))).
 		MODEL(round)
 	_, err = updateRound.Exec(tx)

diff --git a/static/hyperscript.js b/static/hyperscript.js
diff --git a/static/theme-change.js b/static/theme-change.js
diff --git a/templates/GameDetails.templ b/templates/GameDetails.templ
@@ -6,9 +6,11 @@ import "github.com/tarow/skat-counter/templates/components"
 templ GameDetailsNavbar() {
 	<div class="navbar bg-base-200">
 		<div class="grid flex-grow grid-cols-3 justify-items-center">
-			<a class="col-span-3 btn btn-ghost text-xl" hx-boost="true" href="/" method="get">
+			<div></div>
+			<a class="btn btn-ghost text-xl" hx-boost="true" href="/" method="get">
 				Skatcounter
 			</a>
+			@component.ThemeSwitcher()
 		</div>
 	</div>
 }

diff --git a/templates/GameDetails_templ.go b/templates/GameDetails_templ.go
diff --git a/templates/GameOverview.templ b/templates/GameOverview.templ
@@ -5,18 +5,21 @@ import "github.com/tarow/skat-counter/templates/components"
 
 templ GameOverviewNavbar() {
 	<div class="navbar bg-base-200">
-		<div class="grid flex-grow grid-cols-3 justify-items-center">
-			<div></div>
-			<a class="btn btn-ghost text-xl" hx-boost="true" href="/" method="get">
+		<div class="grid flex-grow grid-cols-4 sm:grid-cols-5 justify-items-center">
+			<div class="hidden sm:flex sm:col-span-2"></div>
+			<a class="btn col-span-2 sm:col-span-1 btn-ghost text-xl" hx-boost="true" href="/" method="get">
 				Skatcounter
 			</a>
 			<button
  				onclick="create_game_modal.showModal()"
  				hx-target="#create_game_form"
  				hx-get="/games/create"
- 				class="btn btn-primary justify-self-start"
+ 				class="btn btn-primary justify-self-center col-span-1"
  				_="on htmx:afterSwap from #create_game_form call create_game_modal.showModal()"
 			>Create Game</button>
+			<div class="col-span-1">
+				@component.ThemeSwitcher()
+			</div>
 		</div>
 	</div>
 	<dialog id="create_game_modal" class="modal">

diff --git a/templates/GameOverview_templ.go b/templates/GameOverview_templ.go
diff --git a/templates/base.templ b/templates/base.templ
@@ -2,20 +2,22 @@ package template
 
 templ Base() {
 	<!DOCTYPE html>
-	<html data-theme="dim">
+	<html data-theme="default">
 		<head>
 			<meta charset="UTF-8"/>
 			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 			<title>Skatcounter</title>
 			<link href="/static/daisyui.css" rel="stylesheet" type="text/css"/>
 			<script src="/static/tailwind.js"></script>
 			<script src="/static/htmx.js"></script>
-			<script src="https://unpkg.com/hyperscript.[email protected]"></script>
+			<script src="/static/hyperscript.js"></script>
 			<script src="/static/sortable.js"></script>
+			<script src="/static/theme-change.js"></script>
 		</head>
 		<body>
 			{ children... }
 			@initSortable()
+			@initThemeChange()
 		</body>
 	</html>
 }
@@ -39,3 +41,8 @@ script initSortable() {
     }
 	})
 }
+
+script initThemeChange() {
+	// init theme change listener (/static/theme-change.js)
+	themeChange(false) 
+}
diff --git a/templates/base_templ.go b/templates/base_templ.go
diff --git a/templates/components/game_card.templ b/templates/components/game_card.templ
@@ -7,7 +7,7 @@ templ GameCard(game skat.Game, detailsBtn, editBtn, deleteBtn bool) {
 	<div class="card w-96 image-full">
 		<figure><img src="https://w.wallhaven.cc/full/vm/wallhaven-vmgl8m.jpg" alt="Cards"/></figure>
 		<div class="flex justify-end">
-			<div class="badge mr-2 mt-2 z-30">
+			<div class="badge mr-2 mt-2 z-20">
 				if game.Online {
 					Online
 				} else {

diff --git a/templates/components/game_card_templ.go b/templates/components/game_card_templ.go
diff --git a/templates/components/player_input.templ b/templates/components/player_input.templ
@@ -3,7 +3,7 @@ package component
 templ PlayerInput() {
 	<div class="grid grid-cols-6 gap-3 items-center">
 		<div class="col-span-3" id="player_names">
-			<input type="text" placeholder="Enter Player Name" class="input input-bordered" id="player_input" onkeydown="handleKeyDown(event)"/>
+			<input type="text" placeholder="Enter Player Name" class="w-full max-w-xs input input-bordered" id="player_input" onkeydown="handleKeyDown(event)"/>
 		</div>
 		<div class="col-span-3">
 			<p class="flex justify-center">Players (Drag to sort)</p>

diff --git a/templates/components/player_input_templ.go b/templates/components/player_input_templ.go
diff --git a/templates/components/rounds_list.templ b/templates/components/rounds_list.templ
@@ -55,20 +55,22 @@ templ RoundsList(game skat.Game) {
 					</tr>
 				}
 			</tbody>
-			<tfoot class="border-t">
+			<tfoot class="border-t-2">
 				<tr>
 					<td class="text-center">Total</td>
 					for _, player := range game.Players {
 						<td class="text-center">{ fmt.Sprintf("%v", game.GetTotalPlayerScore(player) ) }</td>
 					}
-					<th class="text-center"></th>
+					<th></th>
+					<th></th>
 				</tr>
 				<tr>
 					<td>Payment</td>
 					for _, player := range game.Players {
 						<td class="text-center">{ fmt.Sprintf("%.2f €", float32(game.GetTotalPlayerScore(player))*game.Stake / float32(100)) }</td>
 					}
 					<th class="text-center">{ fmt.Sprintf("%.2f €", float32(game.GetTotalPayment()) / float32(100)) }</th>
+					<th></th>
 				</tr>
 			</tfoot>
 		</table>

diff --git a/templates/components/rounds_list_templ.go b/templates/components/rounds_list_templ.go