viewer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TIMERTHING - Live Results</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="/socket.io/socket.io.js"></script>
</head>
<body class="bg-black text-white min-h-screen font-sans">
    <div class="p-6 max-w-4xl mx-auto space-y-6">
        <div class="flex justify-between items-end border-b border-zinc-800 pb-6">
            <div>
                <h1 id="raceTitle" class="text-4xl font-black tracking-tighter uppercase italic">LIVE <span class="text-red-600">RESULTS</span></h1>
                <p class="text-zinc-500 text-xs font-bold uppercase tracking-widest mt-1">Room: <span id="codeDisplay" class="text-white">---</span></p>
            </div>
            <div class="text-right">
                <div id="raceClock" class="font-mono text-4xl text-red-600 font-bold tabular-nums">00:00.0</div>
                <div id="raceStatus" class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Waiting for Start</div>
            </div>
        </div>

        <!-- Event Statistics Bar -->
        <div id="eventStats" class="grid grid-cols-3 gap-4">
            <div class="bg-zinc-900/50 border border-zinc-800 p-4 rounded-2xl text-center">
                <p class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-1">Total Laps</p>
                <p id="statLaps" class="text-2xl font-black text-white">0</p>
            </div>
            <div class="bg-zinc-900/50 border border-zinc-800 p-4 rounded-2xl text-center">
                <p class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-1">Total Distance</p>
                <p id="statMeters" class="text-2xl font-black text-red-600">0<span class="text-xs ml-1 text-zinc-500 font-bold uppercase">m</span></p>
            </div>
            <div class="bg-zinc-900/50 border border-zinc-800 p-4 rounded-2xl text-center">
                <p class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-1">Miles Covered</p>
                <p id="statMiles" class="text-2xl font-black text-white">0.00</p>
            </div>
        </div>

        <div id="leaderboard" class="grid grid-cols-1 gap-4">
            <div class="text-center py-20 text-zinc-700 animate-pulse">
                <p class="text-xl font-bold uppercase tracking-widest">Waiting for race data...</p>
            </div>
        </div>
    </div>

    <script>
        const socket = io();
        let timerInterval;
        let currentRaceStartTime = null;
        const raceClock = document.getElementById('raceClock');
        const leaderboardDiv = document.getElementById('leaderboard');

        const urlParams = new URLSearchParams(window.location.search);
        const roomId = urlParams.get('room');
        const raceId = urlParams.get('raceId');

        if (roomId) {
            socket.emit('join-viewer', roomId.toUpperCase());
            document.getElementById('codeDisplay').innerText = roomId.toUpperCase();
        } else if (raceId) {
            socket.emit('get-race-data', raceId);
            document.getElementById('codeDisplay').innerText = "RECORD";
        }

        socket.on('race-data-loaded', (data) => updateLeaderboard(data));

        socket.on('viewer-update', (data) => {
            updateLeaderboard(data);
            
            // Sync Clock
            clearInterval(timerInterval);
            const activeStart = data.isHeatsEnabled ? (data.heatData[data.currentHeat]?.startTime) : data.raceStartTime;
            const activeStop = data.isHeatsEnabled ? (data.heatData[data.currentHeat]?.stopTime) : data.raceStopTime;

            if (activeStart) {
                if (data.isStopped && activeStop) {
                    document.getElementById('raceStatus').innerText = "Race Stopped";
                    raceClock.innerText = formatTime(activeStop - activeStart);
                } else {
                    document.getElementById('raceStatus').innerText = data.isHeatsEnabled ? `Heat ${data.currentHeat} in Progress` : "Race in Progress";
                    timerInterval = setInterval(() => {
                        const diff = Date.now() - activeStart;
                        raceClock.innerText = formatTime(diff);
                    }, 100);
                }
            } else {
                document.getElementById('raceStatus').innerText = "Ready";
                raceClock.innerText = "00:00.0";
            }
        });

        function updateLeaderboard(data) {
            const { startList, allSplits, raceStartTime, lapDist, isStopped, raceStopTime, isHeatsEnabled, heatData, currentHeat } = data;
            
            if (data.name) {
                document.getElementById('raceTitle').innerHTML = `${data.name.split(' ')[0]} <span class="text-red-600">${data.name.split(' ').slice(1).join(' ') || 'RACE'}</span>`;
            }

            if (isStopped || raceStopTime) {
                clearInterval(timerInterval);
                document.getElementById('raceStatus').innerText = "Finalized Results";
                const activeStart = isHeatsEnabled ? (heatData[currentHeat]?.startTime) : raceStartTime;
                const activeStop = isHeatsEnabled ? (heatData[currentHeat]?.stopTime) : raceStopTime;
                if (activeStart && activeStop) raceClock.innerText = formatTime(activeStop - activeStart);
            }

            if (!isHeatsEnabled) {
            const runners = {};
            startList.forEach(name => runners[name] = { laps: [], total: 0 });

            let eventTotalLaps = 0;
            const runnerLastTs = {};

            // Calculate stats
            [...allSplits].sort((a, b) => a.timestamp - b.timestamp).forEach(split => {
                const hIdx = split.heatIndex || 1;
                const hStart = isHeatsEnabled ? heatData[hIdx]?.startTime : raceStartTime;
                if (!hStart) return;

                (split.runnerNames || []).forEach(name => {
                    if (runners[name]) {
                        const r = runners[name];
                        if (!runnerLastTs[name]) runnerLastTs[name] = {};
                        const prevTs = runnerLastTs[name][hIdx] || hStart;
                        
                        const lapTime = split.timestamp - prevTs;
                        if (lapTime >= 0) {
                            r.laps.push(lapTime);
                            eventTotalLaps++;
                            r.total += lapTime;
                            runnerLastTs[name][hIdx] = split.timestamp;
                        }
                    }
                });
            });

            document.getElementById('statLaps').innerText = eventTotalLaps;
            document.getElementById('statMeters').innerHTML = `${Math.round(eventTotalLaps * lapDist)}<span class="text-xs ml-1 text-zinc-500 font-bold uppercase">m</span>`;
            document.getElementById('statMiles').innerText = (eventTotalLaps * lapDist / 1609.34).toFixed(2);

            // Sort runners by lap count (desc) then total time (asc)
            const sortedNames = [...startList].sort((a, b) => {
                if (runners[b].laps.length !== runners[a].laps.length) {
                    return runners[b].laps.length - runners[a].laps.length;
                }
                return runners[a].total - runners[b].total;
            });

            leaderboardDiv.innerHTML = sortedNames.map((name, index) => {
                const r = runners[name];
                const lapCount = r.laps.length;
                const avgLap = lapCount > 0 ? r.total / lapCount : 0;
                const milePace = avgLap > 0 ? (avgLap / 1000 / lapDist) * 1609.34 : 0;
                
                return `
                    <div class="bg-zinc-900/50 border border-zinc-800 p-5 rounded-2xl flex items-center gap-6 transition-all hover:bg-zinc-900 hover:border-red-900/50">
                        <div class="text-3xl font-black text-zinc-800 w-10">${index + 1}</div>
                        <div class="flex-1">
                            <h3 class="text-xl font-bold">${name}</h3>
                            <div class="flex gap-4 mt-1">
                                <div class="text-[10px] uppercase font-bold text-zinc-500">Pace: <span class="text-zinc-300 font-mono">${formatPace(milePace)}</span></div>
                                <div class="text-[10px] uppercase font-bold text-zinc-500">Avg Lap: <span class="text-zinc-300 font-mono">${formatTime(avgLap)}</span></div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-2xl font-mono font-bold text-white">${formatTime(r.total)}</div>
                            <div class="text-[10px] font-black bg-red-600 text-white px-2 py-0.5 rounded inline-block uppercase tracking-tighter">${lapCount} LAPS</div>
                        </div>
                    </div>
                `;
            }).join('');
            } else {
                // Grouped by heat
                const heats = {}; // { heatIdx: { runners: { name: { laps: [], total: 0 } } } }
                let eventTotalLaps = 0;
                
                // Initialize heats that have start times recorded
                Object.keys(heatData).forEach(h => {
                    heats[h] = { runners: {} };
                    startList.forEach(name => heats[h].runners[name] = { laps: [], total: 0 });
                });

                const runnerHeatLastTs = {}; // { name: { heatIdx: lastTs } }

                [...allSplits].sort((a, b) => a.timestamp - b.timestamp).forEach(split => {
                    const hIdx = split.heatIndex || 1;
                    if (!heats[hIdx]) {
                        heats[hIdx] = { runners: {} };
                        startList.forEach(name => heats[hIdx].runners[name] = { laps: [], total: 0 });
                    }
                    const hStart = heatData[hIdx]?.startTime;
                    if (!hStart) return;

                    (split.runnerNames || []).forEach(name => {
                        if (heats[hIdx].runners[name]) {
                            const r = heats[hIdx].runners[name];
                            if (!runnerHeatLastTs[name]) runnerHeatLastTs[name] = {};
                            const prevTs = runnerHeatLastTs[name][hIdx] || hStart;
                            const lapTime = split.timestamp - prevTs;
                            if (lapTime >= 0) {
                                r.laps.push(lapTime);
                                eventTotalLaps++;
                                r.total += lapTime;
                                runnerHeatLastTs[name][hIdx] = split.timestamp;
                            }
                        }
                    });
                });

                document.getElementById('statLaps').innerText = eventTotalLaps;
                document.getElementById('statMeters').innerHTML = `${Math.round(eventTotalLaps * lapDist)}<span class="text-xs ml-1 text-zinc-500 font-bold uppercase">m</span>`;
                document.getElementById('statMiles').innerText = (eventTotalLaps * lapDist / 1609.34).toFixed(2);

                const heatIndices = Object.keys(heats).sort((a, b) => a - b);
                leaderboardDiv.innerHTML = heatIndices.map(hIdx => {
                    const heat = heats[hIdx];
                    const sortedNames = [...startList].filter(name => heat.runners[name].laps.length > 0).sort((a, b) => {
                        if (heat.runners[b].laps.length !== heat.runners[a].laps.length) {
                            return heat.runners[b].laps.length - heat.runners[a].laps.length;
                        }
                        return heat.runners[a].total - heat.runners[b].total;
                    });

                    if (sortedNames.length === 0) return '';

                    return `
                        <div class="mb-10">
                            <div class="flex items-center gap-4 mb-4">
                                <div class="h-[1px] flex-1 bg-zinc-800"></div>
                                <h2 class="text-xl font-black text-red-600 uppercase italic">Heat ${hIdx}</h2>
                                <div class="h-[1px] flex-1 bg-zinc-800"></div>
                            </div>
                            <div class="grid grid-cols-1 gap-4">
                                ${sortedNames.map((name, index) => {
                                    const r = heat.runners[name];
                                    const lapCount = r.laps.length;
                                    const avgLap = lapCount > 0 ? r.total / lapCount : 0;
                                    const milePace = avgLap > 0 ? (avgLap / 1000 / lapDist) * 1609.34 : 0;
                                    return `
                                        <div class="bg-zinc-900/50 border border-zinc-800 p-5 rounded-2xl flex items-center gap-6">
                                            <div class="text-3xl font-black text-zinc-800 w-10">${index + 1}</div>
                                            <div class="flex-1">
                                                <h3 class="text-xl font-bold">${name}</h3>
                                                <div class="flex gap-4 mt-1">
                                                    <div class="text-[10px] uppercase font-bold text-zinc-500">Pace: <span class="text-zinc-300 font-mono">${formatPace(milePace)}</span></div>
                                                    <div class="text-[10px] uppercase font-bold text-zinc-500">Avg Lap: <span class="text-zinc-300 font-mono">${formatTime(avgLap)}</span></div>
                                                </div>
                                            </div>
                                            <div class="text-right">
                                                <div class="text-2xl font-mono font-bold text-white">${formatTime(r.total)}</div>
                                                <div class="text-[10px] font-black bg-red-600 text-white px-2 py-0.5 rounded inline-block uppercase tracking-tighter">${lapCount} LAPS</div>
                                            </div>
                                        </div>
                                    `;
                                }).join('')}
                            </div>
                        </div>
                    `;
                }).join('');
            }
        }

        function formatTime(ms) {
            if (!ms || ms < 0) return "00:00.0";
            const totalSecs = ms / 1000;
            const mins = Math.floor(totalSecs / 60);
            const secs = (totalSecs % 60).toFixed(1);
            return `${mins.toString().padStart(2, '0')}:${secs.padStart(4, '0')}`;
        }

        function formatPace(secsPerMile) {
            if (!secsPerMile || secsPerMile === Infinity) return "--:--";
            const mins = Math.floor(secsPerMile / 60);
            const secs = Math.floor(secsPerMile % 60);
            return `${mins}:${secs.toString().padStart(2, '0')} /mi`;
        }
    </script>
</body>
</html>