feat(ui): Tricktable

Added a trick-table displaying the players with their won tricks sorted by the person with the most tricks

knockoutwhistweb/app/assets/stylesheets/main.less

@@ -210,3 +210,19 @@ body {
     font-size: 1.5em;
     font-family: Arial, serif;
 }
+.score-table {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    padding: 10px;
+    margin-bottom: 20px;
+    backdrop-filter: blur(8px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.score-header {
+    font-weight: bold;
+    color: #ffffff;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+.score-row {
+    color: #ffffff;
+}

knockoutwhistweb/app/views/ingame/ingame.scala.html

@@ -11,15 +11,37 @@
                 <h4 class="fw-semibold mb-1">Current Player</h4>
                 <p class="fs-5 text-primary">@gamelobby.getLogic.getCurrentPlayer.get.name</p>
                 @if(!TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) {
-                    <h4 class="fw-semibold mb-1">Next Player</h4>
+                <h4 class="fw-semibold mb-1">Next Player</h4>
-                    @for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {
+                @for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {
-                        <p class="fs-5 text-primary">@nextplayer</p>
+                <p class="fs-5 text-primary">@nextplayer</p>
-                    }
+                }
                 }
             </div>
 
-            <div class="d-flex col-md-4 text-center justify-content-center g-3 mb-5">
+            <div class="col-4 text-center">
-                @for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
+
+                <div class="score-table mt-5">
+                    <h4 class="fw-bold mb-3 text-white">Tricks Won</h4>
+
+                    <div class="d-flex justify-content-between score-header pb-1">
+                        <div style="width: 50%">PLAYER</div>
+                        <div style="width: 50%">TRICKS</div>
+                    </div>
+
+                    @for(player <- gamelobby.getLogic.getPlayerQueue.get.toList.sortBy { p =>
+                    -(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(p) }.size)
+                    }) {
+                    <div class="d-flex justify-content-between score-row pt-1">
+                        <div style="width: 50%" class="text-truncate">@player.name</div>
+                        <div style="width: 50%">
+                            @(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(player) }.size)
+                        </div>
+                    </div>
+                    }
+
+                </div>
+                <div class="d-flex justify-content-center g-3 mb-5">
+                    @for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
                     <div class="col-auto">
                         <div class="card text-center shadow-sm border-0 bg-transparent" style="width: 7rem; backdrop-filter: blur(4px);">
                             <div class="p-2">
@@ -30,20 +52,20 @@
                             </div>
                         </div>
                     </div>
-                }
+                    }
+                </div>
             </div>
-
             <div class="col-md-4 text-end">
                 <h4 class="fw-semibold mb-1">Trumpsuit</h4>
                 <p class="fs-5 text-primary">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p>
 
                 <h5 class="fw-semibold mt-4 mb-1">First Card</h5>
                 <div class="d-inline-block border rounded shadow-sm p-1 bg-light">
-                @if(gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) {
+                    @if(gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) {
                     @util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get) width="80px"/>
-                } else {
+                    } else {
                     @views.html.render.card.apply("images/cards/1B.png")("Blank Card") width="80px"/>
-                }
+                    }
                 </div>
             </div>
         </div>
@@ -56,14 +78,14 @@
         <div class="row justify-content-center g-2 mt-4 bottom-div" style="backdrop-filter: blur(4px);">
             <div class="row justify-content-center" id="card-slide">
                 @for(i <- player.currentHand().get.cards.indices) {
-                    <div class="col-auto handcard" style="border-radius: 6px">
+                <div class="col-auto handcard" style="border-radius: 6px">
-                        <form action="@(routes.IngameController.playCard(gamelobby.id))" method="post" class="m-0 p-0" style="border-radius: 6px">
+                    <form action="@(routes.IngameController.playCard(gamelobby.id))" method="post" class="m-0 p-0" style="border-radius: 6px">
-                            <input type="hidden" name="cardId" value="@i" />
+                        <input type="hidden" name="cardId" value="@i" />
-                            <button type="submit" class="btn btn-outline-light p-0 border-0 shadow-none" style="border-radius: 6px">
+                        <button type="submit" class="btn btn-outline-light p-0 border-0 shadow-none" style="border-radius: 6px">
-                                @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
+                            @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
-                            </button>
+                        </button>
-                        </form>
+                    </form>
-                    </div>
+                </div>
                 }
             </div>
         </div>