feat(ui): added js routing, updated ingame ui, added tricktable (#50)
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>
This commit is contained in:
@@ -3,68 +3,86 @@
|
||||
@(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
|
||||
|
||||
@main("Ingame") {
|
||||
<div class="py-5 ms-4 me-4">
|
||||
<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)) {
|
||||
<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>
|
||||
<p class="fs-5 text-primary">@nextplayer</p>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="d-flex col-md-4 text-center 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 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="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 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>
|
||||
|
||||
|
||||
<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>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -1,82 +1,69 @@
|
||||
@(user: Option[model.users.User], gamelobby: logic.game.GameLobby)
|
||||
|
||||
@main("Lobby") {
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="p-3 fs-1 d-flex align-items-center">
|
||||
<div class="text-center" style="flex-grow: 1;">
|
||||
Lobby-Name: @gamelobby.name
|
||||
<main class="lobby-background vh-100">
|
||||
<div class="container d-flex flex-column" style="height: calc(100vh - 1rem);">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="p-3 fs-1 d-flex align-items-center">
|
||||
<div class="text-center" style="flex-grow: 1;">
|
||||
Lobby-Name: @gamelobby.name
|
||||
</div>
|
||||
<div class="btn btn-danger ms-auto" onclick="leaveGame('@gamelobby.id')">Exit</div>
|
||||
</div>
|
||||
<form action="@(routes.IngameController.leaveGame(gamelobby.id))">
|
||||
<button type="submit" class="btn btn-danger ms-auto">Exit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="p-3 text-center fs-4">Playeramount: @gamelobby.getPlayers.size / @gamelobby.maxPlayers</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="p-3 text-center fs-4">Playeramount: @gamelobby.getPlayers.size / @gamelobby.maxPlayers</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
|
||||
@if((gamelobby.getUserSession(user.get.id).host)) {
|
||||
@for(playersession <- gamelobby.getPlayers.values) {
|
||||
<div class="col-auto">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<div class="row justify-content-center align-items-center flex-grow-1">
|
||||
@if((gamelobby.getUserSession(user.get.id).host)) {
|
||||
@for(playersession <- gamelobby.getPlayers.values) {
|
||||
<div class="col-auto my-auto">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
|
||||
<div class="card-body">
|
||||
@if(playersession.id == user.get.id) {
|
||||
<h5 class="card-title">@playersession.name (You)</h5>
|
||||
@* <p class="card-text">Your text could be here!</p>*@
|
||||
<a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>
|
||||
} else {
|
||||
<h5 class="card-title">@playersession.name</h5>
|
||||
@* <p class="card-text">Your text could be here!</p>*@
|
||||
<div class="btn btn-danger" onclick="removePlayer('@gamelobby.id', '@playersession.id')">Remove</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="col-12 text-center mb-5">
|
||||
<div class="btn btn-success" onclick="startGame('@gamelobby.id')">Start Game</div>
|
||||
</div>
|
||||
} else {
|
||||
@for(playersession <- gamelobby.getPlayers.values) {
|
||||
<div class="col-auto my-auto"> <div class="card" style="width: 18rem;">
|
||||
<img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
|
||||
<div class="card-body">
|
||||
@if(playersession.id == user.get.id) {
|
||||
<h5 class="card-title">@playersession.name (You)</h5>
|
||||
@* <p class="card-text">Your text could be here!</p>*@
|
||||
<a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>
|
||||
<h5 class="card-title">@playersession.name (You)</h5>
|
||||
} else {
|
||||
<h5 class="card-title">@playersession.name</h5>
|
||||
@* <p class="card-text">Your text could be here!</p>*@
|
||||
<form action="@(routes.IngameController.kickPlayer(gamelobby.id, playersession.id))" method="post">
|
||||
<button type="submit" class="btn btn-danger">Remove</button>
|
||||
</form>
|
||||
<h5 class="card-title">@playersession.name</h5>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="row">
|
||||
<div class="col text-center mt-3">
|
||||
<a href="@(routes.IngameController.startGame(gamelobby.id))" class="btn btn-success">Start Game</a>
|
||||
</div>
|
||||
</div>
|
||||
} else {
|
||||
@for(playersession <- gamelobby.getPlayers.values) {
|
||||
<div class="col-auto">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
|
||||
<div class="card-body">
|
||||
@if(playersession.id == user.get.id) {
|
||||
<h5 class="card-title">@playersession.name (You)</h5>
|
||||
} else {
|
||||
<h5 class="card-title">@playersession.name</h5>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="row">
|
||||
<div class="col mt-3">
|
||||
<p class="text-center fs-4">Waiting for the host to start the game...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col mt-1">
|
||||
<div class="text-center">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="col-12 text-center mt-3">
|
||||
<p class="fs-4">Waiting for the host to start the game...</p>
|
||||
<div class="spinner-border mt-1" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
}
|
||||
@@ -18,16 +18,11 @@
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column min-vh-100 game-field-background">
|
||||
<main>
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
@* And here's where we render the `Html` object containing
|
||||
* the page content. *@
|
||||
@content
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
</footer>
|
||||
|
||||
<script src="@routes.JavaScriptRoutingController.javascriptRoutes()" type="text/javascript"></script>
|
||||
<script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
@main("Create Game") {
|
||||
@navbar(user)
|
||||
<form action="@routes.MainMenuController.createGame()" method="post" class="game-field-background">
|
||||
<main class="lobby-background flex-grow-1">
|
||||
<div class="w-50 mx-auto">
|
||||
<div class="mt-3">
|
||||
<label for="lobbyname" class="form-label">Lobby-Name</label>
|
||||
@@ -25,8 +25,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-center">
|
||||
<button type="submit" class="btn btn-success">Create Game</button>
|
||||
<div class="btn btn-success" onclick="createGameJS()">Create Game</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
}
|
||||
Reference in New Issue
Block a user