ci: bump version to v4.7.0

Added a nice look to the endscreen. Implemented a ranking method inside GameLobby to get an order.

Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: #97
Reviewed-by: Janis <janis-e@gmx.de>
Co-authored-by: lq64 <lq@blackhole.local>
Co-committed-by: lq64 <lq@blackhole.local>

CHANGELOG.md

@@ -159,3 +159,41 @@
 ### Features
 
 * **api:** Implemented session closed and kick event via websocket ([#87](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/87)) ([1ef5e8a](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/1ef5e8a72fdf8a3d1ae624c8c3d7c6595017bc6f))
+##  (2025-12-01)
+
+### Features
+
+* **api:** Implemented turn event via websocket ([#86](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/86)) ([2aee79b](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/2aee79bb6887008397aa0780d1d74ce96af1c202))
+* GameState to Title Mapping BAC-1 ([#92](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/92)) ([6e17328](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/6e17328846745375482c97383b143d86a86e7f32))
+* **ui:** Implement countless feature using the SJWP ([#89](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/89)) ([1f96290](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/1f962903712163543fd4f98e696be5e7e29d88a6))
+* **ui:** Popups ([#91](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/91)) ([0037820](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/003782090509bca1c5022c308231b7560dd9b23d))
+
+### Bug Fixes
+
+* **api:** Fixed websocket routing ([#88](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/88)) ([46c96d4](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/46c96d4ceb935ac91fc515a1fdaef195e5ebc0a7))
+* **api:** fixes - reimplemented animations ([#90](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/90)) ([cfcd967](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/cfcd967ce08ecf07f3f06826c337f684eb3b0c5f))
+##  (2025-12-01)
+
+### Features
+
+* **api:** BAC-10 Websockets - Kick Users ([#93](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/93)) ([0541bb5](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/0541bb58d19efd98d134b3d0412f39b4b1001783))
+##  (2025-12-01)
+
+### Features
+
+* **api:** BAC-11 Websocket - Return to Lobby ([#94](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/94)) ([fd2467a](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/fd2467a9ea22dca64d5152a5a3e6db86d9a6f345))
+##  (2025-12-01)
+
+### Bug Fixes
+
+* **api:** BAC-23 Remove old polling code ([#95](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/95)) ([a55f0b4](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/a55f0b4b6164a47e3524422650ed99d10f9c8b0d))
+##  (2025-12-01)
+
+### Bug Fixes
+
+* FRO-6 Websocket Close Handle ([#96](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/96)) ([3585566](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/358556612ec74601c8b31125e4e65f750abf8c4c))
+##  (2025-12-03)
+
+### Features
+
+* **ui:** FRO-7 Endscreen ([#97](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/97)) ([d57e6ef](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/d57e6efa985ca07c32f9f54595fe7393dbdf4d8a))

knockoutwhistweb/app/assets/stylesheets/main.less

@@ -219,10 +219,10 @@ body {
 
 }
 
-#nextPlayers {
+#next-players-container {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   height: 0;
 
   p {
@@ -231,10 +231,6 @@ body {
   }
 }
 
-#invisible {
-  visibility: hidden;
-}
-
 #selecttrumpsuit {
   display: flex;
   flex-direction: column;

knockoutwhistweb/app/controllers/IngameController.scala

@@ -12,6 +12,7 @@ import play.api.*
 import play.api.libs.json.{JsValue, Json}
 import play.api.mvc.*
 import play.twirl.api.Html
+import util.GameUtil
 
 import java.util.UUID
 import javax.inject.*
@@ -33,7 +34,7 @@ class IngameController @Inject()(
           IngameController.returnInnerHTML(g, g.logic.getCurrentState, request.user)
         }
         if (results.isSuccess) {
-          Ok(views.html.main("In-Game - Knockout Whist")(results.get))
+          Ok(views.html.main("Knockout Whist - " + GameUtil.stateToTitle(g.logic.getCurrentState))(results.get))
         } else {
           InternalServerError(results.failed.get.getMessage)
         }

knockoutwhistweb/app/logic/game/GameLobby.scala

@@ -20,6 +20,7 @@ import play.api.libs.json.{JsObject, Json}
 import java.util.{Timer, TimerTask, UUID}
 import scala.collection.mutable
 import scala.collection.mutable.ListBuffer
+import scala.util.Try
 
 class GameLobby private(
                          val logic: GameLogic,
@@ -277,6 +278,37 @@ class GameLobby private(
   def getUsers: Set[User] = {
     users.values.map(d => d.user).toSet
   }
+  def getFinalRanking: List[(String, (Int, Int))] = {
+    Try {
+      val match1 = getMatch
+      if (!match1.isOver) {
+        List.empty
+      } else {
+        val winnerName = logic.getWinner.get.name
+
+        val allPlayerNames = match1.totalplayers.map(_.name)
+        val roundlist = match1.roundlist
+
+        val playerMetrics: Map[String, (Int, Int)] = allPlayerNames.map { name =>
+          val roundsWon = roundlist.count { round =>
+            round.winner.exists(_.name == name)
+          }
+          val totalTricksWon = roundlist.flatMap(_.tricklist).count { trick =>
+            trick.winner.exists(_.name == name)
+          }
+          name -> (roundsWon, totalTricksWon)
+        }.toMap
+
+        val winnerMetrics = playerMetrics(winnerName)
+        val remainingPlayersMetrics = playerMetrics.view.filterKeys(_ != winnerName).toList
+
+        val sortedRemainingPlayers = remainingPlayersMetrics.sortBy { case (_, (rounds, tricks)) =>
+          (-rounds, -tricks)
+        }
+        (winnerName, winnerMetrics) :: sortedRemainingPlayers
+      }
+    }.getOrElse(List())
+  }
 
   private def transmitToAll(event: JsObject): Unit = {
     users.values.foreach(session => {

knockoutwhistweb/app/model/sessions/UserSession.scala

@@ -4,7 +4,7 @@ import de.knockoutwhist.events.player.{RequestCardEvent, RequestTieChoiceEvent,
 import de.knockoutwhist.utils.events.SimpleEvent
 import logic.game.GameLobby
 import model.users.User
-import play.api.libs.json.JsObject
+import play.api.libs.json.{JsObject, JsValue}
 
 import java.util.UUID
 import java.util.concurrent.locks.ReentrantLock
@@ -39,14 +39,49 @@ class UserSession(val user: User, val host: Boolean, val gameLobby: GameLobby) e
 
   def handleWebResponse(eventType: String, data: JsObject): Unit = {
     lock.lock()
-    Try {
+    val result = Try {
       eventType match {
-        case "Ping" =>
+        case "ping" =>
           // No action needed for Ping
           ()
+        case "StartGame" =>
+          gameLobby.startGame(user)
+        case "PlayCard" =>
+          val maybeCardIndex: Option[String] = (data \ "cardindex").asOpt[String]
+          maybeCardIndex match {
+            case Some(index) =>
+              val session = gameLobby.getUserSession(user.id)
+              gameLobby.playCard(session, index.toInt)
+            case None =>
+              println("Card Index not found or is not a number.")
+          }
+        case "PickTrumpsuit" =>
+          val maybeSuitIndex: Option[Int] = (data \ "suitIndex").asOpt[Int]
+          maybeSuitIndex match {
+            case Some(index) =>
+              val session = gameLobby.getUserSession(user.id)
+              gameLobby.selectTrump(session, index)
+            case None =>
+              println("Card Index not found or is not a number.")
+          }
+        case "KickPlayer" =>
+          val maybePlayerId: Option[String] = (data \ "playerId").asOpt[String]
+          maybePlayerId match {
+            case Some(id) =>
+              val playerUUID = UUID.fromString(id)
+              gameLobby.leaveGame(playerUUID, true)
+            case None =>
+              println("Player ID not found or is not a valid UUID.")
+          }
+        case "ReturnToLobby" =>
+          gameLobby.returnToLobby(this)
       }
     }
     lock.unlock()
+    if (result.isFailure) {
+      val throwable = result.failed.get
+      throw throwable
+    }
   }
 
 }

knockoutwhistweb/app/model/users/User.scala

@@ -1,5 +1,6 @@
 package model.users
 
+
 import java.util.UUID
 
 case class User(
@@ -16,5 +17,4 @@ case class User(
   private def withPasswordHash(newPasswordHash: String): User = {
     this.copy(passwordHash = newPasswordHash)
   }
-
-}
+}

knockoutwhistweb/app/util/GameUtil.scala

@@ -1,5 +1,8 @@
 package util
 
+import de.knockoutwhist.control.GameState
+import de.knockoutwhist.control.GameState.{FinishedMatch, InGame, Lobby, MainMenu, SelectTrump, TieBreak}
+
 import scala.util.Random
 
 object GameUtil {
@@ -25,5 +28,16 @@ object GameUtil {
 
     code.toString()
   }
+  
+  def stateToTitle(gameState: GameState): String = {
+    gameState match {
+      case Lobby => "Lobby"
+      case MainMenu => "Main Menu"
+      case InGame => "In Game"
+      case SelectTrump => "Select Trump"
+      case TieBreak => "Tie Break"
+      case FinishedMatch => "Finished Match"
+    }
+  }
 
 }

knockoutwhistweb/app/util/WebUIUtils.scala

@@ -1,8 +1,8 @@
 package util
 
-import de.knockoutwhist.cards.{Card, Hand}
 import de.knockoutwhist.cards.CardValue.*
 import de.knockoutwhist.cards.Suit.{Clubs, Diamonds, Hearts, Spades}
+import de.knockoutwhist.cards.{Card, Hand}
 import play.api.libs.json.{JsArray, Json}
 import play.twirl.api.Html
 import scalafx.scene.image.Image

knockoutwhistweb/app/util/WebsocketEventMapper.scala

@@ -1,12 +1,11 @@
 package util
 
 import de.knockoutwhist.utils.events.SimpleEvent
-import logic.game.GameLobby
 import model.sessions.UserSession
 import play.api.libs.json.{JsValue, Json}
 import tools.jackson.databind.json.JsonMapper
 import tools.jackson.module.scala.ScalaModule
-import util.mapper.{CardPlayedEventMapper, GameStateEventMapper, KickEventMapper, LeftEventMapper, LobbyUpdateEventMapper, ReceivedHandEventMapper, SessionClosedMapper, SimpleEventMapper}
+import util.mapper.*
 
 object WebsocketEventMapper {
 
@@ -27,11 +26,16 @@ object WebsocketEventMapper {
   registerCustomMapper(ReceivedHandEventMapper)
   registerCustomMapper(GameStateEventMapper)
   registerCustomMapper(CardPlayedEventMapper)
+  registerCustomMapper(NewRoundEventMapper)
+  registerCustomMapper(NewTrickEventMapper)
+  registerCustomMapper(TrickEndEventMapper)
+  registerCustomMapper(RequestCardEventMapper)
   registerCustomMapper(LobbyUpdateEventMapper)
   registerCustomMapper(LeftEventMapper)
   registerCustomMapper(KickEventMapper)
   registerCustomMapper(SessionClosedMapper)
-  
+  registerCustomMapper(TurnEventMapper)
+
   def toJson(obj: SimpleEvent, session: UserSession): JsValue = {
     val data: Option[JsValue] = if (customMappers.contains(obj.id)) {
       Some(customMappers(obj.id).toJson(obj, session))

knockoutwhistweb/app/util/mapper/GameStateEventMapper.scala

@@ -4,6 +4,7 @@ import controllers.IngameController
 import de.knockoutwhist.events.global.GameStateChangeEvent
 import model.sessions.UserSession
 import play.api.libs.json.{JsObject, Json}
+import util.GameUtil
 
 object GameStateEventMapper extends SimpleEventMapper[GameStateChangeEvent] {
 
@@ -11,7 +12,7 @@ object GameStateEventMapper extends SimpleEventMapper[GameStateChangeEvent] {
 
   override def toJson(event: GameStateChangeEvent, session: UserSession): JsObject = {
     Json.obj(
-      //Title
+      "title" -> ("Knockout Whist - " + GameUtil.stateToTitle(event.newState)),
       "content" -> IngameController.returnInnerHTML(session.gameLobby, event.newState, session.user).toString
     )
   }

knockoutwhistweb/app/util/mapper/NewRoundEventMapper.scala

@@ -0,0 +1,18 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.NewRoundEvent
+import logic.game.GameLobby
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object NewRoundEventMapper extends SimpleEventMapper[NewRoundEvent]{
+  override def id: String = "NewRoundEvent"
+
+  override def toJson(event: NewRoundEvent, session: UserSession): JsObject = {
+    val gameLobby = session.gameLobby
+    Json.obj(
+      "trumpsuit" -> gameLobby.getLogic.getCurrentRound.get.trumpSuit.toString,
+      "players" -> gameLobby.getLogic.getCurrentMatch.get.playersIn.map(player => player.toString)
+    )
+  }
+}

knockoutwhistweb/app/util/mapper/NewTrickEventMapper.scala

@@ -0,0 +1,14 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.NewTrickEvent
+import logic.game.GameLobby
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object NewTrickEventMapper extends SimpleEventMapper[NewTrickEvent]{
+  override def id: String = "NewTrickEvent"
+
+  override def toJson(event: NewTrickEvent, session: UserSession): JsObject = {
+    Json.obj()
+  }
+}

knockoutwhistweb/app/util/mapper/RequestCardEventMapper.scala

@@ -0,0 +1,16 @@
+package util.mapper
+
+import de.knockoutwhist.events.player.RequestCardEvent
+import logic.game.GameLobby
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object RequestCardEventMapper extends SimpleEventMapper[RequestCardEvent]{
+  override def id: String = "RequestCardEvent"
+
+  override def toJson(event: RequestCardEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "player" -> event.player.name
+    )
+  }
+}

knockoutwhistweb/app/util/mapper/RoundEndEventMapper.scala

@@ -0,0 +1,20 @@
+package util.mapper
+
+import controllers.routes
+import de.knockoutwhist.events.global.RoundEndEvent
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object RoundEndEventMapper extends SimpleEventMapper[RoundEndEvent] {
+
+  override def id: String = "RoundEndEvent"
+
+  override def toJson(event: RoundEndEvent, session: UserSession): JsObject = {
+
+    Json.obj(
+      "player" -> event.winner.name,
+      "tricks" -> event.amountOfTricks
+    )
+  }
+
+}

knockoutwhistweb/app/util/mapper/TrickEndEventMapper.scala

@@ -0,0 +1,20 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.TrickEndEvent
+import de.knockoutwhist.rounds.Trick
+import logic.game.GameLobby
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object TrickEndEventMapper extends SimpleEventMapper[TrickEndEvent]{
+  override def id: String = "TrickEndEvent"
+
+  override def toJson(event: TrickEndEvent, session: UserSession): JsObject = {
+    val gameLobby = session.gameLobby
+    Json.obj(
+      "playerwon" -> event.winner.name,
+      "playersin" -> gameLobby.getLogic.getCurrentMatch.get.playersIn.map(player => player.name),
+      "tricklist" -> gameLobby.getLogic.getCurrentRound.get.tricklist.map(trick => trick.winner.map(player => player.name).getOrElse("Trick in Progress"))
+    )
+  }
+}

knockoutwhistweb/app/util/mapper/TurnEventMapper.scala

@@ -0,0 +1,35 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.TurnEvent
+import de.knockoutwhist.player.AbstractPlayer
+import model.sessions.UserSession
+import play.api.libs.json.{JsArray, JsObject, Json}
+
+object TurnEventMapper extends SimpleEventMapper[TurnEvent] {
+
+  override def id: String = "TurnEvent"
+
+  override def toJson(event: TurnEvent, session: UserSession): JsObject = {
+    val nextPlayers = if (session.gameLobby.logic.getPlayerQueue.isEmpty) {
+      Json.arr()
+    } else {
+      val queue = session.gameLobby.logic.getPlayerQueue.get
+      JsArray(
+        queue.duplicate().map(player => mapPlayer(player)).toList
+      )
+    }
+    
+    Json.obj(
+      "currentPlayer" -> mapPlayer(event.player),
+      "nextPlayers" -> nextPlayers
+    )
+  }
+
+  private def mapPlayer(player: AbstractPlayer): JsObject = {
+    Json.obj(
+      "name" -> player.name,
+      "dog" -> player.isInDogLife
+    )
+  }
+
+}

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

@@ -1,38 +1,108 @@
 @(user: Option[model.users.User], gamelobby: logic.game.GameLobby)
 
-<main class="lobby-background vh-100" id="lobbybackground">
-    <div class="container d-flex flex-column" style="height: calc(100vh - 1rem);">
-        <div class="row">
-            <div class="col">
-                <div class="p-3 text-center fs-4">Winner: @gamelobby.getLogic.getWinner</div>
-            </div>
-        </div>
-        <div class="row justify-content-center align-items-center flex-grow-1">
-        @if((gamelobby.getUserSession(user.get.id).host)) {
-            <div class="col-12 text-center mb-5">
-                <div class="btn btn-success" onclick="backToLobby('@gamelobby.id')">Return to lobby</div>
-            </div>
-        } else {
-            <div class="col-12 text-center mt-3">
-                <div class="spinner-border mt-1" role="status">
-                    <span class="visually-hidden">Loading...</span>
+<div class="lobby-background vh-100 d-flex align-items-start justify-content-center pt-5">
+<div class="container py-5">
+        <div class="row justify-content-center">
+            <div class="col-lg-8 col-xl-6">
+                <div class="card shadow-lg mb-5 text-center bg-white border-0 rounded-4">
+                    <div class="card-body p-4 p-md-5">
+                        <h1 class="card-title display-5 fw-bold text-success mb-3">Match Over!</h1>
+                        <p class="fs-4 text-muted">Congratulations to the winner:</p>
+                        <h2 class="display-3 fw-bolder mb-4 text-primary">
+                            @gamelobby.getLogic.getWinner.get.name
+                        </h2>
+                    </div>
                 </div>
+
+                <div class="card shadow mb-5 border-0 rounded-4 overflow-hidden">
+                    <div class="card-header bg-dark text-white text-center fs-5 fw-semibold">
+                        Final Standings
+                    </div>
+                    <div class="d-flex justify-content-between align-items-center p-2 text-uppercase fw-bold border-bottom bg-light">
+                        <div class="d-flex align-items-center">
+                            Player
+                        </div>
+                        <div class="d-flex flex-row gap-3">
+                            <span class="fs-6 text-dark text-center" style="width: 5rem;">Rounds won</span>
+                            <span class="fs-6 text-dark text-center" style="width: 5rem;">Tricks won</span>
+                        </div>
+                    </div>
+                    <div>
+                    @gamelobby.getFinalRanking.zipWithIndex.map { case ((playerName, (wonRounds, tricksWon)), index) =>
+                        @defining(index + 1) { rank =>
+                            <div class="d-flex justify-content-between align-items-center p-3 border-bottom @if(rank == 1){bg-success-subtle fw-bold}">
+                                <div class="d-flex align-items-center">
+                                    <span class="badge @if(rank == 1){bg-warning text-dark fs-6} else {bg-secondary} rounded-pill me-3">#@rank</span>
+                                    @playerName
+                                </div>
+                                <div class="d-flex flex-row gap-3">
+                                    <span class="fs-6 text-muted text-center" style="width: 5rem;">@wonRounds</span>
+                                    <span class="fs-6 text-muted text-center" style="width: 5rem;">@tricksWon</span>
+                                </div>
+                            </div>
+                        }
+                    }
+                    </div>
+                    @if(gamelobby.getFinalRanking.isEmpty) {
+                        <div class="p-3 text-center text-muted">No final scores available.</div>
+                    }
+                </div>
+
+
+                @if(user.isDefined && gamelobby.getUserSession(user.get.id).host) {
+                    <div class="col-12 text-center mt-4">
+                        <div class="btn btn-success btn-lg shadow" onclick="handleReturnToLobby()">
+                            Return to Lobby
+                        </div>
+                    </div>
+                } else {
+                    <div class="col-12 text-center mt-4">
+                        <div class="text-primary">
+                            <div class="spinner-grow text-primary mt-1" role="status">
+                                <span class="visually-hidden">Loading...</span>
+                            </div>
+                            <p class="mt-3 fs-6 fw-semibold">
+                                Waiting for the Host to continue...
+                            </p>
+                        </div>
+                    </div>
+                }
             </div>
-        }
         </div>
     </div>
-</main>
+</div>
 <script>
-        function waitForFunction(name, checkInterval = 100) {
-            return new Promise(resolve => {
-                const timer = setInterval(() => {
-                    if (typeof window[name] === "function") {
-                        clearInterval(timer);
-                        resolve(window[name]);
-                    }
-                }, checkInterval);
-            });
+    function fireConfetti() {
+        let duration = 3 * 1000;
+        let animationEnd = Date.now() + duration;
+        let defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
+
+        function randomInRange(min, max) {
+            return Math.random() * (max - min) + min;
         }
-        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
-    connectWebSocket()
+
+        let interval = setInterval(function() {
+            let timeLeft = animationEnd - Date.now();
+
+            if (timeLeft <= 0) {
+                return clearInterval(interval);
+            }
+
+            let particleCount = 50 * (timeLeft / duration);
+
+            // Left burst
+            confetti(Object.assign({}, defaults, {
+                particleCount,
+                origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 }
+            }));
+
+            // Right burst
+            confetti(Object.assign({}, defaults, {
+                particleCount,
+                origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 }
+            }));
+        }, 250);
+    }
+    connectWebSocket();
+    fireConfetti();
 </script>

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

@@ -16,10 +16,19 @@
                         <p class="fs-5 text-primary" id="current-player-name">---</p>
                     }
                     @if(gamelobby.getLogic.getPlayerQueue.isDefined && gamelobby.getLogic.getCurrentMatch && !TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) {
-                        <h4 class="fw-semibold mb-1">Next Player</h4>
-                        @for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {
-                            <p class="fs-5 text-primary" id="next-player-name">@nextplayer</p>
-                        }
+                        <h4 class="fw-semibold mb-1" id="next-players-text">Next Players</h4>
+                        <div id="next-players-container">
+                            @for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {
+                                <p class="fs-5 text-primary">@nextplayer @if(nextplayer.isInDogLife) {
+                                    🐶
+                                }</p>
+                            }
+                        </div>
+                    } else {
+                        <h4 class="fw-semibold mb-1" style="display: none;" id="next-players-text">Next Players</h4>
+                        <div id="next-players-container">
+
+                        </div>
                     }
                 </div>
 
@@ -103,7 +112,7 @@
                     } else {
                         @for(i <- player.currentHand().get.cards.indices) {
                             <div class="col-auto handcard" style="border-radius: 6px">
-                                <div class="btn btn-outline-light p-0 border-0 shadow-none" data-card-id="@i" style="border-radius: 6px" onclick="handlePlayCard(this, '@gamelobby.id', '@player.isInDogLife')">
+                                <div class="btn btn-outline-light p-0 border-0 shadow-none" data-card-id="@i" style="border-radius: 6px" onclick="handlePlayCard(this, '@player.isInDogLife')">
                                     @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
                                 </div>
                                 @if(player.isInDogLife) {
@@ -121,16 +130,6 @@
     </main>
 </div>
 <script>
-        function waitForFunction(name, checkInterval = 100) {
-            return new Promise(resolve => {
-                const timer = setInterval(() => {
-                    if (typeof window[name] === "function") {
-                        clearInterval(timer);
-                        resolve(window[name]);
-                    }
-                }, checkInterval);
-            });
-        }
-        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
     connectWebSocket()
+    canPlayCard = @gamelobby.logic.getCurrentPlayer.contains(player);
 </script>

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

@@ -18,25 +18,25 @@
 
                                     <div class="row justify-content-center col-auto mb-5">
                                         <div class="col-auto handcard">
-                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="0" style="border-radius: 6px" onclick="handleTrumpSelection(this, '@gamelobby.id')">
+                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="0" style="border-radius: 6px" onclick="handleTrumpSelection(this)">
                                                 @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Spades))
                                                 width="120px" style="border-radius: 6px"/>
                                             </div>
                                         </div>
                                         <div class="col-auto handcard">
-                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="1" style="border-radius: 6px" onclick="handleTrumpSelection(this, '@gamelobby.id')">
+                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="1" style="border-radius: 6px" onclick="handleTrumpSelection(this)">
                                                 @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Hearts))
                                                 width="120px" style="border-radius: 6px"/>
                                             </div>
                                         </div>
                                         <div class="col-auto handcard">
-                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="2" style="border-radius: 6px" onclick="handleTrumpSelection(this, '@gamelobby.id')">
+                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="2" style="border-radius: 6px" onclick="handleTrumpSelection(this)">
                                                 @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Diamonds))
                                                 width="120px" style="border-radius: 6px"/>
                                             </div>
                                         </div>
                                         <div class="col-auto handcard">
-                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="3" style="border-radius: 6px" onclick="handleTrumpSelection(this, '@gamelobby.id')">
+                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="3" style="border-radius: 6px" onclick="handleTrumpSelection(this)">
                                                 @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs))
                                                 width="120px" style="border-radius: 6px"/>
                                             </div>
@@ -64,16 +64,5 @@
     </div>
 </div>
 <script>
-        function waitForFunction(name, checkInterval = 100) {
-            return new Promise(resolve => {
-                const timer = setInterval(() => {
-                    if (typeof window[name] === "function") {
-                        clearInterval(timer);
-                        resolve(window[name]);
-                    }
-                }, checkInterval);
-            });
-        }
-        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
     connectWebSocket()
 </script>

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

@@ -110,16 +110,5 @@
     </div>
 </div>
 <script>
-        function waitForFunction(name, checkInterval = 100) {
-            return new Promise(resolve => {
-                const timer = setInterval(() => {
-                    if (typeof window[name] === "function") {
-                        clearInterval(timer);
-                        resolve(window[name]);
-                    }
-                }, checkInterval);
-            });
-        }
-        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
     connectWebSocket()
 </script>

knockoutwhistweb/app/views/lobby/lobby.scala.html

@@ -60,7 +60,7 @@
                             <a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>
                         } else {
                             <h5 class="card-title">@playersession.name</h5>
-                            <div class="btn btn-danger" onclick="removePlayer('@gamelobby.id', '@playersession.id')">
+                            <div class="btn btn-danger" onclick="handleKickPlayer('@playersession.id')">
                                 Remove</div>
                         }
                         </div>
@@ -69,7 +69,7 @@
             }
             </div>
             <div class="col-12 text-center mb-5">
-                <div class="btn btn-success" onclick="startGame('@gamelobby.id')">Start Game</div>
+                <div class="btn btn-success" onclick="startGame()">Start Game</div>
             </div>
         } else {
             <div id="players" class="justify-content-center align-items-center d-flex">
@@ -98,16 +98,5 @@
     </div>
 </main>
 <script>
-        function waitForFunction(name, checkInterval = 100) {
-            return new Promise(resolve => {
-                const timer = setInterval(() => {
-                    if (typeof window[name] === "function") {
-                        clearInterval(timer);
-                        resolve(window[name]);
-                    }
-                }, checkInterval);
-            });
-        }
-        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
     connectWebSocket()
 </script>

knockoutwhistweb/app/views/main.scala.html

@@ -17,7 +17,7 @@
         <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
     </head>
-
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@@1.6.0/dist/confetti.browser.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="@routes.JavaScriptRoutingController.javascriptRoutes()" type="text/javascript"></script>

knockoutwhistweb/app/views/mainmenu/creategame.scala.html

@@ -30,4 +30,4 @@
 </main>
 <script>
             disconnectWebSocket();
-    </script>
+</script>

knockoutwhistweb/public/javascripts/events.js

@@ -1,3 +1,32 @@
+var canPlayCard = false;
+
+function alertMessage(message) {
+    let newHtml = '';
+    const alertId = `alert-${Date.now()}`;
+    const fadeTime = 500;
+    const duration = 5000;
+    newHtml += `
+        <div class="fixed-top d-flex justify-content-center mt-3" style="z-index: 1050;">
+        <div
+        id="${alertId}" class="alert alert-primary d-flex align-items-center p-2 mb-0 w-auto" role="alert" style="display: none;">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
+                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+            </svg>
+            <div class="small">
+                <small>${message}</small>
+            </div>
+        </div>
+    </div>
+    `;
+    $('#main-body').prepend(newHtml);
+    const $notice = $(`#${alertId}`);
+    $notice.fadeIn(fadeTime);
+    setTimeout(function() {
+        $notice.fadeOut(fadeTime, function() {
+            $(this).parent().remove();
+        });
+    }, duration);
+}
 function receiveHandEvent(eventData) {
     //Data
     const dog = eventData.dog;
@@ -11,7 +40,7 @@ function receiveHandEvent(eventData) {
     //Build Hand Container
     hand.forEach((card) => {
         //Data
-        const idx = card.idx
+        const idx = card.idx;
         const cardS = card.card;
 
         const cardHtml = `
@@ -38,6 +67,103 @@ function receiveHandEvent(eventData) {
     }
     handElement.html(newHtml);
 }
+function newRoundEvent(eventData) {
+    const trumpsuit = eventData.trumpsuit;
+    const players = eventData.players;
+
+    const tableElement = $('#score-table-body');
+
+
+    let tablehtml = `
+        <h4 class="fw-bold mb-3 text-black">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>
+    `;
+
+    players.forEach(
+        tablehtml += `
+            <div class="d-flex justify-content-between score-row pt-1">
+                                <div style="width: 50%" class="text-truncate">'${players}'</div>
+                                <div style="width: 50%">
+                                    0
+                                </div>
+                            </div>
+        `
+    );
+    tableElement.html(tablehtml);
+
+    const trumpsuitClass = $('#trumpsuit');
+    trumpsuitClass.html(trumpsuit);
+
+}
+function trickEndEvent(eventData) {
+    const winner = eventData.playerwon;
+    const players = eventData.playersin;
+    const tricklist = eventData.tricklist;
+
+    let newHtml = '';
+
+    let tricktable = $('#score-table-body');
+
+    newHtml += `
+        <h4 class="fw-bold mb-3 text-black">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>
+    `;
+    let playercounts = new Map();
+
+    players.forEach( player => {
+            playercounts.set(player, 0)
+    });
+    tricklist.forEach( player => {
+            if ( player !== "Trick in Progress" && playercounts.has(player)) {
+                playercounts.set(player, playercounts.get(player) + 1)
+            }
+        }
+    )
+    const playerorder = players.sort((playerA, playerB) => {
+        const countA = playercounts.get(playerA) || 0;
+        const countB = playercounts.get(playerB) || 0;
+        return countB - countA;
+    });
+    playerorder.forEach( player => {
+        newHtml += `
+            <div class="d-flex justify-content-between score-row pt-1">
+                                    <div style="width: 50%" class="text-truncate">${player}</div>
+                                    <div style="width: 50%">
+                                    ${playercounts.get(player)}
+                                    </div>
+                                </div>
+        `
+    });
+    alertMessage(`${winner} won the trick!`)
+    tricktable.html(newHtml);
+
+}
+function newTrickEvent() {
+    const firstCardContainer = $('#first-card-container');
+    const emptyHtml = '';
+    let newHtml = '';
+    newHtml += `
+        <img src="/assets/images/cards/1B.png" alt="Blank Card" width="80px" style="border-radius: 6px"/>
+    `;
+    firstCardContainer.html(newHtml);
+    const playedCardsContainer = $('#trick-cards-container')
+    playedCardsContainer.html(emptyHtml)
+}
+function requestCardEvent(eventData) {
+    const player = eventData.player;
+    const handElement = $('#card-slide')
+    handElement.removeClass('inactive');
+    canPlayCard = true;
+}
+
 
 function receiveGameStateChange(eventData) {
     const content = eventData.content;
@@ -101,7 +227,7 @@ function receiveLobbyUpdateEvent(eventData) {
             const inner = user.self ? `<h5 class="card-title">${user.name} (You)</h5>
                                 <a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>`
                 : `    <h5 class="card-title">${user.name}</h5>
-                                    <div class="btn btn-danger" onclick="removePlayer('${user.id}')">Remove</div>`
+                                    <div class="btn btn-danger" onclick="handleKickPlayer('${user.id}')">Remove</div>`
 
             newHtml += `<div class="col-auto my-auto m-3">
                             <div class="card" style="width: 18rem;">
@@ -154,10 +280,54 @@ function receiveSessionClosedEvent(eventData) {
 }
 
 
+function receiveTurnEvent(eventData) {
+    const currentPlayer = eventData.currentPlayer;
+    const nextPlayers = eventData.nextPlayers;
+
+    const currentPlayerNameContainer = $('#current-player-name');
+    const nextPlayersContainer = $('#next-players-container');
+    const nextPlayerText = $('#next-players-text');
+
+    let currentPlayerName = currentPlayer.name;
+    if (currentPlayer.dog) {
+        currentPlayerName += " 🐶";
+    }
+    currentPlayerNameContainer.text(currentPlayerName);
+
+    if (nextPlayers.length === 0) {
+        nextPlayerText.hide();
+        nextPlayersContainer.html('');
+    } else {
+        console.log("Length"+nextPlayers.length);
+        nextPlayerText.show();
+        let nextPlayersHtml = '';
+        nextPlayers.forEach((player) => {
+            let playerName = player.name;
+            if (player.dog) {
+                playerName += " 🐶";
+            }
+            nextPlayersHtml += `<p class="fs-5 text-primary">${playerName}</p>`;
+        });
+        nextPlayersContainer.html(nextPlayersHtml);
+    }
+}
+function receiveRoundEndEvent(eventData) {
+    const player = eventData.player
+    const tricks = eventData.tricks
+    alertMessage(`${player} won this round with ${tricks} tricks!`)
+}
 onEvent("ReceivedHandEvent", receiveHandEvent)
 onEvent("GameStateChangeEvent", receiveGameStateChange)
+onEvent("NewRoundEvent", newRoundEvent)
+onEvent("TrickEndEvent", trickEndEvent)
+onEvent("NewTrickEvent", newTrickEvent)
+onEvent("RequestCardEvent", requestCardEvent)
 onEvent("CardPlayedEvent", receiveCardPlayedEvent)
 onEvent("LobbyUpdateEvent", receiveLobbyUpdateEvent)
 onEvent("LeftEvent", receiveGameStateChange)
 onEvent("KickEvent", receiveKickEvent)
 onEvent("SessionClosed", receiveSessionClosedEvent)
+onEvent("TurnEvent", receiveTurnEvent)
+onEvent("RoundEndEvent", receiveRoundEndEvent)
+
+globalThis.alertMessage = alertMessage

knockoutwhistweb/public/javascripts/interact.js

@@ -1,10 +1,82 @@
 function handlePlayCard(card, dog) {
-    // TODO needs implementation
+
+    if(!canPlayCard) return
+    canPlayCard = false;
+
+    const cardId = card.dataset.cardId;
+
+    console.debug(`Playing card ${cardId} from hand`)
+
+    const wiggleKeyframes = [
+        { transform: 'translateX(0)' },
+        { transform: 'translateX(-5px)' },
+        { transform: 'translateX(5px)' },
+        { transform: 'translateX(-5px)' },
+        { transform: 'translateX(0)' }
+    ];
+
+    const wiggleTiming = {
+        duration: 400,
+        iterations: 1,
+        easing: 'ease-in-out',
+        fill: 'forwards'
+    };
+
+
+    const cardslide = $('#card-slide')
+
+    const payload = {
+        cardindex: cardId,
+        isDog: dog
+    }
+    sendEventAndWait("PlayCard", payload).then(
+        () => {
+            card.parentElement.remove();
+            cardslide.find('.handcard').each(function(newIndex) {
+
+                const $innerButton = $(this).find('.btn');
+                $innerButton.attr('data-card-id', newIndex);
+
+                const isInDogLife = $innerButton.attr('onclick').includes("'true'") ? 'true' : 'false';
+                $innerButton.attr('onclick', `handlePlayCard(this, '${isInDogLife}')`);
+
+                console.debug(`Re-indexed card: Old index was ${$innerButton.attr('data-card-id')}, New index is ${newIndex}`);
+            });
+
+            cardslide.addClass("inactive")
+        }
+    ).catch(
+        (err) => {
+            canPlayCard = true;
+            const cardslide = $('#card-slide')
+            cardslide.removeClass("inactive")
+            card.parentElement.animate(wiggleKeyframes, wiggleTiming);
+            alertMessage(err.message)
+        }
+    )
 }
 
 function handleSkipDogLife(button) {
     // TODO needs implementation
 }
-function handleKickPlayer(playerId) {
-    // TODO needs implementation
+function startGame() {
+    sendEvent("StartGame")
 }
+
+function handleTrumpSelection(object) {
+    const $button = $(object);
+    const trumpIndex = parseInt($button.data('trump'));
+    const payload = {
+        suitIndex: trumpIndex
+    }
+    sendEvent("PickTrumpsuit", payload)
+
+}
+function handleKickPlayer(playerId) {
+    sendEvent("KickPlayer", {
+        playerId: playerId
+    })
+}
+function handleReturnToLobby() {
+    sendEvent("ReturnToLobby")
+}

knockoutwhistweb/public/javascripts/websocket.js

@@ -87,11 +87,17 @@ function setupSocketHandlers(socket) {
         } else {
             console.warn('Connection died unexpectedly.');
         }
+        location.href = "/mainmenu";
     };
 }
 
 // connect/disconnect helpers
-function connectWebSocket(url = "ws://localhost:9000/websocket") {
+function connectWebSocket(url = null) {
+    if (!url) {
+        const loc = window.location;
+        const protocol = loc.protocol === "https:" ? "wss:" : "ws:";
+        url = protocol + "//" + loc.host + "/websocket";
+    }
     if (ws && ws.readyState === WebSocket.OPEN) return Promise.resolve();
     if (ws && ws.readyState === WebSocket.CONNECTING) {
         // already connecting - return a promise that resolves on open

versions.env

@@ -1,3 +1,3 @@
 MAJOR=4
-MINOR=3
+MINOR=7
 PATCH=0