ci: bump version to v4.6.1

Reviewed-on: #95
Co-authored-by: Janis <janis.e.20@gmx.de>
Co-committed-by: Janis <janis.e.20@gmx.de>

CHANGELOG.md

@@ -128,3 +128,62 @@
 ### Bug Fixes
 
 * **polling:** Improve polling mechanism and delay handling ([#60](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/60)) ([641c892](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/641c892981649eb85640527cc0fe325ff683fa77))
+##  (2025-11-22)
+
+### Bug Fixes
+
+* **api:** Fixed a bug where the game would reload on game start ([#81](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/81)) ([9738a04](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/9738a04b7a3c63c8cd1450e563ec04823fb3c35a))
+##  (2025-11-23)
+
+### ⚠ BREAKING CHANGES
+
+* **websocket:** Implement WebSocket connection and event handling (#82)
+
+### Features
+
+* **websocket:** Implement WebSocket connection and event handling ([#82](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/82)) ([8ca909d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/8ca909db522dd7108a3e40ce84811eaf8695eaa5))
+##  (2025-11-24)
+##  (2025-11-26)
+
+### Features
+
+* **api:** Implement received hand event handling and UI updates ([#83](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/83)) ([52e5033](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/52e5033afca344ae40a644196555a9655913710a)), closes [#76](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/76)
+* **base:** Fixed logic for websockets and added GameStateEvent. Might've caused instability on other feature branches! ([#84](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/84)) ([b81bb3d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/b81bb3d0aeb8500a9d7417a10e24e7f8a17d71d2))
+##  (2025-11-26)
+
+### Features
+
+* **api:** Implemented card played event via websocket ([#85](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/85)) ([3c0828f](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/3c0828fdbeb507706b86f1662476c46e760533e4))
+##  (2025-11-26)
+
+### 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))

build.sbt

@@ -1,12 +1,12 @@
 ThisBuild / scalaVersion := "3.5.1"
 
 lazy val commonSettings = Seq(
-  libraryDependencies += "org.scalactic" %% "scalactic" % "3.2.18",
+  libraryDependencies += "org.scalactic" %% "scalactic" % "3.2.19",
-  libraryDependencies += "org.scalatest" %% "scalatest" % "3.2.18" % "test",
+  libraryDependencies += "org.scalatest" %% "scalatest" % "3.2.19" % "test",
-  libraryDependencies += "io.github.mkpaz" % "atlantafx-base" % "2.0.1",
+  libraryDependencies += "io.github.mkpaz" % "atlantafx-base" % "2.1.0",
-  libraryDependencies += "org.scalafx" %% "scalafx" % "22.0.0-R33",
+  libraryDependencies += "org.scalafx" %% "scalafx" % "24.0.2-R36",
-  libraryDependencies += "org.scala-lang.modules" %% "scala-xml" % "2.3.0",
+  libraryDependencies += "org.scala-lang.modules" %% "scala-xml" % "2.4.0",
-  libraryDependencies += "org.playframework" %% "play-json" % "3.1.0-M1",
+  libraryDependencies += "org.playframework" %% "play-json" % "3.1.0-M9",
   libraryDependencies ++= {
     // Determine OS version of JavaFX binaries
     lazy val osName = System.getProperty("os.name") match {
@@ -38,8 +38,9 @@ lazy val knockoutwhistweb = project.in(file("knockoutwhistweb"))
     commonSettings,
     libraryDependencies += "org.scalatestplus.play" %% "scalatestplus-play" % "7.0.2" % Test,
     libraryDependencies += "de.mkammerer" % "argon2-jvm" % "2.12",
-    libraryDependencies += "com.auth0" % "java-jwt" % "4.3.0",
+    libraryDependencies += "com.auth0" % "java-jwt" % "4.5.0",
-    libraryDependencies += "com.github.ben-manes.caffeine" % "caffeine" % "3.2.2",
+    libraryDependencies += "com.github.ben-manes.caffeine" % "caffeine" % "3.2.3",
+    libraryDependencies += "tools.jackson.module" %% "jackson-module-scala" % "3.0.2",
     JsEngineKeys.engineType := JsEngineKeys.EngineType.Node
   )
 

knockoutwhistweb/app/assets/stylesheets/login.less

@@ -17,7 +17,7 @@
   width: 100%;
   border: none;
   border-radius: 1rem;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   position: relative;
   z-index: 3; /* ensure card sits above the particles */
 }

knockoutwhistweb/app/assets/stylesheets/main.less

@@ -14,37 +14,44 @@
   --bs-border-color: rgba(0, 0, 0, 0.125) !important;
   --bs-heading-color: var(--color) !important;
 }
+
 @background-color: var(--background-color);
 @highlightcolor: var(--highlightscolor);
 @background-image: var(--background-image);
 @color: var(--color);
 @keyframes slideIn {
-  0% { transform: translateX(-100vw); }
+  0% {
-  100% { transform: translateX(0); }
+    transform: translateX(-100vw);
+  }
+  100% {
+    transform: translateX(0);
+  }
 }
 
 .game-field-background {
-    background-image: @background-image;
+  background-image: @background-image;
-    background-repeat: no-repeat;
+  background-repeat: no-repeat;
-    background-size: cover;
+  background-size: cover;
-    max-width: 1400px;
+  max-width: 1400px;
-    margin: 0 auto;
+  margin: 0 auto;
-    min-height: 100vh;
+  min-height: 100vh;
-}
-.lobby-background {
-    background-color: @background-color;
-    width: 100%;
-    height: 100vh;
 }
 
-.navbar-header{
+.lobby-background {
-    text-align:center;
+  background-color: @background-color;
+  width: 100%;
+  height: 100vh;
+}
+
+.navbar-header {
+  text-align: center;
 }
 
 .navbar-toggle {
-    float: none;
+  float: none;
-    margin-right:0;
+  margin-right: 0;
 }
+
 .handcard :hover {
   box-shadow: 3px 3px 3px @highlightcolor;
 }
@@ -52,7 +59,7 @@
 .inactive::after {
   content: "";
   position: absolute;
-  inset: 0;             /* cover the whole container */
+  inset: 0; /* cover the whole container */
   background: rgba(0, 0, 0, 0.50);
   z-index: 10;
   border-radius: 6px;
@@ -73,26 +80,26 @@
 
 /* Ensure body text color follows theme variable and works with Bootstrap */
 body {
-    color: @color;
+  color: @color;
 }
 
 .footer {
-    width: 100%;
+  width: 100%;
-    text-align: center;
+  text-align: center;
-    font-size: 12px;
+  font-size: 12px;
-    color: @color;
+  color: @color;
-    padding: 0.5rem 0;
+  padding: 0.5rem 0;
-    flex-grow: 1; /* fill remaining vertical space as visual footer background */
+  flex-grow: 1; /* fill remaining vertical space as visual footer background */
 }
 
 .game-field {
-    position: fixed;
+  position: fixed;
-    inset: 0;
+  inset: 0;
-    overflow: auto;
+  overflow: auto;
 }
 
 .navbar-drop-shadow {
-    box-shadow: 0 1px 15px 0 #000000
+  box-shadow: 0 1px 15px 0 #000000
 }
 
 .ingame-side-shadow {
@@ -100,126 +107,160 @@ body {
 }
 
 #sessions {
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    justify-content: flex-start;
+  justify-content: flex-start;
-    align-items: center;
+  align-items: center;
-    text-align: center;
+  text-align: center;
-    h1 {
+
-        animation: slideIn 0.5s ease-out forwards;
+  h1 {
-        animation-fill-mode: backwards;
+    animation: slideIn 0.5s ease-out forwards;
-    }
+    animation-fill-mode: backwards;
+  }
 }
+
 #textanimation {
-        animation: slideIn 0.5s ease-out forwards;
+  animation: slideIn 0.5s ease-out forwards;
-        animation-fill-mode: backwards;
+  animation-fill-mode: backwards;
-        animation-delay: 1s;
+  animation-delay: 1s;
 }
 
 #sessions a, #sessions h1, #sessions p {
-    color: @color;
+  color: @color;
-    font-size: 40px;
+  font-size: 40px;
-    font-family: Arial, serif;
+  font-family: Arial, serif;
 }
+
 #ingame {
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    align-items: center;
+  align-items: center;
-    justify-content: flex-end;
+  justify-content: flex-end;
-    height: 100%;
+  height: 100%;
 }
+
 #ingame a, #ingame h1, #ingame p {
-    color: @color;
+  color: @color;
-    font-size: 40px;
+  font-size: 40px;
-    font-family: Arial, serif;
+  font-family: Arial, serif;
 }
 
 .ingame-cards-slide {
   div {
     animation: slideIn 0.5s ease-out forwards;
     animation-fill-mode: backwards;
-    &:nth-child(1) { animation-delay: 0.5s; }
+
-    &:nth-child(2) { animation-delay: 1s; }
+    &:nth-child(1) {
-    &:nth-child(3) { animation-delay: 1.5s; }
+      animation-delay: 0.5s;
-    &:nth-child(4) { animation-delay: 2s; }
+    }
-    &:nth-child(5) { animation-delay: 2.5s; }
+
-    &:nth-child(6) { animation-delay: 3s; }
+    &:nth-child(2) {
-    &:nth-child(7) { animation-delay: 3.5s; }
+      animation-delay: 1s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 1.5s;
+    }
+
+    &:nth-child(4) {
+      animation-delay: 2s;
+    }
+
+    &:nth-child(5) {
+      animation-delay: 2.5s;
+    }
+
+    &:nth-child(6) {
+      animation-delay: 3s;
+    }
+
+    &:nth-child(7) {
+      animation-delay: 3.5s;
+    }
   }
 }
 
 #playedcardplayer {
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    justify-content: flex-end;
+  justify-content: flex-end;
 }
+
 #playedcardplayer p {
-    font-size: 12px;
+  font-size: 12px;
-    height: 4%;
+  height: 4%;
 }
+
 #playedcardplayer img {
-    height: 90%;
+  height: 90%;
 }
 
 #firstCard {
-    display: flex;
+  display: flex;
-    flex-direction: row;
+  flex-direction: row;
-    height: 20%;
+  height: 20%;
-    width: 100%;
+  width: 100%;
-    justify-content: space-between;
+  justify-content: space-between;
 }
+
 #firstCardObject {
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    margin-right: 4%;
+  margin-right: 4%;
 }
-#firstCardObject img{
+
-    height: 90%;
+#firstCardObject img {
+  height: 90%;
 }
-#firstCardObject p{
+
-    height: 10%;
+#firstCardObject p {
-    font-size: 20px;
+  height: 10%;
+  font-size: 20px;
 
 }
-#nextPlayers {
+
-    display: flex;
+#next-players-container {
-    flex-direction: column;
+  display: flex;
-    align-items: center;
+  flex-direction: column;
-    height: 0;
+  align-items: flex-start;
-    p {
+  height: 0;
-        margin-top: 0;
+
-        margin-bottom: 0;
+  p {
-    }
+    margin-top: 0;
-}
+    margin-bottom: 0;
-#invisible {
+  }
-    visibility: hidden;
 }
+
 #selecttrumpsuit {
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    align-items: center;
+  align-items: center;
-    height: 100%;
+  height: 100%;
 }
+
 #rules {
-    color: @color;
+  color: @color;
-    font-size: 1.5em;
+  font-size: 1.5em;
-    font-family: Arial, serif;
+  font-family: Arial, serif;
 }
+
 .score-table {
-    background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 8px;
+  border-radius: 8px;
-    padding: 10px;
+  padding: 10px;
-    margin-bottom: 20px;
+  margin-bottom: 20px;
-    backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
+
 .score-header {
-    font-weight: bold;
+  font-weight: bold;
-    color: #000000;
+  color: #000000;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 }
+
 .score-row {
-    color: #000000;
+  color: #000000;
 }
 
 /* In-game centered stage and blurred sides overlay */
@@ -243,12 +284,12 @@ body {
   inset: 0;
   pointer-events: none;
   /* fallback: subtle vignette if backdrop-filter unsupported */
-  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.35) 100%);
+  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.35) 100%);
 }
 
 @supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
   .blur-sides::before {
-    background: rgba(0,0,0,0.08);
+    background: rgba(0, 0, 0, 0.08);
     -webkit-backdrop-filter: blur(10px) saturate(110%);
     backdrop-filter: blur(10px) saturate(110%);
   }

knockoutwhistweb/app/auth/AuthAction.scala

@@ -15,13 +15,6 @@ class AuthAction @Inject()(val sessionManager: SessionManager, val parser: BodyP
 
   override def executionContext: ExecutionContext = ec
 
-  protected def getUserFromSession(request: RequestHeader): Option[User] = {
-    val session = request.cookies.get("sessionId")
-    if (session.isDefined)
-      return sessionManager.getUserBySession(session.get.value)
-    None
-  }
-  
   override def invokeBlock[A](
                                request: Request[A],
                                block: AuthenticatedRequest[A] => Future[Result]
@@ -33,5 +26,12 @@ class AuthAction @Inject()(val sessionManager: SessionManager, val parser: BodyP
         Future.successful(Results.Redirect(routes.UserController.login()))
     }
   }
+
+  protected def getUserFromSession(request: RequestHeader): Option[User] = {
+    val session = request.cookies.get("sessionId")
+    if (session.isDefined)
+      return sessionManager.getUserBySession(session.get.value)
+    None
+  }
 }
 

knockoutwhistweb/app/components/WebApplicationConfiguration.scala

@@ -8,6 +8,7 @@ import de.knockoutwhist.utils.events.EventListener
 class WebApplicationConfiguration extends DefaultConfiguration {
 
   override def uis: Set[UI] = Set()
+
   override def listener: Set[EventListener] = Set(DelayHandler)
 
 }

knockoutwhistweb/app/controllers/IngameController.scala

@@ -1,7 +1,8 @@
 package controllers
 
 import auth.{AuthAction, AuthenticatedRequest}
-import de.knockoutwhist.control.GameState.{FinishedMatch, InGame, Lobby, SelectTrump, TieBreak}
+import de.knockoutwhist.control.GameState
+import de.knockoutwhist.control.GameState.*
 import exceptions.*
 import logic.PodManager
 import logic.game.GameLobby
@@ -11,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.*
@@ -18,50 +20,21 @@ import scala.concurrent.ExecutionContext
 import scala.util.Try
 
 @Singleton
-class IngameController @Inject() (
+class IngameController @Inject()(
-                                   val cc: ControllerComponents,
+                                  val cc: ControllerComponents,
-                                   val podManager: PodManager,
+                                  val authAction: AuthAction,
-                                   val authAction: AuthAction,
+                                  implicit val ec: ExecutionContext
-                                   implicit val ec: ExecutionContext
+                                ) extends AbstractController(cc) {
-                                 ) extends AbstractController(cc) {
-
-  def returnInnerHTML(gameLobby: GameLobby, user: User): Html = {
-    gameLobby.logic.getCurrentState match {
-      case Lobby => views.html.lobby.lobby(Some(user), gameLobby)
-      case InGame =>
-        views.html.ingame.ingame(
-          gameLobby.getPlayerByUser(user),
-          gameLobby
-        )
-      case SelectTrump =>
-          views.html.ingame.selecttrump(
-            gameLobby.getPlayerByUser(user),
-            gameLobby
-          )
-      case TieBreak =>
-        views.html.ingame.tie(
-          gameLobby.getPlayerByUser(user),
-          gameLobby
-        )
-      case FinishedMatch =>
-        views.html.ingame.finishedMatch(
-          Some(user),
-          gameLobby
-        )
-      case _ =>
-        throw new IllegalStateException(s"Invalid game state for in-game view. GameId: ${gameLobby.id}" + s" State: ${gameLobby.logic.getCurrentState}")
-    }
-  }
 
   def game(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val game = podManager.getGame(gameId)
+    val game = PodManager.getGame(gameId)
     game match {
       case Some(g) =>
         val results = Try {
-          returnInnerHTML(g, request.user)
+          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)
         }
@@ -69,8 +42,9 @@ class IngameController @Inject() (
         Redirect(routes.MainMenuController.mainMenu())
     }
   }
+
   def startGame(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val game = podManager.getGame(gameId)
+    val game = PodManager.getGame(gameId)
     val result = Try {
       game match {
         case Some(g) =>
@@ -82,7 +56,8 @@ class IngameController @Inject() (
     if (result.isSuccess) {
       Ok(Json.obj(
         "status" -> "success",
-        "redirectUrl" -> routes.IngameController.game(gameId).url
+        "redirectUrl" -> routes.IngameController.game(gameId).url,
+        "content" -> IngameController.returnInnerHTML(game.get, game.get.logic.getCurrentState, request.user).toString()
       ))
     } else {
       val throwable = result.failed.get
@@ -110,13 +85,14 @@ class IngameController @Inject() (
       }
     }
   }
+
   def kickPlayer(gameId: String, playerToKick: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val game = podManager.getGame(gameId)
+    val game = PodManager.getGame(gameId)
     val playerToKickUUID = UUID.fromString(playerToKick)
     val result = Try {
-      game.get.leaveGame(playerToKickUUID)
+      game.get.leaveGame(playerToKickUUID, true)
     }
-    if(result.isSuccess) {
+    if (result.isSuccess) {
       Ok(Json.obj(
         "status" -> "success",
         "redirectUrl" -> routes.IngameController.game(gameId).url
@@ -128,15 +104,17 @@ class IngameController @Inject() (
       ))
     }
   }
+
   def leaveGame(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val game = podManager.getGame(gameId)
+    val game = PodManager.getGame(gameId)
     val result = Try {
-      game.get.leaveGame(request.user.id)
+      game.get.leaveGame(request.user.id, false)
     }
     if (result.isSuccess) {
       Ok(Json.obj(
         "status" -> "success",
-        "redirectUrl" -> routes.MainMenuController.mainMenu().url
+        "redirectUrl" -> routes.MainMenuController.mainMenu().url,
+        "content" -> views.html.mainmenu.creategame(Some(request.user)).toString
       ))
     } else {
       InternalServerError(Json.obj(
@@ -147,7 +125,7 @@ class IngameController @Inject() (
   }
 
   def playCard(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] => {
-    val game = podManager.getGame(gameId)
+    val game = PodManager.getGame(gameId)
     game match {
       case Some(g) =>
         val jsonBody = request.body.asJson
@@ -217,8 +195,9 @@ class IngameController @Inject() (
     }
   }
   }
+
   def playDogCard(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] => {
-    val game = podManager.getGame(gameId)
+    val game = PodManager.getGame(gameId)
     game match {
       case Some(g) => {
         val jsonBody = request.body.asJson
@@ -281,8 +260,9 @@ class IngameController @Inject() (
     }
   }
   }
+
   def playTrump(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val game = podManager.getGame(gameId)
+    val game = PodManager.getGame(gameId)
     game match {
       case Some(g) =>
         val jsonBody = request.body.asJson
@@ -333,8 +313,9 @@ class IngameController @Inject() (
         NotFound("Game not found")
     }
   }
+
   def playTie(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val game = podManager.getGame(gameId)
+    val game = PodManager.getGame(gameId)
     game match {
       case Some(g) =>
         val jsonBody = request.body.asJson
@@ -388,7 +369,7 @@ class IngameController @Inject() (
 
 
   def returnToLobby(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val game = podManager.getGame(gameId)
+    val game = PodManager.getGame(gameId)
     game match {
       case Some(g) =>
         val result = Try {
@@ -429,3 +410,35 @@ class IngameController @Inject() (
   }
   
 }
+
+object IngameController {
+
+  def returnInnerHTML(gameLobby: GameLobby, gameState: GameState, user: User): Html = {
+    gameState match {
+      case Lobby => views.html.lobby.lobby(Some(user), gameLobby)
+      case InGame =>
+        views.html.ingame.ingame(
+          gameLobby.getPlayerByUser(user),
+          gameLobby
+        )
+      case SelectTrump =>
+        views.html.ingame.selecttrump(
+          gameLobby.getPlayerByUser(user),
+          gameLobby
+        )
+      case TieBreak =>
+        views.html.ingame.tie(
+          gameLobby.getPlayerByUser(user),
+          gameLobby
+        )
+      case FinishedMatch =>
+        views.html.ingame.finishedMatch(
+          Some(user),
+          gameLobby
+        )
+      case _ =>
+        throw new IllegalStateException(s"Invalid game state for in-game view. GameId: ${gameLobby.id}" + s" State: ${gameLobby.logic.getCurrentState}")
+    }
+  }
+  
+}

knockoutwhistweb/app/controllers/JavaScriptRoutingController.scala

@@ -1,35 +1,24 @@
 package controllers
 
-import auth.{AuthAction, AuthenticatedRequest}
+import auth.AuthAction
-import logic.PodManager
 import play.api.mvc.{Action, AnyContent, BaseController, ControllerComponents}
 import play.api.routing.JavaScriptReverseRouter
 
 import javax.inject.Inject
 
-class JavaScriptRoutingController  @Inject()(
+class JavaScriptRoutingController @Inject()(
-                                              val controllerComponents: ControllerComponents,
+                                             val controllerComponents: ControllerComponents,
-                                              val authAction: AuthAction,
+                                             val authAction: AuthAction,
-                                              val podManager: PodManager
+                                           ) extends BaseController {
-                                            ) extends BaseController {
   def javascriptRoutes(): Action[AnyContent] =
     Action { implicit request =>
-    Ok(
+      Ok(
-      JavaScriptReverseRouter("jsRoutes")(
+        JavaScriptReverseRouter("jsRoutes")(
           routes.javascript.MainMenuController.createGame,
           routes.javascript.MainMenuController.joinGame,
           routes.javascript.MainMenuController.navSPA,
-          routes.javascript.IngameController.startGame,
-          routes.javascript.IngameController.kickPlayer,
-          routes.javascript.IngameController.leaveGame,
-          routes.javascript.IngameController.playCard,
-          routes.javascript.IngameController.playDogCard,
-          routes.javascript.IngameController.playTrump,
-          routes.javascript.IngameController.playTie,
-          routes.javascript.IngameController.returnToLobby,
-          routes.javascript.PollingController.polling,
           routes.javascript.UserController.login_Post
-      )
+        )
-    ).as("text/javascript")
+      ).as("text/javascript")
-  }
+    }
 }

knockoutwhistweb/app/controllers/MainMenuController.scala

@@ -16,9 +16,7 @@ import javax.inject.*
 @Singleton
 class MainMenuController @Inject()(
                                     val controllerComponents: ControllerComponents,
-                                    val authAction: AuthAction,
+                                    val authAction: AuthAction
-                                    val podManager: PodManager,
-                                    val ingameController: IngameController
                                   ) extends BaseController {
 
   // Pass the request-handling function directly to authAction (no nested Action)
@@ -39,7 +37,7 @@ class MainMenuController @Inject()(
       val playeramount: String = (jsonBody.get \ "playeramount").asOpt[String]
         .getOrElse(throw new IllegalArgumentException("Player amount is required."))
 
-      val gameLobby = podManager.createGame(
+      val gameLobby = PodManager.createGame(
         host = request.user,
         name = gamename,
         maxPlayers = playeramount.toInt
@@ -47,7 +45,7 @@ class MainMenuController @Inject()(
       Ok(Json.obj(
         "status" -> "success",
         "redirectUrl" -> routes.IngameController.game(gameLobby.id).url,
-        "content" -> ingameController.returnInnerHTML(gameLobby, request.user).toString
+        "content" -> IngameController.returnInnerHTML(gameLobby, gameLobby.logic.getCurrentState, request.user).toString
       ))
     } else {
       BadRequest(Json.obj(
@@ -64,14 +62,14 @@ class MainMenuController @Inject()(
       (jsValue \ "gameId").asOpt[String]
     }
     if (gameId.isDefined) {
-      val game = podManager.getGame(gameId.get)
+      val game = PodManager.getGame(gameId.get)
       game match {
         case Some(g) =>
           g.addUser(request.user)
           Ok(Json.obj(
             "status" -> "success",
             "redirectUrl" -> routes.IngameController.game(g.id).url,
-            "content" -> ingameController.returnInnerHTML(g, request.user).toString
+            "content" -> IngameController.returnInnerHTML(g, g.logic.getCurrentState, request.user).toString
           ))
         case None =>
           NotFound(Json.obj(
@@ -91,7 +89,7 @@ class MainMenuController @Inject()(
     Ok(views.html.main("Knockout Whist - Rules")(views.html.mainmenu.rules(Some(request.user))))
   }
 
-  def navSPA(location: String) : Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
+  def navSPA(location: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
     location match {
       case "0" => // Main Menu
         Ok(Json.obj(

knockoutwhistweb/app/controllers/PollingController.scala

@@ -1,153 +0,0 @@
-package controllers
-
-import auth.{AuthAction, AuthenticatedRequest}
-import controllers.PollingController.{scheduler, timeoutDuration}
-import de.knockoutwhist.cards.Hand
-import de.knockoutwhist.player.AbstractPlayer
-import logic.PodManager
-import logic.game.{GameLobby, PollingEvents}
-import logic.game.PollingEvents.{CardPlayed, LobbyCreation, LobbyUpdate, NewRound, NewTrick, ReloadEvent}
-import model.sessions.UserSession
-import model.users.User
-import play.api.libs.json.{JsArray, JsValue, Json}
-import play.api.mvc.{AbstractController, Action, AnyContent, ControllerComponents, Result}
-import util.WebUIUtils
-
-import javax.inject.{Inject, Singleton}
-import scala.concurrent.{ExecutionContext, Future}
-import java.util.concurrent.{Executors, ScheduledExecutorService, TimeUnit}
-import scala.concurrent.duration.*
-object PollingController {
-  private val scheduler: ScheduledExecutorService = Executors.newSingleThreadScheduledExecutor()
-  private val timeoutDuration = 25.seconds
-}
-@Singleton
-class PollingController @Inject() (
-                                    val cc: ControllerComponents,
-                                    val podManager: PodManager,
-                                    val authAction: AuthAction,
-                                    val ingameController: IngameController,
-                                    implicit val ec: ExecutionContext
-                                  ) extends AbstractController(cc) {
-
-  private def buildCardPlayResponse(game: GameLobby, hand: Option[Hand], player: AbstractPlayer, newRound: Boolean): JsValue = {
-    val currentRound = game.logic.getCurrentRound.get
-    val currentTrick = game.logic.getCurrentTrick.get
-
-    val trickCardsJson = Json.toJson(
-      currentTrick.cards.map { case (card, player) =>
-        Json.obj("cardId" -> WebUIUtils.cardtoString(card), "player" -> player.name)
-      }
-    )
-    val scoreTableJson = Json.toJson(
-      game.getLogic.getPlayerQueue.get.toList.map { player =>
-        Json.obj(
-          "name" -> player.name,
-          "tricks" -> currentRound.tricklist.count(_.winner.contains(player))
-        )
-      }
-    )
-
-    val stringHand = hand.map { h =>
-      val cardStrings = h.cards.map(WebUIUtils.cardtoString)
-      Json.toJson(cardStrings).as[JsArray]
-    }.getOrElse(Json.arr())
-
-    val firstCardId = currentTrick.firstCard.map(WebUIUtils.cardtoString).getOrElse("BLANK")
-    val nextPlayer = game.getLogic.getPlayerQueue.get.duplicate().nextPlayer().name
-    Json.obj(
-      "status" -> "cardPlayed",
-      "animation" -> newRound,
-      "handData" -> stringHand,
-      "dog" -> player.isInDogLife,
-      "currentPlayerName" -> game.logic.getCurrentPlayer.get.name,
-      "trumpSuit" -> currentRound.trumpSuit.toString,
-      "trickCards" -> trickCardsJson,
-      "scoreTable" -> scoreTableJson,
-      "firstCardId" -> firstCardId,
-      "nextPlayer" -> nextPlayer,
-      "yourTurn" -> (game.logic.getCurrentPlayer.get == player)
-    )
-  }
-
-  private def buildLobbyUsersResponse(game: GameLobby, userSession: UserSession): JsValue = {
-    Json.obj(
-      "status" -> "lobbyUpdate",
-      "host" ->  userSession.host,
-      "users" -> game.getUsers.map(u => Json.obj(
-        "name" -> u.name,
-        "id" -> u.id,
-        "self" -> (u.id == userSession.id)
-      )),
-      "maxPlayers" -> game.maxPlayers
-    )
-  }
-
-
-  def handleEvent(event: PollingEvents, game: GameLobby, userSession: UserSession): Result = {
-    event match {
-      case NewRound =>
-        val player = game.getPlayerByUser(userSession.user)
-        val hand = player.currentHand()
-        val jsonResponse = buildCardPlayResponse(game, hand, player, true)
-        Ok(jsonResponse)
-      case NewTrick =>
-        val player = game.getPlayerByUser(userSession.user)
-        val hand = player.currentHand()
-        val jsonResponse = buildCardPlayResponse(game, hand, player, false)
-        Ok(jsonResponse)
-      case CardPlayed =>
-        val player = game.getPlayerByUser(userSession.user)
-        val hand = player.currentHand()
-        val jsonResponse = buildCardPlayResponse(game, hand, player, false)
-        Ok(jsonResponse)
-      case LobbyUpdate =>
-        Ok(buildLobbyUsersResponse(game, userSession))
-      case ReloadEvent =>
-        val jsonResponse = Json.obj(
-          "status" -> "reloadEvent",
-          "redirectUrl" -> routes.IngameController.game(game.id).url,
-          "content" -> ingameController.returnInnerHTML(game, userSession.user).toString
-        )
-        Ok(jsonResponse)
-    }
-  }
-
-  def polling(gameId: String): Action[AnyContent] = authAction.async { implicit request: AuthenticatedRequest[AnyContent] =>
-
-    val playerId = request.user.id
-
-    podManager.getGame(gameId) match {
-      case Some(game) =>
-        val playerEventQueue = game.getEventsOfPlayer(playerId)
-        if (playerEventQueue.nonEmpty) {
-          val event = playerEventQueue.dequeue()
-          Future.successful(handleEvent(event, game, game.getUserSession(playerId)))
-        } else {
-          val eventPromise = game.registerWaiter(playerId)
-          val scheduledFuture = scheduler.schedule(
-            new Runnable {
-              override def run(): Unit =
-                eventPromise.tryFailure(new java.util.concurrent.TimeoutException("Polling Timeout"))
-            },
-            timeoutDuration.toMillis,
-            TimeUnit.MILLISECONDS
-          )
-          eventPromise.future.map { event =>
-            scheduledFuture.cancel(false)
-            game.removeWaiter(playerId)
-            handleEvent(event, game, game.getUserSession(playerId))
-          }.recover {
-            case _: Throwable =>
-              game.removeWaiter(playerId)
-              NoContent
-          }
-        }
-
-      case None =>
-        Future.successful(NotFound("Game not found."))
-    }
-  }
-
-
-}

knockoutwhistweb/app/controllers/WebsocketController.scala

@@ -0,0 +1,45 @@
+package controllers
+
+
+import auth.AuthAction
+import logic.PodManager
+import logic.user.SessionManager
+import model.sessions.{UserSession, UserWebsocketActor}
+import org.apache.pekko.actor.{ActorRef, ActorSystem, Props}
+import org.apache.pekko.stream.Materializer
+import play.api.*
+import play.api.libs.streams.ActorFlow
+import play.api.mvc.*
+
+import javax.inject.*
+
+
+@Singleton
+class WebsocketController @Inject()(
+                                     cc: ControllerComponents,
+                                     val sessionManger: SessionManager,
+                                   )(implicit system: ActorSystem, mat: Materializer) extends AbstractController(cc) {
+
+  def socket(): WebSocket = WebSocket.accept[String, String] { request =>
+    val session = request.cookies.get("sessionId")
+    if (session.isEmpty) throw new Exception("No session cookie found")
+    val userOpt = sessionManger.getUserBySession(session.get.value)
+    if (userOpt.isEmpty) throw new Exception("Invalid session")
+    val user = userOpt.get
+    val game = PodManager.identifyGameOfUser(user)
+    if (game.isEmpty) throw new Exception("User is not in a game")
+    val userSession = game.get.getUserSession(user.id)
+    ActorFlow.actorRef { out =>
+      println("Connect received")
+      KnockOutWebSocketActorFactory.create(out, userSession)
+    }
+  }
+
+  object KnockOutWebSocketActorFactory {
+    def create(out: ActorRef, userSession: UserSession): Props = {
+      Props(new UserWebsocketActor(out, userSession))
+    }
+  }
+
+
+}

knockoutwhistweb/app/events/KickEvent.scala

@@ -0,0 +1,9 @@
+package events
+
+import model.users.User
+
+case class KickEvent(user: User) extends UserEvent(user) {
+  
+  override def id: String = "KickEvent"
+
+}

knockoutwhistweb/app/events/LeftEvent.scala

@@ -0,0 +1,9 @@
+package events
+
+import model.users.User
+
+case class LeftEvent(user: User) extends UserEvent(user) {
+
+  override def id: String = "LeftEvent"
+  
+}

knockoutwhistweb/app/events/LobbyUpdateEvent.scala

@@ -0,0 +1,9 @@
+package events
+
+import de.knockoutwhist.utils.events.SimpleEvent
+
+case class LobbyUpdateEvent() extends SimpleEvent {
+
+  override def id: String = "LobbyUpdateEvent"
+  
+}

knockoutwhistweb/app/events/UserEvent.scala

@@ -0,0 +1,12 @@
+package events
+
+import de.knockoutwhist.utils.events.SimpleEvent
+import model.users.User
+
+import java.util.UUID
+
+abstract class UserEvent(user: User) extends SimpleEvent {
+
+  def userId: UUID = user.id
+  
+}

knockoutwhistweb/app/logic/PodManager.scala

@@ -11,20 +11,20 @@ import util.GameUtil
 import javax.inject.Singleton
 import scala.collection.mutable
 
-@Singleton
+object PodManager {
-class PodManager {
 
   val TTL: Long = System.currentTimeMillis() + 86400000L // 24 hours in milliseconds
   val podIp: String = System.getenv("POD_IP")
   val podName: String = System.getenv("POD_NAME")
 
   private val sessions: mutable.Map[String, GameLobby] = mutable.Map()
+  private val userSession: mutable.Map[User, String] = mutable.Map()
   private val injector: Injector = Guice.createInjector(KnockOutWebConfigurationModule())
 
   def createGame(
-                host: User,
+                  host: User,
-                name: String,
+                  name: String,
-                maxPlayers: Int
+                  maxPlayers: Int
                 ): GameLobby = {
     val gameLobby = GameLobby(
       logic = BaseGameLogic(injector.getInstance(classOf[Configuration])),
@@ -35,6 +35,7 @@ class PodManager {
       host = host
     )
     sessions += (gameLobby.id -> gameLobby)
+    userSession += (host -> gameLobby.id)
     gameLobby
   }
 
@@ -42,8 +43,31 @@ class PodManager {
     sessions.get(gameId)
   }
 
-  private[logic] def removeGame(gameId: String): Unit = {
+  def registerUserToGame(user: User, gameId: String): Boolean = {
-    sessions.remove(gameId)
+    if (sessions.contains(gameId)) {
+      userSession += (user -> gameId)
+      true
+    } else {
+      false
+    }
   }
 
+  def unregisterUserFromGame(user: User): Unit = {
+    userSession.remove(user)
+  }
+
+  def identifyGameOfUser(user: User): Option[GameLobby] = {
+    userSession.get(user) match {
+      case Some(gameId) => sessions.get(gameId)
+      case None => None
+    }
+  }
+
+  private[logic] def removeGame(gameId: String): Unit = {
+    sessions.remove(gameId)
+    // Also remove all user sessions associated with this game
+    userSession.filterInPlace((_, v) => v != gameId)
+  }
+
+
 }

knockoutwhistweb/app/logic/game/GameLobby.scala

@@ -2,66 +2,37 @@ package logic.game
 
 import de.knockoutwhist.cards.{Hand, Suit}
 import de.knockoutwhist.control.GameLogic
-import de.knockoutwhist.control.GameState.{InGame, Lobby, MainMenu}
+import de.knockoutwhist.control.GameState.{Lobby, MainMenu}
 import de.knockoutwhist.control.controllerBaseImpl.sublogic.util.{MatchUtil, PlayerUtil}
-import de.knockoutwhist.events.global.tie.TieTurnEvent
+import de.knockoutwhist.events.global.{GameStateChangeEvent, SessionClosed}
-import de.knockoutwhist.events.global.{CardPlayedEvent, GameStateChangeEvent, NewTrickEvent, SessionClosed}
+import de.knockoutwhist.events.player.PlayerEvent
-import de.knockoutwhist.events.player.{PlayerEvent, ReceivedHandEvent}
 import de.knockoutwhist.player.Playertype.HUMAN
 import de.knockoutwhist.player.{AbstractPlayer, PlayerFactory}
 import de.knockoutwhist.rounds.{Match, Round, Trick}
 import de.knockoutwhist.utils.events.{EventListener, SimpleEvent}
+import events.{KickEvent, LeftEvent, LobbyUpdateEvent, UserEvent}
 import exceptions.*
-import logic.game.PollingEvents.{CardPlayed, LobbyCreation, LobbyUpdate, NewRound, NewTrick, ReloadEvent}
+import logic.PodManager
 import model.sessions.{InteractionType, UserSession}
 import model.users.User
+import play.api.libs.json.{JsObject, Json}
 
-import java.util.UUID
+import java.util.{Timer, TimerTask, UUID}
 import scala.collection.mutable
 import scala.collection.mutable.ListBuffer
-import scala.concurrent.Promise as ScalaPromise
 
 class GameLobby private(
-                 val logic: GameLogic,
+                         val logic: GameLogic,
-                 val id: String,
+                         val id: String,
-                 val internalId: UUID,
+                         val internalId: UUID,
-                 val name: String,
+                         val name: String,
-                 val maxPlayers: Int
+                         val maxPlayers: Int
-               ) extends EventListener {
+                       ) extends EventListener {
-
 
 
   private val users: mutable.Map[UUID, UserSession] = mutable.Map()
-  private val eventsPerPlayer: mutable.Map[UUID, mutable.Queue[PollingEvents]] = mutable.Map()
+  logic.addListener(this)
-  private val waitingPromises: mutable.Map[UUID, ScalaPromise[PollingEvents]] = mutable.Map()
+  logic.createSession()
-  private val lock = new Object
-  lock.synchronized {
-    logic.addListener(this)
-    logic.createSession()
-  }
-
-
-  def registerWaiter(playerId: UUID): ScalaPromise[PollingEvents] = {
-    val promise = ScalaPromise[PollingEvents]()
-    lock.synchronized {
-      val queue = eventsPerPlayer.getOrElseUpdate(playerId, mutable.Queue())
-
-      if (queue.nonEmpty) {
-        val evt = queue.dequeue()
-        promise.success(evt)
-        promise
-      } else {
-        waitingPromises.put(playerId, promise)
-        promise
-      }
-    }
-  }
-
-  def removeWaiter(playerId: UUID): Unit = {
-    lock.synchronized {
-      waitingPromises.remove(playerId)
-    }
-  }
 
   def addUser(user: User): UserSession = {
     if (users.size >= maxPlayers) throw new GameFullException("The game is full!")
@@ -69,60 +40,34 @@ class GameLobby private(
     if (logic.getCurrentState != Lobby) throw new IllegalStateException("The game has already started!")
     val userSession = new UserSession(
       user = user,
-      host = false
+      host = false,
+      gameLobby = this
     )
     users += (user.id -> userSession)
-    addToQueue(LobbyUpdate)
+    PodManager.registerUserToGame(user, id)
+    logic.invoke(LobbyUpdateEvent())
     userSession
   }
 
   override def listen(event: SimpleEvent): Unit = {
     event match {
-      case event: ReceivedHandEvent =>
-        addToQueue(NewRound)
-        users.get(event.playerId).foreach(session => session.updatePlayer(event))
-      case event: CardPlayedEvent =>
-        addToQueue(CardPlayed)
-      case event: TieTurnEvent =>
-        addToQueue(ReloadEvent)
-        users.get(event.player.id).foreach(session => session.updatePlayer(event))
       case event: PlayerEvent =>
         users.get(event.playerId).foreach(session => session.updatePlayer(event))
-      case event: NewTrickEvent =>
+      case event: UserEvent =>
-        addToQueue(NewTrick)
+        users.get(event.userId).foreach(session => session.updatePlayer(event))
       case event: GameStateChangeEvent =>
         if (event.oldState == MainMenu && event.newState == Lobby) {
           return
         }
-        addToQueue(ReloadEvent)
-        users.values.foreach(session => session.updatePlayer(event))
-      case event: SessionClosed =>
         users.values.foreach(session => session.updatePlayer(event))
       case event: SimpleEvent =>
         users.values.foreach(session => session.updatePlayer(event))
     }
   }
 
-  private def addToQueue(event: PollingEvents): Unit = {
-    lock.synchronized {
-      users.keys.foreach { playerId =>
-        val q = eventsPerPlayer.getOrElseUpdate(playerId, mutable.Queue())
-        q.enqueue(event)
-      }
-      val waiterIds = waitingPromises.keys.toList
-      waiterIds.foreach { playerId =>
-        val q = eventsPerPlayer.getOrElseUpdate(playerId, mutable.Queue())
-        if (q.nonEmpty) {
-          val evt = q.dequeue()
-          val p = waitingPromises.remove(playerId)
-          p.foreach(_.success(evt))
-        }
-      }
-    }
-  }
-
   /**
    * Start the game if the user is the host.
+   *
    * @param user the user who wants to start the game.
    */
   def startGame(user: User): Unit = {
@@ -149,21 +94,36 @@ class GameLobby private(
 
   /**
    * Remove the user from the game lobby.
+   *
    * @param user the user who wants to leave the game.
+   * @param kicked whether the user was kicked or left voluntarily.
    */
-  def leaveGame(userId: UUID): Unit = {
+  def leaveGame(userId: UUID, kicked: Boolean): Unit = {
     val sessionOpt = users.get(userId)
     if (sessionOpt.isEmpty) {
       throw new NotInThisGameException("You are not in this game!")
     }
+    if (sessionOpt.get.host) {
+      logic.invoke(SessionClosed())
+      users.clear()
+      PodManager.removeGame(id)
+      return
+    }
+    if (kicked) {
+      logic.invoke(KickEvent(sessionOpt.get.user))
+    } else {
+      logic.invoke(LeftEvent(sessionOpt.get.user))
+    }
     users.remove(userId)
-    addToQueue(LobbyUpdate)
+    PodManager.unregisterUserFromGame(sessionOpt.get.user)
+    logic.invoke(LobbyUpdateEvent())
   }
 
   /**
    * Play a card from the player's hand.
+   *
    * @param userSession the user session of the player.
-   * @param cardIndex the index of the card in the player's hand.
+   * @param cardIndex   the index of the card in the player's hand.
    */
   def playCard(userSession: UserSession, cardIndex: Int): Unit = {
     val player = getPlayerInteractable(userSession, InteractionType.Card)
@@ -179,10 +139,35 @@ class GameLobby private(
     logic.playerInputLogic.receivedCard(card)
   }
 
+  private def getHand(player: AbstractPlayer): Hand = {
+    val handOption = player.currentHand()
+    if (handOption.isEmpty) {
+      throw new IllegalStateException("You have no cards!")
+    }
+    handOption.get
+  }
+
+  private def getRound: Round = {
+    val roundOpt = logic.getCurrentRound
+    if (roundOpt.isEmpty) {
+      throw new IllegalStateException("No round is currently running!")
+    }
+    roundOpt.get
+  }
+
+  private def getTrick: Trick = {
+    val trickOpt = logic.getCurrentTrick
+    if (trickOpt.isEmpty) {
+      throw new IllegalStateException("No trick is currently running!")
+    }
+    trickOpt.get
+  }
+
   /**
    * Play a card from the player's hand while in dog life or skip the round.
+   *
    * @param userSession the user session of the player.
-   * @param cardIndex the index of the card in the player's hand or -1 if the player wants to skip the round.
+   * @param cardIndex   the index of the card in the player's hand or -1 if the player wants to skip the round.
    */
   def playDogCard(userSession: UserSession, cardIndex: Int): Unit = {
     val player = getPlayerInteractable(userSession, InteractionType.DogCard)
@@ -204,8 +189,9 @@ class GameLobby private(
 
   /**
    * Select the trump suit for the round.
+   *
    * @param userSession the user session of the player.
-   * @param trumpIndex the index of the trump suit.
+   * @param trumpIndex  the index of the trump suit.
    */
   def selectTrump(userSession: UserSession, trumpIndex: Int): Unit = {
     val player = getPlayerInteractable(userSession, InteractionType.TrumpSuit)
@@ -215,6 +201,19 @@ class GameLobby private(
     logic.playerInputLogic.receivedTrumpSuit(selectedTrump)
   }
 
+
+  //-------------------
+
+  private def getPlayerInteractable(userSession: UserSession, iType: InteractionType): AbstractPlayer = {
+    if (!userSession.lock.isHeldByCurrentThread) {
+      throw new IllegalStateException("The user session is not locked!")
+    }
+    if (userSession.canInteract.isEmpty || userSession.canInteract.get != iType) {
+      throw new NotInteractableException("You can't play a card!")
+    }
+    getPlayerBySession(userSession)
+  }
+
   /**
    *
    * @param userSession
@@ -239,8 +238,9 @@ class GameLobby private(
     logic.createSession()
   }
 
-  
+  def getPlayerByUser(user: User): AbstractPlayer = {
-  //-------------------
+    getPlayerBySession(getUserSession(user.id))
+  }
 
   def getUserSession(userId: UUID): UserSession = {
     val sessionOpt = users.get(userId)
@@ -250,20 +250,6 @@ class GameLobby private(
     sessionOpt.get
   }
 
-  def getPlayerByUser(user: User): AbstractPlayer = {
-    getPlayerBySession(getUserSession(user.id))
-  }
-
-  def getPlayers: mutable.Map[UUID, UserSession] = {
-    users.clone()
-  }
-
-  def getLogic: GameLogic = {
-    logic
-  }
-  def getEventsOfPlayer(playerId: UUID): mutable.Queue[PollingEvents] = {
-    eventsPerPlayer.getOrElseUpdate(playerId, mutable.Queue())
-  }
   private def getPlayerBySession(userSession: UserSession): AbstractPlayer = {
     val playerOption = getMatch.totalplayers.find(_.id == userSession.id)
     if (playerOption.isEmpty) {
@@ -272,24 +258,6 @@ class GameLobby private(
     playerOption.get
   }
 
-  private def getPlayerInteractable(userSession: UserSession, iType: InteractionType): AbstractPlayer = {
-    if (!userSession.lock.isHeldByCurrentThread) {
-      throw new IllegalStateException("The user session is not locked!")
-    }
-    if (userSession.canInteract.isEmpty || userSession.canInteract.get != iType) {
-      throw new NotInteractableException("You can't play a card!")
-    }
-    getPlayerBySession(userSession)
-  }
-  
-  private def getHand(player: AbstractPlayer): Hand = {
-    val handOption = player.currentHand()
-    if (handOption.isEmpty) {
-      throw new IllegalStateException("You have no cards!")
-    }
-    handOption.get
-  }
-  
   private def getMatch: Match = {
     val matchOpt = logic.getCurrentMatch
     if (matchOpt.isEmpty) {
@@ -298,26 +266,24 @@ class GameLobby private(
     matchOpt.get
   }
 
-  private def getRound: Round = {
+  def getPlayers: mutable.Map[UUID, UserSession] = {
-    val roundOpt = logic.getCurrentRound
+    users.clone()
-    if (roundOpt.isEmpty) {
-      throw new IllegalStateException("No round is currently running!")
-    }
-    roundOpt.get
   }
 
-  private def getTrick: Trick = {
+  def getLogic: GameLogic = {
-    val trickOpt = logic.getCurrentTrick
+    logic
-    if (trickOpt.isEmpty) {
-      throw new IllegalStateException("No trick is currently running!")
-    }
-    trickOpt.get
   }
 
   def getUsers: Set[User] = {
     users.values.map(d => d.user).toSet
   }
 
+  private def transmitToAll(event: JsObject): Unit = {
+    users.values.foreach(session => {
+      session.websocketActor.foreach(act => act.transmitJsonToClient(event))
+    })
+  }
+
 }
 
 object GameLobby {
@@ -338,7 +304,8 @@ object GameLobby {
     )
     lobby.users += (host.id -> new UserSession(
       user = host,
-      host = true
+      host = true,
+      gameLobby = lobby
     ))
     lobby
   }

knockoutwhistweb/app/logic/game/PollingEvents.scala

@@ -1,10 +0,0 @@
-package logic.game
-
-enum PollingEvents {
-  case CardPlayed
-  case NewRound
-  case NewTrick
-  case ReloadEvent
-  case LobbyUpdate
-  case LobbyCreation
-}

knockoutwhistweb/app/logic/user/SessionManager.scala

@@ -8,7 +8,9 @@ import model.users.User
 trait SessionManager {
 
   def createSession(user: User): String
+
   def getUserBySession(sessionId: String): Option[User]
+
   def invalidateSession(sessionId: String): Unit
 
 }

knockoutwhistweb/app/logic/user/UserManager.scala

@@ -8,9 +8,13 @@ import model.users.User
 trait UserManager {
 
   def addUser(name: String, password: String): Boolean
+
   def authenticate(name: String, password: String): Option[User]
+
   def userExists(name: String): Option[User]
+
   def userExistsById(id: Long): Option[User]
+
   def removeUser(name: String): Boolean
 
 }

knockoutwhistweb/app/model/sessions/PlayerSession.scala

@@ -7,7 +7,9 @@ import java.util.UUID
 trait PlayerSession {
 
   def id: UUID
+
   def name: String
+
   def updatePlayer(event: SimpleEvent): Unit
 
 }

knockoutwhistweb/app/model/sessions/UserSession.scala

@@ -2,14 +2,18 @@ package model.sessions
 
 import de.knockoutwhist.events.player.{RequestCardEvent, RequestTieChoiceEvent, RequestTrumpSuitEvent}
 import de.knockoutwhist.utils.events.SimpleEvent
+import logic.game.GameLobby
 import model.users.User
+import play.api.libs.json.{JsObject, JsValue}
 
 import java.util.UUID
-import java.util.concurrent.locks.{Lock, ReentrantLock}
+import java.util.concurrent.locks.ReentrantLock
+import scala.util.Try
 
-class UserSession(val user: User, val host: Boolean) extends PlayerSession {
+class UserSession(val user: User, val host: Boolean, val gameLobby: GameLobby) extends PlayerSession {
-  var canInteract: Option[InteractionType] = None
   val lock: ReentrantLock = ReentrantLock()
+  var canInteract: Option[InteractionType] = None
+  var websocketActor: Option[UserWebsocketActor] = None
 
   override def updatePlayer(event: SimpleEvent): Unit = {
     event match {
@@ -22,6 +26,7 @@ class UserSession(val user: User, val host: Boolean) extends PlayerSession {
         else canInteract = Some(InteractionType.Card)
       case _ =>
     }
+    websocketActor.foreach(_.transmitEventToClient(event))
   }
 
   override def id: UUID = user.id
@@ -32,4 +37,51 @@ class UserSession(val user: User, val host: Boolean) extends PlayerSession {
     canInteract = None
   }
 
+  def handleWebResponse(eventType: String, data: JsObject): Unit = {
+    lock.lock()
+    val result = Try {
+      eventType match {
+        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/sessions/UserWebsocketActor.scala

@@ -0,0 +1,103 @@
+package model.sessions
+
+import de.knockoutwhist.utils.events.SimpleEvent
+import org.apache.pekko.actor.{Actor, ActorRef}
+import play.api.libs.json.{JsObject, JsValue, Json}
+import util.WebsocketEventMapper
+
+import scala.util.{Failure, Success, Try}
+
+class UserWebsocketActor(
+                          out: ActorRef,
+                          session: UserSession
+                        ) extends Actor {
+
+  {
+    session.lock.lock()
+    if (session.websocketActor.isDefined) {
+      val otherWebsocket = session.websocketActor.get
+      otherWebsocket.transmitTextToClient("Error: Multiple websocket connections detected. Closing your connection.")
+      context.stop(otherWebsocket.self)
+      transmitTextToClient("Previous websocket connection closed. You are now connected.")
+    }
+    session.websocketActor = Some(this)
+    session.lock.unlock()
+  }
+
+
+  override def receive: Receive = {
+    case msg: String =>
+      val jsonObject = Try {
+        Json.parse(msg)
+      }
+      Try {
+        jsonObject match {
+          case Success(value) =>
+            handle(value)
+          case Failure(exception) =>
+            transmitTextToClient(s"Error parsing JSON: ${exception.getMessage}")
+        }
+      }.failed.foreach(
+        ex => transmitTextToClient(s"Error handling message: ${ex.getMessage}")
+      )
+    case other =>
+  }
+
+  private def transmitTextToClient(text: String): Unit = {
+    out ! text
+  }
+
+  private def handle(json: JsValue): Unit = {
+    val idOpt = (json \ "id").asOpt[String]
+    if (idOpt.isEmpty) {
+      transmitJsonToClient(Json.obj(
+        "status" -> "error",
+        "error" -> "Missing 'id' field"
+      ))
+      return
+    }
+    val id = idOpt.get
+    val eventOpt = (json \ "event").asOpt[String]
+    if (eventOpt.isEmpty) {
+      transmitJsonToClient(Json.obj(
+        "id" -> id,
+        "event" -> null,
+        "status" -> "error",
+        "error" -> "Missing 'event' field"
+      ))
+      return
+    }
+    val statusOpt = (json \ "status").asOpt[String]
+    if (statusOpt.isDefined) {
+      return
+    }
+    val event = eventOpt.get
+    val data = (json \ "data").asOpt[JsObject].getOrElse(Json.obj())
+    val result = Try {
+      session.handleWebResponse(event, data)
+    }
+    if (result.isSuccess) {
+      transmitJsonToClient(Json.obj(
+        "id" -> id,
+        "event" -> event,
+        "status" -> "success"
+      ))
+    } else {
+      transmitJsonToClient(Json.obj(
+        "id" -> id,
+        "event" -> event,
+        "status" -> "error",
+        "error" -> result.failed.get.getMessage
+      ))
+    }
+  }
+
+  def transmitJsonToClient(jsonObj: JsValue): Unit = {
+    transmitTextToClient(jsonObj.toString())
+  }
+
+  def transmitEventToClient(event: SimpleEvent): Unit = {
+    transmitJsonToClient(WebsocketEventMapper.toJson(event, session))
+  }
+
+}

knockoutwhistweb/app/model/users/User.scala

@@ -1,12 +1,13 @@
 package model.users
 
+
 import java.util.UUID
 
 case class User(
-               internalId: Long,
+                 internalId: Long,
-               id: UUID,
+                 id: UUID,
-               name: String,
+                 name: String,
-               passwordHash: String
+                 passwordHash: String
                ) {
 
   def withName(newName: String): User = {
@@ -16,5 +17,4 @@ case class User(
   private def withPasswordHash(newPasswordHash: String): User = {
     this.copy(passwordHash = newPasswordHash)
   }
-
 }

knockoutwhistweb/app/services/JwtKeyProvider.scala

@@ -12,10 +12,28 @@ import javax.inject.*
 @Singleton
 class JwtKeyProvider @Inject()(config: Configuration) {
 
-  private def cleanPem(pem: String): String =
+  val publicKey: RSAPublicKey = {
-    pem.replaceAll("-----BEGIN (.*)-----", "")
+    val pemOpt = config.getOptional[String]("auth.publicKeyPem")
-      .replaceAll("-----END (.*)-----", "")
+    val fileOpt = config.getOptional[String]("auth.publicKeyFile")
-      .replaceAll("\\s", "")
+
+    pemOpt.orElse(fileOpt.map { path =>
+      new String(Files.readAllBytes(Paths.get(path)))
+    }) match {
+      case Some(pem) => loadPublicKeyFromPem(pem)
+      case None => throw new RuntimeException("No RSA public key configured.")
+    }
+  }
+  val privateKey: RSAPrivateKey = {
+    val pemOpt = config.getOptional[String]("auth.privateKeyPem")
+    val fileOpt = config.getOptional[String]("auth.privateKeyFile")
+
+    pemOpt.orElse(fileOpt.map { path =>
+      new String(Files.readAllBytes(Paths.get(path)))
+    }) match {
+      case Some(pem) => loadPrivateKeyFromPem(pem)
+      case None => throw new RuntimeException("No RSA private key configured.")
+    }
+  }
 
   private def loadPublicKeyFromPem(pem: String): RSAPublicKey = {
     val decoded = Base64.getDecoder.decode(cleanPem(pem))
@@ -29,28 +47,9 @@ class JwtKeyProvider @Inject()(config: Configuration) {
     KeyFactory.getInstance("RSA").generatePrivate(spec).asInstanceOf[RSAPrivateKey]
   }
 
-  val publicKey: RSAPublicKey = {
+  private def cleanPem(pem: String): String =
-    val pemOpt = config.getOptional[String]("auth.publicKeyPem")
+    pem.replaceAll("-----BEGIN (.*)-----", "")
-    val fileOpt = config.getOptional[String]("auth.publicKeyFile")
+      .replaceAll("-----END (.*)-----", "")
-
+      .replaceAll("\\s", "")
-    pemOpt.orElse(fileOpt.map { path =>
-      new String(Files.readAllBytes(Paths.get(path)))
-    }) match {
-      case Some(pem) => loadPublicKeyFromPem(pem)
-      case None => throw new RuntimeException("No RSA public key configured.")
-    }
-  }
-
-  val privateKey: RSAPrivateKey = {
-    val pemOpt = config.getOptional[String]("auth.privateKeyPem")
-    val fileOpt = config.getOptional[String]("auth.privateKeyFile")
-
-    pemOpt.orElse(fileOpt.map { path =>
-      new String(Files.readAllBytes(Paths.get(path)))
-    }) match {
-      case Some(pem) => loadPrivateKeyFromPem(pem)
-      case None => throw new RuntimeException("No RSA private key configured.")
-    }
-  }
 
 }

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 {
@@ -26,4 +29,15 @@ 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,9 @@
 package util
 
-import de.knockoutwhist.cards.Card
 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
 
@@ -36,4 +37,22 @@ object WebUIUtils {
     f"$cv$s"
   }
 
+  /**
+   * Map a Hand to a JsArray of cards
+   * Per card it has the string and the index in the hand
+   * @param hand
+   * @return
+   */
+  def handToJson(hand: Hand): JsArray = {
+    val cards = hand.cards
+    JsArray(
+      cards.zipWithIndex.map { case (card, index) =>
+        Json.obj(
+          "idx" -> index,
+          "card" -> cardtoString(card)
+        )
+      }
+    )
+  }
+
 }

knockoutwhistweb/app/util/WebsocketEventMapper.scala

@@ -0,0 +1,55 @@
+package util
+
+import de.knockoutwhist.utils.events.SimpleEvent
+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.*
+
+object WebsocketEventMapper {
+
+  private val scalaModule = ScalaModule.builder()
+    .addAllBuiltinModules()
+    .supportScala3Classes(true)
+    .build()
+
+  private val mapper = JsonMapper.builder().addModule(scalaModule).build()
+
+  private var customMappers: Map[String,SimpleEventMapper[SimpleEvent]] = Map()
+
+  private def registerCustomMapper[T <: SimpleEvent](mapper: SimpleEventMapper[T]): Unit = {
+    customMappers = customMappers + (mapper.id -> mapper.asInstanceOf[SimpleEventMapper[SimpleEvent]])
+  }
+  
+  // Register all custom mappers here
+  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))
+    }else {
+      None
+    }
+    if (data.isEmpty) {
+      return Json.obj()
+    }
+    Json.obj(
+      "id" -> ("request-" + java.util.UUID.randomUUID().toString),
+      "event" -> obj.id,
+      "data" -> data
+    )
+  }
+
+}

knockoutwhistweb/app/util/mapper/CardPlayedEventMapper.scala

@@ -0,0 +1,20 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.CardPlayedEvent
+import model.sessions.UserSession
+import play.api.libs.json.{JsArray, JsObject, Json}
+import util.WebUIUtils
+
+object CardPlayedEventMapper extends SimpleEventMapper[CardPlayedEvent]{
+
+  override def id: String = "CardPlayedEvent"
+
+  override def toJson(event: CardPlayedEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "firstCard" -> (if (event.trick.firstCard.isDefined) WebUIUtils.cardtoString(event.trick.firstCard.get) else "BLANK"),
+      "playedCards" -> JsArray(event.trick.cards.map { case (card, player) =>
+        Json.obj("cardId" -> WebUIUtils.cardtoString(card), "player" -> player.name)
+      }.toList)
+    )
+  }
+}

knockoutwhistweb/app/util/mapper/GameStateEventMapper.scala

@@ -0,0 +1,19 @@
+package util.mapper
+
+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] {
+
+  override def id: String = "GameStateChangeEvent"
+
+  override def toJson(event: GameStateChangeEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "title" -> ("Knockout Whist - " + GameUtil.stateToTitle(event.newState)),
+      "content" -> IngameController.returnInnerHTML(session.gameLobby, event.newState, session.user).toString
+    )
+  }
+}

knockoutwhistweb/app/util/mapper/KickEventMapper.scala

@@ -0,0 +1,19 @@
+package util.mapper
+
+import controllers.routes
+import events.KickEvent
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object KickEventMapper extends SimpleEventMapper[KickEvent] {
+
+  override def id: String = "KickEvent"
+
+  override def toJson(event: KickEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "url" -> routes.MainMenuController.mainMenu().url,
+      "content" -> views.html.mainmenu.creategame(Some(session.user)).toString,
+    )
+  }
+
+}

knockoutwhistweb/app/util/mapper/LeftEventMapper.scala

@@ -0,0 +1,19 @@
+package util.mapper
+
+import controllers.routes
+import events.{KickEvent, LeftEvent}
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object LeftEventMapper extends SimpleEventMapper[LeftEvent] {
+
+  override def id: String = "LeftEvent"
+
+  override def toJson(event: LeftEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "url" -> routes.MainMenuController.mainMenu().url,
+      "content" -> views.html.mainmenu.creategame(Some(session.user)).toString
+    )
+  }
+
+}

knockoutwhistweb/app/util/mapper/LobbyUpdateEventMapper.scala

@@ -0,0 +1,25 @@
+package util.mapper
+
+import events.LobbyUpdateEvent
+import model.sessions.UserSession
+import play.api.libs.json.{JsArray, JsObject, Json}
+
+object LobbyUpdateEventMapper extends SimpleEventMapper[LobbyUpdateEvent] {
+
+  override def id: String = "LobbyUpdateEvent"
+
+  override def toJson(event: LobbyUpdateEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "host" -> session.host,
+      "maxPlayers" -> session.gameLobby.maxPlayers,
+      "players" -> JsArray(session.gameLobby.getPlayers.values.map(player => {
+        Json.obj(
+          "id" -> player.id,
+          "name" -> player.name,
+          "self" -> (player.id == session.user.id)
+        )
+      }).toList)
+    )
+  }
+
+}

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/ReceivedHandEventMapper.scala

@@ -0,0 +1,17 @@
+package util.mapper
+
+import de.knockoutwhist.events.player.ReceivedHandEvent
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+import util.WebUIUtils
+
+object ReceivedHandEventMapper extends SimpleEventMapper[ReceivedHandEvent] {
+
+  override def id: String = "ReceivedHandEvent"
+  override def toJson(event: ReceivedHandEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "dog" -> event.player.isInDogLife,
+      "hand" -> event.player.currentHand().map(hand => WebUIUtils.handToJson(hand))
+    )
+  }
+}

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/SessionClosedMapper.scala

@@ -0,0 +1,19 @@
+package util.mapper
+
+import controllers.routes
+import de.knockoutwhist.events.global.SessionClosed
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object SessionClosedMapper extends SimpleEventMapper[SessionClosed] {
+
+  override def id: String = "SessionClosed"
+
+  override def toJson(event: SessionClosed, session: UserSession): JsObject = {
+    Json.obj(
+      "url" -> routes.MainMenuController.mainMenu().url,
+      "content" -> views.html.mainmenu.creategame(Some(session.user)).toString,
+    )
+  }
+
+}

knockoutwhistweb/app/util/mapper/SimpleEventMapper.scala

@@ -0,0 +1,13 @@
+package util.mapper
+
+import de.knockoutwhist.utils.events.SimpleEvent
+import logic.game.GameLobby
+import model.sessions.UserSession
+import play.api.libs.json.JsObject
+
+trait SimpleEventMapper[T <: SimpleEvent] {
+  
+  def id: String
+  def toJson(event: T, session: UserSession): JsObject
+
+}

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

@@ -10,7 +10,7 @@
         <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 class="btn btn-success" onclick="handleReturnToLobby()">Return to lobby</div>
             </div>
         } else {
             <div class="col-12 text-center mt-3">
@@ -23,15 +23,5 @@
     </div>
 </main>
 <script>
-        function waitForFunction(name, checkInterval = 100) {
+    connectWebSocket()
-            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'));
 </script>

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

@@ -10,12 +10,25 @@
             <div class="row ms-4 me-4">
                 <div class="col-4 mt-5 text-start">
                     <h4 class="fw-semibold mb-1">Current Player</h4>
-                    <p class="fs-5 text-primary" id="current-player-name">@gamelobby.getLogic.getCurrentPlayer.get.name</p>
+                    @if(gamelobby.getLogic.getCurrentPlayer.isDefined) {
-                    @if(!TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) {
+                        <p class="fs-5 text-primary" id="current-player-name">@gamelobby.getLogic.getCurrentPlayer.get.name</p>
-                    <h4 class="fw-semibold mb-1">Next Player</h4>
+                    }else {
-                    @for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {
+                        <p class="fs-5 text-primary" id="current-player-name">---</p>
-                    <p class="fs-5 text-primary" id="next-player-name">@nextplayer</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" 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>
 
@@ -29,63 +42,87 @@
                             <div style="width: 50%">TRICKS</div>
                         </div>
 
-                        @for(player <- gamelobby.getLogic.getPlayerQueue.get.toList.sortBy { p =>
+                        @if(gamelobby.getLogic.getPlayerQueue.isDefined) {
-                        -(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(p) }.size)
+                            @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 class="d-flex justify-content-between score-row pt-1">
-                            <div style="width: 50%">
+                                    <div style="width: 50%" class="text-truncate">@player.name</div>
-                                @(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(player) }.size)
+                                    <div style="width: 50%">
+                                    @(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(player) }.size)
+                                    </div>
+                                </div>
+                            }
+                        }else{
+                            <div class="d-flex justify-content-between score-row pt-1">
                             </div>
-                        </div>
                         }
 
+
                     </div>
                     <div class="d-flex justify-content-center g-3 mb-5" id="trick-cards-container">
-                        @for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
+                        @if(gamelobby.getLogic.getCurrentTrick.isEmpty || gamelobby.getLogic.getCurrentTrick.get.cards.isEmpty) {
-                        <div class="col-auto">
+                            <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">
-                                    @util.WebUIUtils.cardtoImage(cardplayed) width="100%"/>
-                                </div>
-                                <div class="card-body p-2 bg-transparent">
-                                    <small class="fw-semibold text-secondary">@player</small>
-                                </div>
                             </div>
-                        </div>
+                        } else {
+                            @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">
+                                            @util.WebUIUtils.cardtoImage(cardplayed) width="100%"/>
+                                        </div>
+                                        <div class="card-body p-2 bg-transparent">
+                                            <small class="fw-semibold text-secondary">@player</small>
+                                        </div>
+                                    </div>
+                                </div>
+                            }
                         }
                     </div>
                 </div>
                 <div class="col-4 mt-5 text-end">
                     <h4 class="fw-semibold mb-1">Trumpsuit</h4>
-                    <p class="fs-5 text-primary" id="trumpsuit">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p>
+                    @if(gamelobby.getLogic.getCurrentRound.isEmpty) {
+                        <p class="fs-5 text-primary" id="trumpsuit">No Trumpsuit</p>
+                    }else {
+                        <p class="fs-5 text-primary" id="trumpsuit">@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" id="first-card-container">
-                        @if(gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) {
+                    @if(gamelobby.getLogic.getCurrentTrick.isDefined && gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) {
-                        @util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get) width="80px"/>
+                        @util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get)
-                        } else {
+                        width="80px"/>
+                    } else {
                         @views.html.render.card.apply("images/cards/1B.png")("Blank Card") width="80px"/>
-                        }
+                    }
                     </div>
                 </div>
             </div>
 
-            <div class="row justify-content-center g-2 mt-4 bottom-div" style="backdrop-filter: blur(4px); margin-left: 0; margin-right: 0;">
+            <div class="row justify-content-center g-2 mt-4 bottom-div" style="backdrop-filter: blur(4px);
+                margin-left: 0;
+                margin-right: 0;">
                 <div class="row justify-content-center ingame-cards-slide @{
                     !gamelobby.logic.getCurrentPlayer.contains(player) ? "inactive" |: ""
                 }" id="card-slide">
-                    @for(i <- player.currentHand().get.cards.indices) {
+                    @if(player.currentHand().isEmpty || player.currentHand().get.cards.isEmpty) {
-                    <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')">
+                    } else {
-                            @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
+                        @for(i <- player.currentHand().get.cards.indices) {
-                        </div>
+                            <div class="col-auto handcard" style="border-radius: 6px">
-                        @if(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')">
-                            <div class="mt-2">
+                                    @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
-                                <button class="btn btn-danger" onclick="handleSkipDogLife(this, '@gamelobby.id')">Skip Dog Life</button>
+                                </div>
+                                @if(player.isInDogLife) {
+                                    <div class="mt-2">
+                                        <button class="btn btn-danger" onclick="handleSkipDogLife(this, '@gamelobby.id')">
+                                            Skip Dog Life</button>
+                                    </div>
+                                }
                             </div>
                         }
-                    </div>
                     }
                 </div>
             </div>
@@ -93,15 +130,6 @@
     </main>
 </div>
 <script>
-        function waitForFunction(name, checkInterval = 100) {
+    connectWebSocket()
-            return new Promise(resolve => {
+    canPlayCard = @gamelobby.logic.getCurrentPlayer.contains(player);
-                const timer = setInterval(() => {
-                    if (typeof window[name] === "function") {
-                        clearInterval(timer);
-                        resolve(window[name]);
-                    }
-                }, checkInterval);
-            });
-        }
-        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
 </script>

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

@@ -10,44 +10,51 @@
                             <h3 class="mb-0">Select Trump Suit</h3>
                         </div>
                         <div class="card-body">
-                            @if(player.equals(gamelobby.logic.getCurrentMatch.get.roundlist.last.winner.get)) {
+                            @if(gamelobby.logic.getCurrentMatch.isDefined) {
-                                <div class="alert alert-info" role="alert" aria-live="polite">
+                                @if(player.equals(gamelobby.logic.getCurrentMatch.get.roundlist.last.winner.get)) {
-                                    You (@player.toString) won the last round. Choose the trump suit for the next round.
+                                    <div class="alert alert-info" role="alert" aria-live="polite">
-                                </div>
+                                        You (@player.toString) won the last round. Choose the trump suit for the next round.
+                                    </div>
 
-                                <div class="row justify-content-center col-auto mb-5">
+                                    <div class="row justify-content-center col-auto mb-5">
-                                    <div class="col-auto handcard">
+                                        <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"/>
+                                                @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)">
+                                                @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)">
+                                                @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)">
+                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs))
+                                                width="120px" style="border-radius: 6px"/>
+                                            </div>
                                         </div>
                                     </div>
-                                    <div class="col-auto handcard">
+                                    <div class="row justify-content-center ingame-cards-slide" id="card-slide">
-                                        <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="1" style="border-radius: 6px" onclick="handleTrumpSelection(this, '@gamelobby.id')">
-                                            @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')">
-                                            @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')">
-                                            @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs)) width="120px" style="border-radius: 6px"/>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="row justify-content-center ingame-cards-slide" 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>
+                                    </div>
-                            } else {
+                                } else {
-                                <div class="alert alert-warning" role="alert" aria-live="polite">
+                                    <div class="alert alert-warning" role="alert" aria-live="polite">
-                                    @gamelobby.logic.getCurrentMatch.get.roundlist.last.winner.get.name is choosing a trumpsuit. The new round will start once a suit is picked.
+                                        @gamelobby.logic.getCurrentMatch.get.roundlist.last.winner.get.name
-                                </div>
+                                        is choosing a trumpsuit. The new round will start once a suit is picked.
+                                    </div>
+                                }
                             }
                         </div>
                     </div>
@@ -57,15 +64,5 @@
     </div>
 </div>
 <script>
-        function waitForFunction(name, checkInterval = 100) {
+    connectWebSocket()
-            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'));
 </script>

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

@@ -13,9 +13,9 @@
                                 <p class="card-text">
                                     The last round was tied between:
                                     <span class="ms-1">
-                                    @for(players <- gamelobby.logic.playerTieLogic.getTiedPlayers) {
+                                        @for(players <- gamelobby.logic.playerTieLogic.getTiedPlayers) {
-                                        <span class="badge text-bg-secondary me-1">@players</span>
+                                            <span class="badge text-bg-secondary me-1">@players</span>
-                                    }
+                                        }
                                     </span>
                                 </p>
                             </div>
@@ -23,7 +23,10 @@
                             @if(player.equals(gamelobby.logic.playerTieLogic.currentTiePlayer())) {
                                 @defining(gamelobby.logic.playerTieLogic.highestAllowedNumber()) { maxNum =>
                                     <div class="alert alert-info" role="alert" aria-live="polite">
-                                        Pick a number between 1 and @{maxNum + 1}. 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>
 
                                     <div class="row g-2 align-items-center">
@@ -31,49 +34,21 @@
                                             <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 + 1}" 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 onclick="selectTie('@gamelobby.id')" class="btn btn-primary">Confirm</button>
+                                            <button onclick="selectTie('@gamelobby.id')" class="btn btn-primary">
+                                                Confirm</button>
                                         </div>
                                     </div>
                                     <h6 class="mt-4 mb-3">Currently Picked Cards</h6>
 
                                     <div id="cardsplayed" class="row g-3 justify-content-center">
-                                        @if(gamelobby.logic.playerTieLogic.getSelectedCard.nonEmpty) {
-                                            @for((player, card) <- gamelobby.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>@gamelobby.logic.playerTieLogic.currentTiePlayer()</strong> is currently picking a number for the cut.
-                                </div>
-
-                                <h6 class="mt-4 mb-3">Currently Picked Cards</h6>
-
-                                <div id="cardsplayed" class="row g-3 justify-content-center">
                                     @if(gamelobby.logic.playerTieLogic.getSelectedCard.nonEmpty) {
                                         @for((player, card) <- gamelobby.logic.playerTieLogic.getSelectedCard) {
-                                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
+                                            <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>
@@ -92,6 +67,38 @@
                                             </div>
                                         </div>
                                     }
+                                    </div>
+                                }
+                            } else {
+                                <div class="alert alert-warning" role="alert" aria-live="polite">
+                                    <strong>@gamelobby.logic.playerTieLogic.currentTiePlayer()</strong>
+                                    is currently picking a number for the cut.
+                                </div>
+
+                                <h6 class="mt-4 mb-3">Currently Picked Cards</h6>
+
+                                <div id="cardsplayed" class="row g-3 justify-content-center">
+                                @if(gamelobby.logic.playerTieLogic.getSelectedCard.nonEmpty) {
+                                    @for((player, card) <- gamelobby.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>
                             }
 
@@ -103,15 +110,5 @@
     </div>
 </div>
 <script>
-        function waitForFunction(name, checkInterval = 100) {
+    connectWebSocket()
-            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'));
 </script>

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

@@ -1,6 +1,35 @@
 @(user: Option[model.users.User], gamelobby: logic.game.GameLobby)
 
 <main class="lobby-background vh-100" id="lobbybackground">
+    <!-- Kick Modal -->
+    <div class="modal fade" data-backdrop="static" data-keyboard="false" data-focus="true" id="kickedModal" tabindex="-1" role="dialog" aria-labelledby="kickedModalTitle">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="kickedModalTitle">Kicked</h5>
+                </div>
+                <div class="modal-body">
+                    <p>You've been kicked from the lobby.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Session Closed Modal -->
+    <div class="modal fade" data-backdrop="static" data-keyboard="false" data-focus="true" id="sessionClosed" tabindex="-1" role="dialog" aria-labelledby="sessionClosedModalTitle">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="sessionClosedModalTitle">Session Closed</h5>
+                </div>
+                <div class="modal-body">
+                    <p>The session was closed.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Lobby -->
     <div class="container d-flex flex-column" style="height: calc(100vh - 1rem);">
         <div class="row">
             <div class="col">
@@ -14,7 +43,8 @@
         </div>
         <div class="row">
             <div class="col">
-                <div class="p-3 text-center fs-4" id="playerAmount">Playeramount: @gamelobby.getPlayers.size / @gamelobby.maxPlayers</div>
+                <div class="p-3 text-center fs-4" id="playerAmount">
+                    Players: @gamelobby.getPlayers.size / @gamelobby.maxPlayers</div>
             </div>
         </div>
         <div class="row justify-content-center align-items-center flex-grow-1">
@@ -30,7 +60,8 @@
                             <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')">Remove</div>
+                            <div class="btn btn-danger" onclick="handleKickPlayer('@playersession.id')">
+                                Remove</div>
                         }
                         </div>
                     </div>
@@ -38,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">
@@ -67,15 +98,5 @@
     </div>
 </main>
 <script>
-        function waitForFunction(name, checkInterval = 100) {
+    connectWebSocket()
-            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'));
 </script>

knockoutwhistweb/app/views/login/login.scala.html

@@ -35,6 +35,7 @@
         particlesJS.load('particles-js', 'assets/conf/particlesjs-config.json', function() {
             console.log('callback - particles.js config loaded');
         });
+        disconnectWebSocket();
 </script>
 <div id="particles-js" style="background-color: rgb(11, 8, 8);
     background-size: cover;

knockoutwhistweb/app/views/main.scala.html

@@ -1,8 +1,8 @@
 @*
- * This template is called from the `index` template. This template
+* This template is called from the `index` template. This template
- * handles the rendering of the page header and body tags. It takes
+* handles the rendering of the page header and body tags. It takes
- * two arguments, a `String` for the title of the page and an `Html`
+* two arguments, a `String` for the title of the page and an `Html`
- * object to insert into the body of the page.
+* object to insert into the body of the page.
 *@
 @(title: String)(content: Html)
 
@@ -18,13 +18,17 @@
         <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>
 
-    <body class="d-flex flex-column min-vh-100" id="main-body">
-            @* And here's where we render the `Html` object containing
-             * the page content. *@
-            @content
-    </body>
-    <script src="@routes.JavaScriptRoutingController.javascriptRoutes()" type="text/javascript"></script>
-    <script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></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>
+    <script src="@routes.Assets.versioned("javascripts/websocket.js")" type="text/javascript"></script>
+    <script src="@routes.Assets.versioned("javascripts/events.js")" type="text/javascript"></script>
+    <script src="@routes.Assets.versioned("javascripts/interact.js")" type="text/javascript"></script>
+    <script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script>
+
+    <body class="d-flex flex-column min-vh-100" id="main-body">
+        @* And here's where we render the `Html` object containing
+        * the page content. *@
+        @content
+    </body>
 </html>

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

@@ -11,20 +11,23 @@
             <input class="form-check-input" type="checkbox" id="visibilityswitch" disabled>
             <label class="form-check-label" for="visibilityswitch">public/private</label>
         </div>
-            <div class="mt-3">
+        <div class="mt-3">
-                <label for="playeramount" class="form-label">Playeramount:</label>
+            <label for="playeramount" class="form-label">Playeramount:</label>
-                <input type="range" class="form-range text-body" min="2" max="7" value="2" id="playeramount" name="playeramount">
+            <input type="range" class="form-range text-body" min="2" max="7" value="2" id="playeramount" name="playeramount">
-                <div class="d-flex justify-content-between">
+            <div class="d-flex justify-content-between">
-                    <span>2</span>
+                <span>2</span>
-                    <span>3</span>
+                <span>3</span>
-                    <span>4</span>
+                <span>4</span>
-                    <span>5</span>
+                <span>5</span>
-                    <span>6</span>
+                <span>6</span>
-                    <span>7</span>
+                <span>7</span>
-                </div>
             </div>
+        </div>
         <div class="mt-3 text-center">
             <div class="btn btn-success" onclick="createGameJS()">Create Game</div>
         </div>
     </div>
 </main>
+<script>
+            disconnectWebSocket();
+</script>

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

@@ -1,57 +1,61 @@
 @(user: Option[model.users.User])
-    <nav class="navbar navbar-expand-lg bg-body-tertiary navbar-drop-shadow">
+<nav class="navbar navbar-expand-lg bg-body-tertiary navbar-drop-shadow">
-        <div class="container d-flex justify-content-start">
+    <div class="container d-flex justify-content-start">
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navBar" aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navBar" aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
+            <span class="navbar-toggler-icon"></span>
-            </button>
+        </button>
-            <div class="collapse navbar-collapse justify-content-center" id="navBar">
+        <div class="collapse navbar-collapse justify-content-center" id="navBar">
-                <a class="navbar-brand ms-auto" href="@routes.MainMenuController.mainMenu()">
+            <a class="navbar-brand ms-auto" href="@routes.MainMenuController.mainMenu()">
-                    <img src="@routes.Assets.versioned("images/logo.png")" alt="Logo" width="30" height="20" class="d-inline-block align-text-top">
+                <img src="@routes.Assets.versioned("images/logo.png")" alt="Logo" width="30" height="20" class="d-inline-block align-text-top">
-                    KnockOutWhist
+                KnockOutWhist
-                </a>
+            </a>
-                <div class="navbar-nav me-auto mb-2 mb-lg-0">
+            <div class="navbar-nav me-auto mb-2 mb-lg-0">
-                    <ul class="navbar-nav mb-2 mb-lg-0">
+                <ul class="navbar-nav mb-2 mb-lg-0">
-                        @if(user.isDefined) {
+                    @if(user.isDefined) {
-                            <li class="nav-item">
-                                <a class="nav-link active" aria-current="page" onclick="navSpa('0', 'Knockout Whist - Create Game'); return false;" href="@routes.MainMenuController.mainMenu()">Create Game</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link disabled" aria-disabled="true">Lobbies</a>
-                            </li>
-                        }
                         <li class="nav-item">
-                            <a class="nav-link active" onclick="navSpa('1', 'Knockout Whist - Rules'); return false;" href="@routes.MainMenuController.rules()">Rules</a>
+                            <a class="nav-link active" aria-current="page" onclick="navSpa('0', 'Knockout Whist - Create Game'); return false;" href="@routes.MainMenuController.mainMenu()">
+                                Create Game</a>
                         </li>
-                    </ul>
+                        <li class="nav-item">
-                    <form class="navbar-nav me-auto mb-2 mb-lg-0" onsubmit="joinGame(); return false;">
+                            <a class="nav-link disabled" aria-disabled="true">Lobbies</a>
-                        <input class="form-control me-2" type="text" placeholder="Enter GameCode" id="gameId" aria-label="Join Game"/>
-                        <button class="btn btn-outline-success" type="submit">Join</button>
-                    </form>
-                </div>
-
-                @* Right side: profile dropdown if logged in, otherwise Login / Sign Up buttons *@
-                @if(user.isDefined) {
-                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                <img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="rounded-circle" width="30" height="30" />
-                                <span class="ms-2">@user.get.name</span>
-                            </a>
-                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profileDropdown">
-                                <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Stats</a></li>
-                                <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Settings</a></li>
-                                <li><hr class="dropdown-divider"></li>
-                                <li><a class="dropdown-item" href="@routes.UserController.logout()">Logout</a></li>
-                            </ul>
                         </li>
-                    </ul>
+                    }
-                } else {
+                    <li class="nav-item">
-                    <div class="d-flex ms-auto">
+                        <a class="nav-link active" onclick="navSpa('1', 'Knockout Whist - Rules'); return false;" href="@routes.MainMenuController.rules()">
-                        <a class="btn btn-outline-primary me-2" href="@routes.UserController.login()">Login</a>
+                            Rules</a>
-                        <a class="btn btn-primary" href="@routes.UserController.login()">Sign Up</a>
+                    </li>
-                    </div>
+                </ul>
-                }
+                <form class="navbar-nav me-auto mb-2 mb-lg-0" onsubmit="joinGame(); return false;">
-
+                    <input class="form-control me-2" type="text" placeholder="Enter GameCode" id="gameId" aria-label="Join Game"/>
+                    <button class="btn btn-outline-success" type="submit">Join</button>
+                </form>
             </div>
+
+            @* Right side: profile dropdown if logged in, otherwise Login / Sign Up buttons *@
+            @if(user.isDefined) {
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            <img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="rounded-circle" width="30" height="30" />
+                            <span class="ms-2">@user.get.name</span>
+                        </a>
+                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profileDropdown">
+                            <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">
+                                Stats</a></li>
+                            <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">
+                                Settings</a></li>
+                            <li><hr class="dropdown-divider"></li>
+                            <li><a class="dropdown-item" href="@routes.UserController.logout()">Logout</a></li>
+                        </ul>
+                    </li>
+                </ul>
+            } else {
+                <div class="d-flex ms-auto">
+                    <a class="btn btn-outline-primary me-2" href="@routes.UserController.login()">Login</a>
+                    <a class="btn btn-primary" href="@routes.UserController.login()">Sign Up</a>
+                </div>
+            }
+
         </div>
-    </nav>
+    </div>
+</nav>

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

@@ -1,177 +1,180 @@
 @(user: Option[model.users.User])
-    @navbar(user)
+@navbar(user)
 
-    <main class="lobby-background flex-grow-1">
+<main class="lobby-background flex-grow-1">
-        <div class="container my-4" style="max-width:980px;">
+    <div class="container my-4" style="max-width: 980px;">
-            <div class="card rules-card shadow-sm rounded-3 overflow-hidden">
+        <div class="card rules-card shadow-sm rounded-3 overflow-hidden">
-                <div class="card-header text-center py-3 border-0">
+            <div class="card-header text-center py-3 border-0">
-                    <h3 class="mb-0 rules-title">Game Rules Overview</h3>
+                <h3 class="mb-0 rules-title">Game Rules Overview</h3>
-                </div>
+            </div>
 
-                <div class="card-body p-0">
+            <div class="card-body p-0">
-                    <style>
+                <style>
 
-                    </style>
+                </style>
 
-                    <div class="accordion rules-accordion" id="rulesAccordion">
+                <div class="accordion rules-accordion" id="rulesAccordion">
-                        <div class="accordion-item">
+                    <div class="accordion-item">
-                            <h2 class="accordion-header" id="headingPlayers">
+                        <h2 class="accordion-header" id="headingPlayers">
-                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlayers" aria-expanded="true" aria-controls="collapsePlayers">
+                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlayers" aria-expanded="true" aria-controls="collapsePlayers">
-                                    Players
+                                Players
-                                </button>
+                            </button>
-                            </h2>
+                        </h2>
-                            <div id="collapsePlayers" class="accordion-collapse collapse show" aria-labelledby="headingPlayers" data-bs-parent="#rulesAccordion">
+                        <div id="collapsePlayers" class="accordion-collapse collapse show" aria-labelledby="headingPlayers" data-bs-parent="#rulesAccordion">
-                                <div class="accordion-body">
+                            <div class="accordion-body">
-                                    Two to seven players. The aim is to be the last player left in the game.
+                                Two to seven players. The aim is to be the last player left in the game.
-                                </div>
                             </div>
                         </div>
-
-                        <div class="accordion-item">
-                            <h2 class="accordion-header" id="headingAim">
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAim" aria-expanded="false" aria-controls="collapseAim">
-                                    Aim
-                                </button>
-                            </h2>
-                            <div id="collapseAim" class="accordion-collapse collapse" aria-labelledby="headingAim" data-bs-parent="#rulesAccordion">
-                                <div class="accordion-body">
-                                    To be the last player left at the end of the game, with the object in each hand being to win a majority of tricks.
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="accordion-item">
-                            <h2 class="accordion-header" id="headingEquipment">
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEquipment" aria-expanded="false" aria-controls="collapseEquipment">
-                                    Equipment
-                                </button>
-                            </h2>
-                            <div id="collapseEquipment" class="accordion-collapse collapse" aria-labelledby="headingEquipment" data-bs-parent="#rulesAccordion">
-                                <div class="accordion-body">
-                                    A standard 52-card pack is used.
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="accordion-item">
-                            <h2 class="accordion-header" id="headingRanks">
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRanks" aria-expanded="false" aria-controls="collapseRanks">
-                                    Card Ranks
-                                </button>
-                            </h2>
-                            <div id="collapseRanks" class="accordion-collapse collapse" aria-labelledby="headingRanks" data-bs-parent="#rulesAccordion">
-                                <div class="accordion-body">
-                                    In each suit, cards rank from highest to lowest: A K Q J 10 9 8 7 6 5 4 3 2.
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="accordion-item">
-                            <h2 class="accordion-header" id="headingDealFirst">
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDealFirst" aria-expanded="false" aria-controls="collapseDealFirst">
-                                    Deal (First Hand)
-                                </button>
-                            </h2>
-                            <div id="collapseDealFirst" class="accordion-collapse collapse" aria-labelledby="headingDealFirst" data-bs-parent="#rulesAccordion">
-                                <div class="accordion-body">
-                                    The dealer deals seven cards to each player. One card is turned up to determine the trump suit for the round.
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="accordion-item">
-                            <h2 class="accordion-header" id="headingDealSubsequent">
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDealSubsequent" aria-expanded="false" aria-controls="collapseDealSubsequent">
-                                    Deal (Subsequent Hands)
-                                </button>
-                            </h2>
-                            <div id="collapseDealSubsequent" class="accordion-collapse collapse" aria-labelledby="headingDealSubsequent" data-bs-parent="#rulesAccordion">
-                                <div class="accordion-body">
-                                    The deal rotates clockwise. The player who took the most tricks in the previous hand selects the trump suit. If there's a tie, players cut cards to decide who calls trumps. One fewer card is dealt in each successive hand until the final hand consists of one card each.
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="accordion-item">
-                            <h2 class="accordion-header" id="headingPlay">
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlay" aria-expanded="false" aria-controls="collapsePlay">
-                                    Play
-                                </button>
-                            </h2>
-                            <div id="collapsePlay" class="accordion-collapse collapse" aria-labelledby="headingPlay" data-bs-parent="#rulesAccordion">
-                                <div class="accordion-body">
-                                    The player to the dealer's left (eldest hand) leads the first trick. Any card can be led. Other players must follow suit if possible. A player with no cards of the suit led may play any card.
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="accordion-item">
-                            <h2 class="accordion-header" id="headingWinningTrick">
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWinningTrick" aria-expanded="false" aria-controls="collapseWinningTrick">
-                                    Winning a Trick
-                                </button>
-                            </h2>
-                            <div id="collapseWinningTrick" class="accordion-collapse collapse" aria-labelledby="headingWinningTrick" data-bs-parent="#rulesAccordion">
-                                <div class="accordion-body">
-                                    The highest card of the suit led wins, unless a trump is played, in which case the highest trump wins. The winner of the trick leads the next.
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="accordion-item">
-                            <h2 class="accordion-header" id="headingLeadingTrumps">
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLeadingTrumps" aria-expanded="false" aria-controls="collapseLeadingTrumps">
-                                    Leading Trumps
-                                </button>
-                            </h2>
-                            <div id="collapseLeadingTrumps" class="accordion-collapse collapse" aria-labelledby="headingLeadingTrumps" data-bs-parent="#rulesAccordion">
-                                <div class="accordion-body">
-                                    Some rules disallow leading trumps before the suit has been 'broken' (a trump has been played to the lead of another suit). Leading trumps is always permissible if a player holds only trumps.
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="accordion-item">
-                            <h2 class="accordion-header" id="headingKnockout">
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseKnockout" aria-expanded="false" aria-controls="collapseKnockout">
-                                    Knockout
-                                </button>
-                            </h2>
-                            <div id="collapseKnockout" class="accordion-collapse collapse" aria-labelledby="headingKnockout" data-bs-parent="#rulesAccordion">
-                                <div class="accordion-body">
-                                    At the end of each hand, any player who took no tricks is knocked out and takes no further part in the game.
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="accordion-item">
-                            <h2 class="accordion-header" id="headingWinningGame">
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWinningGame" aria-expanded="false" aria-controls="collapseWinningGame">
-                                    Winning the Game
-                                </button>
-                            </h2>
-                            <div id="collapseWinningGame" class="accordion-collapse collapse" aria-labelledby="headingWinningGame" data-bs-parent="#rulesAccordion">
-                                <div class="accordion-body">
-                                    The game is won when a player takes all the tricks in a round, as all other players are knocked out, leaving only one player remaining.
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="accordion-item">
-                            <h2 class="accordion-header" id="headingDogLife">
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDogLife" aria-expanded="false" aria-controls="collapseDogLife">
-                                    Dog Life
-                                </button>
-                            </h2>
-                            <div id="collapseDogLife" class="accordion-collapse collapse" aria-labelledby="headingDogLife" data-bs-parent="#rulesAccordion">
-                                <div class="accordion-body">
-                                    The first player who takes no tricks is awarded a \"dog's life\". In the next hand, that player is dealt one card and can decide which trick to play it to. Each time a trick is played the dog may either play the card or knock on the table and wait to play it later. If the dog wins a trick, the player to the left leads the next and the dog re-enters the game properly in the next hand. If the dog fails, they are knocked out.
-                                </div>
-                            </div>
-                        </div>
-
                     </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingAim">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAim" aria-expanded="false" aria-controls="collapseAim">
+                                Aim
+                            </button>
+                        </h2>
+                        <div id="collapseAim" class="accordion-collapse collapse" aria-labelledby="headingAim" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                To be the last player left at the end of the game, with the object in each hand being to win a majority of tricks.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingEquipment">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEquipment" aria-expanded="false" aria-controls="collapseEquipment">
+                                Equipment
+                            </button>
+                        </h2>
+                        <div id="collapseEquipment" class="accordion-collapse collapse" aria-labelledby="headingEquipment" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                A standard 52-card pack is used.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingRanks">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRanks" aria-expanded="false" aria-controls="collapseRanks">
+                                Card Ranks
+                            </button>
+                        </h2>
+                        <div id="collapseRanks" class="accordion-collapse collapse" aria-labelledby="headingRanks" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                In each suit, cards rank from highest to lowest: A K Q J 10 9 8 7 6 5 4 3 2.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingDealFirst">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDealFirst" aria-expanded="false" aria-controls="collapseDealFirst">
+                                Deal (First Hand)
+                            </button>
+                        </h2>
+                        <div id="collapseDealFirst" class="accordion-collapse collapse" aria-labelledby="headingDealFirst" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                The dealer deals seven cards to each player. One card is turned up to determine the trump suit for the round.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingDealSubsequent">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDealSubsequent" aria-expanded="false" aria-controls="collapseDealSubsequent">
+                                Deal (Subsequent Hands)
+                            </button>
+                        </h2>
+                        <div id="collapseDealSubsequent" class="accordion-collapse collapse" aria-labelledby="headingDealSubsequent" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                The deal rotates clockwise. The player who took the most tricks in the previous hand selects the trump suit. If there's a tie, players cut cards to decide who calls trumps. One fewer card is dealt in each successive hand until the final hand consists of one card each.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingPlay">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlay" aria-expanded="false" aria-controls="collapsePlay">
+                                Play
+                            </button>
+                        </h2>
+                        <div id="collapsePlay" class="accordion-collapse collapse" aria-labelledby="headingPlay" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                The player to the dealer's left (eldest hand) leads the first trick. Any card can be led. Other players must follow suit if possible. A player with no cards of the suit led may play any card.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingWinningTrick">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWinningTrick" aria-expanded="false" aria-controls="collapseWinningTrick">
+                                Winning a Trick
+                            </button>
+                        </h2>
+                        <div id="collapseWinningTrick" class="accordion-collapse collapse" aria-labelledby="headingWinningTrick" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                The highest card of the suit led wins, unless a trump is played, in which case the highest trump wins. The winner of the trick leads the next.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingLeadingTrumps">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLeadingTrumps" aria-expanded="false" aria-controls="collapseLeadingTrumps">
+                                Leading Trumps
+                            </button>
+                        </h2>
+                        <div id="collapseLeadingTrumps" class="accordion-collapse collapse" aria-labelledby="headingLeadingTrumps" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                Some rules disallow leading trumps before the suit has been 'broken' (a trump has been played to the lead of another suit). Leading trumps is always permissible if a player holds only trumps.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingKnockout">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseKnockout" aria-expanded="false" aria-controls="collapseKnockout">
+                                Knockout
+                            </button>
+                        </h2>
+                        <div id="collapseKnockout" class="accordion-collapse collapse" aria-labelledby="headingKnockout" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                At the end of each hand, any player who took no tricks is knocked out and takes no further part in the game.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingWinningGame">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWinningGame" aria-expanded="false" aria-controls="collapseWinningGame">
+                                Winning the Game
+                            </button>
+                        </h2>
+                        <div id="collapseWinningGame" class="accordion-collapse collapse" aria-labelledby="headingWinningGame" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                The game is won when a player takes all the tricks in a round, as all other players are knocked out, leaving only one player remaining.
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header" id="headingDogLife">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDogLife" aria-expanded="false" aria-controls="collapseDogLife">
+                                Dog Life
+                            </button>
+                        </h2>
+                        <div id="collapseDogLife" class="accordion-collapse collapse" aria-labelledby="headingDogLife" data-bs-parent="#rulesAccordion">
+                            <div class="accordion-body">
+                                The first player who takes no tricks is awarded a \"dog's life\". In the next hand, that player is dealt one card and can decide which trick to play it to. Each time a trick is played the dog may either play the card or knock on the table and wait to play it later. If the dog wins a trick, the player to the left leads the next and the dog re-enters the game properly in the next hand. If the dog fails, they are knocked out.
+                            </div>
+                        </div>
+                    </div>
+
                 </div>
             </div>
         </div>
-    </main>
+    </div>
+</main>
+<script>
+        disconnectWebSocket();
+</script>

knockoutwhistweb/conf/logback.xml

@@ -5,46 +5,48 @@
 <!DOCTYPE configuration>
 
 <configuration>
-  <import class="ch.qos.logback.classic.encoder.PatternLayoutEncoder"/>
+    <import class="ch.qos.logback.classic.encoder.PatternLayoutEncoder" />
-  <import class="ch.qos.logback.classic.AsyncAppender"/>
+    <import class="ch.qos.logback.classic.AsyncAppender" />
-  <import class="ch.qos.logback.core.FileAppender"/>
+    <import class="ch.qos.logback.core.FileAppender" />
-  <import class="ch.qos.logback.core.ConsoleAppender"/>
+    <import class="ch.qos.logback.core.ConsoleAppender" />
 
-  <appender name="FILE" class="FileAppender">
+    <appender name="FILE" class="FileAppender">
-    <file>${application.home:-.}/logs/application.log</file>
+        <file>${application.home:-.}/logs/application.log</file>
-    <encoder class="PatternLayoutEncoder">
+        <encoder class="PatternLayoutEncoder">
-      <charset>UTF-8</charset>
+            <charset>UTF-8</charset>
-      <pattern>%d{yyyy-MM-dd HH:mm:ss} %highlight(%-5level) %cyan(%logger{36}) %magenta(%X{pekkoSource}) %msg%n</pattern>
+            <pattern>%d{yyyy-MM-dd HH:mm:ss} %highlight(%-5level) %cyan(%logger{36}) %magenta(%X{pekkoSource}) %msg%n
-    </encoder>
+            </pattern>
-  </appender>
+        </encoder>
+    </appender>
 
-  <appender name="STDOUT" class="ConsoleAppender">
+    <appender name="STDOUT" class="ConsoleAppender">
-    <!--
+        <!--
-         On Windows, enabling Jansi is recommended to benefit from color code interpretation on DOS command prompts,
+             On Windows, enabling Jansi is recommended to benefit from color code interpretation on DOS command prompts,
-         which otherwise risk being sent ANSI escape sequences that they cannot interpret.
+             which otherwise risk being sent ANSI escape sequences that they cannot interpret.
-         See https://logback.qos.ch/manual/layouts.html#coloring
+             See https://logback.qos.ch/manual/layouts.html#coloring
-    -->
+        -->
-    <!-- <withJansi>true</withJansi> -->
+        <!-- <withJansi>true</withJansi> -->
-    <encoder class="PatternLayoutEncoder">
+        <encoder class="PatternLayoutEncoder">
-      <charset>UTF-8</charset>
+            <charset>UTF-8</charset>
-      <pattern>%d{yyyy-MM-dd HH:mm:ss} %highlight(%-5level) %cyan(%logger{36}) %magenta(%X{pekkoSource}) %msg%n</pattern>
+            <pattern>%d{yyyy-MM-dd HH:mm:ss} %highlight(%-5level) %cyan(%logger{36}) %magenta(%X{pekkoSource}) %msg%n
-    </encoder>
+            </pattern>
-  </appender>
+        </encoder>
+    </appender>
 
-  <appender name="ASYNCFILE" class="AsyncAppender">
+    <appender name="ASYNCFILE" class="AsyncAppender">
-    <appender-ref ref="FILE"/>
+        <appender-ref ref="FILE" />
-  </appender>
+    </appender>
 
-  <appender name="ASYNCSTDOUT" class="AsyncAppender">
+    <appender name="ASYNCSTDOUT" class="AsyncAppender">
-    <appender-ref ref="STDOUT"/>
+        <appender-ref ref="STDOUT" />
-  </appender>
+    </appender>
 
-  <logger name="play" level="INFO"/>
+    <logger name="play" level="INFO" />
-  <logger name="application" level="DEBUG"/>
+    <logger name="application" level="DEBUG" />
 
-  <root level="WARN">
+    <root level="WARN">
-    <appender-ref ref="ASYNCFILE"/>
+        <appender-ref ref="ASYNCFILE" />
-    <appender-ref ref="ASYNCSTDOUT"/>
+        <appender-ref ref="ASYNCSTDOUT" />
-  </root>
+    </root>
 
 </configuration>

knockoutwhistweb/conf/routes

@@ -4,38 +4,27 @@
 # ~~~~
 
 # For the javascript routing
-GET     /assets/js/routes                   controllers.JavaScriptRoutingController.javascriptRoutes()
+GET         /assets/js/routes        controllers.JavaScriptRoutingController.javascriptRoutes()
 # Primary routes
-GET     /                                   controllers.MainMenuController.index()
+GET         /                        controllers.MainMenuController.index()
-GET     /assets/*file                       controllers.Assets.versioned(path="/public", file: Asset)
+GET         /assets/*file            controllers.Assets.versioned(path="/public", file: Asset)
 
 # Main menu routes
-GET     /mainmenu                           controllers.MainMenuController.mainMenu()
+GET         /mainmenu                controllers.MainMenuController.mainMenu()
-GET     /rules                              controllers.MainMenuController.rules()
+GET         /rules                   controllers.MainMenuController.rules()
-GET     /navSPA/:pType                      controllers.MainMenuController.navSPA(pType)
+GET         /navSPA/:pType           controllers.MainMenuController.navSPA(pType)
 
-POST    /createGame                         controllers.MainMenuController.createGame()
+POST        /createGame              controllers.MainMenuController.createGame()
-POST    /joinGame                           controllers.MainMenuController.joinGame()
+POST        /joinGame                controllers.MainMenuController.joinGame()
 
 # User authentication routes
-GET     /login                              controllers.UserController.login()
+GET         /login                   controllers.UserController.login()
-POST    /login                              controllers.UserController.login_Post()
+POST        /login                   controllers.UserController.login_Post()
 
-GET     /logout                             controllers.UserController.logout()
+GET         /logout                  controllers.UserController.logout()
 
 # In-game routes
-GET    /game/:id                            controllers.IngameController.game(id: String)
+GET         /game/:id                controllers.IngameController.game(id: String)
-POST    /game/:id/start                      controllers.IngameController.startGame(id: String)
-POST    /game/:id/kickPlayer/:playerToKick  controllers.IngameController.kickPlayer(id: String, playerToKick: String)
 
-POST    /game/:id/trump                     controllers.IngameController.playTrump(id: String)
+# Websocket
-POST    /game/:id/tie                       controllers.IngameController.playTie(id: String)
+GET         /websocket               controllers.WebsocketController.socket()
-
-GET     /game/:id/leaveGame                 controllers.IngameController.leaveGame(id: String)
-POST   /game/:id/playCard                   controllers.IngameController.playCard(id: String)
-POST   /game/:id/dogPlayCard                controllers.IngameController.playDogCard(id: String)
-
-POST   /game/:id/returnToLobby              controllers.IngameController.returnToLobby(id: String)
-
-# Polling
-GET    /polling/:gameId                     controllers.PollingController.polling(gameId: String)

knockoutwhistweb/public/javascripts/events.js

@@ -0,0 +1,333 @@
+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;
+    const hand = eventData.hand;
+
+    const handElement = $('#card-slide');
+    handElement.addClass('ingame-cards-slide')
+
+    let newHtml = '';
+
+    //Build Hand Container
+    hand.forEach((card) => {
+        //Data
+        const idx = card.idx;
+        const cardS = card.card;
+
+        const cardHtml = `
+                        <div class="col-auto handcard" style="border-radius: 6px">
+                            <div class="btn btn-outline-light p-0 border-0 shadow-none" 
+                                 data-card-id="${idx}" 
+                                 style="border-radius: 6px" 
+                                 onclick="handlePlayCard(this, '${dog}')">
+                                
+                                <img src="/assets/images/cards/${cardS}.png" width="120px" style="border-radius: 6px" alt="${cardS}"/>
+                            </div>
+                        </div>
+                    `;
+        newHtml += cardHtml;
+    });
+
+    //Build dog if needed
+    if (dog) {
+        newHtml += `
+                        <div class="mt-2">
+                            <button class="btn btn-danger" onclick="handleSkipDogLife(this)">Skip Turn</button>
+                        </div>
+                    `;
+    }
+    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;
+    const title = eventData.title || 'Knockout Whist';
+    const url = eventData.url || null;
+
+    exchangeBody(content, title, url);
+}
+function receiveCardPlayedEvent(eventData) {
+    const firstCard = eventData.firstCard;
+    const playedCards = eventData.playedCards;
+
+    const trickCardsContainer = $('#trick-cards-container');
+    const firstCardContainer = $('#first-card-container')
+
+    let trickHTML = '';
+    playedCards.forEach(cardCombo => {
+        trickHTML += `
+                            <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">
+                                        <img src="/assets/images/cards/${cardCombo.cardId}.png" width="100%" alt="${cardCombo.cardId}"/>
+                                    </div>
+                                    <div class="card-body p-2 bg-transparent">
+                                        <small class="fw-semibold text-secondary">${cardCombo.player}</small>
+                                    </div>
+                                </div>
+                            </div>
+                        `;
+    });
+    trickCardsContainer.html(trickHTML);
+
+    let altText;
+    let imageSrc;
+    if (firstCard === "BLANK") {
+        imageSrc = "/assets/images/cards/1B.png";
+        altText = "Blank Card";
+    } else {
+        imageSrc = `/assets/images/cards/${firstCard}.png`;
+        altText = `Card ${firstCard}`;
+    }
+
+    const newFirstCardHTML = `
+                        <img src="${imageSrc}" alt="${altText}" width="80px" style="border-radius: 6px"/>
+                    `;
+    firstCardContainer.html(newFirstCardHTML);
+}
+function receiveLobbyUpdateEvent(eventData) {
+    const host = eventData.host;
+    const maxPlayers = eventData.maxPlayers;
+    const players = eventData.players;
+
+    const lobbyPlayersContainer = $('#players');
+    const playerAmountBox = $('#playerAmount');
+
+    let newHtml = ''
+
+    if (host) {
+        players.forEach(user => {
+
+            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="handleKickPlayer('${user.id}')">Remove</div>`
+
+            newHtml += `<div class="col-auto my-auto m-3">
+                            <div class="card" style="width: 18rem;">
+                                <img src="/assets/images/profile.png" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
+                                <div class="card-body">
+                                    ${inner}
+                                </div>
+                            </div>
+                        </div>`
+        })
+    } else {
+        players.forEach(user => {
+
+            const inner = user.self ? `<h5 class="card-title">${user.name} (You)</h5>` : `    <h5 class="card-title">${user.name}</h5>`
+
+            newHtml += `<div class="col-auto my-auto m-3">
+                            <div class="card" style="width: 18rem;">
+                                <img src="/assets/images/profile.png" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
+                                <div class="card-body">
+                                    ${inner}
+                                </div>
+                            </div>
+                        </div>`
+        })
+    }
+
+    lobbyPlayersContainer.html(newHtml);
+    playerAmountBox.text(`Players: ${players.length} / ${maxPlayers}`);
+
+}
+function receiveKickEvent(eventData) {
+    $('#kickedModal').modal({
+        backdrop: 'static',
+        keyboard: false
+    }).modal('show');
+
+    setTimeout(() => {
+        receiveGameStateChange(eventData)
+    }, 5000);
+}
+function receiveSessionClosedEvent(eventData) {
+    $('#sessionClosed').modal({
+        backdrop: 'static',
+        keyboard: false
+    }).modal('show');
+
+    setTimeout(() => {
+        receiveGameStateChange(eventData)
+    }, 5000);
+}
+
+
+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

@@ -0,0 +1,82 @@
+function handlePlayCard(card, dog) {
+
+    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 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/main.js

@@ -79,206 +79,6 @@
     })
 })()
 
-let polling = false;
-function pollForUpdates(gameId) {
-    if (polling) {
-        console.log("[DEBUG] Polling already in progress. Skipping this cycle.");
-        return;
-    }
-    polling = true;
-    console.log(`[DEBUG] Starting poll cycle for Game ID: ${gameId} at ${new Date().toISOString()}`);
-    if (!gameId) {
-        console.error("[DEBUG] Game ID is missing. Stopping poll.");
-        return;
-    }
-    const $handElement = $('#card-slide');
-    const $lobbyElement = $('#lobbybackground');
-    const $mainmenuElement = $('#main-menu-screen')
-    const $mainbody = $('#main-body')
-    if (!$handElement.length && !$lobbyElement.length && !$mainmenuElement.length && !$mainbody.length) {
-        setTimeout(() => { polling = false; pollForUpdates(gameId) }, 1000);
-        return;
-    }
-    const route = jsRoutes.controllers.PollingController.polling(gameId);
-    $.ajax({
-        url: route.url,
-        type: 'GET',
-        dataType: 'json',
-
-        success: (data => {
-            if (!data) {
-                console.log("[DEBUG] Received 204 No Content (Timeout). Restarting poll.");
-                return;
-            }
-            if (data.status === "cardPlayed" && data.handData) {
-                console.log("Event received: Card played. Redrawing hand.");
-                const newHand = data.handData;
-                let newHandHTML = '';
-                $handElement.empty();
-
-                if(data.animation) {
-                        $handElement.addClass('ingame-cards-slide');
-                } else {
-                    $handElement.removeClass('ingame-cards-slide');
-                }
-
-                const dog = data.dog;
-
-                newHand.forEach((cardId, index) => {
-                    const cardHtml = `
-                        <div class="col-auto handcard" style="border-radius: 6px">
-                            <div class="btn btn-outline-light p-0 border-0 shadow-none" 
-                                 data-card-id="${index}" 
-                                 style="border-radius: 6px" 
-                                 onclick="handlePlayCard(this, '${gameId}', '${dog}')">
-                                
-                                <img src="/assets/images/cards/${cardId}.png" width="120px" style="border-radius: 6px"/>
-                            </div>
-                        </div>
-                    `;
-                    newHandHTML += cardHtml;
-                });
-
-                if (dog) {
-                    newHandHTML += `
-                        <div class="mt-2">
-                            <button class="btn btn-danger" onclick="handleSkipDogLife(this, '${gameId}')">Skip Dog Life</button>
-                        </div>
-                    `;
-                }
-
-                $handElement.html(newHandHTML);
-
-                if (data.yourTurn) {
-                    $handElement.removeClass('inactive');
-                } else {
-                    $handElement.addClass('inactive');
-                }
-
-                $('#current-player-name').text(data.currentPlayerName)
-                if (data.nextPlayer) {
-                    $('#next-player-name').text(data.nextPlayer);
-                } else if (nextPlayerElement) {
-                    $('#next-player-name').text("");
-                } else {
-                    console.warn("[DEBUG] 'current-player-name' element missing in DOM");
-                }
-                    $('#trump-suit').text(data.trumpSuit);
-                if ($('#trick-cards-container').length) {
-                    let trickHTML = '';
-
-                    data.trickCards.forEach(trickCard => {
-                        trickHTML += `
-                            <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">
-                                        <img src="/assets/images/cards/${trickCard.cardId}.png" width="100%"/>
-                                    </div>
-                                    <div class="card-body p-2 bg-transparent">
-                                        <small class="fw-semibold text-secondary">${trickCard.player}</small>
-                                    </div>
-                                </div>
-                            </div>
-                        `;
-                    });
-                    $('#trick-cards-container').html(trickHTML);
-                }
-                if ($('#score-table-body').length && data.scoreTable) {
-                    let scoreHTML = '';
-                    scoreHTML += `<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>`
-                    data.scoreTable.forEach(score => {
-                        scoreHTML += `
-                            <div class="d-flex justify-content-between score-row pt-1">
-                                <div style="width: 50%" class="text-truncate">${score.name}</div>
-                                <div style="width: 50%">${score.tricks}</div>
-                            </div>
-                        `;
-                    });
-                    $('#score-table-body').html(scoreHTML);
-                }
-                const cardId = data.firstCardId;
-                if ($('#first-card-container').length) {
-                    let imageSrc = '';
-                    let altText = 'First Card';
-
-                    if (cardId === "BLANK") {
-                        imageSrc = "/assets/images/cards/1B.png";
-                        altText = "Blank Card";
-                    } else {
-                        imageSrc = `/assets/images/cards/${cardId}.png`;
-                    }
-
-                    const newImageHTML = `
-                        <img src="${imageSrc}" alt="${altText}" width="80px" style="border-radius: 6px"/>
-                    `;
-
-                    $('#first-card-container').html(newImageHTML);
-                }
-            } else if (data.status === "reloadEvent") {
-                console.log("[DEBUG] Reload event received. Redirecting...");
-                exchangeBody(data.content, "Knockout Whist - Ingame", data.redirectUrl);
-            }
-            else if (data.status === "lobbyUpdate") {
-                console.log("[DEBUG] Entering 'lobbyUpdate' logic.");
-                let newHtml = ''
-
-                if (data.host) {
-                    data.users.forEach(user => {
-
-                        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('${gameId}', '${user.id}')">Remove</div>`
-
-                        newHtml += `<div class="col-auto my-auto m-3">
-                                            <div class="card" style="width: 18rem;">
-                                                <img src="/assets/images/profile.png" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
-                                                <div class="card-body">
-                                                    ${inner}
-                                                </div>
-                                            </div>
-                                        </div>`
-                    })
-                } else {
-                    data.users.forEach(user => {
-
-                        const inner = user.self ? `<h5 class="card-title">${user.name} (You)</h5>` : `    <h5 class="card-title">${user.name}</h5>`
-
-                        newHtml += `<div class="col-auto my-auto m-3">
-                                            <div class="card" style="width: 18rem;">
-                                                <img src="/assets/images/profile.png" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
-                                                <div class="card-body">
-                                                    ${inner}
-                                                </div>
-                                            </div>
-                                        </div>`
-                    })
-                }
-                $("#players").html(newHtml);
-                $('#playerAmount').text(`Playeramount: ${data.users.length} / ${data.maxPlayers}`);
-            } else {
-                console.warn(`[DEBUG] Received unknown status: ${data.status}`);
-            }
-        }),
-        error: ((jqXHR, textStatus, errorThrown) => {
-            if (jqXHR.status >= 400) {
-                console.error(`Server error: ${jqXHR.status}, ${errorThrown}`);
-            }
-            else {
-                console.error(`Something unexpected happened while polling. ${jqXHR.status}, ${errorThrown}`)
-            }
-        }),
-        complete: (() => {
-            setTimeout(() => { polling = false; pollForUpdates(gameId) }, 200);
-        })
-    })
-}
-
 function createGameJS() {
     let lobbyName = $('#lobbyname').val();
     if ($.trim(lobbyName) === "") {
@@ -291,26 +91,6 @@ function createGameJS() {
     sendGameCreationRequest(jsonObj);
 }
 
-function backToLobby(gameId) {
-    const route = jsRoutes.controllers.IngameController.returnToLobby(gameId);
-
-    $.ajax({
-        url: route.url,
-        type: route.type,
-        contentType: 'application/json',
-        dataType: 'json',
-        error: ((jqXHR) => {
-            const errorData = JSON.parse(jqXHR.responseText);
-            if (errorData && errorData.errorMessage) {
-                alert(`${errorData.errorMessage}`);
-            } else {
-                alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
-            }
-        })
-    })
-
-}
-
 function sendGameCreationRequest(dataObject) {
     const route = jsRoutes.controllers.MainMenuController.createGame();
 
@@ -344,60 +124,6 @@ function exchangeBody(content, title = "Knockout Whist", url = null) {
     document.title = title;
 }
 
-function startGame(gameId) {
-    sendGameStartRequest(gameId)
-}
-
-function sendGameStartRequest(gameId) {
-    const route = jsRoutes.controllers.IngameController.startGame(gameId);
-
-    $.ajax({
-        url: route.url,
-        type: route.type,
-        dataType: 'json',
-        success: (data => {
-            if (data.status === 'success') {
-                window.location.href = data.redirectUrl;
-            }
-        }),
-        error: ((jqXHR) => {
-            const errorData = JSON.parse(jqXHR.responseText);
-            if (errorData && errorData.errorMessage) {
-                alert(`${errorData.errorMessage}`);
-            } else {
-                alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
-            }
-        })
-    })
-}
-function removePlayer(gameid, playersessionId) {
-    sendRemovePlayerRequest(gameid, playersessionId)
-}
-
-function sendRemovePlayerRequest(gameId, playersessionId) {
-    const route = jsRoutes.controllers.IngameController.kickPlayer(gameId, playersessionId);
-
-    $.ajax({
-        url: route.url,
-        type: route.type,
-        contentType: 'application/json',
-        dataType: 'json',
-        success: (data => {
-            if (data.status === 'success') {
-                window.location.href = data.redirectUrl;
-            }
-        }),
-        error: ((jqXHR) => {
-            const errorData = JSON.parse(jqXHR.responseText);
-            if (errorData && errorData.errorMessage) {
-                alert(`${errorData.errorMessage}`);
-            } else {
-                alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
-            }
-        })
-    })
-}
-
 function login() {
     const username = $('#username').val();
     const password = $('#password').val();
@@ -423,7 +149,7 @@ function login() {
         }),
         error: ((jqXHR) => {
             const errorData = JSON.parse(jqXHR.responseText);
-            if (errorData && errorData.errorMessage) {
+            if (errorData?.errorMessage) {
                 alert(`${errorData.errorMessage}`);
             } else {
                 alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
@@ -455,7 +181,7 @@ function joinGame() {
         }),
         error: ((jqXHR) => {
             const errorData = JSON.parse(jqXHR.responseText);
-            if (errorData && errorData.errorMessage) {
+            if (errorData?.errorMessage) {
                 alert(`${errorData.errorMessage}`);
             } else {
                 alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
@@ -482,7 +208,7 @@ function navSpa(page, title) {
         }),
         error: ((jqXHR) => {
             const errorData = JSON.parse(jqXHR.responseText);
-            if (errorData && errorData.errorMessage) {
+            if (errorData?.errorMessage) {
                 alert(`${errorData.errorMessage}`);
             } else {
                 alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
@@ -493,175 +219,4 @@ function navSpa(page, title) {
 }
 
 
-function selectTie(gameId) {
+globalThis.exchangeBody = exchangeBody;
-    const route = jsRoutes.controllers.IngameController.playTie(gameId);
-    const jsonObj = {
-        tie: $('#tieNumber').val()
-    };
-
-    $.ajax({
-        url: route.url,
-        type: route.type,
-        contentType: 'application/json',
-        dataType: 'json',
-        data: JSON.stringify(jsonObj),
-        error: (jqXHR => {
-            let error;
-            try {
-                error = JSON.parse(jqXHR.responseText);
-            } catch (e) {
-                console.error("Failed to parse error response:", e);
-            }
-            if (error?.errorMessage) {
-                alert(`${error.errorMessage}`);
-            } else {
-                alert('An unexpected error occurred. Please try again.');
-            }
-        })
-    })
-}
-
-function leaveGame(gameId) {
-    sendLeavePlayerRequest(gameId)
-}
-
-function sendLeavePlayerRequest(gameId) {
-    const route = jsRoutes.controllers.IngameController.leaveGame(gameId);
-    $.ajax({
-        url: route.url,
-        type: route.type,
-        dataType: 'json',
-        error: ((jqXHR) => {
-            const errorData = JSON.parse(jqXHR.responseText);
-            if (errorData && errorData.errorMessage) {
-                alert(`${errorData.errorMessage}`);
-            } else {
-                alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
-            }
-        })
-    })
-}
-
-function handleTrumpSelection(cardobject, gameId) {
-    const trumpId = cardobject.dataset.trump;
-    const jsonObj = {
-        trump: trumpId
-    }
-
-    const route = jsRoutes.controllers.IngameController.playTrump(gameId);
-
-    $.ajax({
-        url: route.url,
-        type: route.type,
-        contentType: 'application/json',
-        dataType: 'json',
-        data: JSON.stringify(jsonObj),
-        error: (jqXHR => {
-            let error;
-            try {
-                error = JSON.parse(jqXHR.responseText);
-            } catch (e) {
-                console.error("Failed to parse error response:", e);
-            }
-            if (error?.errorMessage) {
-                alert(`${error.errorMessage}`);
-            } else {
-                alert('An unexpected error occurred. Please try again.');
-            }
-        })
-    })
-}
-
-function handlePlayCard(cardobject, gameId, dog = false) {
-    const cardId = cardobject.dataset.cardId;
-    const jsonObj = {
-        cardID: cardId
-    }
-    sendPlayCardRequest(jsonObj, gameId, cardobject, dog)
-}
-
-function handleSkipDogLife(cardobject, gameId) {
-
-    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 route = jsRoutes.controllers.IngameController.playDogCard(gameId);
-
-    $.ajax({
-        url: route.url,
-        type: route.type,
-        contentType: 'application/json',
-        dataType: 'json',
-        data: JSON.stringify({
-            cardID: 'skip'
-        }),
-        error: (jqXHR => {
-            let error;
-            try {
-                error = JSON.parse(jqXHR.responseText);
-            } catch (e) {
-                console.error("Failed to parse error response:", e);
-            }
-            if (error?.errorMessage.includes("You can't skip this round!")) {
-                cardobject.parentElement.animate(wiggleKeyframes, wiggleTiming);
-            } else if (error?.errorMessage) {
-                alert(`${error.errorMessage}`);
-            } else {
-                alert('An unexpected error occurred. Please try again.');
-            }
-        })
-    })
-}
-
-function sendPlayCardRequest(jsonObj, gameId, cardobject, dog) {
-    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 route = dog === "true" ? jsRoutes.controllers.IngameController.playDogCard(gameId) : jsRoutes.controllers.IngameController.playCard(gameId);
-
-    $.ajax({
-        url: route.url,
-        type: route.type,
-        contentType: 'application/json',
-        dataType: 'json',
-        data: JSON.stringify(jsonObj),
-        error: (jqXHR => {
-            try {
-                error = JSON.parse(jqXHR.responseText);
-            } catch (e) {
-                console.error("Failed to parse error response:", e);
-            }
-            if (error?.errorMessage.includes("You can't play this card!")) {
-                cardobject.parentElement.animate(wiggleKeyframes, wiggleTiming);
-            } else if (error?.errorMessage) {
-                alert(`${error.errorMessage}`);
-            } else {
-                alert('An unexpected error occurred. Please try again.');
-            }
-        })
-    })
-}
-

knockoutwhistweb/public/javascripts/websocket.js

@@ -0,0 +1,197 @@
+// javascript
+let ws = null; // will be created by connectWebSocket()
+const pending = new Map(); // id -> { resolve, reject, timer }
+const handlers = new Map(); // eventType -> handler(data) -> (value|Promise)
+
+let timer = null;
+
+// helper to attach message/error/close handlers to a socket
+function setupSocketHandlers(socket) {
+    socket.onmessage = (event) => {
+        console.debug("SERVER MESSAGE:", event.data);
+        let msg;
+        try {
+            msg = JSON.parse(event.data);
+        } catch (e) {
+            console.debug("Non-JSON message from server:", event.data, e);
+            return;
+        }
+
+        const id = msg.id;
+        const eventType = msg.event;
+        const status = msg.status;
+        const data = msg.data;
+
+        if (id && typeof status === "string") {
+            const entry = pending.get(id);
+            if (!entry) return;
+            clearTimeout(entry.timer);
+            pending.delete(id);
+
+            if (status === "success") {
+                entry.resolve(data === undefined ? {} : data);
+            } else {
+                entry.reject(new Error(msg.error || "Server returned error"));
+            }
+            return;
+        }
+
+        if (id && eventType) {
+            const handler = handlers.get(eventType);
+            const sendResponse = (result) => {
+                const response = {id: id, event: eventType, status: result};
+                if (socket && socket.readyState === WebSocket.OPEN) {
+                    socket.send(JSON.stringify(response));
+                } else {
+                    console.warn("Cannot send response, websocket not open");
+                }
+            };
+
+            if (!handler) {
+                // no handler: respond with an error object in data so server can fail it
+                console.warn("No handler for event:", eventType);
+                sendResponse({error: "No handler for event: " + eventType});
+                return;
+            }
+
+            try {
+                Promise.resolve(handler(data === undefined ? {} : data))
+                    .then(_ => sendResponse("success"))
+                    .catch(_ => sendResponse("error"));
+            } catch (err) {
+                sendResponse("error");
+            }
+        }
+    };
+
+    socket.onerror = (error) => {
+        console.error("WebSocket Error:", error);
+        if (timer) clearInterval(timer);
+        for (const [id, entry] of pending.entries()) {
+            clearTimeout(entry.timer);
+            entry.reject(new Error("WebSocket error/closed"));
+            pending.delete(id);
+        }
+        if (socket.readyState === WebSocket.OPEN) socket.close(1000, "Unexpected error.");
+    };
+
+    socket.onclose = (event) => {
+        if (timer) clearInterval(timer);
+        for (const [id, entry] of pending.entries()) {
+            clearTimeout(entry.timer);
+            entry.reject(new Error("WebSocket closed"));
+            pending.delete(id);
+        }
+        if (event.wasClean) {
+            console.log(`Connection closed cleanly, code=${event.code} reason=${event.reason}`);
+        } else {
+            console.warn('Connection died unexpectedly.');
+        }
+    };
+}
+
+// connect/disconnect helpers
+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
+        return new Promise((resolve, reject) => {
+            const prevOnOpen = ws.onopen;
+            const prevOnError = ws.onerror;
+            ws.onopen = (ev) => {
+                if (prevOnOpen) prevOnOpen(ev);
+                resolve();
+            };
+            ws.onerror = (err) => {
+                if (prevOnError) prevOnError(err);
+                reject(err);
+            };
+        });
+    }
+
+    ws = new WebSocket(url);
+    setupSocketHandlers(ws);
+
+    return new Promise((resolve, reject) => {
+        ws.onopen = () => {
+            console.log("WebSocket connection established!");
+            // start heartbeat
+            timer = setInterval(() => {
+                if (ws && ws.readyState === WebSocket.OPEN) {
+                    sendEventAndWait("ping", {}).then(
+                        () => console.debug("PING RESPONSE RECEIVED"),
+                    ).catch(
+                        (err) => console.warn("PING ERROR:", err.message),
+                    );
+                    console.debug("PING SENT");
+                }
+            }, 5000);
+            resolve();
+        };
+
+        ws.onerror = (err) => {
+            reject(err);
+        };
+    });
+}
+
+function disconnectWebSocket(code = 1000, reason = "Client disconnect") {
+    if (timer) {
+        clearInterval(timer);
+        timer = null;
+    }
+    if (ws) {
+        try {
+            ws.close(code, reason);
+        } catch (e) {
+        }
+        ws = null;
+    }
+}
+
+function sendEvent(eventType, eventData) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+        console.warn("WebSocket is not open. Unable to send message.");
+        return;
+    }
+    const id = Date.now().toString(36) + Math.random().toString(36).substring(2, 9);
+    const message = {id: id, event: eventType, data: eventData};
+    ws.send(JSON.stringify(message));
+    console.debug("SENT:", message);
+}
+
+function sendEventAndWait(eventType, eventData, timeoutMs = 10000) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+        return Promise.reject(new Error("WebSocket is not open"));
+    }
+    const id = Date.now().toString(36) + Math.random().toString(36).substring(2, 9);
+    const message = {id: id, event: eventType, data: eventData};
+    const p = new Promise((resolve, reject) => {
+        const timerId = setTimeout(() => {
+            if (pending.has(id)) {
+                pending.delete(id);
+                reject(new Error(`No response within ${timeoutMs}ms for id=${id}`));
+            }
+        }, timeoutMs);
+        pending.set(id, {resolve, reject, timer: timerId});
+    });
+    ws.send(JSON.stringify(message));
+    console.debug("SENT (await):", message);
+    return p;
+}
+
+function onEvent(eventType, handler) {
+    handlers.set(eventType, handler);
+}
+
+globalThis.sendEvent = sendEvent;
+globalThis.sendEventAndWait = sendEventAndWait;
+globalThis.onEvent = onEvent;
+globalThis.connectWebSocket = connectWebSocket;
+globalThis.disconnectWebSocket = disconnectWebSocket;
+globalThis.isWebSocketConnected = () => !!ws && ws.readyState === WebSocket.OPEN;

knockoutwhistweb/test/controllers/HomeControllerSpec.scala

@@ -13,33 +13,33 @@ import play.api.test.Helpers.*
  */
 class HomeControllerSpec extends PlaySpec with GuiceOneAppPerTest with Injecting {
 
-//  "HomeController GET" should {
+  //  "HomeController GET" should {
-//
+  //
-//    "render the index page from a new instance of controller" in {
+  //    "render the index page from a new instance of controller" in {
-//      val controller = new HomeController(stubControllerComponents())
+  //      val controller = new HomeController(stubControllerComponents())
-//      val home = controller.index().apply(FakeRequest(GET, "/"))
+  //      val home = controller.index().apply(FakeRequest(GET, "/"))
-//
+  //
-//      status(home) mustBe OK
+  //      status(home) mustBe OK
-//      contentType(home) mustBe Some("text/html")
+  //      contentType(home) mustBe Some("text/html")
-//      contentAsString(home) must include ("Welcome to Play")
+  //      contentAsString(home) must include ("Welcome to Play")
-//    }
+  //    }
-//
+  //
-//    "render the index page from the application" in {
+  //    "render the index page from the application" in {
-//      val controller = inject[HomeController]
+  //      val controller = inject[HomeController]
-//      val home = controller.index().apply(FakeRequest(GET, "/"))
+  //      val home = controller.index().apply(FakeRequest(GET, "/"))
-//
+  //
-//      status(home) mustBe OK
+  //      status(home) mustBe OK
-//      contentType(home) mustBe Some("text/html")
+  //      contentType(home) mustBe Some("text/html")
-//      contentAsString(home) must include ("Welcome to Play")
+  //      contentAsString(home) must include ("Welcome to Play")
-//    }
+  //    }
-//
+  //
-//    "render the index page from the router" in {
+  //    "render the index page from the router" in {
-//      val request = FakeRequest(GET, "/")
+  //      val request = FakeRequest(GET, "/")
-//      val home = route(app, request).get
+  //      val home = route(app, request).get
-//
+  //
-//      status(home) mustBe OK
+  //      status(home) mustBe OK
-//      contentType(home) mustBe Some("text/html")
+  //      contentType(home) mustBe Some("text/html")
-//      contentAsString(home) must include ("Welcome to Play")
+  //      contentAsString(home) must include ("Welcome to Play")
-//    }
+  //    }
-//  }
+  //  }
 }

versions.env

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