kmitresse/cards-rush
1
0
Fork 0
mirror of https://github.com/kmitresse/Cards-Rush.git synced 2026-07-09 13:27:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

refacto: devweb - structure modal and game websocket script in js files

Browse Source 
+ feat: devweb - add admin to a game
This commit is contained in:
kmitresse
2024-06-13 15:06:03 +02:00
parent ae5d39abbf
commit 1dd75ea377
6 changed files with 309 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files
S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/game.jsp
+2 -215
View File
@@ -10,6 +10,7 @@
<jsp:attribute name="head">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/card.css">
<script defer type="module" src="${pageContext.request.contextPath}/static/js/websockets/player-management-websocket.js"></script>
<script defer type="module" src="${pageContext.request.contextPath}/static/js/websockets/game-management-websocket.js"></script>
<script defer type="module" src="${pageContext.request.contextPath}/static/js/modal.js"></script>
</jsp:attribute>
<jsp:body>
@@ -21,7 +22,7 @@
<jsp:attribute name="footer">
<div class="card-footer">
<a id="leave-game-button" href="${pageContext.request.contextPath}/lobby" class="is-primary card-footer-item">${translator.translate('game_room_leave_game')}</a>
<a data-target="#user-list-modal" class="card-footer-item modal-trigger">${translator.translate('game_room_add_player')}</a>
<a id="invite-player" data-target="#user-list-modal" class="card-footer-item modal-trigger">${translator.translate('game_room_add_player')}</a>
<a id="start-game-button" class="is-primary card-footer-item">${translator.translate('game_room_start_game')}</a>
</div>
</jsp:attribute>
@@ -41,219 +42,5 @@
<!-- Liste des utilisateurs dans le lobby -->
<modal:connected-users-list-modal/>
<script type="module" defer>
import WebsocketToolkit from "${pageContext.request.contextPath}/static/js/WebsocketToolkit.js";
import PlayerHand from "${pageContext.request.contextPath}/static/js/PlayerHand.js"
import Card from "${pageContext.request.contextPath}/static/js/Card.js"
const choice = document.querySelector('#choice');
let havePlayed = false;
const timer = ${game.timer};
let remainingTime = timer;
let timerInterval;
// Display timer
document.querySelector('#timer').innerText = remainingTime + "s";
const interval = () => {
remainingTime--;
document.querySelector('#timer').innerText = remainingTime + "s";
if (remainingTime <= 0) clearInterval(timerInterval);
}
choice.querySelectorAll('button').forEach(button => {
button.addEventListener('click', () => {
const message = {
type: "click",
data: button.dataset.value
}
wsgame.ws.send(JSON.stringify(message));
havePlayed = true;
// Disable buttons
choice.querySelectorAll('button').forEach(button => button.disabled = true);
});
});
const url = new URL(window.location.href);
url.pathname = "${pageContext.request.contextPath}/ws/game/${game.id}";
url.protocol = "ws:";
url.searchParams.delete("id");
const wsgame = new WebsocketToolkit(url);
wsgame.onOpen(() => {
console.log("Connected to the server (GameWS)")
const message = {
type: "connection",
data: JSON.stringify({
id: ${user.id},
username: "${user.username}"
})
}
wsgame.ws.send(JSON.stringify(message))
});
wsgame.onMessage("updatePlayerList", (data) => {
players = data;
updatePlayerList();
});
wsgame.onMessage("start", (game) => {
currentGame = game;
document.querySelector('#gameWaiting').style.display = 'none';
document.querySelector('#gameStarted').style.display = 'block';
timerInterval = setInterval(interval, 1000);
const deck = document.querySelector('#deck'); // Column
const myCard = document.querySelector('#myCard'); // Column
const otherCards = document.querySelector('#otherCards'); // Columns
const round = document.querySelector('#round');
// Reset content
deck.innerHTML = "";
myCard.innerHTML = "";
otherCards.innerHTML = "";
round.innerText = "";
// Show current round
round.innerText = (currentGame.currentRound + 1)
// Show other player cards
game.players
.filter(p => p.user.id !== ${user.id})
.forEach(p => {
const playerHand = new PlayerHand(p);
otherCards.innerHTML += playerHand.render({
textPosition: PlayerHand.TextPosition.TOP,
className: "column"
});
});
// Show my card
const me = game.players.find(p => p.user.id === ${user.id});
const playerHand = new PlayerHand(me);
myCard.innerHTML += playerHand.render({
textPosition: PlayerHand.TextPosition.BOTTOM,
className: "column"
});
// Show deck
const deckCard = new Card(game.currentCard.color, game.currentCard.value);
deck.innerHTML = deckCard.render();
})
wsgame.onMessage("updatePlayer", (p) => {
document.querySelector(".player-" + p.user.id + " .card-play").style.boxShadow = "inset 0px 0px 30px 10px orange";
})
wsgame.onMessage("timerEnd", (game) => {
if (!havePlayed) {
const message = {
type: "click",
data: "TIMER_END"
}
wsgame.ws.send(JSON.stringify(message));
}
})
wsgame.onMessage("nextRound", (game) => {
currentGame = game;
document.querySelector('#gameWaiting').style.display = 'none';
document.querySelector('#gameStarted').style.display = 'block';
const deck = document.querySelector('#deck'); // Column
const choice = document.querySelector('#choice');
const myCard = document.querySelector('#myCard'); // Column
const otherCards = document.querySelector('#otherCards'); // Columns
const round = document.querySelector('#round');
clearInterval(timerInterval);
remainingTime = timer;
document.querySelector('#timer').innerText = remainingTime + "s";
timerInterval = setInterval(interval, 1000);
// Reset content
deck.innerHTML = "";
myCard.innerHTML = "";
otherCards.innerHTML = "";
round.innerText = "";
havePlayed = false;
choice.querySelectorAll('button').forEach(button => button.disabled = false);
// Show the current round
round.innerText = (currentGame.currentRound + 1)
// Show other player cards
game.players
.filter(p => p.user.id !== ${user.id})
.forEach(p => {
const playerHand = new PlayerHand(p);
otherCards.innerHTML += playerHand.render({
textPosition: PlayerHand.TextPosition.TOP,
className: "column"
});
});
// Show my card
const me = game.players.find(p => p.user.id === ${user.id});
const playerHand = new PlayerHand(me);
myCard.innerHTML += playerHand.render({
textPosition: PlayerHand.TextPosition.BOTTOM,
className: "column"
});
// Show deck
const deckCard = new Card(game.currentCard.color, game.currentCard.value);
deck.innerHTML = deckCard.render();
})
wsgame.onMessage("end", (game) => {
clearInterval(timerInterval);
window.location.href = "${pageContext.request.contextPath}/game-statistics?id=${game.id}&endGame=true";
})
// Close handling
wsgame.onClose(() => console.log("Disconnected from the server (GameWS)"));
// Game
let currentGame;
// Player List
let players = [];
const playerList = document.querySelector('#playerList tbody');
function updatePlayerList() {
playerList.innerHTML = '';
players.forEach(player => {
const tr = document.createElement('tr');
const td = document.createElement('td');
td.textContent = player.user.username;
tr.appendChild(td);
playerList.appendChild(tr);
});
}
// Start Game Button
document.querySelector('#start-game-button').addEventListener('click', () => {
if (players.length < 2 || players.length > 4) {
alert("Il faut entre 2 et 4 joueurs pour démarrer la partie");
return;
}
const message = {type: "start", data: ""}
wsgame.ws.send(JSON.stringify(message));
});
</script>
</jsp:body>
</layout:base>
S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/game-room-information.tag
+1
View File
@@ -5,6 +5,7 @@
<jsp:useBean id="user" scope="session" type="uppa.project.database.pojo.User"/>
<input type="hidden" id="game-id" value="${game.id}">
<input type="hidden" id="game-timer" value="${game.timer}">
<input type="hidden" id="user-id" value="${user.id}">
<input type="hidden" id="user-username" value="${user.username}">
<p><strong>${translator.translate('game_information_created_at')}</strong> ${game.createdAt.toLocaleString()}</p>