feat(ui): Ingame layout
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.
This commit is contained in:
LQ63
@@ -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;
|
||||||
}
|
}
|
||||||
@@ -3,92 +3,89 @@
|
|||||||
@(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
|
@(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
|
||||||
|
|
||||||
@main("Ingame") {
|
@main("Ingame") {
|
||||||
<main class="game-field-background vh-100">
|
<div class="lobby-background vh-100">
|
||||||
<div class="py-5 ms-4 me-4">
|
<main class="game-field-background vh-100">
|
||||||
|
<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">
|
||||||
<h4 class="fw-semibold mb-1">Current Player</h4>
|
<h4 class="fw-semibold mb-1">Current Player</h4>
|
||||||
<p class="fs-5 text-primary">@gamelobby.getLogic.getCurrentPlayer.get.name</p>
|
<p class="fs-5 text-primary">@gamelobby.getLogic.getCurrentPlayer.get.name</p>
|
||||||
@if(!TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) {
|
@if(!TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) {
|
||||||
<h4 class="fw-semibold mb-1">Next Player</h4>
|
<h4 class="fw-semibold mb-1">Next Player</h4>
|
||||||
@for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {
|
@for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {
|
||||||
<p class="fs-5 text-primary">@nextplayer</p>
|
<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-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>
|
||||||
<div class="d-flex justify-content-center g-3 mb-5">
|
|
||||||
@for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
|
<div class="col-4 text-center">
|
||||||
<div class="col-auto">
|
|
||||||
<div class="card text-center shadow-sm border-0 bg-transparent" style="width: 7rem; backdrop-filter: blur(4px);">
|
<div class="score-table mt-5">
|
||||||
<div class="p-2">
|
<h4 class="fw-bold mb-3 text-black">Tricks Won</h4>
|
||||||
@util.WebUIUtils.cardtoImage(cardplayed) width="100%"/>
|
|
||||||
</div>
|
<div class="d-flex justify-content-between score-header pb-1">
|
||||||
<div class="card-body p-2 bg-transparent">
|
<div style="width: 50%">PLAYER</div>
|
||||||
<small class="fw-semibold text-secondary">@player</small>
|
<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>
|
||||||
|
}
|
||||||
|
|
||||||
|
</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>
|
||||||
</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) {
|
|
||||||
@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>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
<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">
|
|
||||||
@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>
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user