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/.DS_Store b/static/.DS_Store new file mode 100644 index 0000000..a09a179 Binary files /dev/null and b/static/.DS_Store differ 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 92fb9c8..10fe41b 100644 --- a/static/games_page.css +++ b/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; -} \ No newline at end of file +} + +.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% +} diff --git a/static/img/base_empty.png b/static/img/base_empty.png new file mode 100644 index 0000000..f989c7c Binary files /dev/null and b/static/img/base_empty.png differ diff --git a/static/img/base_filled.png b/static/img/base_filled.png new file mode 100644 index 0000000..84e24ed Binary files /dev/null and b/static/img/base_filled.png differ diff --git a/static/img/out_in.png b/static/img/out_in.png new file mode 100644 index 0000000..0e6fa3e Binary files /dev/null and b/static/img/out_in.png differ diff --git a/static/img/out_out.png b/static/img/out_out.png new file mode 100644 index 0000000..fd9a96a Binary files /dev/null and b/static/img/out_out.png differ 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 0000000..5008ddf Binary files /dev/null and b/templates/.DS_Store differ