feat(websocket)!: Implement WebSocket connection and event handling
This commit is contained in:
@@ -34,5 +34,5 @@
|
||||
});
|
||||
}
|
||||
waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
|
||||
connectWebSocket()
|
||||
connectWebSocket()
|
||||
</script>
|
||||
@@ -12,10 +12,10 @@
|
||||
<h4 class="fw-semibold mb-1">Current Player</h4>
|
||||
<p class="fs-5 text-primary" id="current-player-name">@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" id="next-player-name">@nextplayer</p>
|
||||
}
|
||||
<h4 class="fw-semibold mb-1">Next Player</h4>
|
||||
@for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {
|
||||
<p class="fs-5 text-primary" id="next-player-name">@nextplayer</p>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -30,21 +30,22 @@
|
||||
</div>
|
||||
|
||||
@for(player <- gamelobby.getLogic.getPlayerQueue.get.toList.sortBy { p =>
|
||||
-(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(p) }.size)
|
||||
-(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%">
|
||||
<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" id="trick-cards-container">
|
||||
@for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
|
||||
@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="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>
|
||||
@@ -53,7 +54,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 mt-5 text-end">
|
||||
@@ -62,31 +63,35 @@
|
||||
|
||||
<h5 class="fw-semibold mt-4 mb-1">First Card</h5>
|
||||
<div class="d-inline-block border rounded shadow-sm p-1 bg-light" id="first-card-container">
|
||||
@if(gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) {
|
||||
@util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get) width="80px"/>
|
||||
} else {
|
||||
@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 g-2 mt-4 bottom-div" style="backdrop-filter: blur(4px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;">
|
||||
<div class="row justify-content-center ingame-cards-slide @{
|
||||
!gamelobby.logic.getCurrentPlayer.contains(player) ? "inactive" |: ""
|
||||
}" id="card-slide">
|
||||
@for(i <- player.currentHand().get.cards.indices) {
|
||||
@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', '@player.isInDogLife')">
|
||||
@util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
|
||||
</div>
|
||||
@if(player.isInDogLife) {
|
||||
<div class="mt-2">
|
||||
<button class="btn btn-danger" onclick="handleSkipDogLife(this, '@gamelobby.id')">Skip Dog Life</button>
|
||||
<button class="btn btn-danger" onclick="handleSkipDogLife(this, '@gamelobby.id')">
|
||||
Skip Dog Life</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -104,5 +109,5 @@
|
||||
});
|
||||
}
|
||||
waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
|
||||
connectWebSocket()
|
||||
connectWebSocket()
|
||||
</script>
|
||||
|
||||
@@ -18,35 +18,40 @@
|
||||
<div class="row justify-content-center col-auto mb-5">
|
||||
<div class="col-auto handcard">
|
||||
<div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="0" style="border-radius: 6px" onclick="handleTrumpSelection(this, '@gamelobby.id')">
|
||||
@util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Spades)) width="120px" style="border-radius: 6px"/>
|
||||
@util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Spades))
|
||||
width="120px" style="border-radius: 6px"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto handcard">
|
||||
<div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="1" style="border-radius: 6px" onclick="handleTrumpSelection(this, '@gamelobby.id')">
|
||||
@util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Hearts)) width="120px" style="border-radius: 6px"/>
|
||||
@util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Hearts))
|
||||
width="120px" style="border-radius: 6px"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto handcard">
|
||||
<div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="2" style="border-radius: 6px" onclick="handleTrumpSelection(this, '@gamelobby.id')">
|
||||
@util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Diamonds)) width="120px" style="border-radius: 6px"/>
|
||||
@util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Diamonds))
|
||||
width="120px" style="border-radius: 6px"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto handcard">
|
||||
<div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="3" style="border-radius: 6px" onclick="handleTrumpSelection(this, '@gamelobby.id')">
|
||||
@util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs)) width="120px" style="border-radius: 6px"/>
|
||||
@util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs))
|
||||
width="120px" style="border-radius: 6px"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center ingame-cards-slide" id="card-slide">
|
||||
@for(i <- player.currentHand().get.cards.indices) {
|
||||
<div class="col-auto" style="border-radius: 6px">
|
||||
@util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
|
||||
</div>
|
||||
}
|
||||
@for(i <- player.currentHand().get.cards.indices) {
|
||||
<div class="col-auto" style="border-radius: 6px">
|
||||
@util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
} else {
|
||||
<div class="alert alert-warning" role="alert" aria-live="polite">
|
||||
@gamelobby.logic.getCurrentMatch.get.roundlist.last.winner.get.name is choosing a trumpsuit. The new round will start once a suit is picked.
|
||||
@gamelobby.logic.getCurrentMatch.get.roundlist.last.winner.get.name
|
||||
is choosing a trumpsuit. The new round will start once a suit is picked.
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -68,5 +73,5 @@
|
||||
});
|
||||
}
|
||||
waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
|
||||
connectWebSocket()
|
||||
connectWebSocket()
|
||||
</script>
|
||||
@@ -13,9 +13,9 @@
|
||||
<p class="card-text">
|
||||
The last round was tied between:
|
||||
<span class="ms-1">
|
||||
@for(players <- gamelobby.logic.playerTieLogic.getTiedPlayers) {
|
||||
<span class="badge text-bg-secondary me-1">@players</span>
|
||||
}
|
||||
@for(players <- gamelobby.logic.playerTieLogic.getTiedPlayers) {
|
||||
<span class="badge text-bg-secondary me-1">@players</span>
|
||||
}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
@@ -23,7 +23,10 @@
|
||||
@if(player.equals(gamelobby.logic.playerTieLogic.currentTiePlayer())) {
|
||||
@defining(gamelobby.logic.playerTieLogic.highestAllowedNumber()) { maxNum =>
|
||||
<div class="alert alert-info" role="alert" aria-live="polite">
|
||||
Pick a number between 1 and @{maxNum + 1}. The resulting card will be your card for the cut.
|
||||
Pick a number between 1 and @{
|
||||
maxNum + 1
|
||||
}.
|
||||
The resulting card will be your card for the cut.
|
||||
</div>
|
||||
|
||||
<div class="row g-2 align-items-center">
|
||||
@@ -31,49 +34,21 @@
|
||||
<label for="tieNumber" class="col-form-label">Your number</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input type="number" id="tieNumber" class="form-control" name="tie" min="1" max="@{maxNum + 1}" placeholder="1" required>
|
||||
<input type="number" id="tieNumber" class="form-control" name="tie" min="1" max="@{
|
||||
maxNum + 1
|
||||
}" placeholder="1" required>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button onclick="selectTie('@gamelobby.id')" class="btn btn-primary">Confirm</button>
|
||||
<button onclick="selectTie('@gamelobby.id')" class="btn btn-primary">
|
||||
Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="mt-4 mb-3">Currently Picked Cards</h6>
|
||||
|
||||
<div id="cardsplayed" class="row g-3 justify-content-center">
|
||||
@if(gamelobby.logic.playerTieLogic.getSelectedCard.nonEmpty) {
|
||||
@for((player, card) <- gamelobby.logic.playerTieLogic.getSelectedCard) {
|
||||
<div class="col-6">
|
||||
<div class="card shadow-sm border-0 h-100 text-center">
|
||||
<div class="card-body d-flex flex-column justify-content-between">
|
||||
<p class="card-text fw-semibold mb-2 text-primary">@player</p>
|
||||
<div class="card-img-top">
|
||||
@util.WebUIUtils.cardtoImage(card)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
} else {
|
||||
<div class="col-12">
|
||||
<div class="alert alert-info text-center" role="alert">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
No cards have been selected yet.
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
} else {
|
||||
<div class="alert alert-warning" role="alert" aria-live="polite">
|
||||
<strong>@gamelobby.logic.playerTieLogic.currentTiePlayer()</strong> is currently picking a number for the cut.
|
||||
</div>
|
||||
|
||||
<h6 class="mt-4 mb-3">Currently Picked Cards</h6>
|
||||
|
||||
<div id="cardsplayed" class="row g-3 justify-content-center">
|
||||
@if(gamelobby.logic.playerTieLogic.getSelectedCard.nonEmpty) {
|
||||
@for((player, card) <- gamelobby.logic.playerTieLogic.getSelectedCard) {
|
||||
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
|
||||
<div class="col-6">
|
||||
<div class="card shadow-sm border-0 h-100 text-center">
|
||||
<div class="card-body d-flex flex-column justify-content-between">
|
||||
<p class="card-text fw-semibold mb-2 text-primary">@player</p>
|
||||
@@ -92,6 +67,38 @@
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
} else {
|
||||
<div class="alert alert-warning" role="alert" aria-live="polite">
|
||||
<strong>@gamelobby.logic.playerTieLogic.currentTiePlayer()</strong>
|
||||
is currently picking a number for the cut.
|
||||
</div>
|
||||
|
||||
<h6 class="mt-4 mb-3">Currently Picked Cards</h6>
|
||||
|
||||
<div id="cardsplayed" class="row g-3 justify-content-center">
|
||||
@if(gamelobby.logic.playerTieLogic.getSelectedCard.nonEmpty) {
|
||||
@for((player, card) <- gamelobby.logic.playerTieLogic.getSelectedCard) {
|
||||
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
|
||||
<div class="card shadow-sm border-0 h-100 text-center">
|
||||
<div class="card-body d-flex flex-column justify-content-between">
|
||||
<p class="card-text fw-semibold mb-2 text-primary">@player</p>
|
||||
<div class="card-img-top">
|
||||
@util.WebUIUtils.cardtoImage(card)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
} else {
|
||||
<div class="col-12">
|
||||
<div class="alert alert-info text-center" role="alert">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
No cards have been selected yet.
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -114,5 +121,5 @@
|
||||
});
|
||||
}
|
||||
waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
|
||||
connectWebSocket()
|
||||
connectWebSocket()
|
||||
</script>
|
||||
Reference in New Issue
Block a user