lq64
c220e54bb8
This merge request has full JS routing for calling specific endpoints. Game is fully playable but doesn't have polling yet. This version already has the UI changes adressed in MR #43 so first merge MR #43 and then this one or only merge this one because it already has the UI changes :) Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #50 Reviewed-by: Janis <janis-e@gmx.de>
89 lines
4.6 KiB
HTML
89 lines
4.6 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">
|
|
<div class="btn btn-outline-light p-0 border-0 shadow-none" data-card-id="@i" style="border-radius: 6px" onclick="handlePlayCard(this, '@gamelobby.id')">
|
|
@util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
}
|