From b236445d8b1fc169ef879f439badc764527ee13e Mon Sep 17 00:00:00 2001 From: Elijah Steres Date: Wed, 30 Dec 2020 01:31:19 -0500 Subject: [PATCH] frontend complete! for now, at least --- main_controller.py | 4 +-- static/game.html | 49 +++++++++++++++++++++++++++++++++++++ static/games_page.css | 17 +++++++------ static/loader.js | 52 ++++++++++++++++++++++++++++++++++----- templates/.DS_Store | Bin 0 -> 6148 bytes templates/game.html | 55 ------------------------------------------ 6 files changed, 106 insertions(+), 71 deletions(-) create mode 100644 static/game.html create mode 100644 templates/.DS_Store delete mode 100644 templates/game.html diff --git a/main_controller.py b/main_controller.py index 0c36ce0..ddcd3b6 100644 --- a/main_controller.py +++ b/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() diff --git a/static/game.html b/static/game.html new file mode 100644 index 0000000..1e1dc91 --- /dev/null +++ b/static/game.html @@ -0,0 +1,49 @@ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +
+
+
+
OUTS
+
+ + +
+
+
+
+
+
Pitcher:
+
+
+
+
Batter:
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/static/games_page.css b/static/games_page.css index b5a2453..10fe41b 100644 --- a/static/games_page.css +++ b/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% } diff --git a/static/loader.js b/static/loader.js index 550dfae..bb7190f 100644 --- a/static/loader.js +++ b/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 = ""; }; }); \ No newline at end of file diff --git a/templates/.DS_Store b/templates/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 GIT binary patch literal 6148 zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0 -
-
- Inning: 🔼 1/9 -
-
- 🌟 Supernova -
-
-
-
-
-
Halifax Fire Sharks
-
0
-
-
-
Dead Batteries
-
1
-
-
-
-
- -
- - -
-
-
-
OUTS
-
- - -
-
-
-
-
-
Pitcher:
-
Hot Fish Summer
-
-
-
Batter:
-
Shape Batteries
-
-
-
-
🏏
-
Shape Batteries grounds out to Honk For Santa.
-
-
-
-
Dead Batteries batting
-
- \ No newline at end of file