feature: adds hype meter to replace game score (#33)

app/static/script.js

@@ -85,6 +85,32 @@ function updateScoreboard(data) {
             finalGamesSection.innerHTML = '';
         }
     }
+
+    updateGauge()
+}
+
+function updateGauge() {
+    document.querySelectorAll('.gauge').forEach(function(gauge) {
+        // Get the score value from the data-score attribute
+        var score = parseInt(gauge.getAttribute('data-score'));
+
+        // Clamp the score value between 0 and 700
+        score = Math.min(700, Math.max(0, score));
+
+        // Calculate the gauge width as a percentage
+        var gaugeWidth = (score / 700) * 100;
+
+        // Set the width of the gauge
+        gauge.style.width = gaugeWidth + '%';
+
+        if (score <=350) {
+            gauge.style.backgroundColor = '#4A90E2'
+        } else if (score <= 560) {
+            gauge.style.backgroundColor = '#FF4500'
+        } else {
+            gauge.style.backgroundColor = '#FF0033'
+        }
+    });
 }
 
 // Function to generate HTML for game boxes
@@ -147,9 +173,18 @@ function generateGameBoxes(games, state) {
                     html += '<div class="live-time">' + game['Time Remaining'] + '</div>';
                 }
                 html += '</div>';
-                html += '<div class="game-info">';
-                html += '<strong>Game Score: </strong>' + game['Priority'];
+                if (!game['Intermission']) {
+                    html += '<div class="hype-meter-label">';
+                    html += '<strong>Hype Meter</strong>';
                     html += '</div>';
+
+                    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>';

app/static/styles.css

@@ -99,8 +99,12 @@ h1 {
     font-size: 80%;
 }
 
-.game-info strong {
-    margin-right: 5px;
+.hype-meter-label {
+    margin-top: 3%;
+    color: #aaa;
+    text-align: center;
+    font-size: 80%;
+    margin-bottom: 3%;
 }
 
 .live-dot {
@@ -166,6 +170,9 @@ h1 {
     z-index: 1; 
     width: 7.2%;
     height: 7.5%;
+    display: flex; 
+    justify-content: space-evenly;
+    align-items: center;
 }
 
 .live-time {
@@ -241,6 +248,20 @@ h1 {
     justify-content: flex-start;
 }
 
+/* Add styles for the game score gauge */
+.game-score-gauge {
+    height: 1%;
+    background-color: #ccc;
+    border-radius: 5px;
+    overflow: hidden; 
+}
+
+.gauge {
+    height: 10px; /* Adjust height as needed */
+    /*#8A2BE2*/
+    /*#6699CC*/
+}
+
 /* Add media query for smaller screens */
 @media only screen and (max-width: 768px) {
     .scoreboard {