Scoreboard App - Copy this React, Tailwind Component to your project
"<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>DORZ System</title> <link rel="stylesheet" href="style.css"> </head> <body class="BG"> <div class="container"> <h1>DORZ</h1> <! Summary Section > <div id="summary container"> <! Blue Summary Section > <div class="summary section"> <table id="blue box table"> <tbody> <tr> <td class="color box blue"></td> </tr> </tbody> </table> <table id="blue points table"> <tbody> <tr> <td id="blue points">0</td> </tr> </tbody> </table> </div> <! Red Summary Section > <div class="summary section"> <table id="red points table"> <tbody> <tr> <td id="red points">0</td> </tr> </tbody> </table> <table id="red box table"> <tbody> <tr> <td class="color box red"></td> </tr> </tbody> </table> </div> </div> <! Display Results Table > <div id="results table container"> <table id="results table"> <thead> <tr id="header row"> <! Display judge names here > </tr> </thead> <tbody id="results tbody"> <! Display scores for each round here > </tbody> </table> </div> <! Reset Button > <button id="resetButton">Reset Scores</button> </div> <div class="footer"> Made by: Trinh Phuong Huy aka Dom<br> Contact: huytrinh870@gmail.com </div> <script> const images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // Array of image paths let currentImageIndex = 0; function changeBackgroundImage() { // Cycle through the images array currentImageIndex = (currentImageIndex + 1) % images.length; document.body.style.backgroundImage = `url('${images[currentImageIndex]}')`; } // Event listener for window resize window.addEventListener('resize', changeBackgroundImage); function fetchAndUpdateScores() { fetch('/display scores?format=json') .then(response => response.json()) .then(data => { const { judges, rounds } = data; const headerRow = document.getElementById('header row'); const tbody = document.getElementById('results tbody'); let redTotalPoints = 0; let blueTotalPoints = 0; // Clear existing table content headerRow.innerHTML = ''; tbody.innerHTML = ''; // Create table header judges.forEach(judge => { const th = document.createElement('th'); th.textContent = judge; headerRow.appendChild(th); }); // Create table rows for each round rounds.forEach((roundData, index) => { const tr = document.createElement('tr'); let redCount = 0; let blueCount = 0; judges.forEach(judge => { const td = document.createElement('td'); const color = roundData[judge] || ''; td.className = `result color box ${color}`; // Use `result color box` instead of `color box` tr.appendChild(td); // Count votes if (color === 'red') redCount++; if (color === 'blue') blueCount++; }); // Update total points based on majority color in the round if (redCount > blueCount) { redTotalPoints++; } else if (blueCount > redCount) { blueTotalPoints++; } tbody.appendChild(tr); }); // Update summary section document.getElementById('red points').textContent = redTotalPoints; document.getElementById('blue points').textContent = blueTotalPoints; }) .catch(error => { console.error('Error fetching scores:', error); }); } // Fetch and update scores every 1 second setInterval(fetchAndUpdateScores, 1000); // Initial fetch fetchAndUpdateScores(); // Reset scores event document.getElementById('resetButton').addEventListener('click', function () { fetch('/reset scores', { method: 'POST', }).then(response => { if (response.ok) { alert('Scores reset successfully!'); } else { alert('Failed to reset scores.'); } }); }); </script> </body> </html>"
