feat(ui): changed Background color, centered Lobby

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

CHANGELOG.md

@@ -74,3 +74,40 @@
 * ci: bump version to v1.0.0 [skip ci] ([91d7f6c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/91d7f6ca003edb368aba76b7a82c8b42d22bdbfe))
 * version bumb ([2e10059](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/2e10059a6756befe6f8e70c94fd34b865693efb8))
 * version bump ([7879d1a](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/7879d1ab6ee8f227c19b69b467a28dd7b479ff73))
+
+##  (2025-11-07)
+
+### Bug Fixes
+
+* ensure proper CMD syntax in Dockerfile ([#48](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/48)) ([5c6d3ac](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/5c6d3ac436f6d23a36f58b6835c9bd50feddc789))
+##  (2025-11-07)
+
+### Bug Fixes
+
+* changelog syntax ([2e54880](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/2e548803020c99f62644283fcf3570048261173a))
+##  (2025-11-07)
+
+### Bug Fixes
+
+* removed trailing ([64a7a63](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/64a7a63ab3dff59e66f62328e3b5865bb177fcde))
+##  (2025-11-07)
+
+### Bug Fixes
+
+* traling ([54e3215](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/54e321512777f6722864694eb677eab0e8418a9f))
+##  (2025-11-07)
+
+### Bug Fixes
+
+* removed trailing ([5e503cb](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/5e503cbc364f7cb23926976acc6cee575eadd9d6))
+##  (2025-11-07)
+
+### Bug Fixes
+
+* trailing ([7adc8b8](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/7adc8b8645390cd18d63b4eee6db8ef448b7a46a))
+##  (2025-11-07)
+
+### Bug Fixes
+
+* 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))

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,11 +20,10 @@
                 <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">
@@ -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>
+</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>
@@ -29,4 +30,5 @@
             </div>
         </div>
     </form>
+</main>
 }

versions.env

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