Added rendering for Web Page

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

View File

@@ -1,11 +1,12 @@
package controllers package controllers
import controllers.sessions.SimpleSession import controllers.sessions.AdvancedSession
import de.knockoutwhist.cards.{Card, CardValue, Hand, Suit} import de.knockoutwhist.cards.{Card, CardValue, Hand, Suit}
import de.knockoutwhist.control.GameState.MainMenu import de.knockoutwhist.control.GameLogic
import de.knockoutwhist.control.GameState.{InGame, Lobby}
import de.knockoutwhist.control.controllerBaseImpl.BaseGameLogic
import de.knockoutwhist.events.* import de.knockoutwhist.events.*
import de.knockoutwhist.events.global.GameStateChangeEvent import de.knockoutwhist.events.global.GameStateChangeEvent
import de.knockoutwhist.events.player.PlayerEvent
import de.knockoutwhist.player.AbstractPlayer import de.knockoutwhist.player.AbstractPlayer
import de.knockoutwhist.rounds.Match import de.knockoutwhist.rounds.Match
import de.knockoutwhist.ui.UI import de.knockoutwhist.ui.UI
@@ -17,32 +18,30 @@ object WebUI extends CustomThread with EventListener with UI {
setName("WebUI") setName("WebUI")
var init = false var init = false
var logic: Option[GameLogic] = None
var latestOutput: String = "" var latestOutput: String = ""
override def instance: CustomThread = WebUI override def instance: CustomThread = WebUI
override def listen(event: SimpleEvent): Unit = { override def listen(event: SimpleEvent): Unit = {
runLater {
event match { event match {
case event: PlayerEvent =>
PodGameManager.transmit(event.playerId, event)
case event: GameStateChangeEvent => case event: GameStateChangeEvent =>
if (event.newState == MainMenu) { if (event.oldState == Lobby && event.newState == InGame) {
PodGameManager.clearSessions() val match1: Option[Match] = logic.get.asInstanceOf[BaseGameLogic].getCurrentMatch
val players: List[AbstractPlayer] = match1.get.totalplayers
players.map(player => PodGameManager.addSession(AdvancedSession(player.id, player)))
} }
Some(true)
case _ => case _ =>
PodGameManager.transmitAll(event)
}
} }
} }
override def initial: Boolean = { override def initial(gameLogic: GameLogic): Boolean = {
if (init) { if (init) {
return false return false
} }
init = true init = true
this.logic = Some(gameLogic)
start() start()
true true
} }

View File

@@ -1 +1,11 @@
case class AdvancedSession package controllers.sessions
import de.knockoutwhist.player.AbstractPlayer
import de.knockoutwhist.utils.events.SimpleEvent
import java.util.UUID
case class AdvancedSession(id: UUID, player: AbstractPlayer) extends PlayerSession {
override def updatePlayer(event: SimpleEvent): Unit = {
}
}

View File

@@ -10,10 +10,249 @@ import util.WebUIUtils
import java.util.UUID import java.util.UUID
case class SimpleSession(id: UUID, private var output: List[Html]) extends PlayerSession { case class SimpleSession(id: UUID, private var output: List[Html]) extends PlayerSession {
override def updatePlayer(event: SimpleEvent): Unit = {
}
/*
def get(): List[Html] = { def get(): List[Html] = {
output output
} }
override def updatePlayer(event: SimpleEvent): Unit = { override def updatePlayer(event: SimpleEvent): Unit = {
event match {
case event: RenderHandEvent =>
renderHand(event)
case event: ShowTieCardsEvent =>
showtiecardseventmethod(event)
case event: ShowGlobalStatus =>
showglobalstatusmethod(event)
case event: ShowPlayerStatus =>
showplayerstatusmethod(event)
case event: ShowRoundStatus =>
showroundstatusmethod(event)
case event: ShowErrorStatus =>
showerrstatmet(event)
case event: ShowCurrentTrickEvent =>
showcurtrevmet(event)
} }
} }
private def clear(): Unit = {
output = List()
}
private def renderHand(event: RenderHandEvent): Unit = {
output = output :++ WebUICards.renderHandEvent(event.hand)
output = output :+ Html("<br>")
}
private def showtiecardseventmethod(event: ShowTieCardsEvent): Option[Boolean] = {
var l = List[Html]()
for ((player, card) <- event.card) {
l = l :+ Html(s"<p>${player.name}:</p>")
l = l :+ WebUIUtils.cardtoImage(card)
l = l :+ Html("<br>")
}
output = output :++ l
output = output :+ Html("<br>")
Some(true)
}
private def showglobalstatusmethod(event: ShowGlobalStatus): Option[Boolean] = {
event.status match {
case SHOW_TIE =>
println("It's a tie! Let's cut to determine the winner.")
Some(true)
case SHOW_TIE_WINNER =>
if (event.objects.length != 1 || !event.objects.head.isInstanceOf[AbstractPlayer]) {
None
} else {
println(s"${event.objects.head.asInstanceOf[AbstractPlayer].name} wins the cut!")
Some(true)
}
case SHOW_TIE_TIE =>
println("It's a tie again! Let's cut again.")
Some(true)
case SHOW_START_MATCH =>
clear()
println("Starting a new match...")
output = output :+ Html("<br><br>")
Some(true)
case SHOW_TYPE_PLAYERS =>
println("Please enter the names of the players, separated by a comma.")
Some(true)
case SHOW_FINISHED_MATCH =>
if (event.objects.length != 1 || !event.objects.head.isInstanceOf[AbstractPlayer]) {
None
} else {
clear()
println(s"The match is over. The winner is ${event.objects.head.asInstanceOf[AbstractPlayer]}")
Some(true)
}
}
}
private def showplayerstatusmethod(event: ShowPlayerStatus): Option[Boolean] = {
val player = event.player
event.status match {
case SHOW_PLAY_CARD =>
println("Which card do you want to play?")
Some(true)
case SHOW_DOG_PLAY_CARD =>
if (event.objects.length != 1 || !event.objects.head.isInstanceOf[Boolean]) {
None
} else {
println("You are using your dog life. Do you want to play your final card now?")
if (event.objects.head.asInstanceOf[Boolean]) {
println("You have to play your final card this round!")
println("Please enter y to play your final card.")
Some(true)
} else {
println("Please enter y/n to play your final card.")
Some(true)
}
}
case SHOW_TIE_NUMBERS =>
if (event.objects.length != 1 || !event.objects.head.isInstanceOf[Int]) {
None
} else {
println(s"${player.name} enter a number between 1 and ${event.objects.head.asInstanceOf[Int]}.")
Some(true)
}
case SHOW_TRUMPSUIT_OPTIONS =>
println("Which suit do you want to pick as the next trump suit?")
println("1: Hearts")
println("2: Diamonds")
println("3: Clubs")
println("4: Spades")
println()
Some(true)
case SHOW_NOT_PLAYED =>
println(s"Player ${event.player} decided to not play his card")
Some(true)
case SHOW_WON_PLAYER_TRICK =>
println(s"${event.player.name} won the trick.")
output = output :+ Html("<br><br>")
Some(true)
}
}
private def showroundstatusmethod(event: ShowRoundStatus): Option[Boolean] = {
event.status match {
case SHOW_TURN =>
if (event.objects.length != 1 || !event.objects.head.isInstanceOf[AbstractPlayer]) {
None
} else {
println(s"It's ${event.objects.head.asInstanceOf[AbstractPlayer].name} turn.")
Some(true)
}
case SHOW_START_ROUND =>
clear()
println(s"Starting a new round. The trump suit is ${event.currentRound.trumpSuit}.")
output = output :+ Html("<br><br>")
Some(true)
case WON_ROUND =>
if (event.objects.length != 1 || !event.objects.head.isInstanceOf[AbstractPlayer]) {
None
} else {
println(s"${event.objects.head.asInstanceOf[AbstractPlayer].name} won the round.")
Some(true)
}
case PLAYERS_OUT =>
println("The following players are out of the game:")
event.currentRound.playersout.foreach(p => {
println(p.name)
})
Some(true)
}
}
private def showerrstatmet(event: ShowErrorStatus): Option[Boolean] = {
event.status match {
case INVALID_NUMBER =>
println("Please enter a valid number.")
Some(true)
case NOT_A_NUMBER =>
println("Please enter a number.")
Some(true)
case INVALID_INPUT =>
println("Please enter a valid input")
Some(true)
case INVALID_NUMBER_OF_PLAYERS =>
println("Please enter at least two names.")
Some(true)
case IDENTICAL_NAMES =>
println("Please enter unique names.")
Some(true)
case INVALID_NAME_FORMAT =>
println("Please enter valid names. Those can not be empty, shorter than 2 or longer then 10 characters.")
Some(true)
case WRONG_CARD =>
if (event.objects.length != 1 || !event.objects.head.isInstanceOf[Card]) {
None
} else {
println(f"You have to play a card of suit: ${event.objects.head.asInstanceOf[Card].suit}\n")
Some(true)
}
}
}
private def showcurtrevmet(event: ShowCurrentTrickEvent): Option[Boolean] = {
clear()
val sb = new StringBuilder()
sb.append("Current Trick:\n")
sb.append("Trump-Suit: " + event.round.trumpSuit + "\n")
if (event.trick.firstCard.isDefined) {
sb.append(s"Suit to play: ${event.trick.firstCard.get.suit}\n")
}
for ((card, player) <- event.trick.cards) {
sb.append(s"${player.name} played ${card.toString}\n")
}
println(sb.toString())
Some(true)
}
private def println(s: String): Unit = {
var html = List[Html]()
for (line <- s.split("\n")) {
html = html :+ Html(line)
html = html :+ Html("<br>")
}
output = output :++ html
}
private def println(): Unit = {
output = output :+ Html("<br>")
}
object WebUICards {
def renderCardAsString(card: Card): Vector[String] = {
val lines = "│ │"
if (card.cardValue == CardValue.Ten) {
return Vector(
s"┌─────────┐",
s"│${card.cardValue.cardType()} │",
lines,
s"│ ${card.suit.cardType()} │",
lines,
s"│ ${card.cardValue.cardType()}│",
s"└─────────┘"
)
}
Vector(
s"┌─────────┐",
s"│${card.cardValue.cardType()} │",
lines,
s"│ ${card.suit.cardType()} │",
lines,
s"│ ${card.cardValue.cardType()}│",
s"└─────────┘"
)
}
def renderHandEvent(hand: Hand): List[Html] = {
hand.cards.map(WebUIUtils.cardtoImage)
}
}
*/
}

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>
}

View File

@@ -13,8 +13,106 @@
<title>@title</title> <title>@title</title>
<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")"> <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")"> <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> </head>
<body> <body>
@* And here's where we render the `Html` object containing @* And here's where we render the `Html` object containing
* the page content. *@ * the page content. *@

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>
}

View File

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

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>
}