KnockOutWhist/KnockOutWhist-Web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

feat(ui): Ingame layout

Browse Source 
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.
This commit is contained in:
LQ63
2025-11-11 12:02:40 +01:00
parent c948e5e800
commit 33989efedc
2 changed files with 86 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
knockoutwhistweb/app/assets/stylesheets/main.less
View File

@@ -24,14 +24,14 @@
} }
.game-field-background { .game-field-background {
background-image: @background-image; background-image: @background-image;
background-size: cover; max-width: 1400px;
background-position: center center; margin: 0 auto;
background-repeat: no-repeat; min-height: 100vh;
background-attachment: fixed;
} }
.lobby-background { .lobby-background {
background-color: @background-color; background-color: @background-color;
width: 100%;
height: 100vh;
} }
.navbar-header{ .navbar-header{
@@ -49,8 +49,11 @@
.bottom-div { .bottom-div {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 50%;
transform: translateX(-50%);
max-width: 1400px;
width: 100%; width: 100%;
margin: 0;
text-align: center; text-align: center;
padding: 10px; padding: 10px;
} }
@@ -220,9 +223,9 @@ body {
} }
.score-header { .score-header {
font-weight: bold; font-weight: bold;
color: #ffffff; color: #000000;
border-bottom: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.3);
} }
.score-row { .score-row {
color: #ffffff; color: #000000;
} }

19
knockoutwhistweb/app/views/ingame/ingame.scala.html
View File

@@ -3,8 +3,9 @@
@(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby) @(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
@main("Ingame") { @main("Ingame") {
<main class="game-field-background vh-100"> <div class="lobby-background vh-100">
<div class="py-5 ms-4 me-4"> <main class="game-field-background vh-100">
<div class="py-5 container-xxl">
<div class="row ms-4 me-4"> <div class="row ms-4 me-4">
<div class="col-4 mt-5 text-start"> <div class="col-4 mt-5 text-start">
@@ -21,7 +22,7 @@
<div class="col-4 text-center"> <div class="col-4 text-center">
<div class="score-table mt-5"> <div class="score-table mt-5">
<h4 class="fw-bold mb-3 text-white">Tricks Won</h4> <h4 class="fw-bold mb-3 text-black">Tricks Won</h4>
<div class="d-flex justify-content-between score-header pb-1"> <div class="d-flex justify-content-between score-header pb-1">
<div style="width: 50%">PLAYER</div> <div style="width: 50%">PLAYER</div>
@@ -55,7 +56,7 @@
} }
</div> </div>
</div> </div>
<div class="col-md-4 text-end"> <div class="col-4 mt-5 text-end">
<h4 class="fw-semibold mb-1">Trumpsuit</h4> <h4 class="fw-semibold mb-1">Trumpsuit</h4>
<p class="fs-5 text-primary">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p> <p class="fs-5 text-primary">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p>
@@ -70,12 +71,7 @@
</div> </div>
</div> </div>
<div class="row justify-content-center g-2 mt-4 bottom-div" style="backdrop-filter: blur(4px); margin-left: 0; margin-right: 0;">
<div class="row">
</div>
<div class="row justify-content-center g-2 mt-4 bottom-div" style="backdrop-filter: blur(4px);">
<div class="row justify-content-center" id="card-slide"> <div class="row justify-content-center" id="card-slide">
@for(i <- player.currentHand().get.cards.indices) { @for(i <- player.currentHand().get.cards.indices) {
<div class="col-auto handcard" style="border-radius: 6px"> <div class="col-auto handcard" style="border-radius: 6px">
@@ -90,5 +86,6 @@
</div> </div>
</div> </div>
</div> </div>
</main> </main>
</div>
} }