diff --git a/knockoutwhistweb/app/assets/stylesheets/main.less b/knockoutwhistweb/app/assets/stylesheets/main.less
index cb57025..447f7c9 100644
--- a/knockoutwhistweb/app/assets/stylesheets/main.less
+++ b/knockoutwhistweb/app/assets/stylesheets/main.less
@@ -82,6 +82,10 @@ body {
overflow: auto;
}
+.navbar-drop-shadow {
+ box-shadow: 0 1px 15px 0 #000000
+}
+
#sessions {
display: flex;
flex-direction: column;
@@ -232,4 +236,36 @@ body {
}
.score-row {
color: #000000;
-}
\ 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 d808f05..6dc4194 100644
--- a/knockoutwhistweb/app/controllers/IngameController.scala
+++ b/knockoutwhistweb/app/controllers/IngameController.scala
@@ -39,12 +39,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
+
+
+
+
+
+
+
+ @if(player.equals(logic.getCurrentMatch.get.roundlist.last.winner.get)) {
+
+ You (@player.toString) won the last round. Choose the trump suit for the next round.
+
-
- @for(card <- player.currentHand().get.cards) {
- @util.WebUIUtils.cardtoImage(card)
- }
+
+ } else {
+
+ @player.toString is choosing a trumpsuit. The new round will start once a suit is picked.
+
+
+
+
+
+
+ @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)
-
- }
-
- }
+
+
+
+
+
+
+
+
+
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 =>
+
+ Pick a number between 1 and @maxNum. The resulting card will be your card for the cut.
+
+
+
+ }
+ } else {
+
+ @logic.playerTieLogic.currentTiePlayer() is currently picking a number for the cut.
+
+
+
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 37655fd..4daeb42 100644
--- a/knockoutwhistweb/app/views/mainmenu/creategame.scala.html
+++ b/knockoutwhistweb/app/views/mainmenu/creategame.scala.html
@@ -3,8 +3,8 @@
@main("Create Game") {
@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])