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

feat(ui): changed Background color, centered Lobby #53

Merged
Janis merged 8 commits from Polling-#40 into main 2025-11-13 11:07:08 +01:00
Conversation 0 Commits 8 Files Changed 12 +180 -740
16 changed files with 180 additions and 740 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 33989efedc - Show all commits

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;
} }

15
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") {
<div class="lobby-background vh-100">
<main class="game-field-background vh-100"> <main class="game-field-background vh-100">
<div class="py-5 ms-4 me-4"> <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">
@@ -91,4 +87,5 @@
</div> </div>
</div> </div>
</main> </main>
</div>
} }