refactor: rewrite UI with clean layout, fetch API, and proper card structure

app/static/script.js

@@ -1,246 +1,152 @@
-// Function to fetch scoreboard data using AJAX
-function fetchScoreboardData() {
-    var xhr = new XMLHttpRequest();
-    xhr.open("GET", "/scoreboard", true);
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState === XMLHttpRequest.DONE) {
-            if (xhr.status === 200) {
-                updateScoreboard(JSON.parse(xhr.responseText));
-            } else {
-                console.error("Failed to fetch scoreboard data.");
-            }
-        }
-    };
-    xhr.send();
+async function fetchScoreboardData() {
+    try {
+        const res = await fetch('/scoreboard');
+        if (!res.ok) throw new Error(res.status);
+        updateScoreboard(await res.json());
+    } catch (e) {
+        console.error('Failed to fetch scoreboard data:', e);
+    }
 }
 
-// Function to update scoreboard with fetched data
 function updateScoreboard(data) {
-    var liveGamesSection = document.getElementById('live-games-section');
-    var preGamesSection = document.getElementById('pre-games-section');
-    var finalGamesSection = document.getElementById('final-games-section');
+    const sections = [
+        { sectionId: 'live-section',  gridId: 'live-games-section',  games: data.live_games,  render: renderLiveGame  },
+        { sectionId: 'pre-section',   gridId: 'pre-games-section',   games: data.pre_games,   render: renderPreGame   },
+        { sectionId: 'final-section', gridId: 'final-games-section', games: data.final_games, render: renderFinalGame },
+    ];
 
-    if (liveGamesSection) {
-        var liveGamesExist = data && data.live_games && data.live_games.length > 0;
-        if (liveGamesExist) {
-            if (!document.getElementById('live-games')) {
-                var targetElement = document.getElementById('live-games-section');
-                var newElement = document.createElement('h1');
-                newElement.setAttribute('id', 'live-games');
-                newElement.innerText = 'Live Games';
-                targetElement.parentNode.insertBefore(newElement, targetElement);
-            }
-            liveGamesSection.innerHTML = generateGameBoxes(data.live_games, 'LIVE');
-        } else {
-            var liveGamesElement = document.getElementById('live-games');
-            if (liveGamesElement) {
-                liveGamesElement.remove();
-            }
-            liveGamesSection.innerHTML = '';
-        }
+    for (const { sectionId, gridId, games, render } of sections) {
+        const section = document.getElementById(sectionId);
+        const grid    = document.getElementById(gridId);
+        const hasGames = games && games.length > 0;
+        section.classList.toggle('hidden', !hasGames);
+        grid.innerHTML = hasGames ? games.map(render).join('') : '';
     }
 
-    if (preGamesSection) {
-        var preGamesExist = data && data.pre_games && data.pre_games.length > 0;
-        if (preGamesExist) {
-            if (!document.getElementById('on-later')) {
-                var targetElement = document.getElementById('pre-games-section');
-                var newElement = document.createElement('h1');
-                newElement.setAttribute('id', 'on-later');
-                newElement.innerText = 'Scheduled Games';
-                targetElement.parentNode.insertBefore(newElement, targetElement);
-            }
-            preGamesSection.innerHTML = generateGameBoxes(data.pre_games, 'PRE');
-        } else {
-            var onLaterElement = document.getElementById('on-later');
-            if (onLaterElement) {
-                onLaterElement.remove();
-            }
-            preGamesSection.innerHTML = '';
-        }
-    }
-
-    if (finalGamesSection) {
-        var finalGamesExist = data && data.final_games && data.final_games.length > 0;
-    
-        // Check if final games exist
-        if (finalGamesExist) {
-            // Create or update "Game Over" heading
-            if (!document.getElementById('game-over')) {
-                var targetElement = document.getElementById('final-games-section');
-                var newElement = document.createElement('h1');
-                newElement.setAttribute('id', 'game-over');
-                newElement.innerText = 'Game Over';
-                targetElement.parentNode.insertBefore(newElement, targetElement);
-            }
-    
-            // Update final games section with generated game boxes
-            finalGamesSection.innerHTML = generateGameBoxes(data.final_games, 'FINAL');
-        } else {
-            // Remove "Game Over" heading if it exists and clear final games section
-            var gameOverElement = document.getElementById('game-over');
-            if (gameOverElement) {
-                gameOverElement.remove();
-            }
-            finalGamesSection.innerHTML = '';
-        }
-    }
-
-    updateGauge()
+    updateGauges();
 }
 
-function updateGauge() {
-    document.querySelectorAll('.gauge').forEach(function(gauge) {
-        // Get the score value from the data-score attribute
-        var score = parseInt(gauge.getAttribute('data-score'));
+// ── Renderers ────────────────────────────────────────
 
-        // Clamp the score value between 0 and 700
-        score = Math.min(700, Math.max(0, score));
+function renderLiveGame(game) {
+    const intermission = game['Intermission'];
+    const period       = game['Period'];
+    const time         = game['Time Remaining'];
+    const running      = game['Time Running'];
 
-        // Calculate the gauge width as a percentage
-        var gaugeWidth = (score / 700) * 100;
+    const periodLabel = intermission
+        ? `<span class="badge">${intermissionLabel(period)}</span>`
+        : `<span class="badge badge-live">${ordinalPeriod(period)}</span>`;
 
-        // Set the width of the gauge
-        gauge.style.width = gaugeWidth + '%';
+    const dot = running ? `<span class="live-dot"></span>` : '';
 
-        if (score <=300) {
-            gauge.style.backgroundColor = '#4A90E2'
-        } else if (score <= 550) {
-            gauge.style.backgroundColor = '#FF4500'
-        } else {
-            gauge.style.backgroundColor = '#FF0033'
-        }
+    const hype = !intermission ? `
+        <div class="hype-meter">
+            <span class="hype-label">Hype Meter</span>
+            <div class="gauge-track">
+                <div class="gauge" data-score="${game['Priority']}"></div>
+            </div>
+        </div>` : '';
+
+    return `
+        <div class="game-box">
+            <div class="card-header">
+                <div class="badges">
+                    ${periodLabel}
+                    <span class="badge">${time}</span>
+                </div>
+                ${dot}
+            </div>
+            ${teamRow(game, 'Away', 'live')}
+            ${teamRow(game, 'Home', 'live')}
+            ${hype}
+        </div>`;
+}
+
+function renderPreGame(game) {
+    return `
+        <div class="game-box">
+            <div class="card-header">
+                <div class="badges">
+                    <span class="badge">${game['Start Time']}</span>
+                </div>
+            </div>
+            ${teamRow(game, 'Away', 'pre')}
+            ${teamRow(game, 'Home', 'pre')}
+        </div>`;
+}
+
+function renderFinalGame(game) {
+    const labels = { REG: 'Final', OT: 'Final/OT', SO: 'Final/SO' };
+    const label  = labels[game['Last Period Type']] ?? 'Final';
+    return `
+        <div class="game-box">
+            <div class="card-header">
+                <div class="badges">
+                    <span class="badge badge-muted">${label}</span>
+                </div>
+            </div>
+            ${teamRow(game, 'Away', 'final')}
+            ${teamRow(game, 'Home', 'final')}
+        </div>`;
+}
+
+// ── Team Row ─────────────────────────────────────────
+
+function teamRow(game, side, state) {
+    const name   = game[`${side} Team`];
+    const logo   = game[`${side} Logo`];
+    const score  = game[`${side} Score`];
+    const sog    = game[`${side} Shots`];
+    const pp     = game[`${side} Power Play`];
+    const record = game[`${side} Record`];
+
+    const sogHtml = (state !== 'pre' && sog !== undefined)
+        ? `<span class="team-sog">${sog} SOG</span>` : '';
+    const ppHtml  = pp ? `<span class="team-pp">${pp}</span>` : '';
+
+    const right = state === 'pre'
+        ? `<span class="team-record">${record}</span>`
+        : `<span class="team-score">${score}</span>`;
+
+    return `
+        <div class="team-row">
+            <img src="${logo}" alt="${name} logo" class="team-logo">
+            <div class="team-meta">
+                <span class="team-name">${name}</span>
+                ${sogHtml}${ppHtml}
+            </div>
+            ${right}
+        </div>`;
+}
+
+// ── Gauge ────────────────────────────────────────────
+
+function updateGauges() {
+    document.querySelectorAll('.gauge').forEach(el => {
+        const score = Math.min(700, Math.max(0, parseInt(el.dataset.score, 10)));
+        el.style.width           = `${(score / 700) * 100}%`;
+        el.style.backgroundColor = score <= 300 ? '#4a90e2'
+                                 : score <= 550 ? '#f97316'
+                                 :                '#ef4444';
     });
 }
 
-// Function to generate HTML for game boxes
-function generateGameBoxes(games, state) {
-    var html = '';
-    games.forEach(function(game) {
-        if (game['Game State'] === state) {
-            html += '<div class="game-box">';
-            if (state === 'LIVE') {
-                if (game['Time Running']) {
-                    html += '<div class="live-dot"></div>'; // Display the red dot if the game is live
-                }
-                html += '<div class="team-info">';
-                html += '<img src="' + game['Away Logo'] + '" alt="' + game['Away Team'] + ' Logo" class="team-logo">';
-                html += '<div class="team-info-column">';
-                html += '<span class="team-name">' + game['Away Team'] + '</span>';
-                html += '<span class="team-sog">SOG: ' + game['Away Shots'] + '</span>';
-                html += '<span class="team-power-play">' + game['Away Power Play'] + '</span>';
-                html += '</div>';
-                html += '<span class="team-score">' + game['Away Score'] + '</span>';
-                html += '</div>';
-                html += '<div class="team-info">';
-                html += '<img src="' + game['Home Logo'] + '" alt="' + game['Home Team'] + ' Logo" class="team-logo">';
-                html += '<div class="team-info-column">';
-                html += '<span class="team-name">' + game['Home Team'] + '</span>';
-                html += '<span class="team-sog">SOG: ' + game['Home Shots'] + '</span>';
-                html += '<span class="team-power-play">' + game['Home Power Play'] + '</span>';
-                html += '</div>';
-                html += '<span class="team-score">' + game['Home Score'] + '</span>';
-                html += '</div>';
-                html += '<div class="game-info">';
-                if (game['Intermission']) {
-                    html += '<div class="live-state-intermission">'
-                    if (game['Period'] == 1 ) {
-                        html += '1st Int';
-                    }
-                    if (game['Period'] == 2 ) {
-                        html += '2nd Int';
-                    }
-                    if (game['Period'] == 3 ) {
-                        html += '3rd Int';
-                    }
-                    html += '</div>';
-                    html += '<div class="live-time-intermission">' + game['Time Remaining'] + '</div>';
-                } else {
-                    html += '<div class="live-state">';
-                    if (game['Period'] == 1 ) {
-                        html += '1st';
-                    }
-                    else if (game['Period'] == 2 ) {
-                        html += '2nd';
-                    }
-                    else if (game['Period'] == 3 ) {
-                        html += '3rd';
-                    }
-                    else if (game['Period'] == 4 ) {
-                        html += 'OT';
-                    }
-                    else {
-                        html += 'SO';
-                    }
-                    html += '</div>';
-                    html += '<div class="live-time">' + game['Time Remaining'] + '</div>';
-                }
-                html += '</div>';
-                if (!game['Intermission']) {
-                    html += '<div class="hype-meter-label">';
-                    html += '<strong>Hype Meter</strong>';
-                    html += '</div>';
+// ── Helpers ──────────────────────────────────────────
 
-                    html += '<div class="game-score-gauge">';
-                    html += '<div class="gauge" data-score="' + game['Priority'] + '"></div>';
-                    html += '</div>';
-                    html += '</div>';
-                }
-
-
-                html += '</div>';
-            } else if (state === 'PRE') {
-                html += '<div class="pre-state">' + game['Start Time'] + '</div>';
-                html += '<div class="team-info">';
-                html += '<img src="' + game['Away Logo'] + '" alt="' + game['Away Team'] + ' Logo" class="team-logo">';
-                html += '<span class="team-name">' + game['Away Team'] + '</span>';
-                html += '<span class="team-record">' + game['Away Record'] + '</span>';
-                html += '</div>';
-                html += '<div class="team-info">';
-                html += '<img src="' + game['Home Logo'] + '" alt="' + game['Home Team'] + ' Logo" class="team-logo">';
-                html += '<span class="team-name">' + game['Home Team'] + '</span>';
-                html += '<span class="team-record">' + game['Home Record'] + '</span>';
-                html += '</div>';
-            } else if (state === 'FINAL') {
-                html += '<div class="final-state">';
-                if (game['Last Period Type'] === 'REG') {
-                    html += 'FINAL';
-                } else if (game['Last Period Type'] === 'OT') {
-                    html += 'FINAL/OT';
-                } else {
-                    html += 'FINAL/SO';
-                }
-                html += '</div>';
-                html += '<div class="team-info">';
-                html += '<img src="' + game['Away Logo'] + '" alt="' + game['Away Team'] + ' Logo" class="team-logo">';
-                html += '<div class="team-info-column">';
-                html += '<span class="team-name">' + game['Away Team'] + '</span>';
-                html += '<span class="team-sog">SOG: ' + game['Away Shots'] + '</span>';
-                html += '</div>';
-                html += '<span class="team-score">' + game['Away Score'] + '</span>';
-                html += '</div>';
-                html += '<div class="team-info">';
-                html += '<img src="' + game['Home Logo'] + '" alt="' + game['Home Team'] + ' Logo" class="team-logo">';
-                html += '<div class="team-info-column">';
-                html += '<span class="team-name">' + game['Home Team'] + '</span>';
-                html += '<span class="team-sog">SOG: ' + game['Home Shots'] + '</span>';
-                html += '</div>';
-                html += '<span class="team-score">' + game['Home Score'] + '</span>';
-                html += '</div>';
-            }
-            html += '</div>';
-        }
-    });
-    return html;
+function ordinalPeriod(period) {
+    return ['1st', '2nd', '3rd', 'OT'][period - 1] ?? 'SO';
 }
 
-// Function to reload the scoreboard every 20 seconds
+function intermissionLabel(period) {
+    return ['1st Int', '2nd Int', '3rd Int'][period - 1] ?? 'Int';
+}
+
+// ── Init ─────────────────────────────────────────────
+
 function autoRefresh() {
     fetchScoreboardData();
-    setTimeout(autoRefresh, 5000); // 20 seconds
+    setTimeout(autoRefresh, 5000);
 }
 
-// Call the autoRefresh function when the page loads
-window.onload = function() {
-    autoRefresh();
-};
+window.addEventListener('load', autoRefresh);