KnockOutWhist/KnockOutWhist-Web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

feat(ui): added working ingame ui

Browse Source 
Added ingame ui with bootstrap. There were problems with the lock procedure which are now fixed.
This commit is contained in:
LQ63
2025-11-05 02:19:26 +01:00
parent 89d1626bb2
commit ee3f65efd9
5 changed files with 47 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
knockoutwhistweb/app/controllers/IngameController.scala
View File

@@ -33,7 +33,7 @@ class IngameController @Inject()(
case InGame => case InGame =>
Ok(views.html.ingame.ingame( Ok(views.html.ingame.ingame(
g.getPlayerByUser(request.user), g.getPlayerByUser(request.user),
g.logic g
)) ))
case SelectTrump => case SelectTrump =>
Ok(views.html.ingame.selecttrump( Ok(views.html.ingame.selecttrump(

4
knockoutwhistweb/app/logic/game/GameLobby.scala
View File

@@ -180,6 +180,10 @@ class GameLobby private(
users.clone() users.clone()
} }
def getLogic: GameLogic = {
logic
}
private def getPlayerBySession(userSession: UserSession): AbstractPlayer = { private def getPlayerBySession(userSession: UserSession): AbstractPlayer = {
val playerOption = getMatch.totalplayers.find(_.id == userSession.id) val playerOption = getMatch.totalplayers.find(_.id == userSession.id)
if (playerOption.isEmpty) { if (playerOption.isEmpty) {

77
knockoutwhistweb/app/views/ingame/ingame.scala.html
View File

@@ -1,50 +1,51 @@
@(player: de.knockoutwhist.player.AbstractPlayer, logic: de.knockoutwhist.control.GameLogic) @(player: de.knockoutwhist.player.AbstractPlayer, gamelobby: logic.game.GameLobby)
@main("Ingame") { @main("Ingame") {
<div id="ingame" class="game-field game-field-background"> <div class="container">
<h1>Knockout Whist</h1> <div class="row">
<div id="nextPlayers"> <div class="col-4 mt-5 text-start">
<p>Next Player:</p> <p class="fs-4">Next Player</p>
<p>@logic.getPlayerQueue.get.duplicate().nextPlayer()</p> <p class="fs-4">@gamelobby.getLogic.getPlayerQueue.get.duplicate().nextPlayer()</p>
</div>
<div id="firstCard">
<div id="trumpsuit">
<p>Trumpsuit: </p>
<p>@logic.getCurrentRound.get.trumpSuit</p>
</div> </div>
<div id="firstCardObject"> <div class="col-4 mt-5 text-center">
<p>First Card</p> <p class="fs-3">Cards played</p>
@if(logic.getCurrentTrick.get.firstCard.isDefined) { </div>
@util.WebUIUtils.cardtoImage(logic.getCurrentTrick.get.firstCard.get) <div class="col-4 mt-5 text-end">
<p class="fs-4">Trumpsuit:</p>
<p class="fs-4">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p>
<p class="fs-4 mt-5">First Card:</p>
@if(gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) {
@util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get) width="30%"/>
} else { } else {
@views.html.render.card.apply("images/cards/1B.png")("Blank Card") @views.html.render.card.apply("images/cards/1B.png")("Blank Card") width="30%"/>
} }
</div> </div>
</div> </div>
<div class="row">
<p>@logic.getCurrentPlayer.get has to play a card!</p> <div class="col-6 mt-5">
@if(logic.getCurrentTrick.get.cards.nonEmpty) { @for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
<p>Cards played</p> <div class="col-auto">
} else { <div class="card" style="max-width: 8rem;">
<p id="invisible">Cards played</p> @util.WebUIUtils.cardtoImage(cardplayed) />
} <div class="card-body">
<h5 class="card-title">@player</h5>
<div id="cardsplayed"> </div>
@for((cardplayed, player) <- logic.getCurrentTrick.get.cards) { </div>
<div id="playedcardplayer"> </div>
<p>@player</p> }
@util.WebUIUtils.cardtoImage(cardplayed)
</div> </div>
}
</div> </div>
<div class="row gx-0">
<p>Your cards</p> @for(i <- 0 until player.currentHand().get.cards.size) {
<div id="playercards"> <div class="col-auto">
@for(card <- player.currentHand().get.cards) { <form action="@(routes.IngameController.playCard(gamelobby.id))" class="d-flex" method="post">
@util.WebUIUtils.cardtoImage(card) <input type="hidden" name="cardId" value="@i" />
} <button type="submit" class="btn bg-transparent p-0 m-0">
@util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="40%" />
</button>
</form>
</div>
}
</div> </div>
</div> </div>
} }

3
knockoutwhistweb/app/views/mainmenu/creategame.scala.html
View File

@@ -1,6 +1,7 @@
@(user: Option[model.users.User]) @(user: Option[model.users.User])
@navbar(user)
@main("Create Game") { @main("Create Game") {
@navbar(user)
<form action="@routes.MainMenuController.createGame()" method="post"> <form action="@routes.MainMenuController.createGame()" method="post">
<div class="w-50 mx-auto"> <div class="w-50 mx-auto">
<div class="mt-3"> <div class="mt-3">

2
knockoutwhistweb/app/views/render/card.scala.html
View File

@@ -1,2 +1,2 @@
@(src: String)(alt: String) @(src: String)(alt: String)
<img src="@routes.Assets.versioned(src)" alt="@alt"/> <img src="@routes.Assets.versioned(src)" alt="@alt"