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 +262 -822
16 changed files with 262 additions and 822 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c948e5e800 - Show all commits

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

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

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

@@ -11,15 +11,37 @@
<h4 class="fw-semibold mb-1">Current Player</h4>
<p class="fs-5 text-primary">@gamelobby.getLogic.getCurrentPlayer.get.name</p>
@if(!TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) {
<h4 class="fw-semibold mb-1">Next Player</h4>
@for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {
<p class="fs-5 text-primary">@nextplayer</p>
}
<h4 class="fw-semibold mb-1">Next Player</h4>
@for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {
<p class="fs-5 text-primary">@nextplayer</p>
}
}
</div>
<div class="d-flex col-md-4 text-center justify-content-center g-3 mb-5">
@for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
<div class="col-4 text-center">
<div class="score-table mt-5">
<h4 class="fw-bold mb-3 text-white">Tricks Won</h4>
<div class="d-flex justify-content-between score-header pb-1">
<div style="width: 50%">PLAYER</div>
<div style="width: 50%">TRICKS</div>
</div>
@for(player <- gamelobby.getLogic.getPlayerQueue.get.toList.sortBy { p =>
-(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(p) }.size)
}) {
<div class="d-flex justify-content-between score-row pt-1">
<div style="width: 50%" class="text-truncate">@player.name</div>
<div style="width: 50%">
@(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(player) }.size)
</div>
</div>
}
</div>
<div class="d-flex justify-content-center g-3 mb-5">
@for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
<div class="col-auto">
<div class="card text-center shadow-sm border-0 bg-transparent" style="width: 7rem; backdrop-filter: blur(4px);">
<div class="p-2">
@@ -30,20 +52,20 @@
</div>
</div>
</div>
}
}
</div>
</div>
<div class="col-md-4 text-end">
<h4 class="fw-semibold mb-1">Trumpsuit</h4>
<p class="fs-5 text-primary">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p>
<h5 class="fw-semibold mt-4 mb-1">First Card</h5>
<div class="d-inline-block border rounded shadow-sm p-1 bg-light">
@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"/>
}
}
</div>
</div>
</div>
@@ -56,14 +78,14 @@
<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">
@for(i <- player.currentHand().get.cards.indices) {
<div class="col-auto handcard" style="border-radius: 6px">
<form action="@(routes.IngameController.playCard(gamelobby.id))" method="post" class="m-0 p-0" style="border-radius: 6px">
<input type="hidden" name="cardId" value="@i" />
<button type="submit" class="btn btn-outline-light p-0 border-0 shadow-none" style="border-radius: 6px">
@util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
</button>
</form>
</div>
<div class="col-auto handcard" style="border-radius: 6px">
<form action="@(routes.IngameController.playCard(gamelobby.id))" method="post" class="m-0 p-0" style="border-radius: 6px">
<input type="hidden" name="cardId" value="@i" />
<button type="submit" class="btn btn-outline-light p-0 border-0 shadow-none" style="border-radius: 6px">
@util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
</button>
</form>
</div>
}
</div>
</div>