feat(ui): changed Background color, centered Lobby #53
@@ -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