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

feat(ui): enhance ingame UI layout and player information display

Browse Source
This commit is contained in:
Janis
2025-11-05 12:44:27 +01:00
parent edfba93f83
commit a765ebd33f
1 changed files with 63 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,47 +1,67 @@
@import de.knockoutwhist.control.controllerBaseImpl.sublogic.util.TrickUtil
@(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby) @(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
@main("Ingame") { @main("Ingame") {
<div class="container"> <div class="container py-5">
<div class="row">
<div class="col-4 mt-5 text-start"> <!-- Header Row -->
<p class="fs-4">Next Player</p> <div class="row mb-4 text-center">
<p class="fs-4">@gamelobby.getLogic.getPlayerQueue.get.duplicate().nextPlayer()</p> <div class="col-md-4 text-start">
<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>
}
}
</div> </div>
<div class="col-4 mt-5 text-center">
<p class="fs-3">Cards played</p> <!-- Middle column without "Cards Played" -->
<div class="col-md-4 text-center">
<!-- You can leave this empty or add something else here if needed -->
</div> </div>
<div class="col-4 mt-5 text-end">
<p class="fs-4">Trumpsuit:</p> <div class="col-md-4 text-end">
<p class="fs-4">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p> <h4 class="fw-semibold mb-1">Trumpsuit</h4>
<p class="fs-4 mt-5">First Card:</p> <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="30%"/> @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="30%"/> @views.html.render.card.apply("images/cards/1B.png")("Blank Card") width="80px"/>
} }
</div> </div>
</div> </div>
<div class="row"> </div>
<div class="col-6 mt-5">
<!-- Cards Played -->
<div class="row justify-content-center g-3 mb-5">
@for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) { @for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
<div class="col-auto"> <div class="col-auto">
<div class="card" style="max-width: 8rem;"> <div class="card text-center shadow-sm border-0" style="width: 7rem;">
@util.WebUIUtils.cardtoImage(cardplayed) /> <div class="p-2">
<div class="card-body"> @util.WebUIUtils.cardtoImage(cardplayed) width="100%"/>
<h5 class="card-title">@player</h5> </div>
<div class="card-body p-2 bg-light">
<small class="fw-semibold text-secondary">@player</small>
</div> </div>
</div> </div>
</div> </div>
} }
</div> </div>
</div>
<div class="row gx-0"> <!-- Player Hand at the BOTTOM -->
@for(i <- 0 until player.currentHand().get.cards.size) { <div class="row justify-content-center g-2 mt-4">
@for(i <- player.currentHand().get.cards.indices) {
<div class="col-auto"> <div class="col-auto">
<form action="@(routes.IngameController.playCard(gamelobby.id))" class="d-flex" method="post"> <form action="@(routes.IngameController.playCard(gamelobby.id))" method="post" class="m-0 p-0">
<input type="hidden" name="cardId" value="@i" /> <input type="hidden" name="cardId" value="@i" />
<button type="submit" class="btn bg-transparent p-0 m-0"> <button type="submit" class="btn btn-outline-light p-0 border-0 shadow-none">
@util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="40%" /> @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px"/>
</button> </button>
</form> </form>
</div> </div>