From ca1c7bd2ac22213a3e8ab00e714b83ccc5bcfb73 Mon Sep 17 00:00:00 2001
From: Janis <janis.e.20@gmx.de>
Date: Wed, 12 Nov 2025 11:44:34 +0100
Subject: [PATCH] feat(game): implement tie resolution and enhance player
 interaction

43 [Subtask] UI looks better and improved
---
 knockoutwhist                                 |  2 +-
 .../app/controllers/IngameController.scala    |  2 +-
 .../app/logic/game/GameLobby.scala            |  3 +
 .../app/views/ingame/selecttrump.scala.html   | 98 ++++++++-----------
 .../app/views/ingame/tie.scala.html           | 58 ++++++++---
 5 files changed, 93 insertions(+), 70 deletions(-)

diff --git a/knockoutwhist b/knockoutwhist
index b9a7b0a..5aa1cef 160000
--- a/knockoutwhist
+++ b/knockoutwhist
@@ -1 +1 @@
-Subproject commit b9a7b0a2af7cef7225bf1a0388ebf58171a173f2
+Subproject commit 5aa1cef35689d2df8a89e2d8864fc5fcf9c30e33
diff --git a/knockoutwhistweb/app/controllers/IngameController.scala b/knockoutwhistweb/app/controllers/IngameController.scala
index 6dc4194..6f301b8 100644
--- a/knockoutwhistweb/app/controllers/IngameController.scala
+++ b/knockoutwhistweb/app/controllers/IngameController.scala
@@ -320,7 +320,7 @@ class IngameController @Inject()(
               val session = g.getUserSession(request.user.id)
               optSession = Some(session)
               session.lock.lock()
-              g.selectTie(g.getUserSession(request.user.id), tie.toInt)
+              g.selectTie(g.getUserSession(request.user.id), tie.toInt - 1)
             }
             optSession.foreach(_.lock.unlock())
             if (result.isSuccess) {
diff --git a/knockoutwhistweb/app/logic/game/GameLobby.scala b/knockoutwhistweb/app/logic/game/GameLobby.scala
index 486bf4f..0e8ac9f 100644
--- a/knockoutwhistweb/app/logic/game/GameLobby.scala
+++ b/knockoutwhistweb/app/logic/game/GameLobby.scala
@@ -157,6 +157,9 @@ class GameLobby private(
    */
   def selectTie(userSession: UserSession, tieNumber: Int): Unit = {
     val player = getPlayerInteractable(userSession, InteractionType.TieChoice)
+    val highestNumber = logic.playerTieLogic.highestAllowedNumber()
+    if (tieNumber < 0 || tieNumber > highestNumber)
+      throw new IllegalArgumentException(s"Selected number $tieNumber is out of allowed range (0 to $highestNumber)")
     userSession.resetCanInteract()
     logic.playerTieLogic.receivedTieBreakerCard(tieNumber)
   }
diff --git a/knockoutwhistweb/app/views/ingame/selecttrump.scala.html b/knockoutwhistweb/app/views/ingame/selecttrump.scala.html
index 56a5b64..82c58c2 100644
--- a/knockoutwhistweb/app/views/ingame/selecttrump.scala.html
+++ b/knockoutwhistweb/app/views/ingame/selecttrump.scala.html
@@ -5,7 +5,7 @@
     <div class="ingame-stage blur-sides">
         <div class="container py-4">
             <div class="row justify-content-center">
-                <div class="col-12 col-md-10 col-lg-8">
+                <div class="col-12">
                     <div class="card shadow-sm">
                         <div class="card-header text-center">
                             <h3 class="mb-0">Select Trump Suit</h3>
@@ -16,66 +16,50 @@
                                     You (@player.toString) won the last round. Choose the trump suit for the next round.
                                 </div>
 
-                                <form method="post" action="@routes.IngameController.playTrump(gameId)">
-                                    <div class="row row-cols-2 row-cols-sm-4 g-3">
-                                        <div class="col">
-                                            <button class="btn btn-outline-dark w-100 h-100 py-3" type="submit" name="trump" value="0" aria-label="Spades">
-                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Spades))
-                                                <div class="mt-2">Spades</div>
+                                <div class="row justify-content-center col-auto mb-5">
+                                    <div class="col-auto handcard">
+                                        <form action="@routes.IngameController.playTrump(gameId)" method="post">
+                                            <input type="hidden" name="cardId" value="0" />
+                                            <button type="submit" class="btn btn-outline-light p-0 border-0 shadow-none" name="trump" value="0" style="border-radius: 6px">
+                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Spades)) width="120px" style="border-radius: 6px"/>
                                             </button>
-                                        </div>
-                                        <div class="col">
-                                            <button class="btn btn-outline-danger w-100 h-100 py-3" type="submit" name="trumpSuit" value="1" aria-label="Hearts">
-                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Hearts))
-                                                <div class="mt-2">Hearts</div>
-                                            </button>
-                                        </div>
-                                        <div class="col">
-                                            <button class="btn btn-outline-warning w-100 h-100 py-3" type="submit" name="trumpSuit" value="2" aria-label="Diamonds">
-                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Diamonds))
-                                                <div class="mt-2">Diamonds</div>
-                                            </button>
-                                        </div>
-                                        <div class="col">
-                                            <button class="btn btn-outline-secondary w-100 h-100 py-3" type="submit" name="trumpSuit" value="3" aria-label="Clubs">
-                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs))
-                                                <div class="mt-2">Clubs</div>
-                                            </button>
-                                        </div>
+                                        </form>
                                     </div>
-                                </form>
+                                    <div class="col-auto handcard">
+                                        <form action="@routes.IngameController.playTrump(gameId)" method="post">
+                                            <input type="hidden" name="cardId" value="1" />
+                                            <button type="submit" class="btn btn-outline-light p-0 border-0 shadow-none" name="trump" value="1" style="border-radius: 6px">
+                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Hearts)) width="120px" style="border-radius: 6px"/>
+                                            </button>
+                                        </form>
+                                    </div>
+                                    <div class="col-auto handcard">
+                                        <form action="@routes.IngameController.playTrump(gameId)" method="post">
+                                            <input type="hidden" name="cardId" value="2" />
+                                            <button type="submit" class="btn btn-outline-light p-0 border-0 shadow-none" name="trump" value="2" style="border-radius: 6px">
+                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Diamonds)) width="120px" style="border-radius: 6px"/>
+                                            </button>
+                                        </form>
+                                    </div>
+                                    <div class="col-auto handcard">
+                                        <form action="@routes.IngameController.playTrump(gameId)" method="post">
+                                            <input type="hidden" name="cardId" value="3" />
+                                            <button type="submit" class="btn btn-outline-light p-0 border-0 shadow-none" name="trump" value="3" style="border-radius: 6px">
+                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs)) width="120px" style="border-radius: 6px"/>
+                                            </button>
+                                        </form>
+                                    </div>
+                                </div>
+                                <div class="row justify-content-center" id="card-slide">
+                                    @for(i <- player.currentHand().get.cards.indices) {
+                                        <div class="col-auto" style="border-radius: 6px">
+                                            @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
+                                        </div>
+                                    }
+                                </div>
                             } else {
                                 <div class="alert alert-warning" role="alert" aria-live="polite">
-                                    @player.toString is choosing a trumpsuit. The new round will start once a suit is picked.
-                                </div>
-
-                                <div class="text-center">
-                                    <div class="row row-cols-2 row-cols-sm-4 g-3">
-                                        <div class="col">
-                                            <div class="btn btn-outline-dark disabled w-100 h-100 py-3" aria-disabled="true">
-                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Spades))
-                                                <div class="mt-2">Spades</div>
-                                            </div>
-                                        </div>
-                                        <div class="col">
-                                            <div class="btn btn-outline-danger disabled w-100 h-100 py-3" aria-disabled="true">
-                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Hearts))
-                                                <div class="mt-2">Hearts</div>
-                                            </div>
-                                        </div>
-                                        <div class="col">
-                                            <div class="btn btn-outline-warning disabled w-100 h-100 py-3" aria-disabled="true">
-                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Diamonds))
-                                                <div class="mt-2">Diamonds</div>
-                                            </div>
-                                        </div>
-                                        <div class="col">
-                                            <div class="btn btn-outline-secondary disabled w-100 h-100 py-3" aria-disabled="true">
-                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs))
-                                                <div class="mt-2">Clubs</div>
-                                            </div>
-                                        </div>
-                                    </div>
+                                    @logic.getCurrentMatch.get.roundlist.last.winner.get.name is choosing a trumpsuit. The new round will start once a suit is picked.
                                 </div>
                             }
                         </div>
diff --git a/knockoutwhistweb/app/views/ingame/tie.scala.html b/knockoutwhistweb/app/views/ingame/tie.scala.html
index c813cf3..7aad171 100644
--- a/knockoutwhistweb/app/views/ingame/tie.scala.html
+++ b/knockoutwhistweb/app/views/ingame/tie.scala.html
@@ -12,7 +12,6 @@
                         </div>
                         <div class="card-body">
                             <div class="mb-3">
-                                <h5 class="card-title">Knockout Whist</h5>
                                 <p class="card-text">
                                     The last round was tied between:
                                     <span class="ms-1">
@@ -26,7 +25,7 @@
                             @if(player.equals(logic.playerTieLogic.currentTiePlayer())) {
                                 @defining(logic.playerTieLogic.highestAllowedNumber()) { maxNum =>
                                     <div class="alert alert-info" role="alert" aria-live="polite">
-                                        Pick a number between 1 and @maxNum. The resulting card will be your card for the cut.
+                                        Pick a number between 1 and @{maxNum + 1}. The resulting card will be your card for the cut.
                                     </div>
 
                                     <form class="row g-2 align-items-center" method="post" action="@routes.IngameController.playTie(gameId)">
@@ -34,28 +33,65 @@
                                             <label for="tieNumber" class="col-form-label">Your number</label>
                                         </div>
                                         <div class="col-auto">
-                                            <input type="number" id="tieNumber" class="form-control" name="tie" min="1" max="@maxNum" placeholder="1" required>
+                                            <input type="number" id="tieNumber" class="form-control" name="tie" min="1" max="@{maxNum + 1}" placeholder="1" required>
                                         </div>
                                         <div class="col-auto">
                                             <button type="submit" class="btn btn-primary">Confirm</button>
                                         </div>
                                     </form>
+                                    <h6 class="mt-4 mb-3">Currently Picked Cards</h6>
+
+                                    <div id="cardsplayed" class="row g-3 justify-content-center">
+                                        @if(logic.playerTieLogic.getSelectedCard.nonEmpty) {
+                                            @for((player, card) <- logic.playerTieLogic.getSelectedCard) {
+                                                <div class="col-6">
+                                                    <div class="card shadow-sm border-0 h-100 text-center">
+                                                        <div class="card-body d-flex flex-column justify-content-between">
+                                                            <p class="card-text fw-semibold mb-2 text-primary">@player</p>
+                                                            <div class="card-img-top">
+                                                            @util.WebUIUtils.cardtoImage(card)
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            }
+                                        } else {
+                                            <div class="col-12">
+                                                <div class="alert alert-info text-center" role="alert">
+                                                    <i class="bi bi-info-circle me-2"></i>
+                                                    No cards have been selected yet.
+                                                </div>
+                                            </div>
+                                        }
+                                    </div>
                                 }
                             } else {
                                 <div class="alert alert-warning" role="alert" aria-live="polite">
                                     <strong>@logic.playerTieLogic.currentTiePlayer()</strong> is currently picking a number for the cut.
                                 </div>
 
-                                <h6 class="mt-3">Currently picked cards</h6>
-                                <div id="cardsplayed" class="row row-cols-2 row-cols-sm-3 row-cols-md-4 g-3 mt-1">
-                                    @for((player, card) <- logic.playerTieLogic.getSelectedCard) {
-                                        <div class="col">
-                                            <div class="card h-100 text-center">
-                                                <div class="card-body">
-                                                    <p class="card-text fw-semibold mb-2">@player</p>
-                                                    @util.WebUIUtils.cardtoImage(card)
+                                <h6 class="mt-4 mb-3">Currently Picked Cards</h6>
+
+                                <div id="cardsplayed" class="row g-3 justify-content-center">
+                                    @if(logic.playerTieLogic.getSelectedCard.nonEmpty) {
+                                        @for((player, card) <- logic.playerTieLogic.getSelectedCard) {
+                                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
+                                                <div class="card shadow-sm border-0 h-100 text-center">
+                                                    <div class="card-body d-flex flex-column justify-content-between">
+                                                        <p class="card-text fw-semibold mb-2 text-primary">@player</p>
+                                                        <div class="card-img-top">
+                                                        @util.WebUIUtils.cardtoImage(card)
+                                                        </div>
+                                                    </div>
                                                 </div>
                                             </div>
+                                        }
+                                    } else {
+                                        <div class="col-12">
+                                            <div class="alert alert-info text-center" role="alert">
+                                                <i class="bi bi-info-circle me-2"></i>
+                                                No cards have been selected yet.
+                                            </div>
                                         </div>
                                     }
                                 </div>