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 64556ef0a16d661160f1753982376f1b01123ce1 Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 9 Nov 2025 20:22:15 +0100 Subject: [PATCH 2/3] feat(ui): enhance game UI with responsive design and new components 43 [Subtask] UI looks better and improved --- .../app/assets/stylesheets/main.less | 38 ++- .../app/controllers/IngameController.scala | 6 +- .../app/views/ingame/selecttrump.scala.html | 101 ++++++-- .../app/views/ingame/tie.scala.html | 86 ++++-- .../app/views/mainmenu/creategame.scala.html | 2 +- .../app/views/mainmenu/navbar.scala.html | 2 +- .../app/views/mainmenu/rules.scala.html | 244 +++++++++++++----- knockoutwhistweb/conf/routes | 4 + 8 files changed, 367 insertions(+), 116 deletions(-) diff --git a/knockoutwhistweb/app/assets/stylesheets/main.less b/knockoutwhistweb/app/assets/stylesheets/main.less index 8daeda1..e1beaa4 100644 --- a/knockoutwhistweb/app/assets/stylesheets/main.less +++ b/knockoutwhistweb/app/assets/stylesheets/main.less @@ -75,6 +75,10 @@ body { overflow: auto; } +.navbar-drop-shadow { + box-shadow: 0 1px 15px 0 #000000 +} + #sessions { display: flex; flex-direction: column; @@ -209,4 +213,36 @@ body { color: @color; font-size: 1.5em; font-family: Arial, serif; -} \ No newline at end of file +} + +/* In-game centered stage and blurred sides overlay */ +.ingame-stage { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 2rem 1rem; +} + +/* Wrapper that adds a backdrop blur to the background outside the centered card */ +.blur-sides { + position: relative; +} + +/* Create an overlay that blurs everything behind it, except the central content area */ +.blur-sides::before { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + /* fallback: subtle vignette if backdrop-filter unsupported */ + background: radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.35) 100%); +} + +@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) { + .blur-sides::before { + background: rgba(0,0,0,0.08); + -webkit-backdrop-filter: blur(10px) saturate(110%); + backdrop-filter: blur(10px) saturate(110%); + } +} diff --git a/knockoutwhistweb/app/controllers/IngameController.scala b/knockoutwhistweb/app/controllers/IngameController.scala index 373701d..22be8db 100644 --- a/knockoutwhistweb/app/controllers/IngameController.scala +++ b/knockoutwhistweb/app/controllers/IngameController.scala @@ -38,12 +38,14 @@ class IngameController @Inject()( case SelectTrump => Ok(views.html.ingame.selecttrump( g.getPlayerByUser(request.user), - g.logic + g.logic, + gameId )) case TieBreak => Ok(views.html.ingame.tie( g.getPlayerByUser(request.user), - g.logic + g.logic, + gameId )) case _ => InternalServerError(s"Invalid game state for in-game view. GameId: $gameId" + s" State: ${g.logic.getCurrentState}") diff --git a/knockoutwhistweb/app/views/ingame/selecttrump.scala.html b/knockoutwhistweb/app/views/ingame/selecttrump.scala.html index 8aef1e3..56a5b64 100644 --- a/knockoutwhistweb/app/views/ingame/selecttrump.scala.html +++ b/knockoutwhistweb/app/views/ingame/selecttrump.scala.html @@ -1,27 +1,88 @@ -@(player: de.knockoutwhist.player.AbstractPlayer, logic: de.knockoutwhist.control.GameLogic) +@(player: de.knockoutwhist.player.AbstractPlayer, logic: de.knockoutwhist.control.GameLogic, gameId: String) @main("Selecting Trumpsuit...") {
- @if(player.equals(logic.getCurrentMatch.get.roundlist.last.winner.get)) { -

Knockout Whist

-

You (@player.toString) have won the last round! Select a trumpsuit for the next round!

-

Available trumpsuits are displayed below:

-
- @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Spades)) - @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs)) - @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Hearts)) - @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Diamonds)) -
-

Your cards

+
+
+
+
+
+
+

Select Trump Suit

+
+
+ @if(player.equals(logic.getCurrentMatch.get.roundlist.last.winner.get)) { + -
- @for(card <- player.currentHand().get.cards) { - @util.WebUIUtils.cardtoImage(card) - } +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ } else { + + +
+
+
+
+ @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Spades)) +
Spades
+
+
+
+
+ @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Hearts)) +
Hearts
+
+
+
+
+ @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Diamonds)) +
Diamonds
+
+
+
+
+ @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs)) +
Clubs
+
+
+
+
+ } +
+
+
+
- } else { -

Knockout Whist

-

@player.toString is choosing a trumpsuit. Starting new round when @player.toString picked a trumpsuit...

- } +
} \ No newline at end of file diff --git a/knockoutwhistweb/app/views/ingame/tie.scala.html b/knockoutwhistweb/app/views/ingame/tie.scala.html index 505c68d..c813cf3 100644 --- a/knockoutwhistweb/app/views/ingame/tie.scala.html +++ b/knockoutwhistweb/app/views/ingame/tie.scala.html @@ -1,27 +1,71 @@ -@(player: de.knockoutwhist.player.AbstractPlayer, logic: de.knockoutwhist.control.GameLogic) +@(player: de.knockoutwhist.player.AbstractPlayer, logic: de.knockoutwhist.control.GameLogic, gameId: String) @main("Tie") {
-

Knockout Whist

-

The last Round was tied between - @for(players <- logic.playerTieLogic.getTiedPlayers) { - @players - } -

- @if(player.equals(logic.playerTieLogic.currentTiePlayer())) { -

Pick a card between 1 and @logic.playerTieLogic.highestAllowedNumber()! The resulting card will be your card for the cut.

- } else { -

@logic.playerTieLogic.currentTiePlayer() is currently picking his number for the cut.

-

Currently picked Cards:

-
- @for((player, card) <- logic.playerTieLogic.getSelectedCard) { -
-

@player

- @util.WebUIUtils.cardtoImage(card) -
- } -
- } +
+
+
+
+
+
+

Tie Break

+
+
+
+
Knockout Whist
+

+ The last round was tied between: + + @for(players <- logic.playerTieLogic.getTiedPlayers) { + @players + } + +

+
+ @if(player.equals(logic.playerTieLogic.currentTiePlayer())) { + @defining(logic.playerTieLogic.highestAllowedNumber()) { maxNum => + + +
+
+ +
+
+ +
+
+ +
+
+ } + } else { + + +
Currently picked cards
+
+ @for((player, card) <- logic.playerTieLogic.getSelectedCard) { +
+
+
+

@player

+ @util.WebUIUtils.cardtoImage(card) +
+
+
+ } +
+ } + +
+
+
+
+
+
} \ No newline at end of file diff --git a/knockoutwhistweb/app/views/mainmenu/creategame.scala.html b/knockoutwhistweb/app/views/mainmenu/creategame.scala.html index 4872ddc..f1de596 100644 --- a/knockoutwhistweb/app/views/mainmenu/creategame.scala.html +++ b/knockoutwhistweb/app/views/mainmenu/creategame.scala.html @@ -4,7 +4,7 @@ @navbar(user)
-
+
diff --git a/knockoutwhistweb/app/views/mainmenu/navbar.scala.html b/knockoutwhistweb/app/views/mainmenu/navbar.scala.html index 5d21070..57d8d41 100644 --- a/knockoutwhistweb/app/views/mainmenu/navbar.scala.html +++ b/knockoutwhistweb/app/views/mainmenu/navbar.scala.html @@ -1,6 +1,6 @@ @(user: Option[model.users.User])
+} diff --git a/knockoutwhistweb/conf/routes b/knockoutwhistweb/conf/routes index bba5dda..e9b1506 100644 --- a/knockoutwhistweb/conf/routes +++ b/knockoutwhistweb/conf/routes @@ -25,6 +25,10 @@ GET /logout controllers.UserController.logout() GET /game/:id controllers.IngameController.game(id: String) GET /game/:id/join controllers.IngameController.joinGame(id: String) GET /game/:id/start controllers.IngameController.startGame(id: String) + +POST /game/:id/trump controllers.IngameController.playTrump(id: String) +POST /game/:id/tie controllers.IngameController.playTie(id: String) + POST /game/:id/kickPlayer controllers.IngameController.kickPlayer(id: String, playerId: java.util.UUID) GET /game/:id/leaveGame controllers.IngameController.leaveGame(id: String) POST /game/:id/playCard controllers.IngameController.playCard(id: String) \ No newline at end of file -- 2.52.0 From fd9f7db257eed970590f6ba391c5a093dc6ab870 Mon Sep 17 00:00:00 2001 From: Janis Date: Wed, 12 Nov 2025 11:44:34 +0100 Subject: [PATCH 3/3] feat(game): implement tie resolution and enhance player interaction 43 [Subtask] UI looks better and improved --- knockoutwhist | 2 +- .../app/controllers/IngameController.scala | 2 +- .../app/logic/game/GameLobby.scala | 3 + .../app/views/ingame/selecttrump.scala.html | 98 ++++++++----------- .../app/views/ingame/tie.scala.html | 58 ++++++++--- 5 files changed, 93 insertions(+), 70 deletions(-) diff --git a/knockoutwhist b/knockoutwhist index b9a7b0a..5aa1cef 160000 --- a/knockoutwhist +++ b/knockoutwhist @@ -1 +1 @@ -Subproject commit b9a7b0a2af7cef7225bf1a0388ebf58171a173f2 +Subproject commit 5aa1cef35689d2df8a89e2d8864fc5fcf9c30e33 diff --git a/knockoutwhistweb/app/controllers/IngameController.scala b/knockoutwhistweb/app/controllers/IngameController.scala index 22be8db..0008ece 100644 --- a/knockoutwhistweb/app/controllers/IngameController.scala +++ b/knockoutwhistweb/app/controllers/IngameController.scala @@ -252,7 +252,7 @@ class IngameController @Inject()( val session = g.getUserSession(request.user.id) optSession = Some(session) session.lock.lock() - g.selectTie(g.getUserSession(request.user.id), tie.toInt) + g.selectTie(g.getUserSession(request.user.id), tie.toInt - 1) } optSession.foreach(_.lock.unlock()) if (result.isSuccess) { diff --git a/knockoutwhistweb/app/logic/game/GameLobby.scala b/knockoutwhistweb/app/logic/game/GameLobby.scala index 486bf4f..0e8ac9f 100644 --- a/knockoutwhistweb/app/logic/game/GameLobby.scala +++ b/knockoutwhistweb/app/logic/game/GameLobby.scala @@ -157,6 +157,9 @@ class GameLobby private( */ def selectTie(userSession: UserSession, tieNumber: Int): Unit = { val player = getPlayerInteractable(userSession, InteractionType.TieChoice) + val highestNumber = logic.playerTieLogic.highestAllowedNumber() + if (tieNumber < 0 || tieNumber > highestNumber) + throw new IllegalArgumentException(s"Selected number $tieNumber is out of allowed range (0 to $highestNumber)") userSession.resetCanInteract() logic.playerTieLogic.receivedTieBreakerCard(tieNumber) } diff --git a/knockoutwhistweb/app/views/ingame/selecttrump.scala.html b/knockoutwhistweb/app/views/ingame/selecttrump.scala.html index 56a5b64..82c58c2 100644 --- a/knockoutwhistweb/app/views/ingame/selecttrump.scala.html +++ b/knockoutwhistweb/app/views/ingame/selecttrump.scala.html @@ -5,7 +5,7 @@
-
+

Select Trump Suit

@@ -16,66 +16,50 @@ You (@player.toString) won the last round. Choose the trump suit for the next round.
- -
-
- -
-
- -
-
- -
-
- -
+
- +
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ @for(i <- player.currentHand().get.cards.indices) { +
+ @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/> +
+ } +
} else { - -
-
-
-
- @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Spades)) -
Spades
-
-
-
-
- @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Hearts)) -
Hearts
-
-
-
-
- @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Diamonds)) -
Diamonds
-
-
-
-
- @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs)) -
Clubs
-
-
-
+ @logic.getCurrentMatch.get.roundlist.last.winner.get.name is choosing a trumpsuit. The new round will start once a suit is picked.
}
diff --git a/knockoutwhistweb/app/views/ingame/tie.scala.html b/knockoutwhistweb/app/views/ingame/tie.scala.html index c813cf3..7aad171 100644 --- a/knockoutwhistweb/app/views/ingame/tie.scala.html +++ b/knockoutwhistweb/app/views/ingame/tie.scala.html @@ -12,7 +12,6 @@
-
Knockout Whist

The last round was tied between: @@ -26,7 +25,7 @@ @if(player.equals(logic.playerTieLogic.currentTiePlayer())) { @defining(logic.playerTieLogic.highestAllowedNumber()) { maxNum =>

@@ -34,28 +33,65 @@
- +
+
Currently Picked Cards
+ +
+ @if(logic.playerTieLogic.getSelectedCard.nonEmpty) { + @for((player, card) <- logic.playerTieLogic.getSelectedCard) { +
+
+
+

@player

+
+ @util.WebUIUtils.cardtoImage(card) +
+
+
+
+ } + } else { +
+ +
+ } +
} } else { -
Currently picked cards
-
- @for((player, card) <- logic.playerTieLogic.getSelectedCard) { -
-
-
-

@player

- @util.WebUIUtils.cardtoImage(card) +
Currently Picked Cards
+ +
+ @if(logic.playerTieLogic.getSelectedCard.nonEmpty) { + @for((player, card) <- logic.playerTieLogic.getSelectedCard) { +
+
+
+

@player

+
+ @util.WebUIUtils.cardtoImage(card) +
+
+ } + } else { +
+
}
-- 2.52.0