feat: mobile ui for rounds

Tarow · Dec 29, 2023 · 3fdac1f · 3fdac1f
1 parent 038cce5
commit 3fdac1f
Show file tree

Hide file tree

Showing 11 changed files with 275 additions and 79 deletions.
diff --git a/internal/skat/skat.go b/internal/skat/skat.go
@@ -1,6 +1,7 @@
 package skat
 
 import (
+	"fmt"
 	"slices"
 
 	"github.com/tarow/skat-counter/internal/skat/gen/model"
@@ -32,6 +33,14 @@ func (g Game) GetTotalPlayerScore(player model.Player) int32 {
 	return sum
 }
 
+func (g Game) FormatTotalPlayerPayment(player model.Player) string {
+	return fmt.Sprintf("%.2f €", float32(g.GetTotalPlayerScore(player))*g.Stake/float32(100))
+}
+
+func (g Game) FormatTotalPayment() string {
+	return fmt.Sprintf("%.2f €", float32(g.GetTotalPayment())/float32(100))
+}
+
 func (g Game) GetTotalPayment() float32 {
 	sum := int32(0)
 	for _, player := range g.Players {

diff --git a/templates/GameDetails.templ b/templates/GameDetails.templ
@@ -5,7 +5,7 @@ import "github.com/tarow/skat-counter/templates/components"
 import "fmt"
 
 templ GameDetailsNavbar() {
-	<div class="navbar bg-base-200">
+	<div class="navbar sticky top-0 z-50 bg-base-200 shadow-xl">
 		<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">
@@ -18,14 +18,15 @@ templ GameDetailsNavbar() {
 
 templ GameDetails (game skat.Game) {
 	@Base() {
+		<div hx-get={ fmt.Sprintf("/games/%v", game.ID) } hx-trigger="every 10s" hx-swap="none" hx-select-oob="#gamecard:outerHTML,#roundlist:outerHTML"></div>
 		@GameDetailsNavbar()
-		<div class="container flex pt-4 mx-auto" hx-get={ fmt.Sprintf("/games/%v", game.ID) } hx-swap="none" hx-select-oob="#gamecard:outerHTML,#roundlist:outerHTML">
-			<div class="flex w-full flex-row flex-wrap-reverse gap-8 justify-around items-end" hx-disinherit="*">
-				<div id="roundlist" class="p-2 w-full sm:w-fit justify-center">
+		<div class="container flex p-2  pt-4 mx-auto">
+			<div class="flex w-full flex-row flex-wrap-reverse gap-8 justify-around items-end">
+				<div id="roundlist" class=" justify-center">
 					<div class="hidden sm:flex justify-center">
 						@component.RoundsTable(game)
 					</div>
-					<div class="sm:hidden flex">
+					<div class="sm:hidden flex w-full justify-center">
 						@component.RoundGrid(game)
 					</div>
 				</div>

diff --git a/templates/GameDetails_templ.go b/templates/GameDetails_templ.go
diff --git a/templates/GameOverview.templ b/templates/GameOverview.templ
@@ -4,7 +4,7 @@ import "github.com/tarow/skat-counter/internal/skat"
 import "github.com/tarow/skat-counter/templates/components"
 
 templ GameOverviewNavbar() {
-	<div class="navbar bg-base-200">
+	<div class="navbar sticky top-0 z-50 bg-base-200 shadow-xl">
 		<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">

diff --git a/templates/GameOverview_templ.go b/templates/GameOverview_templ.go
diff --git a/templates/components/game_card.templ b/templates/components/game_card.templ
@@ -83,7 +83,7 @@ templ GameCard(game skat.Game, detailsBtn, editBtn, deleteBtn bool) {
  						hx-target="#content"
  						hx-trigger="confirmed"
  						_="on click call Swal.fire({title: 'Are you sure?', text:'Deletion cannot be undone', icon: 'question', showCancelButton: true, width: 300})
-            if result.isConfirmed trigger confirmed"
+            		if result.isConfirmed trigger confirmed"
 					>
 						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
 							<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"></path>

diff --git a/templates/components/game_card_templ.go b/templates/components/game_card_templ.go
diff --git a/templates/components/rounds_grid.templ b/templates/components/rounds_grid.templ
@@ -2,28 +2,86 @@ package component
 
 import "github.com/tarow/skat-counter/internal/skat"
 import "github.com/tarow/skat-counter/internal/skat/gen/model"
+import "fmt"
 
-templ RoundCard(players []model.Player, round skat.Round, roundNumber int) {
+templ RoundEntry(players []model.Player, round skat.Round, roundNumber int) {
 	<div class="card-body p-4 ">
-		<div class="card-actions justify-between">
-			<h2 class="card-title">Round { toString(roundNumber+1) } </h2>
-			<button class="btn btn-square btn-sm">
-				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
-			</button>
+		<div class="card-actions flex flex-row justify-between items-center pb-3">
+			<div class="avatar placeholder flex-1">
+				<div class="w-10 rounded-full bg-neutral text-neutral-content">
+					<span>{ toString(round.Value) }</span>
+				</div>
+			</div>
+			<h3 class="flex-1 justify-center card-title">Round { toString(roundNumber + 1) }</h3>
+			<div class="flex flex-row flex-wrap justify-end items-center flex-1">
+				<button
+ 					class="btn btn-ghost btn-sm btn-square"
+ 					hx-get={ fmt.Sprintf("/games/%v/rounds/%v", round.GameID, round.ID) }
+ 					hx-swap="innerHTML"
+ 					hx-target="#edit_round_form"
+ 					_="on htmx:afterSwap from #edit_round_form call edit_round_modal.showModal()"
+				>
+					<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+						<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"></path>
+					</svg>
+				</button>
+				<button
+ 					class="btn btn-ghost btn-sm btn-square"
+ 					hx-delete={ fmt.Sprintf("/games/%v/rounds/%v", round.GameID, round.ID) }
+ 					hx-target="#content"
+ 					hx-trigger="confirmed"
+ 					_="on click call Swal.fire({title: 'Are you sure?', text:'Deletion cannot be undone', icon: 'question', showCancelButton: true, width: 300})
+            					 if result.isConfirmed trigger confirmed"
+				>
+					<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 " fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+						<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"></path>
+					</svg>
+				</button>
+			</div>
 		</div>
 		<div class="flex w-full flex-row flex-wrap gap-2">
 			for _, player := range players {
 				<div class="badge">{ player.Name }: { formatRoundScore(round.GetRoundScore(player)) }</div>
 			}
 		</div>
-		<div class="divider -p-2"></div>
+	</div>
+}
+
+templ TotalEntry(game skat.Game) {
+	<div class="card-body  p-0">
+		<div class="card-actions flex flex-row justify-between items-center  pl-4 pt-4  pb-3">
+			<div class="flex-1 justify-start">
+				<div class="w-fit p-3 rounded-full bg-neutral text-neutral-content">{ toString(game.FormatTotalPayment()) }</div>
+			</div>
+			<h3 class="card-title justify-center flex-1">Total</h3>
+			<div class="flex-1"></div>
+		</div>
+		<div class="flex w-full justify-center flex-row flex-wrap gap-2">
+			for _, player := range game.Players {
+				<div class="flex">
+					<div class="stat">
+						<div class="stat-title">{ player.Name }</div>
+						<div class="stat-value text-base">{ game.FormatTotalPlayerPayment(player) }</div>
+						<div class="stat-desc">Score: { toString(game.GetTotalPlayerScore(player)) }</div>
+					</div>
+				</div>
+			}
+		</div>
 	</div>
 }
 
 templ RoundGrid(game skat.Game) {
-	<div class="card w-full  bg-base-200 shadow-xl">
-		for idx, round := range game.Rounds {
-			@RoundCard(game.Players, round, idx)
-		}
+	<div class="card bg-base-200 shadow-xl">
+		<div class=" flex flex-row flex-wrap  justify-center">
+			for idx, round := range game.Rounds {
+				<div class="w-72">
+					@RoundEntry(game.Players, round, idx)
+					<div class="divider -mb-3"></div>
+				</div>
+			}
+		</div>
+		<div class="self-center">
+			@TotalEntry(game)
+		</div>
 	</div>
 }