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

@@ -18,7 +18,29 @@
                 }
             </div>
 
-            <div class="d-flex col-md-4 text-center justify-content-center g-3 mb-5">
+            <div class="col-4 text-center">
+
+                <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);">
@@ -32,7 +54,7 @@
                     </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>