feat(websocket)!: Implement WebSocket connection and event handling (#82)
Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #82 Co-authored-by: Janis <janis.e.20@gmx.de> Co-committed-by: Janis <janis.e.20@gmx.de>
This commit is contained in:
@@ -34,4 +34,5 @@
|
||||
});
|
||||
}
|
||||
waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
|
||||
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,4 +109,5 @@
|
||||
});
|
||||
}
|
||||
waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
|
||||
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,4 +73,5 @@
|
||||
});
|
||||
}
|
||||
waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
|
||||
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,4 +121,5 @@
|
||||
});
|
||||
}
|
||||
waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
|
||||
connectWebSocket()
|
||||
</script>
|
||||
@@ -14,7 +14,8 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="p-3 text-center fs-4" id="playerAmount">Playeramount: @gamelobby.getPlayers.size / @gamelobby.maxPlayers</div>
|
||||
<div class="p-3 text-center fs-4" id="playerAmount">
|
||||
Playeramount: @gamelobby.getPlayers.size / @gamelobby.maxPlayers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center align-items-center flex-grow-1">
|
||||
@@ -30,7 +31,8 @@
|
||||
<a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>
|
||||
} else {
|
||||
<h5 class="card-title">@playersession.name</h5>
|
||||
<div class="btn btn-danger" onclick="removePlayer('@gamelobby.id', '@playersession.id')">Remove</div>
|
||||
<div class="btn btn-danger" onclick="removePlayer('@gamelobby.id', '@playersession.id')">
|
||||
Remove</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -78,4 +80,5 @@
|
||||
});
|
||||
}
|
||||
waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
|
||||
connectWebSocket()
|
||||
</script>
|
||||
@@ -35,6 +35,7 @@
|
||||
particlesJS.load('particles-js', 'assets/conf/particlesjs-config.json', function() {
|
||||
console.log('callback - particles.js config loaded');
|
||||
});
|
||||
disconnectWebSocket();
|
||||
</script>
|
||||
<div id="particles-js" style="background-color: rgb(11, 8, 8);
|
||||
background-size: cover;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@*
|
||||
* This template is called from the `index` template. This template
|
||||
* handles the rendering of the page header and body tags. It takes
|
||||
* two arguments, a `String` for the title of the page and an `Html`
|
||||
* object to insert into the body of the page.
|
||||
* This template is called from the `index` template. This template
|
||||
* handles the rendering of the page header and body tags. It takes
|
||||
* two arguments, a `String` for the title of the page and an `Html`
|
||||
* object to insert into the body of the page.
|
||||
*@
|
||||
@(title: String)(content: Html)
|
||||
|
||||
@@ -19,12 +19,13 @@
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column min-vh-100" id="main-body">
|
||||
@* And here's where we render the `Html` object containing
|
||||
* the page content. *@
|
||||
@content
|
||||
@* And here's where we render the `Html` object containing
|
||||
* the page content. *@
|
||||
@content
|
||||
</body>
|
||||
<script src="@routes.JavaScriptRoutingController.javascriptRoutes()" type="text/javascript"></script>
|
||||
<script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script>
|
||||
<script src="@routes.Assets.versioned("../../public/javascripts/websocket.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>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
</html>
|
||||
|
||||
@@ -11,20 +11,23 @@
|
||||
<input class="form-check-input" type="checkbox" id="visibilityswitch" disabled>
|
||||
<label class="form-check-label" for="visibilityswitch">public/private</label>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label for="playeramount" class="form-label">Playeramount:</label>
|
||||
<input type="range" class="form-range text-body" min="2" max="7" value="2" id="playeramount" name="playeramount">
|
||||
<div class="d-flex justify-content-between">
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
<span>4</span>
|
||||
<span>5</span>
|
||||
<span>6</span>
|
||||
<span>7</span>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label for="playeramount" class="form-label">Playeramount:</label>
|
||||
<input type="range" class="form-range text-body" min="2" max="7" value="2" id="playeramount" name="playeramount">
|
||||
<div class="d-flex justify-content-between">
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
<span>4</span>
|
||||
<span>5</span>
|
||||
<span>6</span>
|
||||
<span>7</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-center">
|
||||
<div class="btn btn-success" onclick="createGameJS()">Create Game</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
<script>
|
||||
disconnectWebSocket();
|
||||
</script>
|
||||
@@ -1,57 +1,61 @@
|
||||
@(user: Option[model.users.User])
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary navbar-drop-shadow">
|
||||
<div class="container d-flex justify-content-start">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navBar" aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-center" id="navBar">
|
||||
<a class="navbar-brand ms-auto" href="@routes.MainMenuController.mainMenu()">
|
||||
<img src="@routes.Assets.versioned("images/logo.png")" alt="Logo" width="30" height="20" class="d-inline-block align-text-top">
|
||||
KnockOutWhist
|
||||
</a>
|
||||
<div class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<ul class="navbar-nav mb-2 mb-lg-0">
|
||||
@if(user.isDefined) {
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" onclick="navSpa('0', 'Knockout Whist - Create Game'); return false;" href="@routes.MainMenuController.mainMenu()">Create Game</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Lobbies</a>
|
||||
</li>
|
||||
}
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary navbar-drop-shadow">
|
||||
<div class="container d-flex justify-content-start">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navBar" aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-center" id="navBar">
|
||||
<a class="navbar-brand ms-auto" href="@routes.MainMenuController.mainMenu()">
|
||||
<img src="@routes.Assets.versioned("images/logo.png")" alt="Logo" width="30" height="20" class="d-inline-block align-text-top">
|
||||
KnockOutWhist
|
||||
</a>
|
||||
<div class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<ul class="navbar-nav mb-2 mb-lg-0">
|
||||
@if(user.isDefined) {
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" onclick="navSpa('1', 'Knockout Whist - Rules'); return false;" href="@routes.MainMenuController.rules()">Rules</a>
|
||||
<a class="nav-link active" aria-current="page" onclick="navSpa('0', 'Knockout Whist - Create Game'); return false;" href="@routes.MainMenuController.mainMenu()">
|
||||
Create Game</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-nav me-auto mb-2 mb-lg-0" onsubmit="joinGame(); return false;">
|
||||
<input class="form-control me-2" type="text" placeholder="Enter GameCode" id="gameId" aria-label="Join Game"/>
|
||||
<button class="btn btn-outline-success" type="submit">Join</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@* Right side: profile dropdown if logged in, otherwise Login / Sign Up buttons *@
|
||||
@if(user.isDefined) {
|
||||
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="rounded-circle" width="30" height="30" />
|
||||
<span class="ms-2">@user.get.name</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profileDropdown">
|
||||
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Stats</a></li>
|
||||
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Settings</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="@routes.UserController.logout()">Logout</a></li>
|
||||
</ul>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Lobbies</a>
|
||||
</li>
|
||||
</ul>
|
||||
} else {
|
||||
<div class="d-flex ms-auto">
|
||||
<a class="btn btn-outline-primary me-2" href="@routes.UserController.login()">Login</a>
|
||||
<a class="btn btn-primary" href="@routes.UserController.login()">Sign Up</a>
|
||||
</div>
|
||||
}
|
||||
|
||||
}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" onclick="navSpa('1', 'Knockout Whist - Rules'); return false;" href="@routes.MainMenuController.rules()">
|
||||
Rules</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-nav me-auto mb-2 mb-lg-0" onsubmit="joinGame(); return false;">
|
||||
<input class="form-control me-2" type="text" placeholder="Enter GameCode" id="gameId" aria-label="Join Game"/>
|
||||
<button class="btn btn-outline-success" type="submit">Join</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@* Right side: profile dropdown if logged in, otherwise Login / Sign Up buttons *@
|
||||
@if(user.isDefined) {
|
||||
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="rounded-circle" width="30" height="30" />
|
||||
<span class="ms-2">@user.get.name</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profileDropdown">
|
||||
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">
|
||||
Stats</a></li>
|
||||
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">
|
||||
Settings</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="@routes.UserController.logout()">Logout</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
} else {
|
||||
<div class="d-flex ms-auto">
|
||||
<a class="btn btn-outline-primary me-2" href="@routes.UserController.login()">Login</a>
|
||||
<a class="btn btn-primary" href="@routes.UserController.login()">Sign Up</a>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -1,177 +1,180 @@
|
||||
@(user: Option[model.users.User])
|
||||
@navbar(user)
|
||||
@navbar(user)
|
||||
|
||||
<main class="lobby-background flex-grow-1">
|
||||
<div class="container my-4" style="max-width:980px;">
|
||||
<div class="card rules-card shadow-sm rounded-3 overflow-hidden">
|
||||
<div class="card-header text-center py-3 border-0">
|
||||
<h3 class="mb-0 rules-title">Game Rules Overview</h3>
|
||||
</div>
|
||||
<main class="lobby-background flex-grow-1">
|
||||
<div class="container my-4" style="max-width: 980px;">
|
||||
<div class="card rules-card shadow-sm rounded-3 overflow-hidden">
|
||||
<div class="card-header text-center py-3 border-0">
|
||||
<h3 class="mb-0 rules-title">Game Rules Overview</h3>
|
||||
</div>
|
||||
|
||||
<div class="card-body p-0">
|
||||
<style>
|
||||
<div class="card-body p-0">
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
<div class="accordion rules-accordion" id="rulesAccordion">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingPlayers">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlayers" aria-expanded="true" aria-controls="collapsePlayers">
|
||||
Players
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapsePlayers" class="accordion-collapse collapse show" aria-labelledby="headingPlayers" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
Two to seven players. The aim is to be the last player left in the game.
|
||||
</div>
|
||||
<div class="accordion rules-accordion" id="rulesAccordion">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingPlayers">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlayers" aria-expanded="true" aria-controls="collapsePlayers">
|
||||
Players
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapsePlayers" class="accordion-collapse collapse show" aria-labelledby="headingPlayers" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
Two to seven players. The aim is to be the last player left in the game.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingAim">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAim" aria-expanded="false" aria-controls="collapseAim">
|
||||
Aim
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseAim" class="accordion-collapse collapse" aria-labelledby="headingAim" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
To be the last player left at the end of the game, with the object in each hand being to win a majority of tricks.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingEquipment">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEquipment" aria-expanded="false" aria-controls="collapseEquipment">
|
||||
Equipment
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseEquipment" class="accordion-collapse collapse" aria-labelledby="headingEquipment" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
A standard 52-card pack is used.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingRanks">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRanks" aria-expanded="false" aria-controls="collapseRanks">
|
||||
Card Ranks
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseRanks" class="accordion-collapse collapse" aria-labelledby="headingRanks" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
In each suit, cards rank from highest to lowest: A K Q J 10 9 8 7 6 5 4 3 2.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingDealFirst">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDealFirst" aria-expanded="false" aria-controls="collapseDealFirst">
|
||||
Deal (First Hand)
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseDealFirst" class="accordion-collapse collapse" aria-labelledby="headingDealFirst" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
The dealer deals seven cards to each player. One card is turned up to determine the trump suit for the round.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingDealSubsequent">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDealSubsequent" aria-expanded="false" aria-controls="collapseDealSubsequent">
|
||||
Deal (Subsequent Hands)
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseDealSubsequent" class="accordion-collapse collapse" aria-labelledby="headingDealSubsequent" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
The deal rotates clockwise. The player who took the most tricks in the previous hand selects the trump suit. If there's a tie, players cut cards to decide who calls trumps. One fewer card is dealt in each successive hand until the final hand consists of one card each.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingPlay">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlay" aria-expanded="false" aria-controls="collapsePlay">
|
||||
Play
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapsePlay" class="accordion-collapse collapse" aria-labelledby="headingPlay" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
The player to the dealer's left (eldest hand) leads the first trick. Any card can be led. Other players must follow suit if possible. A player with no cards of the suit led may play any card.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingWinningTrick">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWinningTrick" aria-expanded="false" aria-controls="collapseWinningTrick">
|
||||
Winning a Trick
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseWinningTrick" class="accordion-collapse collapse" aria-labelledby="headingWinningTrick" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
The highest card of the suit led wins, unless a trump is played, in which case the highest trump wins. The winner of the trick leads the next.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingLeadingTrumps">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLeadingTrumps" aria-expanded="false" aria-controls="collapseLeadingTrumps">
|
||||
Leading Trumps
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseLeadingTrumps" class="accordion-collapse collapse" aria-labelledby="headingLeadingTrumps" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
Some rules disallow leading trumps before the suit has been 'broken' (a trump has been played to the lead of another suit). Leading trumps is always permissible if a player holds only trumps.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingKnockout">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseKnockout" aria-expanded="false" aria-controls="collapseKnockout">
|
||||
Knockout
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseKnockout" class="accordion-collapse collapse" aria-labelledby="headingKnockout" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
At the end of each hand, any player who took no tricks is knocked out and takes no further part in the game.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingWinningGame">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWinningGame" aria-expanded="false" aria-controls="collapseWinningGame">
|
||||
Winning the Game
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseWinningGame" class="accordion-collapse collapse" aria-labelledby="headingWinningGame" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
The game is won when a player takes all the tricks in a round, as all other players are knocked out, leaving only one player remaining.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingDogLife">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDogLife" aria-expanded="false" aria-controls="collapseDogLife">
|
||||
Dog Life
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseDogLife" class="accordion-collapse collapse" aria-labelledby="headingDogLife" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
The first player who takes no tricks is awarded a \"dog's life\". In the next hand, that player is dealt one card and can decide which trick to play it to. Each time a trick is played the dog may either play the card or knock on the table and wait to play it later. If the dog wins a trick, the player to the left leads the next and the dog re-enters the game properly in the next hand. If the dog fails, they are knocked out.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingAim">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAim" aria-expanded="false" aria-controls="collapseAim">
|
||||
Aim
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseAim" class="accordion-collapse collapse" aria-labelledby="headingAim" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
To be the last player left at the end of the game, with the object in each hand being to win a majority of tricks.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingEquipment">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEquipment" aria-expanded="false" aria-controls="collapseEquipment">
|
||||
Equipment
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseEquipment" class="accordion-collapse collapse" aria-labelledby="headingEquipment" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
A standard 52-card pack is used.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingRanks">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRanks" aria-expanded="false" aria-controls="collapseRanks">
|
||||
Card Ranks
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseRanks" class="accordion-collapse collapse" aria-labelledby="headingRanks" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
In each suit, cards rank from highest to lowest: A K Q J 10 9 8 7 6 5 4 3 2.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingDealFirst">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDealFirst" aria-expanded="false" aria-controls="collapseDealFirst">
|
||||
Deal (First Hand)
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseDealFirst" class="accordion-collapse collapse" aria-labelledby="headingDealFirst" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
The dealer deals seven cards to each player. One card is turned up to determine the trump suit for the round.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingDealSubsequent">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDealSubsequent" aria-expanded="false" aria-controls="collapseDealSubsequent">
|
||||
Deal (Subsequent Hands)
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseDealSubsequent" class="accordion-collapse collapse" aria-labelledby="headingDealSubsequent" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
The deal rotates clockwise. The player who took the most tricks in the previous hand selects the trump suit. If there's a tie, players cut cards to decide who calls trumps. One fewer card is dealt in each successive hand until the final hand consists of one card each.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingPlay">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlay" aria-expanded="false" aria-controls="collapsePlay">
|
||||
Play
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapsePlay" class="accordion-collapse collapse" aria-labelledby="headingPlay" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
The player to the dealer's left (eldest hand) leads the first trick. Any card can be led. Other players must follow suit if possible. A player with no cards of the suit led may play any card.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingWinningTrick">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWinningTrick" aria-expanded="false" aria-controls="collapseWinningTrick">
|
||||
Winning a Trick
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseWinningTrick" class="accordion-collapse collapse" aria-labelledby="headingWinningTrick" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
The highest card of the suit led wins, unless a trump is played, in which case the highest trump wins. The winner of the trick leads the next.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingLeadingTrumps">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLeadingTrumps" aria-expanded="false" aria-controls="collapseLeadingTrumps">
|
||||
Leading Trumps
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseLeadingTrumps" class="accordion-collapse collapse" aria-labelledby="headingLeadingTrumps" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
Some rules disallow leading trumps before the suit has been 'broken' (a trump has been played to the lead of another suit). Leading trumps is always permissible if a player holds only trumps.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingKnockout">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseKnockout" aria-expanded="false" aria-controls="collapseKnockout">
|
||||
Knockout
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseKnockout" class="accordion-collapse collapse" aria-labelledby="headingKnockout" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
At the end of each hand, any player who took no tricks is knocked out and takes no further part in the game.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingWinningGame">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWinningGame" aria-expanded="false" aria-controls="collapseWinningGame">
|
||||
Winning the Game
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseWinningGame" class="accordion-collapse collapse" aria-labelledby="headingWinningGame" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
The game is won when a player takes all the tricks in a round, as all other players are knocked out, leaving only one player remaining.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingDogLife">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDogLife" aria-expanded="false" aria-controls="collapseDogLife">
|
||||
Dog Life
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseDogLife" class="accordion-collapse collapse" aria-labelledby="headingDogLife" data-bs-parent="#rulesAccordion">
|
||||
<div class="accordion-body">
|
||||
The first player who takes no tricks is awarded a \"dog's life\". In the next hand, that player is dealt one card and can decide which trick to play it to. Each time a trick is played the dog may either play the card or knock on the table and wait to play it later. If the dog wins a trick, the player to the left leads the next and the dog re-enters the game properly in the next hand. If the dog fails, they are knocked out.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
disconnectWebSocket();
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user