ci: bump version to v1.1.0

CHANGELOG.md

@@ -111,16 +111,11 @@
 
 * removed trailing ([c7dd72e](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/c7dd72ecc2786ef63daf2b4288093025a8e22bfd))
 * removed trailing ([42a5adb](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/42a5adbae01802587a48a9de15bad44b5ef014cf))
-##  (2025-11-19)
+##  (2025-11-14)
-
-### ⚠ BREAKING CHANGES
-
-* **game:** Fixed polling, SPA, Gameplayloop etc. (#59)
 
 ### Features
 
 * **ci:** Polling ([370de17](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/370de175db65edf87e7ab211190977b540a39d85))
 * **ci:** Polling  Added polling for when the game starts and a card gets played ([#58](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/58)) ([e60fe7c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/e60fe7c98dcab05949140a8a54ed6e4e2fbbc022))
-* **game:** Fixed polling, SPA, Gameplayloop etc. ([#59](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/59)) ([a58b2e0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/a58b2e03b11a54667d63ba6604f579a8e328c9d1))
 * **ui:** added js routing, updated ingame ui, added tricktable ([#50](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/50)) ([c220e54](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/c220e54bb8d87f4f0f37a089bcd993e8df806123)), closes [#43](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/43) [#43](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/43)
 * **ui:** implement tie & trump menu, fixed some critical bugs ([#52](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/52)) ([5d245d0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/5d245d0011a5fb03193514303b45702cd8329224))

knockoutwhistweb/app/assets/stylesheets/main.less

@@ -49,16 +49,6 @@
   box-shadow: 3px 3px 3px @highlightcolor;
 }
 
-.inactive::after {
-  content: "";
-  position: absolute;
-  inset: 0;             /* cover the whole container */
-  background: rgba(0, 0, 0, 0.50);
-  z-index: 10;
-  border-radius: 6px;
-  pointer-events: none; /* user can't click through overlay */
-}
-
 .bottom-div {
   position: fixed;
   bottom: 0;

knockoutwhistweb/app/controllers/IngameController.scala

@@ -1,16 +1,14 @@
 package controllers
 
 import auth.{AuthAction, AuthenticatedRequest}
-import de.knockoutwhist.control.GameState.{FinishedMatch, InGame, Lobby, SelectTrump, TieBreak}
+import de.knockoutwhist.control.GameState.{InGame, Lobby, SelectTrump, TieBreak}
 import exceptions.*
 import logic.PodManager
 import logic.game.GameLobby
 import model.sessions.UserSession
-import model.users.User
 import play.api.*
 import play.api.libs.json.{JsValue, Json}
 import play.api.mvc.*
-import play.twirl.api.Html
 
 import java.util.UUID
 import javax.inject.*
@@ -24,47 +22,29 @@ class IngameController @Inject() (
                                    val authAction: AuthAction,
                                    implicit val ec: ExecutionContext
                                  ) 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)
     game match {
       case Some(g) =>
-        val results = Try {
+        g.logic.getCurrentState match {
-          returnInnerHTML(g, request.user)
+          case Lobby => Ok(views.html.lobby.lobby(Some(request.user), g))
-
+          case InGame =>
-        }
+            Ok(views.html.ingame.ingame(
-        if (results.isSuccess) {
+              g.getPlayerByUser(request.user),
-          Ok(views.html.main("In-Game - Knockout Whist")(results.get))
+              g
-        } else {
+            ))
-          InternalServerError(results.failed.get.getMessage)
+          case SelectTrump =>
+            Ok(views.html.ingame.selecttrump(
+              g.getPlayerByUser(request.user),
+              g
+            ))
+          case TieBreak =>
+            Ok(views.html.ingame.tie(
+              g.getPlayerByUser(request.user),
+              g
+            ))
+          case _ =>
+            InternalServerError(s"Invalid game state for in-game view. GameId: $gameId" + s" State: ${g.logic.getCurrentState}")
         }
       case None =>
         NotFound("Game not found")
@@ -146,7 +126,32 @@ class IngameController @Inject() (
       ))
     }
   }
-  
+  def joinGame(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
+    val game = podManager.getGame(gameId)
+    val result = Try {
+      game match {
+        case Some(g) =>
+          g.addUser(request.user)
+        case None =>
+          NotFound("Game not found")
+      }
+    }
+    if (result.isSuccess) {
+      Redirect(routes.IngameController.game(gameId))
+    } else {
+      val throwable = result.failed.get
+      throwable match {
+        case _: GameFullException =>
+          BadRequest(throwable.getMessage)
+        case _: IllegalArgumentException =>
+          BadRequest(throwable.getMessage)
+        case _: IllegalStateException =>
+          BadRequest(throwable.getMessage)
+        case _ =>
+          InternalServerError(throwable.getMessage)
+      }
+    }
+  }
   def playCard(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] => {
     val game = podManager.getGame(gameId)
     game match {
@@ -167,7 +172,8 @@ class IngameController @Inject() (
             optSession.foreach(_.lock.unlock())
             if (result.isSuccess) {
               Ok(Json.obj(
-                "status" -> "success"
+                "status" -> "success",
+                "redirectUrl" -> routes.IngameController.game(gameId).url
               ))
             } else {
               val throwable = result.failed.get
@@ -192,11 +198,6 @@ class IngameController @Inject() (
                     "status" -> "failure",
                     "errorMessage" -> throwable.getMessage
                   ))
-                case _: NotInteractableException =>
-                  BadRequest(Json.obj(
-                    "status" -> "failure",
-                    "errorMessage" -> throwable.getMessage
-                  ))
                 case _ =>
                   InternalServerError(Json.obj(
                     "status" -> "failure",
@@ -222,10 +223,7 @@ class IngameController @Inject() (
     val game = podManager.getGame(gameId)
     game match {
       case Some(g) => {
-        val jsonBody = request.body.asJson
+        val cardIdOpt = request.body.asFormUrlEncoded.flatMap(_.get("cardId").flatMap(_.headOption))
-        val cardIdOpt: Option[String] = jsonBody.flatMap { jsValue =>
-          (jsValue \ "cardID").asOpt[String]
-        }
         var optSession: Option[UserSession] = None
         val result = Try {
           cardIdOpt match {
@@ -250,30 +248,15 @@ class IngameController @Inject() (
           val throwable = result.failed.get
           throwable match {
             case _: CantPlayCardException =>
-              BadRequest(Json.obj(
+              BadRequest(throwable.getMessage)
-                "status" -> "failure",
-                "errorMessage" -> throwable.getMessage
-              ))
             case _: NotInThisGameException =>
-              BadRequest(Json.obj(
+              BadRequest(throwable.getMessage)
-                "status" -> "failure",
-                "errorMessage" -> throwable.getMessage
-              ))
             case _: IllegalArgumentException =>
-              BadRequest(Json.obj(
+              BadRequest(throwable.getMessage)
-                "status" -> "failure",
-                "errorMessage" -> throwable.getMessage
-              ))
             case _: IllegalStateException =>
-              BadRequest(Json.obj(
+              BadRequest(throwable.getMessage)
-                "status" -> "failure",
-                "errorMessage" -> throwable.getMessage
-              ))
             case _ =>
-              InternalServerError(Json.obj(
+              InternalServerError(throwable.getMessage)
-                "status" -> "failure",
-                "errorMessage" -> throwable.getMessage
-              ))
           }
         }
       }
@@ -286,10 +269,7 @@ class IngameController @Inject() (
     val game = podManager.getGame(gameId)
     game match {
       case Some(g) =>
-        val jsonBody = request.body.asJson
+        val trumpOpt = request.body.asFormUrlEncoded.flatMap(_.get("trump").flatMap(_.headOption))
-        val trumpOpt: Option[String] = jsonBody.flatMap { jsValue =>
-          (jsValue \ "trump").asOpt[String]
-        }
         trumpOpt match {
           case Some(trump) =>
             var optSession: Option[UserSession] = None
@@ -306,25 +286,13 @@ class IngameController @Inject() (
               val throwable = result.failed.get
               throwable match {
                 case _: IllegalArgumentException =>
-                  BadRequest(Json.obj(
+                  BadRequest(throwable.getMessage)
-                    "status" -> "failure",
-                    "errorMessage" -> throwable.getMessage
-                  ))
                 case _: NotInThisGameException =>
-                  BadRequest(Json.obj(
+                  BadRequest(throwable.getMessage)
-                    "status" -> "failure",
-                    "errorMessage" -> throwable.getMessage
-                  ))
                 case _: IllegalStateException =>
-                  BadRequest(Json.obj(
+                  BadRequest(throwable.getMessage)
-                    "status" -> "failure",
-                    "errorMessage" -> throwable.getMessage
-                  ))
                 case _ =>
-                  InternalServerError(Json.obj(
+                  InternalServerError(throwable.getMessage)
-                    "status" -> "failure",
-                    "errorMessage" -> throwable.getMessage
-                  ))
               }
             }
           case None =>
@@ -338,10 +306,7 @@ class IngameController @Inject() (
     val game = podManager.getGame(gameId)
     game match {
       case Some(g) =>
-        val jsonBody = request.body.asJson
+        val tieOpt = request.body.asFormUrlEncoded.flatMap(_.get("tie").flatMap(_.headOption))
-        val tieOpt: Option[String] = jsonBody.flatMap { jsValue =>
-          (jsValue \ "tie").asOpt[String]
-        }
         tieOpt match {
           case Some(tie) =>
             var optSession: Option[UserSession] = None
@@ -358,25 +323,13 @@ class IngameController @Inject() (
               val throwable = result.failed.get
               throwable match {
                 case _: IllegalArgumentException =>
-                  BadRequest(Json.obj(
+                  BadRequest(throwable.getMessage)
-                    "status" -> "failure",
-                    "errorMessage" -> throwable.getMessage
-                  ))
                 case _: NotInThisGameException =>
-                  BadRequest(Json.obj(
+                  BadRequest(throwable.getMessage)
-                    "status" -> "failure",
-                    "errorMessage" -> throwable.getMessage
-                  ))
                 case _: IllegalStateException =>
-                  BadRequest(Json.obj(
+                  BadRequest(throwable.getMessage)
-                    "status" -> "failure",
-                    "errorMessage" -> throwable.getMessage
-                  ))
                 case _ =>
-                  InternalServerError(Json.obj(
+                  InternalServerError(throwable.getMessage)
-                    "status" -> "failure",
-                    "errorMessage" -> throwable.getMessage
-                  ))
               }
             }
           case None =>
@@ -386,47 +339,5 @@ class IngameController @Inject() (
         NotFound("Game not found")
     }
   }
-  
-  
-  def returnToLobby(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val game = podManager.getGame(gameId)
-    game match {
-      case Some(g) =>
-        val result = Try {
-          val session = g.getUserSession(request.user.id)
-          g.returnToLobby(session)
-        }
-        if (result.isSuccess) {
-          Ok(Json.obj(
-            "status" -> "success",
-            "redirectUrl" -> routes.IngameController.game(gameId).url
-          ))
-        } else {
-          val throwable = result.failed.get
-          throwable match {
-            case _: NotInThisGameException =>
-              BadRequest(Json.obj(
-                "status" -> "failure",
-                "errorMessage" -> throwable.getMessage
-              ))
-            case _: IllegalStateException =>
-              BadRequest(Json.obj(
-                "status" -> "failure",
-                "errorMessage" -> throwable.getMessage
-              ))
-            case _ =>
-              InternalServerError(Json.obj(
-                "status" -> "failure",
-                "errorMessage" -> throwable.getMessage
-              ))
-          }
-        }
-      case None =>
-        NotFound(Json.obj(
-          "status" -> "failure",
-          "errorMessage" -> "Game not found"
-        ))
-    }
-  }
 
 }

knockoutwhistweb/app/controllers/JavaScriptRoutingController.scala

@@ -12,23 +12,15 @@ class JavaScriptRoutingController  @Inject()(
                                               val authAction: AuthAction,
                                               val podManager: PodManager
                                             ) extends BaseController {
-  def javascriptRoutes(): Action[AnyContent] =
+  def javascriptRoutes(): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    Action { implicit request =>
     Ok(
       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.PollingController.polling
-          routes.javascript.IngameController.playTrump,
-          routes.javascript.IngameController.playTie,
-          routes.javascript.IngameController.returnToLobby,
-          routes.javascript.PollingController.polling,
-          routes.javascript.UserController.login_Post
       )
     ).as("text/javascript")
   }

knockoutwhistweb/app/controllers/MainMenuController.scala

@@ -17,13 +17,12 @@ import javax.inject.*
 class MainMenuController @Inject()(
                                     val controllerComponents: ControllerComponents,
                                     val authAction: AuthAction,
-                                    val podManager: PodManager,
+                                    val podManager: PodManager
-                                    val ingameController: IngameController
                                   ) extends BaseController {
 
   // Pass the request-handling function directly to authAction (no nested Action)
   def mainMenu(): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    Ok(views.html.main("Knockout Whist - Create Game")(views.html.mainmenu.creategame(Some(request.user))))
+    Ok(views.html.mainmenu.creategame(Some(request.user)))
   }
 
   def index(): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
@@ -46,8 +45,7 @@ class MainMenuController @Inject()(
       )
       Ok(Json.obj(
         "status" -> "success",
-        "redirectUrl" -> routes.IngameController.game(gameLobby.id).url,
+        "redirectUrl" -> routes.IngameController.game(gameLobby.id).url
-        "content" -> ingameController.returnInnerHTML(gameLobby, request.user).toString
       ))
     } else {
       BadRequest(Json.obj(
@@ -59,58 +57,22 @@ class MainMenuController @Inject()(
   }
   
   def joinGame(): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    val jsonBody = request.body.asJson
+    val postData = request.body.asFormUrlEncoded
-    val gameId: Option[String] = jsonBody.flatMap { jsValue =>
+    if (postData.isDefined) {
-      (jsValue \ "gameId").asOpt[String]
+      val gameId = postData.get.get("gameId").flatMap(_.headOption).getOrElse("")
-    }
+      val game = podManager.getGame(gameId)
-    if (gameId.isDefined) {
-      val game = podManager.getGame(gameId.get)
       game match {
         case Some(g) =>
-          g.addUser(request.user)
+          Redirect(routes.IngameController.joinGame(gameId))
-          Ok(Json.obj(
-            "status" -> "success",
-            "redirectUrl" -> routes.IngameController.game(g.id).url,
-            "content" -> ingameController.returnInnerHTML(g, request.user).toString
-          ))
         case None =>
-          NotFound(Json.obj(
+          NotFound("Game not found")
-            "status" -> "failure",
-            "errorMessage" -> "No Game found"
-          ))
       }
     } else {
-      BadRequest(Json.obj(
+      BadRequest("Invalid form submission")
-        "status" -> "failure",
-        "errorMessage" -> "Invalid form submission"
-      ))
     }
   }
 
   def rules(): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    Ok(views.html.main("Knockout Whist - Rules")(views.html.mainmenu.rules(Some(request.user))))
+    Ok(views.html.mainmenu.rules(Some(request.user)))
   }
-
-  def navSPA(location: String) : Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
-    location match {
-      case "0" => // Main Menu
-        Ok(Json.obj(
-          "status" -> "success",
-          "redirectUrl" -> routes.MainMenuController.mainMenu().url,
-          "content" -> views.html.mainmenu.creategame(Some(request.user)).toString
-        ))
-      case "1" => // Rules
-        Ok(Json.obj(
-          "status" -> "success",
-          "redirectUrl" -> routes.MainMenuController.rules().url,
-          "content" -> views.html.mainmenu.rules(Some(request.user)).toString
-        ))
-      case _ =>
-        BadRequest(Json.obj(
-          "status" -> "failure",
-          "errorMessage" -> "Invalid form submission"
-        ))
-    }
-  }
-
 }

knockoutwhistweb/app/controllers/PollingController.scala

@@ -1,12 +1,10 @@
 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 logic.game.PollingEvents.{CardPlayed, LobbyUpdate, NewRound, ReloadEvent}
 import model.sessions.UserSession
 import model.users.User
 import play.api.libs.json.{JsArray, JsValue, Json}
@@ -15,22 +13,16 @@ 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 = {
+  private def buildCardPlayResponse(game: GameLobby, hand: Option[Hand], newRound: Boolean): JsValue = {
     val currentRound = game.logic.getCurrentRound.get
     val currentTrick = game.logic.getCurrentTrick.get
 
@@ -59,14 +51,12 @@ class PollingController @Inject() (
       "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,
+      "nextPlayer" -> nextPlayer
-      "yourTurn" -> (game.logic.getCurrentPlayer.get == player)
     )
   }
 
@@ -88,52 +78,43 @@ class PollingController @Inject() (
       case NewRound =>
         val player = game.getPlayerByUser(userSession.user)
         val hand = player.currentHand()
-        val jsonResponse = buildCardPlayResponse(game, hand, player, true)
+        val jsonResponse = buildCardPlayResponse(game, hand, 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)
+        val jsonResponse = buildCardPlayResponse(game, hand, false)
         Ok(jsonResponse)
       case LobbyUpdate =>
         Ok(buildLobbyUsersResponse(game, userSession))
       case ReloadEvent =>
         val jsonResponse = Json.obj(
           "status" -> "reloadEvent",
-          "redirectUrl" -> routes.IngameController.game(game.id).url,
+          "redirectUrl" -> routes.IngameController.game(game.id).url
-          "content" -> ingameController.returnInnerHTML(game, userSession.user).toString
         )
         Ok(jsonResponse)
     }
   }
 
+  // --- Main Polling Action ---
   def polling(gameId: String): Action[AnyContent] = authAction.async { implicit request: AuthenticatedRequest[AnyContent] =>
 
     val playerId = request.user.id
 
+    // 1. Safely look up the game
     podManager.getGame(gameId) match {
       case Some(game) =>
-        val playerEventQueue = game.getEventsOfPlayer(playerId)
+
-        if (playerEventQueue.nonEmpty) {
+        // 2. Short-Poll Check (Check for missed events)
-          val event = playerEventQueue.dequeue()
+        if (game.getPollingState.nonEmpty) {
+          val event = game.getPollingState.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 {
@@ -144,6 +125,7 @@ class PollingController @Inject() (
         }
 
       case None =>
+        // Game not found
         Future.successful(NotFound("Game not found."))
     }
   }

knockoutwhistweb/app/controllers/UserController.scala

@@ -3,7 +3,6 @@ package controllers
 import auth.{AuthAction, AuthenticatedRequest}
 import logic.user.{SessionManager, UserManager}
 import play.api.*
-import play.api.libs.json.Json
 import play.api.mvc.*
 
 import javax.inject.*
@@ -29,35 +28,28 @@ class UserController @Inject()(
         if (possibleUser.isDefined) {
           Redirect(routes.MainMenuController.mainMenu())
         } else {
-          Ok(views.html.main("Login")(views.html.login.login()))
+          Ok(views.html.login.login())
         }
       } else {
-        Ok(views.html.main("Login")(views.html.login.login()))
+        Ok(views.html.login.login())
       }
     }
   }
 
   def login_Post(): Action[AnyContent] = {
     Action { implicit request =>
-      val jsonBody = request.body.asJson
+      val postData = request.body.asFormUrlEncoded
-      val username: Option[String] = jsonBody.flatMap { jsValue =>
+      if (postData.isDefined) {
-        (jsValue \ "username").asOpt[String]
-      }
-      val password: Option[String] = jsonBody.flatMap { jsValue =>
-        (jsValue \ "password").asOpt[String]
-      }
-      if (username.isDefined && password.isDefined) {
         // Extract username and password from form data
-        val possibleUser = userManager.authenticate(username.get, password.get)
+        val username = postData.get.get("username").flatMap(_.headOption).getOrElse("")
+        val password = postData.get.get("password").flatMap(_.headOption).getOrElse("")
+        val possibleUser = userManager.authenticate(username, password)
         if (possibleUser.isDefined) {
-          Ok(Json.obj(
+          Redirect(routes.MainMenuController.mainMenu()).withCookies(
-            "status" -> "success",
-            "redirectUrl" -> routes.MainMenuController.mainMenu().url,
-            "content" -> views.html.mainmenu.creategame(possibleUser).toString
-          )).withCookies(
             Cookie("sessionId", sessionManager.createSession(possibleUser.get))
           )
         } else {
+          println("Failed login attempt for user: " + username)
           Unauthorized("Invalid username or password")
         }
       } else {

knockoutwhistweb/app/logic/game/GameLobby.scala

@@ -4,15 +4,14 @@ import de.knockoutwhist.cards.{Hand, Suit}
 import de.knockoutwhist.control.GameLogic
 import de.knockoutwhist.control.GameState.{InGame, Lobby, MainMenu}
 import de.knockoutwhist.control.controllerBaseImpl.sublogic.util.{MatchUtil, PlayerUtil}
-import de.knockoutwhist.events.global.tie.TieTurnEvent
+import de.knockoutwhist.events.global.{CardPlayedEvent, GameStateChangeEvent, SessionClosed}
-import de.knockoutwhist.events.global.{CardPlayedEvent, GameStateChangeEvent, NewTrickEvent, SessionClosed}
 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 exceptions.*
-import logic.game.PollingEvents.{CardPlayed, LobbyCreation, LobbyUpdate, NewRound, NewTrick, ReloadEvent}
+import logic.game.PollingEvents.{CardPlayed, LobbyUpdate, NewRound, ReloadEvent}
 import model.sessions.{InteractionType, UserSession}
 import model.users.User
 
@@ -28,39 +27,21 @@ class GameLobby private(
                  val name: String,
                  val maxPlayers: Int
                ) extends EventListener {
-
+  logic.addListener(this)
-
+  logic.createSession()
 
   private val users: mutable.Map[UUID, UserSession] = mutable.Map()
-  private val eventsPerPlayer: mutable.Map[UUID, mutable.Queue[PollingEvents]] = mutable.Map()
+  private val pollingState: mutable.Queue[PollingEvents] = mutable.Queue()
   private val waitingPromises: mutable.Map[UUID, ScalaPromise[PollingEvents]] = mutable.Map()
-  private val lock = new Object
-  lock.synchronized {
-    logic.addListener(this)
-    logic.createSession()
-  }
-
 
   def registerWaiter(playerId: UUID): ScalaPromise[PollingEvents] = {
     val promise = ScalaPromise[PollingEvents]()
-    lock.synchronized {
+    waitingPromises.put(playerId, promise)
-      val queue = eventsPerPlayer.getOrElseUpdate(playerId, mutable.Queue())
+    promise
-
-      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)
-      waitingPromises.remove(playerId)
-    }
   }
 
   def addUser(user: User): UserSession = {
@@ -83,18 +64,17 @@ class GameLobby private(
         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 =>
-        addToQueue(NewTrick)
       case event: GameStateChangeEvent =>
         if (event.oldState == MainMenu && event.newState == Lobby) {
           return
         }
-        addToQueue(ReloadEvent)
+        if (event.oldState == Lobby && event.newState == InGame) {
+          addToQueue(ReloadEvent)
+        }else {
+          addToQueue(ReloadEvent)
+        }
         users.values.foreach(session => session.updatePlayer(event))
       case event: SessionClosed =>
         users.values.foreach(session => session.updatePlayer(event))
@@ -104,29 +84,11 @@ class GameLobby private(
   }
 
   private def addToQueue(event: PollingEvents): Unit = {
-    lock.synchronized {
+    if (waitingPromises.nonEmpty) {
-      users.keys.foreach { playerId =>
+      waitingPromises.values.foreach(_.success(event))
-        val q = eventsPerPlayer.getOrElseUpdate(playerId, mutable.Queue())
+      waitingPromises.clear()
-        q.enqueue(event)
+    } else {
-      }
+      pollingState.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))
-        }
-      }
-    }
-
-    waitingPromises.keys.foreach { playerId =>
-      val queue =  eventsPerPlayer(playerId)
-      if (queue.nonEmpty) {
-        val promise = waitingPromises(playerId)
-        promise.success(queue.dequeue())
-        waitingPromises.remove(playerId)
-      }
     }
   }
 
@@ -199,11 +161,10 @@ class GameLobby private(
       throw new CantPlayCardException("You are not in dog life!")
     }
     if (cardIndex == -1) {
-      if (MatchUtil.dogNeedsToPlay(getMatch, getRound)) {
+      if (!MatchUtil.dogNeedsToPlay(getMatch, getRound)) {
         throw new CantPlayCardException("You can't skip this round!")
       }
       logic.playerInputLogic.receivedDog(None)
-      return
     }
     val hand = getHand(player)
     val card = hand.cards(cardIndex)
@@ -235,19 +196,6 @@ class GameLobby private(
     logic.playerTieLogic.receivedTieBreakerCard(tieNumber)
   }
 
-  def returnToLobby(userSession: UserSession): Unit = {
-    if (!users.contains(userSession.id)) {
-      throw new NotInThisGameException("You are not in this game!")
-    }
-    val session = users(userSession.id)
-    if (session != userSession) {
-      throw new IllegalArgumentException("User session does not match!")
-    }
-    if (!session.host)
-      throw new NotHostException("Only the host can return to the lobby!")
-    logic.createSession()
-  }
-
   
   //-------------------
   
@@ -270,8 +218,8 @@ class GameLobby private(
   def getLogic: GameLogic = {
     logic
   }
-  def getEventsOfPlayer(playerId: UUID): mutable.Queue[PollingEvents] = {
+  def getPollingState: mutable.Queue[PollingEvents] = {
-    eventsPerPlayer.getOrElseUpdate(playerId, mutable.Queue())
+    pollingState
   }
   private def getPlayerBySession(userSession: UserSession): AbstractPlayer = {
     val playerOption = getMatch.totalplayers.find(_.id == userSession.id)

knockoutwhistweb/app/logic/game/PollingEvents.scala

@@ -3,8 +3,6 @@ package logic.game
 enum PollingEvents {
   case CardPlayed
   case NewRound
-  case NewTrick
   case ReloadEvent
   case LobbyUpdate
-  case LobbyCreation
 }

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

@@ -1,37 +0,0 @@
-@(user: Option[model.users.User], gamelobby: logic.game.GameLobby)
-
-<main class="lobby-background vh-100" id="lobbybackground">
-    <div class="container d-flex flex-column" style="height: calc(100vh - 1rem);">
-        <div class="row">
-            <div class="col">
-                <div class="p-3 text-center fs-4">Winner: @gamelobby.getLogic.getWinner</div>
-            </div>
-        </div>
-        <div class="row justify-content-center align-items-center flex-grow-1">
-        @if((gamelobby.getUserSession(user.get.id).host)) {
-            <div class="col-12 text-center mb-5">
-                <div class="btn btn-success" onclick="backToLobby('@gamelobby.id')">Return to lobby</div>
-            </div>
-        } else {
-            <div class="col-12 text-center mt-3">
-                <div class="spinner-border mt-1" role="status">
-                    <span class="visually-hidden">Loading...</span>
-                </div>
-            </div>
-        }
-        </div>
-    </div>
-</main>
-<script>
-        function waitForFunction(name, checkInterval = 100) {
-            return new Promise(resolve => {
-                const timer = setInterval(() => {
-                    if (typeof window[name] === "function") {
-                        clearInterval(timer);
-                        resolve(window[name]);
-                    }
-                }, checkInterval);
-            });
-        }
-        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
-</script>

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

@@ -1,8 +1,8 @@
 @import de.knockoutwhist.control.controllerBaseImpl.sublogic.util.TrickUtil
-@import de.knockoutwhist.utils.Implicits.*
 
 @(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
 
+@main("Ingame") {
 <div class="lobby-background vh-100">
     <main class="game-field-background vh-100 ingame-side-shadow">
         <div class="py-5 container-xxl">
@@ -72,19 +72,12 @@
             </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 ingame-cards-slide @{
+                <div class="row justify-content-center ingame-cards-slide" id="card-slide">
-                    !gamelobby.logic.getCurrentPlayer.contains(player) ? "inactive" |: ""
-                }" id="card-slide">
                     @for(i <- player.currentHand().get.cards.indices) {
                     <div class="col-auto handcard" style="border-radius: 6px">
-                        <div class="btn btn-outline-light p-0 border-0 shadow-none" data-card-id="@i" style="border-radius: 6px" onclick="handlePlayCard(this, '@gamelobby.id', '@player.isInDogLife')">
+                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-card-id="@i" style="border-radius: 6px" onclick="handlePlayCard(this, '@gamelobby.id')">
-                            @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
+                                @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
-                        </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>
@@ -93,15 +86,8 @@
     </main>
 </div>
 <script>
-        function waitForFunction(name, checkInterval = 100) {
+        document.addEventListener('DOMContentLoaded', () => {
-            return new Promise(resolve => {
+            pollForUpdates('@gamelobby.id');
-                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

@@ -1,5 +1,6 @@
 @(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
 
+@main("Selecting Trumpsuit...") {
 <div id="selecttrumpsuit" class="game-field game-field-background">
     <div class="ingame-stage blur-sides">
         <div class="container py-4">
@@ -17,24 +18,36 @@
 
                                 <div class="row justify-content-center col-auto mb-5">
                                     <div class="col-auto handcard">
-                                        <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="0" style="border-radius: 6px" onclick="handleTrumpSelection(this, '@gamelobby.id')">
+                                        <form action="@routes.IngameController.playTrump(gamelobby.id)" method="post">
-                                            @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Spades)) width="120px" style="border-radius: 6px"/>
+                                            <input type="hidden" name="cardId" value="0" />
-                                        </div>
+                                            <button type="submit" class="btn btn-outline-light p-0 border-0 shadow-none" name="trump" value="0" style="border-radius: 6px">
+                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Spades)) width="120px" style="border-radius: 6px"/>
+                                            </button>
+                                        </form>
                                     </div>
                                     <div class="col-auto handcard">
-                                        <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="1" style="border-radius: 6px" onclick="handleTrumpSelection(this, '@gamelobby.id')">
+                                        <form action="@routes.IngameController.playTrump(gamelobby.id)" method="post">
-                                            @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Hearts)) width="120px" style="border-radius: 6px"/>
+                                            <input type="hidden" name="cardId" value="1" />
-                                        </div>
+                                            <button type="submit" class="btn btn-outline-light p-0 border-0 shadow-none" name="trump" value="1" style="border-radius: 6px">
+                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Hearts)) width="120px" style="border-radius: 6px"/>
+                                            </button>
+                                        </form>
                                     </div>
                                     <div class="col-auto handcard">
-                                        <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="2" style="border-radius: 6px" onclick="handleTrumpSelection(this, '@gamelobby.id')">
+                                        <form action="@routes.IngameController.playTrump(gamelobby.id)" method="post">
-                                            @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Diamonds)) width="120px" style="border-radius: 6px"/>
+                                            <input type="hidden" name="cardId" value="2" />
-                                        </div>
+                                            <button type="submit" class="btn btn-outline-light p-0 border-0 shadow-none" name="trump" value="2" style="border-radius: 6px">
+                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Diamonds)) width="120px" style="border-radius: 6px"/>
+                                            </button>
+                                        </form>
                                     </div>
                                     <div class="col-auto handcard">
-                                        <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="3" style="border-radius: 6px" onclick="handleTrumpSelection(this, '@gamelobby.id')">
+                                        <form action="@routes.IngameController.playTrump(gamelobby.id)" method="post">
-                                            @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs)) width="120px" style="border-radius: 6px"/>
+                                            <input type="hidden" name="cardId" value="3" />
-                                        </div>
+                                            <button type="submit" class="btn btn-outline-light p-0 border-0 shadow-none" name="trump" value="3" style="border-radius: 6px">
+                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs)) width="120px" style="border-radius: 6px"/>
+                                            </button>
+                                        </form>
                                     </div>
                                 </div>
                                 <div class="row justify-content-center ingame-cards-slide" id="card-slide">
@@ -56,16 +69,4 @@
         </div>
     </div>
 </div>
-<script>
+}
-        function waitForFunction(name, checkInterval = 100) {
-            return new Promise(resolve => {
-                const timer = setInterval(() => {
-                    if (typeof window[name] === "function") {
-                        clearInterval(timer);
-                        resolve(window[name]);
-                    }
-                }, checkInterval);
-            });
-        }
-        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
-</script>

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

@@ -1,4 +1,6 @@
 @(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
+
+@main("Tie") {
 <div id="tie" class="game-field game-field-background">
     <div class="ingame-stage blur-sides">
         <div class="container py-4">
@@ -26,7 +28,7 @@
                                         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">
+                                    <form class="row g-2 align-items-center" method="post" action="@routes.IngameController.playTie(gamelobby.id)">
                                         <div class="col-auto">
                                             <label for="tieNumber" class="col-form-label">Your number</label>
                                         </div>
@@ -34,9 +36,9 @@
                                             <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 type="submit" class="btn btn-primary">Confirm</button>
                                         </div>
-                                    </div>
+                                    </form>
                                     <h6 class="mt-4 mb-3">Currently Picked Cards</h6>
 
                                     <div id="cardsplayed" class="row g-3 justify-content-center">
@@ -102,16 +104,4 @@
         </div>
     </div>
 </div>
-<script>
+}
-        function waitForFunction(name, checkInterval = 100) {
-            return new Promise(resolve => {
-                const timer = setInterval(() => {
-                    if (typeof window[name] === "function") {
-                        clearInterval(timer);
-                        resolve(window[name]);
-                    }
-                }, checkInterval);
-            });
-        }
-        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
-</script>

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

@@ -1,5 +1,6 @@
 @(user: Option[model.users.User], gamelobby: logic.game.GameLobby)
 
+@main("Lobby") {
 <main class="lobby-background vh-100" id="lobbybackground">
     <div class="container d-flex flex-column" style="height: calc(100vh - 1rem);">
         <div class="row">
@@ -8,7 +9,7 @@
                     <div class="text-center" style="flex-grow: 1;">
                         Lobby-Name: @gamelobby.name
                     </div>
-                    <div class="btn btn-danger ms-auto" onclick="leaveGame('@gamelobby.id')">Exit</div>
+                        <div class="btn btn-danger ms-auto" onclick="leaveGame('@gamelobby.id')">Exit</div>
                 </div>
             </div>
         </div>
@@ -18,64 +19,57 @@
             </div>
         </div>
         <div class="row justify-content-center align-items-center flex-grow-1">
-        @if((gamelobby.getUserSession(user.get.id).host)) {
+            @if((gamelobby.getUserSession(user.get.id).host)) {
-            <div id="players" class="justify-content-center align-items-center d-flex">
+                <div id="players" class="justify-content-center align-items-center d-flex">
-            @for(playersession <- gamelobby.getPlayers.values) {
+                    @for(playersession <- gamelobby.getPlayers.values) {
-                <div class="col-auto my-auto m-3">
+                        <div class="col-auto my-auto m-3">
-                    <div class="card" style="width: 18rem;">
+                            <div class="card" style="width: 18rem;">
-                        <img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
+                                <img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
-                        <div class="card-body">
+                                <div class="card-body">
-                        @if(playersession.id == user.get.id) {
+                                @if(playersession.id == user.get.id) {
-                            <h5 class="card-title">@playersession.name (You)</h5>
+                                    <h5 class="card-title">@playersession.name (You)</h5>
-                            <a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>
+                                    <a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>
-                        } else {
+                                } else {
-                            <h5 class="card-title">@playersession.name</h5>
+                                    <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="removePlayer('@gamelobby.id', '@playersession.id')">Remove</div>
-                        }
+                                }
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                </div>
-            }
-            </div>
-            <div class="col-12 text-center mb-5">
-                <div class="btn btn-success" onclick="startGame('@gamelobby.id')">Start Game</div>
-            </div>
-        } else {
-            <div id="players" class="justify-content-center align-items-center d-flex">
-            @for(playersession <- gamelobby.getPlayers.values) {
-                <div class="col-auto my-auto m-3"> <div class="card" style="width: 18rem;">
-                    <img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
-                    <div class="card-body">
-                    @if(playersession.id == user.get.id) {
-                        <h5 class="card-title">@playersession.name (You)</h5>
-                    } else {
-                        <h5 class="card-title">@playersession.name</h5>
                     }
+                </div>
+                <div class="col-12 text-center mb-5">
+                    <div class="btn btn-success" onclick="startGame('@gamelobby.id')">Start Game</div>
+                </div>
+            } else {
+                <div id="players" class="justify-content-center align-items-center d-flex">
+                    @for(playersession <- gamelobby.getPlayers.values) {
+                        <div class="col-auto my-auto m-3"> <div class="card" style="width: 18rem;">
+                            <img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
+                            <div class="card-body">
+                            @if(playersession.id == user.get.id) {
+                                <h5 class="card-title">@playersession.name (You)</h5>
+                            } else {
+                                <h5 class="card-title">@playersession.name</h5>
+                            }
+                            </div>
+                        </div>
+                        </div>
+                    }
+                </div>
+                <div class="col-12 text-center mt-3">
+                    <p class="fs-4">Waiting for the host to start the game...</p>
+                    <div class="spinner-border mt-1" role="status">
+                        <span class="visually-hidden">Loading...</span>
                     </div>
                 </div>
-                </div>
             }
-            </div>
-            <div class="col-12 text-center mt-3">
-                <p class="fs-4">Waiting for the host to start the game...</p>
-                <div class="spinner-border mt-1" role="status">
-                    <span class="visually-hidden">Loading...</span>
-                </div>
-            </div>
-        }
         </div>
     </div>
 </main>
 <script>
-        function waitForFunction(name, checkInterval = 100) {
+        document.addEventListener('DOMContentLoaded', () => {
-            return new Promise(resolve => {
+            pollForUpdates('@gamelobby.id');
-                const timer = setInterval(() => {
+        });
-                    if (typeof window[name] === "function") {
+</script>
-                        clearInterval(timer);
+}
-                        resolve(window[name]);
-                    }
-                }, checkInterval);
-            });
-        }
-        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
-</script>

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

@@ -1,42 +1,47 @@
 @()
-<div class="login-box">
-    <div class="card login-card p-4">
-        <div class="card-body">
-            <h3 class="text-center mb-4 text-body">Login</h3>
-            <form onsubmit="login(); return false;">
-                <div class="mb-3">
-                    <label for="username" class="form-label text-body">Username</label>
-                    <input type="text" class="form-control text-body" id="username" name="username" placeholder="Enter Username" required>
-                </div>
 
-                <div class="mb-3">
+@main("Login") {
-                    <label for="password" class="form-label text-body">Password</label>
-                    <input type="password" class="form-control text-body" id="password" name="password" placeholder="Enter password" required>
-                </div>
 
-                <div class="d-flex justify-content-between align-items-center mb-3">
+    <div class="login-box">
-                    <a href="#" class="text-decoration-none">Forgot password?</a>
+        <div class="card login-card p-4">
-                </div>
+            <div class="card-body">
+                <h3 class="text-center mb-4 text-body">Login</h3>
 
-                <div class="d-grid" >
+                <form action="@routes.UserController.login_Post()" method="post">
-                    <button type="submit" class="btn btn-primary">Login</button>
+                    <div class="mb-3">
-                </div>
+                        <label for="username" class="form-label text-body">Username</label>
-            </form>
+                        <input type="text" class="form-control text-body" id="username" name="username" placeholder="Enter Username" required>
+                    </div>
 
-            <p class="text-center mt-3">
+                    <div class="mb-3">
-                Don’t have an account?
+                        <label for="password" class="form-label text-body">Password</label>
-                <a href="#" class="text-decoration-none">Sign up</a>
+                        <input type="password" class="form-control text-body" id="password" name="password" placeholder="Enter password" required>
-            </p>
+                    </div>
+
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                        <a href="#" class="text-decoration-none">Forgot password?</a>
+                    </div>
+
+                    <div class="d-grid">
+                        <button type="submit" class="btn btn-primary">Login</button>
+                    </div>
+                </form>
+
+                <p class="text-center mt-3">
+                    Don’t have an account?
+                    <a href="#" class="text-decoration-none">Sign up</a>
+                </p>
+            </div>
         </div>
     </div>
-</div>
+    <script src="@routes.Assets.versioned("/javascripts/particles.js")"></script>
-<script src="@routes.Assets.versioned("/javascripts/particles.js")"></script>
+    <script>
-<script>
+            particlesJS.load('particles-js', 'assets/conf/particlesjs-config.json', function() {
-        particlesJS.load('particles-js', 'assets/conf/particlesjs-config.json', function() {
+                console.log('callback - particles.js config loaded');
-            console.log('callback - particles.js config loaded');
+            });
-        });
+    </script>
-</script>
+    <div id="particles-js" style="background-color: rgb(11, 8, 8);
-<div id="particles-js" style="background-color: rgb(11, 8, 8);
+        background-size: cover;
-    background-size: cover;
+        background-repeat: no-repeat;
-    background-repeat: no-repeat;
+        background-position: 50% 50%;"></div>
-    background-position: 50% 50%;"></div>
+}

knockoutwhistweb/app/views/main.scala.html

@@ -18,13 +18,12 @@
         <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">
+    <body class="d-flex flex-column min-vh-100">
             @* And here's where we render the `Html` object containing
              * the page content. *@
             @content
+        <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>
     </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>
 </html>

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

@@ -1,5 +1,6 @@
 @(user: Option[model.users.User])
 
+@main("Create Game") {
 @navbar(user)
 <main class="lobby-background flex-grow-1">
     <div class="w-25 mx-auto">
@@ -27,4 +28,5 @@
             <div class="btn btn-success" onclick="createGameJS()">Create Game</div>
         </div>
     </div>
-</main>
+</main>
+}

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

@@ -13,18 +13,18 @@
                     <ul class="navbar-nav mb-2 mb-lg-0">
                         @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>
+                                <a class="nav-link active" aria-current="page" 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" href="@routes.MainMenuController.rules()">Rules</a>
                         </li>
                     </ul>
-                    <form class="navbar-nav me-auto mb-2 mb-lg-0" onsubmit="joinGame(); return false;">
+                    <form class="navbar-nav me-auto mb-2 mb-lg-0" method="post" action="@routes.MainMenuController.joinGame()">
-                        <input class="form-control me-2" type="text" placeholder="Enter GameCode" id="gameId" aria-label="Join Game"/>
+                        <input class="form-control me-2" type="text" placeholder="Enter GameCode" name="gameId" aria-label="Join Game"/>
                         <button class="btn btn-outline-success" type="submit">Join</button>
                     </form>
                 </div>

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

@@ -1,4 +1,6 @@
 @(user: Option[model.users.User])
+
+@main("Rules") {
     @navbar(user)
 
     <main class="lobby-background flex-grow-1">
@@ -175,3 +177,4 @@
             </div>
         </div>
     </main>
+}

knockoutwhistweb/conf/routes

@@ -4,38 +4,34 @@
 # ~~~~
 
 # 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)
 
-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)
+GET    /game/:id/join               controllers.IngameController.joinGame(id: String)
-POST    /game/:id/kickPlayer/:playerToKick  controllers.IngameController.kickPlayer(id: String, playerToKick: String)
+GET    /game/:id/start              controllers.IngameController.startGame(id: String)
+POST    /game/:id/kickPlayer         controllers.IngameController.kickPlayer(id: String, playerId: String)
 
-POST    /game/:id/trump                     controllers.IngameController.playTrump(id: String)
+POST    /game/:id/trump              controllers.IngameController.playTrump(id: String)
-POST    /game/:id/tie                       controllers.IngameController.playTie(id: String)
+POST    /game/:id/tie                  controllers.IngameController.playTie(id: String)
-
-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)
 
+GET     /game/:id/leaveGame         controllers.IngameController.leaveGame(id: String)
+POST   /game/:id/playCard           controllers.IngameController.playCard(id: String)
 # Polling
-GET    /polling/:gameId                     controllers.PollingController.polling(gameId: String)
+GET    /polling                    controllers.PollingController.polling(gameId: String)

knockoutwhistweb/public/javascripts/main.js

@@ -80,292 +80,275 @@
 })()
 
 function pollForUpdates(gameId) {
-    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.");
+        console.error("Game ID is missing. Stopping poll.");
         return;
     }
-    const $handElement = $('#card-slide');
+    const element = document.getElementById('card-slide');
-    const $lobbyElement = $('#lobbybackground');
+    const element2 = document.getElementById('lobbybackground');
-    const $mainmenuElement = $('#main-menu-screen')
+    // Safety check for the target element
-    const $mainbody = $('#main-body')
+    if (!element && !element2) {
-    if (!$handElement.length && !$lobbyElement.length && !$mainmenuElement.length && !$mainbody.length) {
+        console.error("Polling target element not found. Stopping poll.");
-        setTimeout(() => pollForUpdates(gameId), 1000);
+        // Use a timeout to retry in case the DOM loads late, passing gameId.
+        setTimeout(() => pollForUpdates(gameId), 5000);
         return;
     }
     const route = jsRoutes.controllers.PollingController.polling(gameId);
-    $.ajax({
-        url: route.url,
-        type: 'GET',
-        dataType: 'json',
 
-        success: (data => {
+    // Call your specific controller endpoint
-            if (!data) {
+    fetch(route.url)
-                console.log("[DEBUG] Received 204 No Content (Timeout). Restarting poll.");
+        .then(response => {
-                return;
+            if (response.status === 204) {
-            }
+                console.log("Polling: Timeout reached. Restarting poll.");
-            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) {
+                // CRITICAL: Pass gameId in the recursive call
-                        $handElement.addClass('ingame-cards-slide');
+                setTimeout(() => pollForUpdates(gameId), 5000);
-                } else {
+            } else if (response.ok && response.status === 200) {
-                    $handElement.removeClass('ingame-cards-slide');
+                response.json().then(data => {
-                }
 
-                const dog = data.dog;
+                    if (data.status === "cardPlayed" && data.handData && element) {
+                        console.log("Event received: Card played. Redrawing hand.");
 
-                newHand.forEach((cardId, index) => {
+                        const newHand = data.handData;
-                    const cardHtml = `
+                        let newHandHTML = '';
-                        <div class="col-auto handcard" style="border-radius: 6px">
+                        element.innerHTML = '';
-                            <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) {
+                        if(data.animation) {
-                    newHandHTML += `
+                            if (!element.classList.contains('ingame-cards-slide')) {
-                        <div class="mt-2">
+                                element.classList.add('ingame-cards-slide');
-                            <button class="btn btn-danger" onclick="handleSkipDogLife(this, '${gameId}')">Skip Dog Life</button>
+                            }
-                        </div>
+                        } else {
-                    `;
+                            element.classList.remove('ingame-cards-slide');
-                }
+                        }
 
-                $handElement.html(newHandHTML);
+                        newHand.forEach((cardId, index) => {
-
+                            const cardHtml = `
-                if (data.yourTurn) {
+                                <div class="col-auto handcard" style="border-radius: 6px">
-                    $handElement.removeClass('inactive');
+                                    <div class="btn btn-outline-light p-0 border-0 shadow-none" 
-                } else {
+                                         data-card-id="${index}" 
-                    $handElement.addClass('inactive');
+                                         style="border-radius: 6px" 
-                }
+                                         onclick="handlePlayCard(this, '${gameId}')">
-
+                                        
-                $('#current-player-name').text(data.currentPlayerName)
+                                        <img src="/assets/images/cards/${cardId}.png" width="120px" style="border-radius: 6px"/>
-                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>
+                            `;
-                        `;
+                            newHandHTML += cardHtml;
-                    });
+                        });
-                    $('#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">
+                        element.innerHTML = newHandHTML;
-                        <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") {
+                        const currentPlayerElement = document.getElementById('current-player-name');
-                        imageSrc = "/assets/images/cards/1B.png";
+                        if (currentPlayerElement) {
-                        altText = "Blank Card";
+                            currentPlayerElement.textContent = data.currentPlayerName;
-                    } else {
+                        }
-                        imageSrc = `/assets/images/cards/${cardId}.png`;
+                        const nextPlayerElement = document.getElementById('next-player-name');
+                        if (nextPlayerElement && data.nextPlayer) {
+                            // Use the correctly named field from the server response
+                            nextPlayerElement.textContent = data.nextPlayer;
+                        } else {
+                            // Case 2: Player name is empty or null (signal to clear display).
+                            nextPlayerElement.textContent = "";
+                        }
+
+                        const trumpElement = document.getElementById('trump-suit');
+                        if (trumpElement) {
+                            trumpElement.textContent = data.trumpSuit;
+                        }
+                        const trickContainer = document.getElementById('trick-cards-container');
+                        if (trickContainer) {
+                            let trickHTML = '';
+
+                            // Iterate over the array of played cards received from the server
+                            data.trickCards.forEach(trickCard => {
+                                // Reconstruct the HTML structure from your template
+                                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>
+                                `;
+                            });
+                            trickContainer.innerHTML = trickHTML;
+                        }
+                        const scoreBody = document.getElementById('score-table-body');
+                        if (scoreBody && 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>
+                                `;
+                            });
+                            scoreBody.innerHTML = scoreHTML;
+                        }
+                        const firstCardContainer = document.getElementById('first-card-container');
+                        const cardId = data.firstCardId; // This will be "KH", "S7", or "BLANK"
+
+                        if (firstCardContainer) {
+                            let imageSrc = '';
+                            let altText = 'First Card';
+
+                            // Check if a card was actually played or if it's the start of a trick
+                            if (cardId === "BLANK") {
+                                imageSrc = "/assets/images/cards/1B.png";
+                                altText = "Blank Card";
+                            } else {
+                                imageSrc = `/assets/images/cards/${cardId}.png`;
+                            }
+
+                            // Reconstruct the image HTML (assuming the inner element needs replacement)
+                            const newImageHTML = `
+                                <img src="${imageSrc}" alt="${altText}" width="80px" style="border-radius: 6px"/>
+                            `;
+
+                            // Clear the container and insert the new image
+                            firstCardContainer.innerHTML = newImageHTML;
+                        }
+                    } else if (data.status === "reloadEvent") {
+                        window.location.href = data.redirectUrl;
+                    } else if (data.status === "lobbyUpdate") {
+                        const players = document.getElementById("players");
+                        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.innerHTML = newHtml;
                     }
-
+                    pollForUpdates(gameId);
-                    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);
             } else {
-                console.warn(`[DEBUG] Received unknown status: ${data.status}`);
+                // Handle network or server errors
+                console.error(`Polling error: Status ${response.status}`);
+                // Wait before retrying, passing gameId correctly
+                setTimeout(() => pollForUpdates(gameId), 5000);
             }
-        }),
-        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: (() => {
-            if (!window.location.href.includes("game")) {
-                console.log("[DEBUG] Page URL changed. Stopping poll restart.");
-                return;
-            }
-            setTimeout(() => pollForUpdates(gameId), 200);
         })
-    })
+        .catch(error => {
+            console.error("Network error during polling:", error);
+            // Wait before retrying on network failure, passing gameId correctly
+            setTimeout(() => pollForUpdates(gameId), 5000);
+        });
 }
 
 function createGameJS() {
-    let lobbyName = $('#lobbyname').val();
+    let lobbyName = document.getElementById("lobbyname").value;
-    if ($.trim(lobbyName) === "") {
+    if (lobbyName === "") {
         lobbyName = "DefaultLobby"
     }
+    const playerAmount = document.getElementById("playeramount").value;
     const jsonObj = {
         lobbyname: lobbyName,
-        playeramount: $("#playeramount").val()
+        playeramount: playerAmount
     }
     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();
 
-    $.ajax({
+    fetch(route.url, {
-        url: route.url,
+        method: route.type,
-        type: route.type,
+        headers: {
-        contentType: 'application/json',
+            'Content-Type': 'application/json',
-        data: JSON.stringify(dataObject),
+        },
-        dataType: 'json',
+        body: JSON.stringify(dataObject)
-        success: (data => {
-            if (data.status === 'success') {
-                exchangeBody(data.content, "Knockout Whist - Lobby", 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}`);
-            }
-        })
     })
-}
+        .then(response => {
-
+            return response.json().then(data => {
-function exchangeBody(content, title = "Knockout Whist", url = null) {
+                if (!response.ok) {
-    if (url) {
+                    return Promise.reject(data);
-        window.history.pushState({}, title, url);
+                }
-    }
+                return data;
-    $("#main-body").html(content);
+            });
-    document.title = title;
+        })
-}
+        .then(data => {
-
-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) => {
+        .catch(error => {
-            const errorData = JSON.parse(jqXHR.responseText);
+            if (error && error.errorMessage) {
-            if (errorData && errorData.errorMessage) {
+                alert(`${error.errorMessage}`);
-                alert(`${errorData.errorMessage}`);
             } else {
-                alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
+                alert('An unexpected error occurred. Please try again.');
+            }
+        });
+}
+function startGame(gameId) {
+    sendGameStartRequest(gameId)
+}
+function sendGameStartRequest(gameId) {
+    const route = jsRoutes.controllers.IngameController.startGame(gameId);
+
+    fetch(route.url, {
+        method: route.type,
+    })
+        .then(response => {
+            return response.json().then(data => {
+                if (!response.ok) {
+                    return Promise.reject(data);
+                }
+                return data;
+            });
+        })
+        .then(data => {
+            // SUCCESS BLOCK: data is the { status: 'success', ... } object
+            if (data.status === 'success') {
+                window.location.href = data.redirectUrl;
             }
         })
-    })
+        .catch(error => {
+            if (error && error.errorMessage) {
+                alert(`${error.errorMessage}`);
+            } else {
+                alert('An unexpected error occurred. Please try again.');
+            }
+        });
 }
 function removePlayer(gameid, playersessionId) {
     sendRemovePlayerRequest(gameid, playersessionId)
@@ -374,148 +357,33 @@ function removePlayer(gameid, playersessionId) {
 function sendRemovePlayerRequest(gameId, playersessionId) {
     const route = jsRoutes.controllers.IngameController.kickPlayer(gameId, playersessionId);
 
-    $.ajax({
+    fetch(route.url, {
-        url: route.url,
+        method: route.type,
-        type: route.type,
+        headers: {
-        contentType: 'application/json',
+            'Content-Type': 'application/json',
-        dataType: 'json',
+        }
-        success: (data => {
+    })
+        .then(response => {
+            return response.json().then(data => {
+                if (!response.ok) {
+                    return Promise.reject(data);
+                }
+                return data;
+            });
+        })
+        .then(data => {
+            // SUCCESS BLOCK: data is the { status: 'success', ... } object
             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}`);
-            }
         })
-    })
+        .catch(error => {
-}
+            if (error && error.errorMessage) {
-
-function login() {
-    const username = $('#username').val();
-    const password = $('#password').val();
-
-    const jsonObj = {
-        username: username,
-        password: password
-    };
-
-    const route = jsRoutes.controllers.UserController.login_Post();
-    $.ajax({
-        url: route.url,
-        type: route.type,
-        contentType: 'application/json',
-        dataType: 'json',
-        data: JSON.stringify(jsonObj),
-        success: (data => {
-            if (data.status === 'success') {
-                exchangeBody(data.content, 'Knockout Whist - Create Game', data.redirectUrl);
-                return
-            }
-            alert('Login failed. Please check your credentials and try again.');
-        }),
-        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 joinGame() {
-    const gameId = $('#gameId').val();
-
-    const jsonObj = {
-        gameId: gameId
-    };
-
-    const route = jsRoutes.controllers.MainMenuController.joinGame();
-    $.ajax({
-        url: route.url,
-        type: route.type,
-        contentType: 'application/json',
-        dataType: 'json',
-        data: JSON.stringify(jsonObj),
-        success: (data => {
-            if (data.status === 'success') {
-                exchangeBody(data.content, "Knockout Whist - Lobby", data.redirectUrl);
-                return
-            }
-            alert('Could not join the game. Please check the Game ID and try again.');
-        }),
-        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}`);
-            }
-        })
-    });
-    return false
-}
-
-function navSpa(page, title) {
-    const route = jsRoutes.controllers.MainMenuController.navSPA(page);
-    $.ajax({
-        url: route.url,
-        type: route.type,
-        contentType: 'application/json',
-        dataType: 'json',
-        data: JSON.stringify(jsonObj),
-        success: (data => {
-            if (data.status === 'success') {
-                exchangeBody(data.content, title, data.redirectUrl);
-                return
-            }
-            alert('Could not join the game. Please check the Game ID and try again.');
-        }),
-        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}`);
-            }
-        })
-    });
-    return false
-}
-
-
-function selectTie(gameId) {
-    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) {
@@ -523,62 +391,43 @@ function leaveGame(gameId) {
 }
 
 function sendLeavePlayerRequest(gameId) {
+
     const route = jsRoutes.controllers.IngameController.leaveGame(gameId);
-    $.ajax({
+    fetch(route.url, {
-        url: route.url,
+        method: route.type,
-        type: route.type,
+    })
-        dataType: 'json',
+        .then(response => {
-        error: ((jqXHR) => {
+            return response.json().then(data => {
-            const errorData = JSON.parse(jqXHR.responseText);
+                if (!response.ok) {
-            if (errorData && errorData.errorMessage) {
+                    return Promise.reject(data);
-                alert(`${errorData.errorMessage}`);
+                }
-            } else {
+                return data;
-                alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
+            });
+        })
+        .then(data => {
+            // SUCCESS BLOCK: data is the { status: 'success', ... } object
+            if (data.status === 'success') {
+                window.location.href = data.redirectUrl;
             }
         })
-    })
+        .catch(error => {
-}
+            if (error && error.errorMessage) {
-
-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) {
+function handlePlayCard(cardobject, gameId) {
     const cardId = cardobject.dataset.cardId;
     const jsonObj = {
         cardID: cardId
     }
-    sendPlayCardRequest(jsonObj, gameId, cardobject, dog)
+    sendPlayCardRequest(jsonObj, gameId, cardobject)
 }
 
-function handleSkipDogLife(cardobject, gameId) {
+function sendPlayCardRequest(jsonObj, gameId, cardobject) {
-
     const wiggleKeyframes = [
         { transform: 'translateX(0)' },
         { transform: 'translateX(-5px)' },
@@ -587,78 +436,44 @@ function handleSkipDogLife(cardobject, gameId) {
         { transform: 'translateX(0)' }
     ];
 
+    // Define the timing options
     const wiggleTiming = {
-        duration: 400,
+        duration: 400, // 0.4 seconds
         iterations: 1,
         easing: 'ease-in-out',
+        // Fill mode ensures the final state is applied until reset
         fill: 'forwards'
     };
+    const route = jsRoutes.controllers.IngameController.playCard(gameId);
 
-    const route = jsRoutes.controllers.IngameController.playDogCard(gameId);
+    fetch(route.url, {
-
+        method: route.type,
-    $.ajax({
+        headers: {
-        url: route.url,
+            'Content-Type': 'application/json',
-        type: route.type,
+        },
-        contentType: 'application/json',
+        body: JSON.stringify(jsonObj)
-        dataType: 'json',
+    })
-        data: JSON.stringify({
+        .then(response => {
-            cardID: 'skip'
+            return response.json().then(data => {
-        }),
+                if (!response.ok) {
-        error: (jqXHR => {
+                    return Promise.reject(data);
-            let error;
+                }
-            try {
+                return data;
-                error = JSON.parse(jqXHR.responseText);
+            });
-            } catch (e) {
+        })
-                console.error("Failed to parse error response:", e);
+        .then(data => {
+            if (data.status === 'success') {
+                //window.location.href = data.redirectUrl;
             }
-            if (error?.errorMessage.includes("You can't skip this round!")) {
+        })
+        .catch(error => {
+            if (error && error.errorMessage.includes("You can't play this card!")) {
                 cardobject.parentElement.animate(wiggleKeyframes, wiggleTiming);
-            } else if (error?.errorMessage) {
+            } else if (error && 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.');
-            }
-        })
-    })
 }
 

versions.env

@@ -1,3 +1,3 @@
-MAJOR=2
+MAJOR=1
-MINOR=0
+MINOR=1
 PATCH=0