feat(ui): changed Background color, centered Lobby

Added a background color for the mainmenu and the lobby + centered lobby

knockoutwhistweb/app/assets/stylesheets/dark-mode.less

@@ -3,7 +3,7 @@
     --background-image: url('/assets/images/background.png') !important;
     --color: #f8f9fa !important; /* Light text on dark bg */
     --highlightscolor: rgba(131, 131, 131, 0.75) !important;
-
+    --background-color: #192734;
     /* Bootstrap variable overrides for dark mode */
     --bs-body-color: var(--color);
     --bs-link-color: #66b2ff;

knockoutwhistweb/app/assets/stylesheets/light-mode.less

@@ -2,4 +2,5 @@
   --background-image: url('/assets/images/img.png');
   --color: black;
   --highlightscolor: rgba(0, 0, 0, 0.75);
+  --background-color: rgba(228, 232, 237, 1);
 }

knockoutwhistweb/app/assets/stylesheets/main.less

@@ -14,7 +14,7 @@
   --bs-border-color: rgba(0, 0, 0, 0.125) !important;
   --bs-heading-color: var(--color) !important;
 }
-
+@background-color: var(--background-color);
 @highlightcolor: var(--highlightscolor);
 @background-image: var(--background-image);
 @color: var(--color);
@@ -29,6 +29,10 @@
     background-repeat: no-repeat;
     background-attachment: fixed;
 }
+.lobby-background {
+    background-color: @background-color;
+
+}
 
 .navbar-header{
     text-align:center;

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

@@ -3,6 +3,7 @@
 @(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
 
 @main("Ingame") {
+<main class="game-field-background vh-100">
     <div class="py-5 ms-4 me-4">
 
         <div class="row ms-4 me-4">
@@ -67,4 +68,5 @@
             </div>
         </div>
     </div>
+</main>
 }

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

@@ -1,7 +1,8 @@
 @(user: Option[model.users.User], gamelobby: logic.game.GameLobby)
 
 @main("Lobby") {
-<div class="container">
+<main class="lobby-background vh-100">
+    <div class="container d-flex flex-column" style="height: calc(100vh - 1rem);">
         <div class="row">
             <div class="col">
                 <div class="p-3 fs-1 d-flex align-items-center">
@@ -19,21 +20,20 @@
                 <div class="p-3 text-center fs-4">Playeramount: @gamelobby.getPlayers.size / @gamelobby.maxPlayers</div>
             </div>
         </div>
-    <div class="row justify-content-center">
+        <div class="row justify-content-center align-items-center flex-grow-1">
-
             @if((gamelobby.getUserSession(user.get.id).host)) {
                 @for(playersession <- gamelobby.getPlayers.values) {
-                <div class="col-auto">
+                    <div class="col-auto my-auto">
                         <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>
-@*                                <p class="card-text">Your text could be here!</p>*@
+    @*                                <p class="card-text">Your text could be here!</p>*@
                                     <a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>
                                 } else {
                                     <h5 class="card-title">@playersession.name</h5>
-@*                                <p class="card-text">Your text could be here!</p>*@
+    @*                                <p class="card-text">Your text could be here!</p>*@
                                     <form action="@(routes.IngameController.kickPlayer(gamelobby.id, playersession.id))" method="post">
                                         <button type="submit" class="btn btn-danger">Remove</button>
                                     </form>
@@ -42,15 +42,12 @@
                         </div>
                     </div>
                 }
-            <div class="row">
+                <div class="col-12 text-center mb-5">
-                <div class="col text-center mt-3">
                     <a href="@(routes.IngameController.startGame(gamelobby.id))" class="btn btn-success">Start Game</a>
                 </div>
-            </div>
             } else {
                 @for(playersession <- gamelobby.getPlayers.values) {
-            <div class="col-auto">
+                    <div class="col-auto my-auto"> <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" />
                         <div class="card-body">
                             @if(playersession.id == user.get.id) {
@@ -62,21 +59,15 @@
                         </div>
                     </div>
                 }
-            <div class="row">
+
-                <div class="col mt-3">
+                <div class="col-12 text-center mt-3">
-                    <p class="text-center fs-4">Waiting for the host to start the game...</p>
+                    <p class="fs-4">Waiting for the host to start the game...</p>
-                </div>
+                    <div class="spinner-border mt-1" role="status">
-            </div>
-            <div class="row">
-                <div class="col mt-1">
-                    <div class="text-center">
-                        <div class="spinner-border" role="status">
                         <span class="visually-hidden">Loading...</span>
                     </div>
                 </div>
-                </div>
-            </div>
             }
         </div>
-</div>
+    </div>
+</main>
 }

knockoutwhistweb/app/views/main.scala.html

@@ -18,15 +18,10 @@
         <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 game-field-background">
+    <body class="d-flex flex-column min-vh-100">
-        <main>
             @* And here's where we render the `Html` object containing
              * the page content. *@
             @content
-        </main>
-
-        <footer class="footer">
-        </footer>
 
         <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

@@ -2,7 +2,8 @@
 
 @main("Create Game") {
 @navbar(user)
-<form action="@routes.MainMenuController.createGame()" method="post" class="game-field-background">
+<main class="lobby-background flex-grow-1">
+    <form action="@routes.MainMenuController.createGame()" method="post">
         <div class="w-50 mx-auto">
             <div class="mt-3">
                 <label for="lobbyname" class="form-label">Lobby-Name</label>
@@ -28,5 +29,6 @@
                 <button type="submit" class="btn btn-success">Create Game</button>
             </div>
         </div>
-</form>
+    </form>
+</main>
 }