knockoutwhistweb/app/assets/stylesheets/main.less

@@ -22,6 +22,7 @@
   0% { transform: translateX(-100vw); }
   100% { transform: translateX(0); }
 }
+
 .game-field-background {
     background-image: @background-image;
     max-width: 1400px;
@@ -184,11 +185,6 @@ body {
     font-size: 20px;
 
 }
-#trumpsuit {
-    display: flex;
-    flex-direction: row;
-    margin-left: 4%;
-}
 #nextPlayers {
     display: flex;
     flex-direction: column;

knockoutwhistweb/app/controllers/IngameController.scala

@@ -1,30 +1,121 @@
 package controllers
 
 import auth.{AuthAction, AuthenticatedRequest}
+import de.knockoutwhist.cards.Hand
 import de.knockoutwhist.control.GameState.{InGame, Lobby, SelectTrump, TieBreak}
 import exceptions.{CantPlayCardException, GameFullException, NotEnoughPlayersException, NotHostException, NotInThisGameException}
 import logic.PodManager
+import logic.game.PollingEvents.CardPlayed
+import logic.game.PollingEvents.GameStarted
+import logic.game.{GameLobby, PollingEvents}
 import model.sessions.{PlayerSession, UserSession}
+import model.users.User
 import play.api.*
-import play.api.libs.json.Json
+import play.api.libs.json.{JsArray, JsValue, Json}
 import play.api.mvc.*
+import util.WebUIUtils
 
 import java.util.UUID
 import javax.inject.*
+import scala.concurrent.Future
 import scala.util.Try
-
-
-/**
- * This controller creates an `Action` to handle HTTP requests to the
- * application's home page.
- */
+import scala.concurrent.ExecutionContext
 @Singleton
-class IngameController @Inject()(
-                                  val controllerComponents: ControllerComponents,
-                                  val authAction: AuthAction,
-                                  val podManager: PodManager
-                                ) extends BaseController {
+class IngameController @Inject() (
+                                   val cc: ControllerComponents,
+                                   val podManager: PodManager,
+                                   val authAction: AuthAction,
+                                   implicit val ec: ExecutionContext
+                                 ) extends AbstractController(cc) {
 
+  // --- Helper function (defined outside match/if for scope) ---
+  def buildSuccessResponse(game: GameLobby, hand: Option[Hand]): JsValue = {
+    // NOTE: Replace the unsafe .get calls here if game state is not guaranteed
+    val currentRound = game.logic.getCurrentRound.get
+    val currentTrick = game.logic.getCurrentTrick.get
+
+    // JSON Building Logic:
+    val trickCardsJson = Json.toJson(
+      currentTrick.cards.map { case (card, player) =>
+        Json.obj("cardId" -> WebUIUtils.cardtoString(card), "player" -> player.name)
+      }
+    )
+    val scoreTableJson = Json.toJson(
+      game.getLogic.getPlayerQueue.get.toList.map { player =>
+        Json.obj(
+          "name" -> player.name,
+          "tricks" -> currentRound.tricklist.count(_.winner.contains(player))
+        )
+      }
+    )
+
+    val stringHand = hand.map { h =>
+      val cardStrings = h.cards.map(WebUIUtils.cardtoString(_))
+      Json.toJson(cardStrings).as[JsArray]
+    }.getOrElse(Json.arr())
+
+    val firstCardId = currentTrick.firstCard.map(WebUIUtils.cardtoString).getOrElse("BLANK")
+    val nextPlayer = game.getLogic.getPlayerQueue.get.duplicate().nextPlayer().name
+    Json.obj(
+      "status" -> "cardPlayed",
+      "handData" -> stringHand,
+      "currentPlayerName" -> game.logic.getCurrentPlayer.get.name,
+      "trumpSuit" -> currentRound.trumpSuit.toString,
+      "trickCards" -> trickCardsJson,
+      "scoreTable" -> scoreTableJson,
+      "firstCardId" -> firstCardId,
+      "nextPlayer" -> nextPlayer
+    )
+  }
+
+  def handleEvent(event: PollingEvents, game: GameLobby, user: User): Result = {
+    event match {
+      case CardPlayed =>
+        val player = game.getPlayerByUser(user)
+        val hand = player.currentHand()
+        val jsonResponse = buildSuccessResponse(game, hand)
+        Ok(jsonResponse)
+      case GameStarted =>
+        val jsonResponse = Json.obj(
+          "status" -> "gameStart",
+          "redirectUrl" -> routes.IngameController.game(game.id).url
+        )
+        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) =>
+
+        // 2. Short-Poll Check (Check for missed events)
+        if (game.getPollingState.nonEmpty) {
+          val event = game.getPollingState.dequeue()
+
+          Future.successful(handleEvent(event, game, request.user))
+        } else {
+
+          val eventPromise = game.registerWaiter(playerId)
+
+          eventPromise.future.map { event =>
+            game.removeWaiter(playerId)
+            handleEvent(event, game, request.user)
+          }.recover {
+            case _: Throwable =>
+              game.removeWaiter(playerId)
+              NoContent
+          }
+        }
+
+      case None =>
+        // Game not found
+        Future.successful(NotFound("Game not found."))
+    }
+  }
   def game(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
     val game = podManager.getGame(gameId)
     game match {

knockoutwhistweb/app/controllers/JavaScriptRoutingController.scala

@@ -19,7 +19,8 @@ class JavaScriptRoutingController  @Inject()(
           routes.javascript.IngameController.startGame,
           routes.javascript.IngameController.kickPlayer,
           routes.javascript.IngameController.leaveGame,
-          routes.javascript.IngameController.playCard
+          routes.javascript.IngameController.playCard,
+          routes.javascript.IngameController.polling
       )
     ).as("text/javascript")
   }

knockoutwhistweb/app/logic/game/GameLobby.scala

@@ -2,21 +2,23 @@ package logic.game
 
 import de.knockoutwhist.cards.{Hand, Suit}
 import de.knockoutwhist.control.GameLogic
-import de.knockoutwhist.control.GameState.{Lobby, MainMenu}
+import de.knockoutwhist.control.GameState.{InGame, Lobby, MainMenu}
 import de.knockoutwhist.control.controllerBaseImpl.sublogic.util.{MatchUtil, PlayerUtil}
-import de.knockoutwhist.events.global.{GameStateChangeEvent, SessionClosed}
+import de.knockoutwhist.events.global.{CardPlayedEvent, GameStateChangeEvent, SessionClosed}
 import de.knockoutwhist.events.player.PlayerEvent
 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, GameStarted}
 import model.sessions.{InteractionType, UserSession}
 import model.users.User
 
 import java.util.UUID
 import scala.collection.mutable
 import scala.collection.mutable.ListBuffer
+import scala.concurrent.{Promise => ScalaPromise}
 
 class GameLobby private(
                  val logic: GameLogic,
@@ -29,7 +31,19 @@ class GameLobby private(
   logic.createSession()
 
   private val users: mutable.Map[UUID, UserSession] = mutable.Map()
-  
+  private var pollingState: mutable.Queue[PollingEvents] = mutable.Queue()
+  private val waitingPromises: mutable.Map[UUID, ScalaPromise[PollingEvents]] = mutable.Map()
+
+  def registerWaiter(playerId: UUID): ScalaPromise[PollingEvents] = {
+    val promise = ScalaPromise[PollingEvents]()
+    waitingPromises.put(playerId, promise)
+    promise
+  }
+
+  def removeWaiter(playerId: UUID): Unit = {
+    waitingPromises.remove(playerId)
+  }
+
   def addUser(user: User): UserSession = {
     if (users.size >= maxPlayers) throw new GameFullException("The game is full!")
     if (users.contains(user.id)) throw new IllegalArgumentException("User is already in the game!")
@@ -44,12 +58,29 @@ class GameLobby private(
 
   override def listen(event: SimpleEvent): Unit = {
     event match {
+      case event: CardPlayedEvent =>
+        val newEvent = PollingEvents.CardPlayed
+        if (waitingPromises.nonEmpty) {
+          waitingPromises.values.foreach(_.success(newEvent))
+          waitingPromises.clear()
+        } else {
+          pollingState.enqueue(newEvent)
+        }
       case event: PlayerEvent =>
         users.get(event.playerId).foreach(session => session.updatePlayer(event))
       case event: GameStateChangeEvent =>
         if (event.oldState == MainMenu && event.newState == Lobby) {
           return
         }
+        if (event.oldState == Lobby && event.newState == InGame) {
+          val newEvent = PollingEvents.GameStarted
+          if (waitingPromises.nonEmpty) {
+            waitingPromises.values.foreach(_.success(newEvent))
+            waitingPromises.clear()
+          } else {
+            pollingState.enqueue(newEvent)
+          }
+        }
         users.values.foreach(session => session.updatePlayer(event))
       case event: SessionClosed =>
         users.values.foreach(session => session.updatePlayer(event))
@@ -183,7 +214,9 @@ class GameLobby private(
   def getLogic: GameLogic = {
     logic
   }
-
+  def getPollingState: mutable.Queue[PollingEvents] = {
+    pollingState
+  }
   private def getPlayerBySession(userSession: UserSession): AbstractPlayer = {
     val playerOption = getMatch.totalplayers.find(_.id == userSession.id)
     if (playerOption.isEmpty) {

knockoutwhistweb/app/logic/game/PollingEvents.scala

@@ -0,0 +1,6 @@
+package logic.game
+
+enum PollingEvents {
+  case CardPlayed
+  case GameStarted
+}

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

@@ -10,18 +10,18 @@
             <div class="row ms-4 me-4">
                 <div class="col-4 mt-5 text-start">
                     <h4 class="fw-semibold mb-1">Current Player</h4>
-                    <p class="fs-5 text-primary">@gamelobby.getLogic.getCurrentPlayer.get.name</p>
+                    <p class="fs-5 text-primary" id="current-player-name">@gamelobby.getLogic.getCurrentPlayer.get.name</p>
                     @if(!TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) {
                     <h4 class="fw-semibold mb-1">Next Player</h4>
                     @for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {
-                    <p class="fs-5 text-primary">@nextplayer</p>
+                    <p class="fs-5 text-primary" id="next-player-name">@nextplayer</p>
                     }
                     }
                 </div>
 
                 <div class="col-4 text-center">
 
-                    <div class="score-table mt-5">
+                    <div class="score-table mt-5" id="score-table-body">
                         <h4 class="fw-bold mb-3 text-black">Tricks Won</h4>
 
                         <div class="d-flex justify-content-between score-header pb-1">
@@ -41,7 +41,7 @@
                         }
 
                     </div>
-                    <div class="d-flex justify-content-center g-3 mb-5">
+                    <div class="d-flex justify-content-center g-3 mb-5" id="trick-cards-container">
                         @for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
                         <div class="col-auto">
                             <div class="card text-center shadow-sm border-0 bg-transparent" style="width: 7rem; backdrop-filter: blur(4px);">
@@ -58,10 +58,10 @@
                 </div>
                 <div class="col-4 mt-5 text-end">
                     <h4 class="fw-semibold mb-1">Trumpsuit</h4>
-                    <p class="fs-5 text-primary">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p>
+                    <p class="fs-5 text-primary" id="trumpsuit">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p>
 
                     <h5 class="fw-semibold mt-4 mb-1">First Card</h5>
-                    <div class="d-inline-block border rounded shadow-sm p-1 bg-light">
+                    <div class="d-inline-block border rounded shadow-sm p-1 bg-light" id="first-card-container">
                         @if(gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) {
                         @util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get) width="80px"/>
                         } else {
@@ -85,4 +85,9 @@
         </div>
     </main>
 </div>
+<script>
+        document.addEventListener('DOMContentLoaded', () => {
+            pollForUpdates('@gamelobby.id');
+        });
+</script>
 }

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

@@ -1,7 +1,7 @@
 @(user: Option[model.users.User], gamelobby: logic.game.GameLobby)
 
 @main("Lobby") {
-<main class="lobby-background vh-100">
+<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">
@@ -66,4 +66,9 @@
         </div>
     </div>
 </main>
+<script>
+        document.addEventListener('DOMContentLoaded', () => {
+            pollForUpdates('@gamelobby.id');
+        });
+</script>
 }

knockoutwhistweb/conf/routes

@@ -28,4 +28,6 @@ GET    /game/:id/join               controllers.IngameController.joinGame(id: St
 GET    /game/:id/start              controllers.IngameController.startGame(id: String)
 POST    /game/:id/kickPlayer         controllers.IngameController.kickPlayer(id: String, playerId: String)
 GET     /game/:id/leaveGame         controllers.IngameController.leaveGame(id: String)
-POST   /game/:id/playCard           controllers.IngameController.playCard(id: String)
+POST   /game/:id/playCard           controllers.IngameController.playCard(id: String)
+# Polling
+GET    /polling                    controllers.IngameController.polling(gameId: String)

knockoutwhistweb/public/javascripts/main.js

@@ -79,6 +79,157 @@
     })
 })()
 
+function pollForUpdates(gameId) {
+    if (!gameId) {
+        console.error("Game ID is missing. Stopping poll.");
+        return;
+    }
+    const element = document.getElementById('card-slide');
+    const element2 = document.getElementById('lobbybackground');
+    // Safety check for the target element
+    if (!element && !element2) {
+        console.error("Polling target element not found. Stopping poll.");
+        // Use a timeout to retry in case the DOM loads late, passing gameId.
+        setTimeout(() => pollForUpdates(gameId), 5000);
+        return;
+    }
+    const route = jsRoutes.controllers.IngameController.polling(gameId);
+
+    // Call your specific controller endpoint
+    fetch(route.url)
+        .then(response => {
+            if (response.status === 204) {
+                console.log("Polling: Timeout reached. Restarting poll.");
+
+                // CRITICAL: Pass gameId in the recursive call
+                setTimeout(() => pollForUpdates(gameId), 5000);
+            } else if (response.ok && response.status === 200) {
+                response.json().then(data => {
+
+                    if (data.status === "cardPlayed" && data.handData) {
+                        console.log("Event received: Card played. Redrawing hand.");
+
+                        const newHand = data.handData;
+                        let newHandHTML = '';
+                        element.innerHTML = '';
+
+                        newHand.forEach((cardId, index) => {
+                            const cardHtml = `
+                                <div class="col-auto handcard" style="border-radius: 6px">
+                                    <div class="btn btn-outline-light p-0 border-0 shadow-none" 
+                                         data-card-id="${index}" 
+                                         style="border-radius: 6px" 
+                                         onclick="handlePlayCard(this, '${gameId}')">
+                                        
+                                        <img src="/assets/images/cards/${cardId}.png" width="120px" style="border-radius: 6px"/>
+                                    </div>
+                                </div>
+                            `;
+                            newHandHTML += cardHtml;
+                        });
+
+                        element.innerHTML = newHandHTML;
+
+                        const currentPlayerElement = document.getElementById('current-player-name');
+                        if (currentPlayerElement) {
+                            currentPlayerElement.textContent = data.currentPlayerName;
+                        }
+                        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 === "gameStart") {
+                        window.location.href = data.redirectUrl;
+                    }
+                    pollForUpdates(gameId);
+                });
+            } else {
+                // Handle network or server errors
+                console.error(`Polling error: Status ${response.status}`);
+                // Wait before retrying, passing gameId correctly
+                setTimeout(() => pollForUpdates(gameId), 5000);
+            }
+        })
+        .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 = document.getElementById("lobbyname").value;
     if (lobbyName === "") {
@@ -226,10 +377,26 @@ function handlePlayCard(cardobject, gameId) {
     const jsonObj = {
         cardID: cardId
     }
-    sendPlayCardRequest(jsonObj, gameId)
+    sendPlayCardRequest(jsonObj, gameId, cardobject)
 }
 
-function sendPlayCardRequest(jsonObj, gameId) {
+function sendPlayCardRequest(jsonObj, gameId, cardobject) {
+    const wiggleKeyframes = [
+        { transform: 'translateX(0)' },
+        { transform: 'translateX(-5px)' },
+        { transform: 'translateX(5px)' },
+        { transform: 'translateX(-5px)' },
+        { transform: 'translateX(0)' }
+    ];
+
+    // Define the timing options
+    const wiggleTiming = {
+        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);
 
     fetch(route.url, {
@@ -249,11 +416,13 @@ function sendPlayCardRequest(jsonObj, gameId) {
         })
         .then(data => {
             if (data.status === 'success') {
-                window.location.href = data.redirectUrl;
+                //window.location.href = data.redirectUrl;
             }
         })
         .catch(error => {
-            if (error && error.errorMessage) {
+            if (error && error.errorMessage.includes("You can't play this card!")) {
+                cardobject.parentElement.animate(wiggleKeyframes, wiggleTiming);
+            } else if (error && error.errorMessage) {
                 alert(`${error.errorMessage}`);
             } else {
                 alert('An unexpected error occurred. Please try again.');