Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-30 09:47:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

playing and pausing the timer

Browse Source
This commit is contained in:
Alec
2021-11-30 02:50:00 -05:00
parent dfe6edeb96
commit 5c869182a2
12 changed files with 209 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/config/globals.js
View File

@@ -7,7 +7,9 @@ export const globals = {
COMMANDS: {
FETCH_GAME_STATE: 'fetchGameState',
GET_ENVIRONMENT: 'getEnvironment',
START_GAME: 'startGame'
START_GAME: 'startGame',
PAUSE_TIMER: 'pauseTimer',
RESUME_TIMER: 'resumeTimer'
},
STATUS: {
LOBBY: "lobby",

12
client/modules/GameStateRenderer.js
View File

@@ -68,10 +68,10 @@ export class GameStateRenderer {
}
renderGameHeader() {
let title = document.createElement("h1");
title.innerText = "Game";
document.querySelector('#game-title h1')?.remove();
document.getElementById("game-title").appendChild(title);
// let title = document.createElement("h1");
// title.innerText = "Game";
// document.querySelector('#game-title h1')?.remove();
// document.getElementById("game-title").appendChild(title);
}
renderPlayerRole() {
@@ -99,6 +99,10 @@ export class GameStateRenderer {
document.getElementById("game-role").style.display = 'none';
});
}
renderModeratorView() {
}
}
function renderClient(client, container) {

21
client/modules/Templates.js
View File

@@ -45,5 +45,24 @@ export const templates = {
"<div id='game-role-back'>" +
"<h4>Click to reveal your role</h4>" +
"<p>(click again to hide)</p>" +
"</div>"
"</div>",
MODERATOR_GAME_VIEW:
"<div id='person-name'></div>" +
"<h2 class='user-type user-type-moderator'>Moderator</h2>" +
"<div id='game-header'>" +
"<div class='timer-container-moderator'>" +
"<label for='game-timer'>Time Remaining</label>" +
"<div id='game-timer'></div>" +
"</div>" +
"<div id='play-pause'>" +
"<button id='pause-button'>Pause</button>" +
"<button id='play-button'>Play</button>" +
"</div>" +
"<div>" +
"<label for='alive-count'>Players Left</label>" +
"<div id='alive-count'></div>" +
"</div>" +
"</div>" +
"<div id='player-list-moderator'></div>" +
"<button id='end-game-button'>End Game</button>"
}

34
client/scripts/game.js
View File

@@ -27,13 +27,12 @@ function prepareGamePage(environment, socket, reconnect=false) {
} else {
toast('You are connected.', 'success', true);
console.log(gameState);
gameState.accessCode = accessCode;
userId = gameState.client.id;
UserUtility.setAnonymousUserId(userId, environment);
let gameStateRenderer = new GameStateRenderer(gameState);
const timerWorker = new Worker('../modules/Timer.js');
setClientSocketHandlers(gameStateRenderer, socket, timerWorker);
processGameState(gameState, userId, socket, gameStateRenderer, timerWorker, reconnect); // this socket is initialized via a script tag in the game page HTML.
processGameState(gameState, userId, socket, gameStateRenderer, timerWorker);
}
});
} else {
@@ -54,15 +53,28 @@ function processGameState (gameState, userId, socket, gameStateRenderer, timerWo
|| gameState.userType === globals.USER_TYPES.TEMPORARY_MODERATOR
)
) {
displayStartGamePromptForModerators(gameStateRenderer);
displayStartGamePromptForModerators(gameStateRenderer, socket);
}
break;
case globals.STATUS.IN_PROGRESS:
document.querySelector("#start-game-prompt")?.remove();
gameStateRenderer.gameState = gameState;
document.getElementById("game-state-container").innerHTML = templates.GAME;
gameStateRenderer.renderGameHeader();
gameStateRenderer.renderPlayerRole();
if (gameState.userType === globals.USER_TYPES.PLAYER || gameState.userType === globals.USER_TYPES.TEMPORARY_MODERATOR) {
document.getElementById("game-state-container").innerHTML = templates.GAME;
gameStateRenderer.renderPlayerRole();
} else if (gameState.userType === globals.USER_TYPES.MODERATOR) {
document.getElementById("game-state-container").innerHTML = templates.MODERATOR_GAME_VIEW;
gameStateRenderer.renderModeratorView();
console.log(gameState);
console.log(gameState.accessCode);
document.getElementById("pause-button").addEventListener('click', () => {
socket.emit(globals.COMMANDS.PAUSE_TIMER, gameState.accessCode);
});
document.getElementById("play-button").addEventListener('click', () => {
socket.emit(globals.COMMANDS.RESUME_TIMER, gameState.accessCode);
})
}
break;
default:
break;
@@ -110,6 +122,18 @@ function setClientSocketHandlers(gameStateRenderer, socket, timerWorker) {
)
});
}
if(!socket.hasListeners(globals.COMMANDS.PAUSE_TIMER)) {
socket.on(globals.COMMANDS.PAUSE_TIMER, (timeRemaining) => {
console.log(timeRemaining);
});
}
if(!socket.hasListeners(globals.COMMANDS.RESUME_TIMER)) {
socket.on(globals.COMMANDS.RESUME_TIMER, (timeRemaining) => {
console.log(timeRemaining);
});
}
}
function displayStartGamePromptForModerators(gameStateRenderer, socket) {