Werewolf/client/src/modules/GameTimerManager.js

import { globals } from '../config/globals.js';

export class GameTimerManager {
    constructor (stateBucket, socket) {
        this.stateBucket = stateBucket;
        this.playListener = () => {
            socket.emit(globals.COMMANDS.RESUME_TIMER, this.stateBucket.currentGameState.accessCode);
        };
        this.pauseListener = () => {
            socket.emit(globals.COMMANDS.PAUSE_TIMER, this.stateBucket.currentGameState.accessCode);
        };
    }

    resumeGameTimer (totalTime, tickRate, soundManager, timerWorker) {
        if (window.Worker) {
            if (
                this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.MODERATOR
                || this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.TEMPORARY_MODERATOR
            ) {
                this.swapToPauseButton();
            }
            const instance = this;
            const timer = document.getElementById('game-timer');
            timer.classList.remove('paused');
            timer.classList.remove('paused-low');
            timer.classList.remove('low');
            if (totalTime < 60000) {
                timer.classList.add('low');
            }
            timer.innerText = totalTime < 60000
                ? returnHumanReadableTime(totalTime, true)
                : returnHumanReadableTime(totalTime);
            timerWorker.onmessage = function (e) {
                if (e.data.hasOwnProperty('timeRemainingInMilliseconds') && e.data.timeRemainingInMilliseconds >= 0) {
                    if (e.data.timeRemainingInMilliseconds === 0) {
                        instance.displayExpiredTime();
                    } else if (e.data.timeRemainingInMilliseconds < 60000) {
                        timer.classList.add('low');
                        timer.innerText = e.data.displayTime;
                    } else {
                        timer.innerText = e.data.displayTime;
                    }
                }
            };
            timerWorker.postMessage({ totalTime: totalTime, tickInterval: tickRate });
        }
    }

    pauseGameTimer (timerWorker, timeRemaining) {
        if (window.Worker) {
            if (
                this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.MODERATOR
                || this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.TEMPORARY_MODERATOR
            ) {
                this.swapToPlayButton();
            }

            timerWorker.postMessage('stop');
            const timer = document.getElementById('game-timer');
            if (timeRemaining < 60000) {
                timer.innerText = returnHumanReadableTime(timeRemaining, true);
                timer.classList.add('paused-low');
                timer.classList.add('low');
            } else {
                timer.innerText = returnHumanReadableTime(timeRemaining);
                timer.classList.add('paused');
            }
        }
    }

    displayPausedTime (time) {
        if (
            this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.MODERATOR
            || this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.TEMPORARY_MODERATOR
        ) {
            this.swapToPlayButton();
        }

        const timer = document.getElementById('game-timer');
        if (time < 60000) {
            timer.innerText = returnHumanReadableTime(time, true);
            timer.classList.add('paused-low');
            timer.classList.add('low');
        } else {
            timer.innerText = returnHumanReadableTime(time);
            timer.classList.add('paused');
        }
    }

    displayExpiredTime () {
        const currentBtn = document.querySelector('#play-pause img');
        if (currentBtn) {
            currentBtn.removeEventListener('click', this.pauseListener);
            currentBtn.removeEventListener('click', this.playListener);
            currentBtn.remove();
        }

        const timer = document.getElementById('game-timer');
        timer.innerText = returnHumanReadableTime(0, true);
    }

    attachTimerSocketListeners (socket, timerWorker, gameStateRenderer) {
        if (!socket.hasListeners(globals.COMMANDS.PAUSE_TIMER)) {
            socket.on(globals.COMMANDS.PAUSE_TIMER, (timeRemaining) => {
                this.pauseGameTimer(timerWorker, timeRemaining);
            });
        }

        if (!socket.hasListeners(globals.COMMANDS.RESUME_TIMER)) {
            socket.on(globals.COMMANDS.RESUME_TIMER, (timeRemaining) => {
                this.resumeGameTimer(timeRemaining, globals.CLOCK_TICK_INTERVAL_MILLIS, null, timerWorker);
            });
        }

        if (!socket.hasListeners(globals.COMMANDS.GET_TIME_REMAINING)) {
            socket.on(globals.COMMANDS.GET_TIME_REMAINING, (timeRemaining, paused) => {
                if (paused) {
                    this.displayPausedTime(timeRemaining);
                } else if (timeRemaining === 0) {
                    this.displayExpiredTime();
                } else {
                    this.resumeGameTimer(timeRemaining, globals.CLOCK_TICK_INTERVAL_MILLIS, null, timerWorker);
                }
            });
        }
    }

    swapToPlayButton () {
        const currentBtn = document.querySelector('#play-pause img');
        if (currentBtn) {
            currentBtn.removeEventListener('click', this.pauseListener);
            currentBtn.remove();
        }

        const playBtn = document.createElement('img');
        playBtn.setAttribute('src', '../images/play-button.svg');
        playBtn.addEventListener('click', this.playListener);
        document.getElementById('play-pause').appendChild(playBtn);
    }

    swapToPauseButton () {
        const currentBtn = document.querySelector('#play-pause img');
        if (currentBtn) {
            currentBtn.removeEventListener('click', this.playListener);
            currentBtn.remove();
        }

        const pauseBtn = document.createElement('img');
        pauseBtn.setAttribute('src', '../images/pause-button.svg');
        pauseBtn.addEventListener('click', this.pauseListener);
        document.getElementById('play-pause').appendChild(pauseBtn);
    }
}

function returnHumanReadableTime (milliseconds, tenthsOfSeconds = false) {
    const tenths = Math.floor((milliseconds / 100) % 10);
    let seconds = Math.floor((milliseconds / 1000) % 60);
    let minutes = Math.floor((milliseconds / (1000 * 60)) % 60);
    let hours = Math.floor((milliseconds / (1000 * 60 * 60)) % 24);

    hours = hours < 10 ? '0' + hours : hours;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;

    return tenthsOfSeconds
        ? hours + ':' + minutes + ':' + seconds + '.' + tenths
        : hours + ':' + minutes + ':' + seconds;
}