Pronguino – Web

// Replace with the URL of your API
let apiUrl = 'http://localhost:3000/games';

/**
 * Formats an ISO Date string to default locale in format d MMM YY
 */
function formattedDate(isoDate) {

    return new Date(isoDate).toLocaleDateString(undefined, {
        day: 'numeric',
        month: 'short',
        year: '2-digit'
    });
}

/**
 * Calculate elapsed time from start to now and format to 00:00:00
 */
function elapsedTime(isoStarted) {

    // Get times ...
    const started = new Date(isoStarted).getTime();
    const now = new Date().getTime();

    // Calculate elapsed time in milliseconds ...
    const elapsed = now - started;

    // Calculate time parts ...
    const hours = Math.floor(elapsed / 3600000);
    const minutes = Math.floor((elapsed % 3600000) / 60000);
    const seconds = Math.floor((elapsed % 60000) / 1000);

    // Return formatted ...
    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

/**
 * Build a new game div element for a given game
 */
function buildGameDiv(game) {
    const liveStates = ['Started', 'Paused', 'Serve'];

    const gameDiv = document.createElement('div');
    gameDiv.className = 'game';
    gameDiv.dataset.id = game.id;

    if (liveStates.includes(game.state)) {
        const timeDiv = document.createElement('div');
        timeDiv.className = 'time';
        timeDiv.textContent = elapsedTime(game.started);
        gameDiv.appendChild(timeDiv);
    } else {
        const dateDiv = document.createElement('div');
        dateDiv.className = 'date';
        dateDiv.textContent = formattedDate(game.started);
        gameDiv.appendChild(dateDiv);
    }

    const playersDiv = document.createElement('div');
    playersDiv.className = 'players';
    gameDiv.appendChild(playersDiv);

    const scoresDiv = document.createElement('div');
    scoresDiv.className = 'scores';
    gameDiv.appendChild(scoresDiv);

    game.players.forEach(player => {
        const playerDiv = document.createElement('div');
        playerDiv.className = 'player';
        playerDiv.textContent = player.name;
        playersDiv.appendChild(playerDiv);

        const scoreDiv = document.createElement('div');
        scoreDiv.className = 'score';
        scoreDiv.textContent = player.score;
        scoresDiv.appendChild(scoreDiv);
    });

    return gameDiv;
}

/**
 * Update display with game data
 */
function updateGames(data) {
    const games = Object.values(data).map(game => ({
        id: game.id,
        started: game.started,
        state: game.state,
        players: Object.values(game.players).map(player => ({
            name: player.name,
            score: player.score
        }))
    }));

    const liveDiv = document.getElementById('live');
    const resultsDiv = document.getElementById('results');
    const noLiveDiv = document.getElementById('no-live');
    const noResultsDiv = document.getElementById('no-results');

    const liveGames = games.filter(g => ['Started', 'Paused', 'Serve'].includes(g.state));
    const resultGames = games.filter(g => ['Ended', 'Cancelled'].includes(g.state));

    // Show/hide placeholders
    noLiveDiv.style.display = liveGames.length ? 'none' : '';
    noResultsDiv.style.display = resultGames.length ? 'none' : '';

    // Remove game divs that are no longer present
    const liveIds = new Set(liveGames.map(g => String(g.id)));
    const resultIds = new Set(resultGames.map(g => String(g.id)));
    liveDiv.querySelectorAll('.game[data-id]').forEach(el => {
        if (!liveIds.has(el.dataset.id)) el.remove();
    });
    resultsDiv.querySelectorAll('.game[data-id]').forEach(el => {
        if (!resultIds.has(el.dataset.id)) el.remove();
    });

    // Update or create live game elements
    liveGames.forEach(game => {
        let gameDiv = liveDiv.querySelector(`.game[data-id="${game.id}"]`);
        if (!gameDiv) {
            gameDiv = buildGameDiv(game);
            liveDiv.appendChild(gameDiv);
        }
        // Update elapsed time and scores in place
        gameDiv.querySelector('.time').textContent = elapsedTime(game.started);
        const scoreEls = gameDiv.querySelectorAll('.score');
        game.players.forEach((player, i) => {
            if (scoreEls[i]) scoreEls[i].textContent = player.score;
        });
    });

    // Update or create result game elements
    resultGames.forEach(game => {
        let gameDiv = resultsDiv.querySelector(`.game[data-id="${game.id}"]`);
        if (!gameDiv) {
            gameDiv = buildGameDiv(game);
            resultsDiv.appendChild(gameDiv);
        }
        // Update scores in place (date never changes)
        const scoreEls = gameDiv.querySelectorAll('.score');
        game.players.forEach((player, i) => {
            if (scoreEls[i]) scoreEls[i].textContent = player.score;
        });
    });
}

// Use a Web Worker to fetch data - workers are not throttled when the tab is not in focus
const timerWorker = new Worker('timer-worker.js');

// Send the API URL to the worker so it can start fetching
timerWorker.postMessage(apiUrl);

// Receive game data from the worker and update the display
timerWorker.addEventListener('message', (e) => {
    updateGames(e.data);
});

let apiUrl = null;

self.addEventListener('message', (e) => {
    apiUrl = e.data;
});

setInterval(() => {
    if (!apiUrl) return;
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => postMessage(data))
        .catch(error => console.error(error));
}, 1000);