feat(ci): Polling

Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: #53

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/app/views/main.scala.html

@@ -22,7 +22,6 @@
             @* 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>

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

@@ -3,7 +3,7 @@
 @main("Create Game") {
 @navbar(user)
 <main class="lobby-background flex-grow-1">
-    <div class="25 mx-auto">
+    <div class="w-25 mx-auto">
         <div class="mt-3">
             <label for="lobbyname" class="form-label">Lobby-Name</label>
             <input type="text" class="form-control" id="lobbyname" name="lobbyname" placeholder="Lobby 1" required>