diff --git a/client/config/globals.js b/client/config/globals.js index ea4eb80..f667864 100644 --- a/client/config/globals.js +++ b/client/config/globals.js @@ -35,8 +35,8 @@ export const globals = { PRODUCTION: "production" }, USER_TYPE_ICONS: { - PLAYER: ' \uD83C\uDFAE', - MODERATOR: ' \uD83D\uDC51', - TEMP_MOD: ' \uD83C\uDFAE\uD83D\uDC51' + player: ' \uD83C\uDFAE', + moderator: ' \uD83D\uDC51', + 'player / temp mod': ' \uD83C\uDFAE\uD83D\uDC51' } }; diff --git a/client/images/pause-button.svg b/client/images/pause-button.svg new file mode 100644 index 0000000..76b6c6c --- /dev/null +++ b/client/images/pause-button.svg @@ -0,0 +1,8 @@ + diff --git a/client/images/play-button.svg b/client/images/play-button.svg new file mode 100644 index 0000000..51cc5e1 --- /dev/null +++ b/client/images/play-button.svg @@ -0,0 +1,7 @@ + diff --git a/client/modules/GameStateRenderer.js b/client/modules/GameStateRenderer.js index 5a2725b..1f30dfd 100644 --- a/client/modules/GameStateRenderer.js +++ b/client/modules/GameStateRenderer.js @@ -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(); + } +} diff --git a/client/modules/GameTimerManager.js b/client/modules/GameTimerManager.js index 9fac66f..3c1dcc9 100644 --- a/client/modules/GameTimerManager.js +++ b/client/modules/GameTimerManager.js @@ -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); + } } diff --git a/client/modules/Templates.js b/client/modules/Templates.js index dcdf771..00c6e73 100644 --- a/client/modules/Templates.js +++ b/client/modules/Templates.js @@ -22,7 +22,6 @@ export const templates = { "" + "", GAME: - "
" + "(click again to hide)
" + "