33989efedc
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.
92 lines
4.8 KiB
HTML
92 lines
4.8 KiB
HTML
@import de.knockoutwhist.control.controllerBaseImpl.sublogic.util.TrickUtil
|
|
|
|
@(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
|
|
|
|
@main("Ingame") {
|
|
<div class="lobby-background vh-100">
|
|
<main class="game-field-background vh-100">
|
|
<div class="py-5 container-xxl">
|
|
|
|
<div class="row ms-4 me-4">
|
|
<div class="col-4 mt-5 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 class="col-4 text-center">
|
|
|
|
<div class="score-table mt-5">
|
|
<h4 class="fw-bold mb-3 text-black">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">
|
|
@util.WebUIUtils.cardtoImage(cardplayed) width="100%"/>
|
|
</div>
|
|
<div class="card-body p-2 bg-transparent">
|
|
<small class="fw-semibold text-secondary">@player</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="col-4 mt-5 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) {
|
|
@util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get) width="80px"/>
|
|
} else {
|
|
@views.html.render.card.apply("images/cards/1B.png")("Blank Card") width="80px"/>
|
|
}
|
|
</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 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>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
}
|