From a71752df2fe145e9b7eb332f9cfcf11048c45ffa Mon Sep 17 00:00:00 2001 From: LQ63 Date: Sun, 9 Nov 2025 16:34:47 +0100 Subject: [PATCH 1/3] feat(ui): changed Background color, centered Lobby Added a background color for the mainmenu and the lobby + centered lobby --- .../app/assets/stylesheets/dark-mode.less | 2 +- .../app/assets/stylesheets/light-mode.less | 1 + .../app/assets/stylesheets/main.less | 6 +- .../app/views/ingame/ingame.scala.html | 2 + .../app/views/lobby/lobby.scala.html | 119 ++++++++---------- knockoutwhistweb/app/views/main.scala.html | 7 +- .../app/views/mainmenu/creategame.scala.html | 50 ++++---- 7 files changed, 91 insertions(+), 96 deletions(-) diff --git a/knockoutwhistweb/app/assets/stylesheets/dark-mode.less b/knockoutwhistweb/app/assets/stylesheets/dark-mode.less index 02d2efa..c34aab1 100644 --- a/knockoutwhistweb/app/assets/stylesheets/dark-mode.less +++ b/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; diff --git a/knockoutwhistweb/app/assets/stylesheets/light-mode.less b/knockoutwhistweb/app/assets/stylesheets/light-mode.less index 5975dcc..3054bc2 100644 --- a/knockoutwhistweb/app/assets/stylesheets/light-mode.less +++ b/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); } diff --git a/knockoutwhistweb/app/assets/stylesheets/main.less b/knockoutwhistweb/app/assets/stylesheets/main.less index d41bf29..8daeda1 100644 --- a/knockoutwhistweb/app/assets/stylesheets/main.less +++ b/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; diff --git a/knockoutwhistweb/app/views/ingame/ingame.scala.html b/knockoutwhistweb/app/views/ingame/ingame.scala.html index db56c27..ba204cb 100644 --- a/knockoutwhistweb/app/views/ingame/ingame.scala.html +++ b/knockoutwhistweb/app/views/ingame/ingame.scala.html @@ -3,6 +3,7 @@ @(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby) @main("Ingame") { +
@@ -67,4 +68,5 @@
+
} diff --git a/knockoutwhistweb/app/views/lobby/lobby.scala.html b/knockoutwhistweb/app/views/lobby/lobby.scala.html index 46eabb6..a8832e9 100644 --- a/knockoutwhistweb/app/views/lobby/lobby.scala.html +++ b/knockoutwhistweb/app/views/lobby/lobby.scala.html @@ -1,82 +1,73 @@ @(user: Option[model.users.User], gamelobby: logic.game.GameLobby) @main("Lobby") { -
-
-
-
-
- Lobby-Name: @gamelobby.name +
+
+
+
+
+
+ Lobby-Name: @gamelobby.name +
+
+ +
-
- -
-
-
-
-
Playeramount: @gamelobby.getPlayers.size / @gamelobby.maxPlayers
+
+
+
Playeramount: @gamelobby.getPlayers.size / @gamelobby.maxPlayers
+
-
-
- - @if((gamelobby.getUserSession(user.get.id).host)) { - @for(playersession <- gamelobby.getPlayers.values) { -
-
+
+ @if((gamelobby.getUserSession(user.get.id).host)) { + @for(playersession <- gamelobby.getPlayers.values) { +
+
+ Profile +
+ @if(playersession.id == user.get.id) { +
@playersession.name (You)
+ @*

Your text could be here!

*@ + Remove + } else { +
@playersession.name
+ @*

Your text could be here!

*@ +
+ +
+ } +
+
+
+ } +
+ Start Game +
+ } else { + @for(playersession <- gamelobby.getPlayers.values) { +
Profile
@if(playersession.id == user.get.id) { -
@playersession.name (You)
-@*

Your text could be here!

*@ - Remove +
@playersession.name (You)
} else { -
@playersession.name
-@*

Your text could be here!

*@ -
- -
+
@playersession.name
}
-
-
- } -
-
- Start Game -
-
- } else { - @for(playersession <- gamelobby.getPlayers.values) { -
-
- Profile -
- @if(playersession.id == user.get.id) { -
@playersession.name (You)
- } else { -
@playersession.name
- } -
-
-
- } -
-
-

Waiting for the host to start the game...

-
-
-
-
-
-
+ } + +
+

Waiting for the host to start the game...

+
-
- } + } +
-
+
} \ No newline at end of file diff --git a/knockoutwhistweb/app/views/main.scala.html b/knockoutwhistweb/app/views/main.scala.html index daccc3a..12d9c2c 100644 --- a/knockoutwhistweb/app/views/main.scala.html +++ b/knockoutwhistweb/app/views/main.scala.html @@ -18,15 +18,10 @@ - -
+ @* And here's where we render the `Html` object containing * the page content. *@ @content -
- -
-
diff --git a/knockoutwhistweb/app/views/mainmenu/creategame.scala.html b/knockoutwhistweb/app/views/mainmenu/creategame.scala.html index 1e5905c..4872ddc 100644 --- a/knockoutwhistweb/app/views/mainmenu/creategame.scala.html +++ b/knockoutwhistweb/app/views/mainmenu/creategame.scala.html @@ -2,31 +2,33 @@ @main("Create Game") { @navbar(user) -
-
-
- - -
-
- - -
+
+ +
- - -
- 2 - 3 - 4 - 5 - 6 - 7 -
+ + +
+
+ + +
+
+ + +
+ 2 + 3 + 4 + 5 + 6 + 7 +
+
+
+
-
-
-
- + +
} \ No newline at end of file -- 2.52.0 From c948e5e800bb5cc90b81ed9d474a288490437ef1 Mon Sep 17 00:00:00 2001 From: LQ63 Date: Sun, 9 Nov 2025 17:19:17 +0100 Subject: [PATCH 2/3] feat(ui): Tricktable Added a trick-table displaying the players with their won tricks sorted by the person with the most tricks --- .../app/assets/stylesheets/main.less | 16 +++++ .../app/views/ingame/ingame.scala.html | 60 +++++++++++++------ 2 files changed, 57 insertions(+), 19 deletions(-) diff --git a/knockoutwhistweb/app/assets/stylesheets/main.less b/knockoutwhistweb/app/assets/stylesheets/main.less index 8daeda1..d449d2b 100644 --- a/knockoutwhistweb/app/assets/stylesheets/main.less +++ b/knockoutwhistweb/app/assets/stylesheets/main.less @@ -209,4 +209,20 @@ body { color: @color; font-size: 1.5em; font-family: Arial, serif; +} +.score-table { + background-color: rgba(255, 255, 255, 0.1); + border-radius: 8px; + padding: 10px; + margin-bottom: 20px; + backdrop-filter: blur(8px); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} +.score-header { + font-weight: bold; + color: #ffffff; + border-bottom: 1px solid rgba(255, 255, 255, 0.3); +} +.score-row { + color: #ffffff; } \ No newline at end of file diff --git a/knockoutwhistweb/app/views/ingame/ingame.scala.html b/knockoutwhistweb/app/views/ingame/ingame.scala.html index ba204cb..c4640e2 100644 --- a/knockoutwhistweb/app/views/ingame/ingame.scala.html +++ b/knockoutwhistweb/app/views/ingame/ingame.scala.html @@ -11,15 +11,37 @@

Current Player

@gamelobby.getLogic.getCurrentPlayer.get.name

@if(!TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) { -

Next Player

- @for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) { -

@nextplayer

- } +

Next Player

+ @for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) { +

@nextplayer

+ } }
-
- @for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) { +
+ +
+

Tricks Won

+ +
+
PLAYER
+
TRICKS
+
+ + @for(player <- gamelobby.getLogic.getPlayerQueue.get.toList.sortBy { p => + -(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(p) }.size) + }) { +
+
@player.name
+
+ @(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(player) }.size) +
+
+ } + +
+
+ @for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
@@ -30,20 +52,20 @@
- } + } +
-

Trumpsuit

@gamelobby.getLogic.getCurrentRound.get.trumpSuit

First Card
- @if(gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) { + @if(gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) { @util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get) width="80px"/> - } else { + } else { @views.html.render.card.apply("images/cards/1B.png")("Blank Card") width="80px"/> - } + }
@@ -56,14 +78,14 @@
@for(i <- player.currentHand().get.cards.indices) { -
-
- - -
-
+
+
+ + +
+
}
-- 2.52.0 From 33989efedc793aa4f278383d4dcfb10952dc07f1 Mon Sep 17 00:00:00 2001 From: LQ63 Date: Tue, 11 Nov 2025 12:02:40 +0100 Subject: [PATCH 3/3] feat(ui): Ingame layout Added a horizontal end for the container to not stretch endlessly to the sides. Covered sides with lobby background and adjusted the blur behind the cards to match the playing area. --- .../app/assets/stylesheets/main.less | 19 ++- .../app/views/ingame/ingame.scala.html | 153 +++++++++--------- 2 files changed, 86 insertions(+), 86 deletions(-) diff --git a/knockoutwhistweb/app/assets/stylesheets/main.less b/knockoutwhistweb/app/assets/stylesheets/main.less index d449d2b..145789b 100644 --- a/knockoutwhistweb/app/assets/stylesheets/main.less +++ b/knockoutwhistweb/app/assets/stylesheets/main.less @@ -24,14 +24,14 @@ } .game-field-background { background-image: @background-image; - background-size: cover; - background-position: center center; - background-repeat: no-repeat; - background-attachment: fixed; + max-width: 1400px; + margin: 0 auto; + min-height: 100vh; } .lobby-background { background-color: @background-color; - + width: 100%; + height: 100vh; } .navbar-header{ @@ -49,8 +49,11 @@ .bottom-div { position: fixed; bottom: 0; - left: 0; + left: 50%; + transform: translateX(-50%); + max-width: 1400px; width: 100%; + margin: 0; text-align: center; padding: 10px; } @@ -220,9 +223,9 @@ body { } .score-header { font-weight: bold; - color: #ffffff; + color: #000000; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .score-row { - color: #ffffff; + color: #000000; } \ No newline at end of file diff --git a/knockoutwhistweb/app/views/ingame/ingame.scala.html b/knockoutwhistweb/app/views/ingame/ingame.scala.html index c4640e2..e18bb49 100644 --- a/knockoutwhistweb/app/views/ingame/ingame.scala.html +++ b/knockoutwhistweb/app/views/ingame/ingame.scala.html @@ -3,92 +3,89 @@ @(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby) @main("Ingame") { -
-
+
+
+
-
-
-

Current Player

-

@gamelobby.getLogic.getCurrentPlayer.get.name

- @if(!TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) { -

Next Player

- @for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) { -

@nextplayer

- } - } -
- -
- -
-

Tricks Won

- -
-
PLAYER
-
TRICKS
-
- - @for(player <- gamelobby.getLogic.getPlayerQueue.get.toList.sortBy { p => - -(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(p) }.size) - }) { -
-
@player.name
-
- @(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(player) }.size) -
-
+
+
+

Current Player

+

@gamelobby.getLogic.getCurrentPlayer.get.name

+ @if(!TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) { +

Next Player

+ @for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) { +

@nextplayer

+ } } -
-
- @for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) { -
-
-
- @util.WebUIUtils.cardtoImage(cardplayed) width="100%"/> -
-
- @player + +
+ +
+

Tricks Won

+ +
+
PLAYER
+
TRICKS
+
+ + @for(player <- gamelobby.getLogic.getPlayerQueue.get.toList.sortBy { p => + -(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(p) }.size) + }) { +
+
@player.name
+
+ @(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(player) }.size)
+ } + +
+
+ @for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) { +
+
+
+ @util.WebUIUtils.cardtoImage(cardplayed) width="100%"/> +
+
+ @player +
+
+
+ } +
+
+
+

Trumpsuit

+

@gamelobby.getLogic.getCurrentRound.get.trumpSuit

+ +
First Card
+
+ @if(gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) { + @util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get) width="80px"/> + } else { + @views.html.render.card.apply("images/cards/1B.png")("Blank Card") width="80px"/> + } +
+
+
+ +
+
+ @for(i <- player.currentHand().get.cards.indices) { +
+
+ + +
}
-
-

Trumpsuit

-

@gamelobby.getLogic.getCurrentRound.get.trumpSuit

- -
First Card
-
- @if(gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) { - @util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get) width="80px"/> - } else { - @views.html.render.card.apply("images/cards/1B.png")("Blank Card") width="80px"/> - } -
-
- - -
- -
- -
-
- @for(i <- player.currentHand().get.cards.indices) { -
-
- - -
-
- } -
-
-
-
+
+
} -- 2.52.0