play and pause button, more improved lobby view

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

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);
}
}