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

play and pause button, more improved lobby view

Browse Source
This commit is contained in:
Alec
2021-12-01 15:07:24 -05:00
parent 7f86aa22aa
commit 27dfd55cda
14 changed files with 222 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
client/modules/GameStateRenderer.js
View File

@@ -10,33 +10,25 @@ export class GameStateRenderer {
renderLobbyPlayers() {
document.querySelectorAll('.lobby-player').forEach((el) => el.remove())
let lobbyPlayersContainer = document.getElementById("lobby-players");
if (this.gameState.userType !== globals.USER_TYPES.MODERATOR) {
let modEl = document.createElement("div");
modEl.innerText = this.gameState.moderator.name;
modEl.classList.add('lobby-player');
lobbyPlayersContainer.appendChild(modEl);
if (this.gameState.client.userType === globals.USER_TYPES.PLAYER) {
lobbyPlayersContainer.appendChild(renderLobbyPerson(this.gameState.moderator.name, this.gameState.moderator.userType))
}
for (let person of this.gameState.people) {
let personEl = document.createElement("div");
personEl.innerText = person.name;
personEl.classList.add('lobby-player');
lobbyPlayersContainer.appendChild(personEl);
lobbyPlayersContainer.appendChild(renderLobbyPerson(person.name,person.userType))
}
let playerCount;
if (this.gameState.userType === globals.USER_TYPES.MODERATOR) {
playerCount = this.gameState.people.length;
} else {
playerCount = 1 + this.gameState.people.length;
let playerCount = this.gameState.people.filter((person) => person.userType === globals.USER_TYPES.PLAYER).length;
if (this.gameState.moderator.userType === globals.USER_TYPES.TEMPORARY_MODERATOR) {
playerCount += 1;
}
if (this.gameState.client.userType === globals.USER_TYPES.PLAYER) {
playerCount += 1;
}
document.querySelector("label[for='lobby-players']").innerText =
"Other People ( " + playerCount + " )";
"Other People (" + playerCount + "/" + getGameSize(this.gameState.deck) + " Players)";
}
renderLobbyHeader() {
let existingTitle = document.querySelector('#game-link h1');
if (existingTitle) {
existingTitle.remove();
}
removeExistingTitle();
let title = document.createElement("h1");
title.innerText = "Lobby";
document.getElementById("game-title").appendChild(title);
@@ -62,9 +54,9 @@ export class GameStateRenderer {
}
renderGameHeader() {
removeExistingTitle();
// let title = document.createElement("h1");
// title.innerText = "Game";
// document.querySelector('#game-title h1')?.remove();
// document.getElementById("game-title").appendChild(title);
}
@@ -99,13 +91,18 @@ export class GameStateRenderer {
}
}
function renderLobbyPlayer(name, userType) {
function renderLobbyPerson(name, userType) {
let el = document.createElement("div");
el.innerHTML = ""
clientEl.innerText = client.name + ' (you)';
clientEl.classList.add('lobby-player');
clientEl.classList.add('lobby-player-client');
container.prepend(clientEl);
let personNameEl = document.createElement("div");
let personTypeEl = document.createElement("div");
personNameEl.innerText = name;
personTypeEl.innerText = userType + globals.USER_TYPE_ICONS[userType];
el.classList.add('lobby-player');
el.appendChild(personNameEl);
el.appendChild(personTypeEl);
return el;
}
function getGameSize(cards) {
@@ -116,3 +113,10 @@ function getGameSize(cards) {
return quantity;
}
function removeExistingTitle() {
let existingTitle = document.querySelector('#game-title h1');
if (existingTitle) {
existingTitle.remove();
}
}

92
client/modules/GameTimerManager.js
View File

@@ -1,24 +1,34 @@
import {globals} from "../config/globals.js";
export class GameTimerManager {
constructor() {
}
startGameTimer (hours, minutes, tickRate, soundManager, timerWorker) {
if (window.Worker) {
timerWorker.onmessage = function (e) {
if (e.data.hasOwnProperty('timeRemainingInMilliseconds') && e.data.timeRemainingInMilliseconds > 0) {
document.getElementById('game-timer').innerText = e.data.displayTime;
}
};
const totalTime = convertFromHoursToMilliseconds(hours) + convertFromMinutesToMilliseconds(minutes);
timerWorker.postMessage({ totalTime: totalTime, tickInterval: tickRate });
constructor(gameState, socket) {
this.gameState = gameState;
this.playListener = () => {
socket.emit(globals.COMMANDS.RESUME_TIMER, this.gameState.accessCode);
}
this.pauseListener = () => {
socket.emit(globals.COMMANDS.PAUSE_TIMER, this.gameState.accessCode);
}
}
// startGameTimer (hours, minutes, tickRate, soundManager, timerWorker) {
// if (window.Worker) {
// timerWorker.onmessage = function (e) {
// if (e.data.hasOwnProperty('timeRemainingInMilliseconds') && e.data.timeRemainingInMilliseconds > 0) {
// document.getElementById('game-timer').innerText = e.data.displayTime;
// }
// };
// const totalTime = convertFromHoursToMilliseconds(hours) + convertFromMinutesToMilliseconds(minutes);
// timerWorker.postMessage({ totalTime: totalTime, tickInterval: tickRate });
// }
// }
resumeGameTimer(totalTime, tickRate, soundManager, timerWorker) {
if (window.Worker) {
if (this.gameState.client.userType !== globals.USER_TYPES.PLAYER) {
this.swapToPauseButton();
}
let timer = document.getElementById('game-timer');
timer.classList.remove('paused');
timer.innerText = totalTime < 60000
@@ -35,6 +45,10 @@ export class GameTimerManager {
pauseGameTimer(timerWorker, timeRemaining) {
if (window.Worker) {
if (this.gameState.client.userType !== globals.USER_TYPES.PLAYER) {
this.swapToPlayButton();
}
timerWorker.postMessage('stop');
let timer = document.getElementById('game-timer');
timer.innerText = timeRemaining < 60000
@@ -45,6 +59,10 @@ export class GameTimerManager {
}
displayPausedTime(time) {
if (this.gameState.client.userType !== globals.USER_TYPES.PLAYER) {
this.swapToPlayButton();
}
let timer = document.getElementById('game-timer');
timer.innerText = time < 60000
? returnHumanReadableTime(time, true)
@@ -53,17 +71,17 @@ export class GameTimerManager {
}
attachTimerSocketListeners(socket, timerWorker, gameStateRenderer) {
if (!socket.hasListeners(globals.EVENTS.START_TIMER)) {
socket.on(globals.EVENTS.START_TIMER, () => {
this.startGameTimer(
gameStateRenderer.gameState.timerParams.hours,
gameStateRenderer.gameState.timerParams.minutes,
globals.CLOCK_TICK_INTERVAL_MILLIS,
null,
timerWorker
)
});
}
// if (!socket.hasListeners(globals.EVENTS.START_TIMER)) {
// socket.on(globals.EVENTS.START_TIMER, () => {
// this.startGameTimer(
// gameStateRenderer.gameState.timerParams.hours,
// gameStateRenderer.gameState.timerParams.minutes,
// globals.CLOCK_TICK_INTERVAL_MILLIS,
// null,
// timerWorker
// )
// });
// }
if(!socket.hasListeners(globals.COMMANDS.PAUSE_TIMER)) {
socket.on(globals.COMMANDS.PAUSE_TIMER, (timeRemaining) => {
@@ -88,6 +106,32 @@ export class GameTimerManager {
});
}
}
swapToPlayButton() {
let currentBtn = document.querySelector('#play-pause img');
if (currentBtn) {
currentBtn.removeEventListener('click', this.pauseListener);
currentBtn.remove();
}
let playBtn = document.createElement('img');
playBtn.setAttribute('src', '../images/play-button.svg');
playBtn.addEventListener('click', this.playListener);
document.getElementById('play-pause').appendChild(playBtn);
}
swapToPauseButton() {
let currentBtn = document.querySelector('#play-pause img');
if (currentBtn) {
currentBtn.removeEventListener('click', this.playListener);
currentBtn.remove();
}
let pauseBtn = document.createElement('img');
pauseBtn.setAttribute('src', '../images/pause-button.svg');
pauseBtn.addEventListener('click', this.pauseListener);
document.getElementById('play-pause').appendChild(pauseBtn);
}
}

16
client/modules/Templates.js
View File

@@ -22,7 +22,6 @@ export const templates = {
"<button id='start-game-button'>Start Game</button>" +
"</div>",
GAME:
"<div id='person-name'></div>" +
"<div id='game-header'>" +
"<div>" +
"<label for='game-timer'>Time Remaining</label>" +
@@ -43,16 +42,15 @@ export const templates = {
"<p>(click again to hide)</p>" +
"</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>" +
"<label for='game-timer'>Time Remaining</label>" +
"<div id='game-timer'></div>" +
"</div>" +
"<div id='play-pause'>" +
"</div>" +
"</div>" +
"<div>" +
"<label for='alive-count'>Players Left</label>" +