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

Added rendering for Web Page

Browse Source
This commit is contained in:
LQ63
2025-10-22 08:31:25 +02:00
parent b17c5160e9
commit b33ab184d2
8 changed files with 470 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,50 @@
@(player: de.knockoutwhist.player.AbstractPlayer, logic: de.knockoutwhist.control.controllerBaseImpl.BaseGameLogic)
@main("Ingame") {
<div id="ingame">
<h1>Knockout Whist</h1>
<div id="nextPlayers">
<p>Next Player:</p>
<p>@logic.getPlayerQueue.get.duplicate().nextPlayer()</p>
</div>
<div id="firstCard">
<div id="trumpsuit">
<p>Trumpsuit: </p>
<p>@logic.getCurrentRound.get.trumpSuit</p>
</div>
<div id="firstCardObject">
<p>First Card</p>
@if(logic.getCurrentTrick.get.firstCard != None) {
@util.WebUIUtils.cardtoImage(logic.getCurrentTrick.get.firstCard.get)
} else {
@views.html.output.card.apply("images/cards/1B.png")("Blank Card")
}
</div>
</div>
<p>@logic.getCurrentPlayer.get has to play a card!</p>
@if(!logic.getCurrentTrick.get.cards.isEmpty) {
<p>Cards played</p>
} else {
<p id="invisible">Cards played</p>
}
<div id="cardsplayed">
@for((cardplayed, player) <- logic.getCurrentTrick.get.cards) {
<div id="playedcardplayer">
<p>@player</p>
@util.WebUIUtils.cardtoImage(cardplayed)
</div>
}
</div>
<p>Your cards</p>
<div id="playercards">
@for(card <- player.currentHand().get.cards) {
@util.WebUIUtils.cardtoImage(card)
}
</div>
</div>
}

98
knockoutwhistweb/app/views/main.scala.html
View File

@@ -13,8 +13,106 @@
<title>@title</title>
<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">
<style>
body {
background-image: url("@routes.Assets.versioned("images/background.png")");
}
html, body {
height: 100vh;
margin: 0;
}
#sessions {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
}
#sessions a, h1, p {
color: white;
font-size: 40px;
font-family: Arial;
}
#ingame {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
}
#playercards {
display: flex;
flex-direction: row;
justify-content: center;
height: 20%
}
#cardsplayed {
display: flex;
flex-direction: row;
height: 10%;
min-height: 10%
}
#playedcardplayer {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#playedcardplayer p {
font-size: 12px;
height: 4%;
}
#playedcardplayer img {
height: 90%;
}
#firstCard {
display: flex;
flex-direction: row;
height: 20%;
width: 100%;
justify-content: space-between;
}
#firstCardObject {
display: flex;
flex-direction: column;
margin-right: 4%;
}
#firstCardObject img{
height: 90%;
}
#firstCardObject p{
height: 10%;
font-size: 20px;
}
#trumpsuit {
display: flex;
flex-direction: row;
margin-left: 4%;
}
#nextPlayers {
display: flex;
flex-direction: column;
align-items: center;
height: 0%;
}
#nextPlayers p {
margin-top: 0px;
margin-bottom: 0px;
}
#invisible {
visibility: hidden;
}
#selecttrumpsuit {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
</style>
</head>
<body>
@* And here's where we render the `Html` object containing
* the page content. *@

27
knockoutwhistweb/app/views/selecttrump.scala.html
View File

@@ -0,0 +1,27 @@
@(player: de.knockoutwhist.player.AbstractPlayer, logic: de.knockoutwhist.control.controllerBaseImpl.BaseGameLogic)
@main("Selecting Trumpsuit...") {
<div id="selecttrumpsuit">
@if(player.equals(logic.getCurrentMatch.get.roundlist.last.winner.get)) {
<h1>Knockout Whist</h1>
<p>You (@player.toString) have won the last round! Select a trumpsuit for the next round!</p>
<p>Available trumpsuits are displayed below:</p>
<div id="playercards">
@util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Spades))
@util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs))
@util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Hearts))
@util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Diamonds))
</div>
<p>Your cards</p>
<div id="playercards">
@for(card <- player.currentHand().get.cards) {
@util.WebUIUtils.cardtoImage(card)
}
</div>
} else {
<h1>Knockout Whist</h1>
<p>@player.toString is choosing a trumpsuit. Starting new round when @player.toString picked a trumpsuit...</p>
}
</div>
}

2
knockoutwhistweb/app/views/sessions.scala.html
View File

@@ -2,6 +2,8 @@
@main("Sessions") {
<div id="sessions">
<h1>Knockout Whist sessions</h1>
<p>Please select your session to jump inside the game!</p>
@for(line <- toRender) {
<a href="@routes.HomeController.ingame(line)">@line</a><br>
}

27
knockoutwhistweb/app/views/tie.scala.html
View File

@@ -0,0 +1,27 @@
@(player: de.knockoutwhist.player.AbstractPlayer, logic: de.knockoutwhist.control.controllerBaseImpl.BaseGameLogic)
@main("Tie") {
<div id="tie">
<h1>Knockout Whist</h1>
<p>The last Round was tied between
@for(players <- logic.playerTieLogic.getTiedPlayers) {
@players
}
</p>
@if(player.equals(logic.playerTieLogic.currentTiePlayer())) {
<p>Pick a card between 1 and @logic.playerTieLogic.highestAllowedNumber()! The resulting card will be your card for the cut.</p>
} else {
<p>@logic.playerTieLogic.currentTiePlayer() is currently picking his number for the cut.</p>
<p>Currently picked Cards:</p>
<div id="cardsplayed">
@for((player, card) <- logic.playerTieLogic.getSelectedCard) {
<div id="playedcardplayer">
<p>@player</p>
@util.WebUIUtils.cardtoImage(card)
</div>
}
</div>
}
</div>
}