Merge pull request #68 from esSteres/redacted

[Redacted] the [redacted]. Also some bugfixes in [redacted]

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,8 +7,8 @@ body {
 .container {
     font-family: 'Alegreya', serif;
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 300px;
+    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;
     justify-items: center;
@@ -16,6 +16,11 @@ body {
     grid-auto-flow: row;
 }
 
+#title {
+    grid-column: 2;
+    grid-row: 1;
+}
+
 .h1 {
     margin: auto;
     width: 45%;
@@ -29,15 +34,177 @@ body {
     justify-self: stretch;
     text-align: center;
     color: white;
+    flex: 1;
 }
 
 .game {
     font-family: 'Alegreya', serif;
     color: white;
+    align-self: stretch;
+    justify-self: stretch;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    background: #2f3136; /*discord dark theme background-secondary - the same color as the embeds*/
+    border: 4px solid;
+    border-radius: 4px;
+    border-color: rgb(113, 54, 138); /*matteo purple™*/
+    border-top: none;
+    border-right: none;
+    border-bottom: none;
+    flex: 1;
 }
 
 h2 {
     font-family: 'Alegreya', serif;
     color: white;
     text-align: center;
-}
+}
+
+.header {
+    width: 100%;
+    background-color: #4f545c; /*discord's background-tertiary*/
+    border-top-right-radius: 4px;
+    height: max-content;
+    
+}
+
+.inning {
+    float: left;
+    margin: 5px;
+}
+
+.weather {
+    float: right;
+    margin: 5px;
+}
+
+.body {
+    margin: 10px;
+    display: grid;
+    grid-template-columns: 60% 40%;
+    grid-template-areas:
+      "teams info"
+      "players players"
+      "update update";
+    grid-template-rows: 130px;
+    grid-row-gap: 10px;
+    grid-column-gap: 10px;
+    flex: 1;
+}
+
+.teams {
+    grid-area: teams;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    flex: 1;
+}
+
+.team {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.team_name {
+    overflow: hidden;
+}
+
+.info {
+    grid-area: info;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    background: #4f545c;
+    padding-top: 8px;
+    padding-bottom: 4px;
+    margin-left: 15%;
+    margin-right: 10px;
+    border-radius: 4px;
+}
+
+.batting {
+    font-size: 10pt;
+    text-align: left;
+    height: max-content;
+    padding: 5px;
+}
+
+.outs {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 60%;
+}
+
+.outs_title {
+    font-weight: bolder;
+}
+
+.outs_count {
+    display: flex;
+}
+
+.out {
+    height: 20px;
+}
+
+.team_name, .score {
+    font-size: 25px
+}
+
+.score {
+    background: #4f545c; /*discord's background-accent*/
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+    border-radius: 20px;
+    margin-left: 10px;
+}
+
+.players {
+    grid-area: players;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    height: max-content;
+    width: 100%;
+}
+
+.player {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    max-width: 250px;
+}
+
+.player_name {
+    overflow: hidden;
+    margin-left: 15px;
+}
+
+.update {
+    grid-area: update;
+}
+
+.update_emoji, .update_text {
+    display: inline
+}
+
+.field {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+}
+
+.base {
+    height: 60px;
+}
+
+.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)
-                    grid.children[slotnum].textContent = json[timestamp].update_text;
+                    console.log(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.textContent = gamestate.update_text;
+        thisBox.timestamp = timestamp;
+        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 = "";
     };
 });