frontend complete! for now, at least

main_controller.py

@@ -68,7 +68,7 @@ def update_loop():
                         for attempt in this_game.last_update[0]["steals"]:
                             updatestring += attempt + "\n"
 
-                        state["emoji"] = "💎" 
+                        state["update_emoji"] = "💎" 
                         state["update_text"] = updatestring
 
                     else:
@@ -85,7 +85,7 @@ def update_loop():
                         if this_game.last_update[1] > 0:
                                 updatestring += f"{this_game.last_update[1]} runs scored!"
 
-                        state["emoji"] = "🏏"
+                        state["update_emoji"] = "🏏"
                         state["update_text"] = updatestring
 
             state["bases"] = this_game.named_bases()

static/game.html

@@ -0,0 +1,49 @@
+<div class="header">
+    <div class="inning"></div>
+    <div class="weather"></div>
+</div>
+<div class="body">
+    <div class="teams">
+        <div class="team">
+            <div class="team_name away_name"></div>
+            <div class="score away_score"></div>
+        </div>
+        <div class="team">
+            <div class="team_name home_name"></div>
+            <div class="score home_score"></div>
+        </div>
+    </div>
+    <div class="info">
+        <div class="field">
+            <img class="base base_2" src=""/>
+            <div style="display: flex;">
+                <img class="base base_3" src=""/>
+                <img class="base base_1" src=""/>
+            </div>
+        </div>
+        <div class="outs">
+            <div class="outs_title">OUTS</div>
+            <div class="outs_count">
+                <img class="out" src=""/>
+                <img class="out" src=""/>
+            </div>
+        </div>
+    </div>
+    <div class="players">
+        <div class="player pitcher">
+            <div class="player_type">Pitcher:</div>
+            <div class="player_name pitcher_name"></div>
+        </div>
+        <div class="player batter">
+            <div class="player_type">Batter:</div>
+            <div class="player_name batter_name"></div>
+        </div>
+    </div>
+    <div class="update">
+        <div class="update_emoji"></div>
+        <div class="update_text"></div>
+    </div>
+</div>
+<div class="footer">
+    <div class="batting"></div>
+</div>

static/games_page.css

@@ -7,7 +7,7 @@ body {
 .container {
     font-family: 'Alegreya', serif;
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+    grid-template-columns: repeat(3, minmax(500px, 1fr));
     grid-template-rows: 100px 330px;
     grid-gap: 50px 30px; /*space between rows, then columns*/
     align-items: center;
@@ -84,7 +84,7 @@ h2 {
     display: grid;
     grid-template-columns: 60% 40%;
     grid-template-areas:
-      "scores info"
+      "teams info"
       "players players"
       "update update";
     grid-template-rows: 130px;
@@ -93,7 +93,8 @@ h2 {
     flex: 1;
 }
 
-.scores {
+.teams {
+    grid-area: teams;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
@@ -111,6 +112,7 @@ h2 {
 }
 
 .info {
+    grid-area: info;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -124,7 +126,6 @@ h2 {
 }
 
 .batting {
-    grid-area: batting;
     font-size: 10pt;
     text-align: left;
     height: max-content;
@@ -164,11 +165,11 @@ h2 {
 }
 
 .players {
+    grid-area: players;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    grid-area: players;
     height: max-content;
     width: 100%;
 }
@@ -177,7 +178,7 @@ h2 {
     display: flex;
     justify-content: space-between;
     width: 100%;
-    max-width: 330px;
+    max-width: 250px;
 }
 
 .player_name {
@@ -200,10 +201,10 @@ h2 {
     flex-direction: column;
 }
 
-.base1, .base2, .base3 {
+.base {
     height: 60px;
 }
 
-.base2 {
+.base_2 {
     margin-bottom: -25%
 }

static/loader.js

@@ -2,6 +2,7 @@ $(document).ready(function (){
     var socket = io.connect();
     var gameslist = [];
     var maxslot = 3;
+    var totalslots = 15;
     var grid = document.getElementById("container");
     
 
@@ -14,7 +15,7 @@ $(document).ready(function (){
             if (!gameslist.includes(timestamp)) { //adds game to list if not there already
                 gameslist.push(timestamp)
                 var gridBoxes = grid.children;
-                for (var slotnum = 3; slotnum <= maxslot; slotnum++) {
+                for (var slotnum = 3; slotnum <= Math.min(maxslot, totalslots-1); slotnum++) {
                     if (gridBoxes[slotnum].className == "emptyslot") {
                         insertGame(slotnum, json[timestamp], timestamp);
                         maxslot += 1;
@@ -23,10 +24,10 @@ $(document).ready(function (){
                 };
             };
 
-            for (var slotnum = 3; slotnum <= maxslot; slotnum++) {
+            for (var slotnum = 3; slotnum <= Math.min(maxslot, totalslots-1); slotnum++) {
                 if (grid.children[slotnum].timestamp == timestamp) {
-                    console.log(json[timestamp].update_text)
+                    console.log(json[timestamp].update_text);
-                    grid.children[slotnum].textContent = json[timestamp].update_text;
+                    updateGame(grid.children[slotnum], json[timestamp]);
                 };
             };
         };
@@ -35,7 +36,46 @@ $(document).ready(function (){
     const insertGame = (gridboxnum, gamestate, timestamp) => {
         var thisBox = grid.children[gridboxnum];
         thisBox.className = "game";
-        thisBox.timestamp = timestamp
+        thisBox.timestamp = timestamp;
-        thisBox.textContent = gamestate.update_text;
+        thisBox.id = "loadTarget";
+        $('#loadTarget').load("static/game.html");
+        thisBox.id = "";
+        updateGame(thisBox, gamestate);
+    };
+
+    const BASE_EMPTY = "/static/img/base_empty.png"
+    const BASE_FILLED = "/static/img/base_filled.png"
+    const OUT_OUT = "/static/img/out_out.png"
+    const OUT_IN = "/static/img/out_in.png"
+
+    const updateGame = (gamediv, gamestate) => {
+        gamediv.id = "updateTarget";
+        $('#updateTarget .inning').html("Inning: " + (gamestate.top_of_inning ? "🔼" : "🔽") + " " + gamestate.display_inning + "/" + gamestate.max_innings);
+        $('#updateTarget .weather').html(gamestate.weather_emoji + " " + gamestate.weather_text);
+
+        $('#updateTarget .away_name').html(gamestate.away_name);
+        $('#updateTarget .home_name').html(gamestate.home_name);
+        $('#updateTarget .away_score').html("" + gamestate.away_score);
+        $('#updateTarget .home_score').html("" + gamestate.home_score);
+
+        for (var i = 1; i <= 3; i++) {
+
+            $('#updateTarget .base_' + i).attr('src', (gamestate.bases[i] == null ? BASE_EMPTY : BASE_FILLED));
+        }
+
+        $('#updateTarget .outs_count').children().each(function(index) {
+            $(this).attr('src', index < gamestate.outs ? OUT_OUT : OUT_IN);
+        });
+
+        $('#updateTarget .pitcher_name').html(gamestate.pitcher);
+        $('#updateTarget .batter_name').html(gamestate.batter);
+
+        console.log(gamestate.update_emoji);
+        $('#updateTarget .update_emoji').html(gamestate.update_emoji);
+        $('#updateTarget .update_text').html(gamestate.update_text);
+
+        $('#updateTarget .batting').html((gamestate.top_of_inning ? gamestate.away_name : gamestate.home_name) + " batting.");
+
+        gamediv.id = "";
     };
 });

templates/game.html

@@ -1,55 +0,0 @@
-<div class="game">
-    <div class="header">
-        <div class="inning">
-            Inning: 🔼 1/9
-        </div>
-        <div class="weather">
-            🌟 Supernova
-        </div>
-    </div>
-    <div class="body">
-        <div class="scores">
-            <div class="team">
-                <div class="team_name">Halifax Fire Sharks</div>
-                <div class="score">0</div>
-            </div>
-            <div class="team">
-                <div class="team_name">Dead Batteries</div>
-                <div class="score">1</div>
-            </div>
-        </div>
-        <div class="info">
-            <div class="field">
-                <img class="base2" src="/static/img/base_filled.png"/>
-                <div style="display: flex;">
-                    <img class="base3" src="/static/img/base_empty.png"/>
-                    <img class="base1" src="/static/img/base_empty.png"/>
-                </div>
-            </div>
-            <div class="outs">
-                <div class="outs_title">OUTS</div>
-                <div class="outs_count">
-                    <img class="out" src="/static/img/out_out.png"/>
-                    <img class="out" src="/static/img/out_in.png"/>
-                </div>
-            </div>
-        </div>
-        <div class="players">
-            <div class="player">
-                <div class="player_type">Pitcher:</div>
-                <div class="player_name">Hot Fish Summer</div>
-            </div>
-            <div class="player">
-                <div class="player_type">Batter:</div>
-                <div class="player_name">Shape Batteries</div>
-            </div>
-        </div>
-        <div class="update">
-            <div class="update_emoji">🏏</div>
-            <div class="update_text">Shape Batteries grounds out to Honk For Santa.</div>
-        </div>
-    </div>
-    <div class="footer">
-        <div class="batting">Dead Batteries batting</div>
-    </div>
-</div>