From 9a70ec02c12f56bee17eeb06e08e150c8d36a660 Mon Sep 17 00:00:00 2001 From: Elijah Steres Date: Sat, 2 Jan 2021 06:21:53 -0500 Subject: [PATCH] add shareeable game links --- main_controller.py | 12 +- static/css/common.css | 64 +++++++++ static/{games_page.css => css/game.css} | 171 +----------------------- static/css/game_page.css | 9 ++ static/css/games_page.css | 91 +++++++++++++ static/{ => css}/prism.png | Bin static/js/game_loader.js | 23 ++++ static/{loader.js => js/grid_loader.js} | 2 +- templates/base.html | 30 +++++ templates/game.html | 66 ++------- templates/game_box.html | 56 ++++++++ templates/index.html | 42 ++---- 12 files changed, 312 insertions(+), 254 deletions(-) create mode 100644 static/css/common.css rename static/{games_page.css => css/game.css} (57%) create mode 100644 static/css/game_page.css create mode 100644 static/css/games_page.css rename static/{ => css}/prism.png (100%) create mode 100644 static/js/game_loader.js rename static/{loader.js => js/grid_loader.js} (99%) create mode 100644 templates/base.html create mode 100644 templates/game_box.html diff --git a/main_controller.py b/main_controller.py index 01d35a5..8875d38 100644 --- a/main_controller.py +++ b/main_controller.py @@ -12,9 +12,14 @@ def index(): return render_template("index.html") @app.route('/league') -def league(): +def league_page(): return render_template("index.html", league=request.args['name']) +@app.route('/game') +def game_page(): + return render_template("game.html") + + thread2 = threading.Thread(target=socketio.run,args=(app,'0.0.0.0')) thread2.start() @@ -125,14 +130,15 @@ def update_loop(): state["update_pause"] -= 1 global data_to_send - template = jinja2.Environment(loader=jinja2.FileSystemLoader('templates')).get_template('game.html') data_to_send = [] + template = jinja2.Environment(loader=jinja2.FileSystemLoader('templates')).get_template('game_box.html') + for timestamp in game_states: data_to_send.append({ 'timestamp' : timestamp, 'league' : game_states[timestamp]['leagueoruser'] if game_states[timestamp]['is_league'] else '', 'state' : game_states[timestamp], - 'html' : template.render(state=game_states[timestamp]) + 'html' : template.render(state=game_states[timestamp], timestamp=timestamp) }) socketio.emit("states_update", data_to_send) diff --git a/static/css/common.css b/static/css/common.css new file mode 100644 index 0000000..056a08b --- /dev/null +++ b/static/css/common.css @@ -0,0 +1,64 @@ +@import url('https://fonts.googleapis.com/css2?family=Alegreya&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Goldman:wght@700&display=swap'); +body { + background-image: url("prism.png"); +} +/* Background pattern from Toptal Subtle Patterns */ + +div, button, h1, h2, a { + font-family: 'Alegreya', serif; + color: white; +} + +h2 { + text-align: center; +} + +.link{ + position: relative; + top: 10px; +} + +.h1 { + margin: auto; + width: 45%; + color: white; +} + +.page_header { + color: white; + font-family: 'Goldman', cursive; +} + +#header { + width: 100%; + height: max-content; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#header > .page_header { + margin: auto +} + +#link_div { + text-align: right; + position: absolute; + top: 0px; + right: 30px; +} + +#link_div > a { + background-color: transparent; + text-decoration: underline; +} + +#link_div > a:link, #link_div > a:visited { + color: lightblue; +} + +#link_div > a:hover { + color: white; +} \ No newline at end of file diff --git a/static/games_page.css b/static/css/game.css similarity index 57% rename from static/games_page.css rename to static/css/game.css index 68c032a..2a3d921 100644 --- a/static/games_page.css +++ b/static/css/game.css @@ -1,9 +1,3 @@ -@import url('https://fonts.googleapis.com/css2?family=Alegreya&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Goldman:wght@700&display=swap'); -body { - background-image: url("prism.png"); -} -/* Background pattern from Toptal Subtle Patterns */ :root { --background-main: #2f3136; /*discord dark theme background-secondary - the same color as the embeds*/ @@ -12,129 +6,7 @@ body { --highlight: rgb(113, 54, 138); /*matteo purple™*/ } -div, button { - font-family: 'Alegreya', serif; - color: white; -} - -#link_div { - text-align: right; - position: absolute; - top: 0px; - right: 30px; -} - -#link_div > a { - background-color: transparent; - text-decoration: underline; -} - -#link_div > a:link, #link_div > a:visited { - color: lightblue; -} - -#link_div > a:hover { - color: white; -} - -.container { - display: grid; - grid-template-columns: repeat(3, minmax(500px, 1fr)); - grid-gap: 50px 30px; /*space between rows, then columns*/ - align-items: center; - justify-items: center; - grid-auto-flow: row; -} - -.container > div { - min-height: 350px; -} - -#header { - width: 100%; - height: 150px; - margin-bottom: 20px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -#header > .page_header { - margin: auto -} - -#filters { - display: flex; - justify-content: space-around; - width: max-content; - margin-top: 10px; -} - -#filters > * { - padding: 4px 8px; - margin: 0px 8px; - font-size: 16pt; - background: rgba(0,0,0,0); -} - -#filters > .filter { - border-radius: 8px; - min-width: 100px; - text-align: center; - border: none; - color: white; - text-decoration: none; -} - -#selected_filter { - background: rgb(113, 54, 138); -} - -#footer { - display: flex; - flex-direction: column; - justify-content: center; - width: 100%; - height: 75px; -} - -#footer > div { - text-align: center; - font-size: 20px; - position: relative; - top: 5px; -} - -.link{ - position: relative; - top: 10px; -} - -.h1 { - margin: auto; - width: 45%; - color: white; - font-family: 'Alegreya', serif; -} - -.page_header { - color: white; - font-family: 'Goldman', cursive; -} - -.emptyslot { - border: 2px dashed white; - border-radius: 15px; - align-self: stretch; - justify-self: stretch; - text-align: center; - color: white; -} - .game { - font-family: 'Alegreya', serif; - color: white; align-self: stretch; justify-self: stretch; text-align: center; @@ -147,13 +19,7 @@ div, button { border-top: none; border-right: none; border-bottom: none; - flex: 1; -} - -h2 { - font-family: 'Alegreya', serif; - color: white; - text-align: center; + height: max-content; } .header { @@ -181,9 +47,11 @@ h2 { display: grid; grid-template-columns: 66% 33%; grid-template-areas: - "teams info" "players info" "update update"; - grid-template-rows: 90px; - grid-row-gap: 8px; + "teams info" + "players info" + "update update"; + grid-template-rows: 90px 85px; + grid-row-gap: 4px; grid-column-gap: 14px; flex: 1; } @@ -278,7 +146,6 @@ h2 { flex-direction: column; justify-content: space-around; align-items: start; - height: max-content; } .player { @@ -286,7 +153,6 @@ h2 { align-items: end; width: 100%; flex-direction: column; - margin: 5px 0px; } .player_name { @@ -295,6 +161,7 @@ h2 { text-align: start; white-space: nowrap; width: 95%; + margin-top: -4px; } .update { @@ -342,30 +209,6 @@ h2 { } @media only screen and (max-device-width: 800px) { - .container { - display: grid; - grid-template-columns: repeat(1, minmax(700px, 90%)); - grid-template-rows: 400px; - grid-gap: 50px 30px; /*space between rows, then columns*/ - align-items: center; - justify-items: center; - grid-auto-rows: 400px; - grid-auto-flow: row; - position: absolute; - left: 50%; - transform: translate(-50%, 0); - } - - .emptyslot { - border: none; - border-radius: 15px; - align-self: stretch; - justify-self: stretch; - text-align: center; - color: white; - flex: 1; - } - .batting { font-size: 15pt; text-align: left; diff --git a/static/css/game_page.css b/static/css/game_page.css new file mode 100644 index 0000000..e707284 --- /dev/null +++ b/static/css/game_page.css @@ -0,0 +1,9 @@ +#game_container { + margin-top: 50px; + display: flex; + justify-content: space-around; +} + +.game { + width: 33%; +} \ No newline at end of file diff --git a/static/css/games_page.css b/static/css/games_page.css new file mode 100644 index 0000000..d86bfdc --- /dev/null +++ b/static/css/games_page.css @@ -0,0 +1,91 @@ +.container { + display: grid; + grid-template-columns: repeat(3, minmax(500px, 1fr)); + grid-gap: 50px 30px; /*space between rows, then columns*/ + align-items: center; + justify-items: center; + grid-auto-flow: row; +} + +.container > div { + min-height: 325px; +} + +#filters { + display: flex; + justify-content: center; + width: 100%; + align-items: center; + margin-top: 10px; + margin-bottom: 20px; +} + +#filters > * { + padding: 4px 8px; + margin: 0px 8px; + font-size: 16pt; + background: rgba(0,0,0,0); +} + +#filters > .filter { + border-radius: 8px; + min-width: 100px; + text-align: center; + border: none; + color: white; + text-decoration: none; +} + +#selected_filter { + background: rgb(113, 54, 138); +} + +#footer { + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; + height: 75px; +} + +#footer > div { + text-align: center; + font-size: 20px; + position: relative; + top: 5px; +} + +.emptyslot { + border: 2px dashed white; + border-radius: 15px; + align-self: stretch; + justify-self: stretch; + text-align: center; + color: white; +} + +@media only screen and (max-device-width: 800px) { + .container { + display: grid; + grid-template-columns: repeat(1, minmax(700px, 90%)); + grid-template-rows: 400px; + grid-gap: 50px 30px; /*space between rows, then columns*/ + align-items: center; + justify-items: center; + grid-auto-rows: 400px; + grid-auto-flow: row; + position: absolute; + left: 50%; + transform: translate(-50%, 0); + } + + .emptyslot { + border: none; + border-radius: 15px; + align-self: stretch; + justify-self: stretch; + text-align: center; + color: white; + flex: 1; + } +} \ No newline at end of file diff --git a/static/prism.png b/static/css/prism.png similarity index 100% rename from static/prism.png rename to static/css/prism.png diff --git a/static/js/game_loader.js b/static/js/game_loader.js new file mode 100644 index 0000000..4890329 --- /dev/null +++ b/static/js/game_loader.js @@ -0,0 +1,23 @@ +$(document).ready(function (){ + var socket = io.connect(); + + socket.on('connect', function () { + console.log("connected") + socket.emit('recieved', {}); + }); + + socket.on("states_update", function (json) { //json is an object containing all game updates + console.log(json) + var searchparams = new URLSearchParams(window.location.search); + var exists = false; + for (game of json) { + if (searchparams.get('timestamp') == game.timestamp) { + $('.game').html(game.html); + exists = true; + } + } + if (!exists) { + // inform the user the game has ended + } + }); +}); \ No newline at end of file diff --git a/static/loader.js b/static/js/grid_loader.js similarity index 99% rename from static/loader.js rename to static/js/grid_loader.js index 9c07c32..ae14544 100644 --- a/static/loader.js +++ b/static/js/grid_loader.js @@ -9,7 +9,7 @@ $(document).ready(function (){ socket.emit('recieved', {}); }); - socket.on("states_update", function (json) { //json is an object containing all game updates\ + socket.on("states_update", function (json) { //json is an object containing all game updates lastupdate = json; updateGames(json, $('#selected_filter').text()); updateLeagues(json); diff --git a/templates/base.html b/templates/base.html new file mode 100644 index 0000000..8eaaf00 --- /dev/null +++ b/templates/base.html @@ -0,0 +1,30 @@ + + + + + + + ⚾ The Simmadome + + + + + + + + {% block head_tags %}{% endblock %} + + + + + {% block body %}{% endblock %} + + diff --git a/templates/game.html b/templates/game.html index 9c0306f..944037e 100644 --- a/templates/game.html +++ b/templates/game.html @@ -1,57 +1,11 @@ -{% macro base(number) -%} -src={% if state.bases[number] %}"/static/img/base_filled.png" alt="{{state.bases[number]}}"{% else %}"/static/img/base_empty.png"{% endif %} -{%- endmacro %} -{% macro out(number) -%} -{% if number <= state.outs %}/static/img/out_out.png{% else %}/static/img/out_in.png{% endif %} -{%- endmacro %} - -
-
Inning: {% if state.display_top_of_inning == true %}🔼{% else %}🔽{% endif %} {{ state.display_inning }}/{{ state.max_innings }}
-
{{ state.weather_emoji }} {{ state.weather_text }}
-
-
-
-
-
{{ state.away_name }}
-
{{ state.away_score }}
-
-
-
{{ state.home_name }}
-
{{ state.home_score }}
-
+{% extends "base.html" %} +{% block head_tags %} + + + +{% endblock %} +{% block body %} +
+
-
-
- -
- - -
-
-
-
OUTS
-
- - -
-
-
-
-
-
PITCHER
-
{{ state.pitcher }}
-
-
-
BATTER
-
{{ state.batter }}
-
-
-
-
{{ state.update_emoji }}
-
{{ state.update_text }}
-
-
-
-
{% if state.display_top_of_inning == true %}{{ state.away_name }}{% else %}{{ state.home_name }}{% endif %} batting.
-
{{ state.leagueoruser }}
-
\ No newline at end of file +{% endblock %} \ No newline at end of file diff --git a/templates/game_box.html b/templates/game_box.html new file mode 100644 index 0000000..39e18b9 --- /dev/null +++ b/templates/game_box.html @@ -0,0 +1,56 @@ +{% macro base(number) -%} +src={% if state.bases[number] %}"/static/img/base_filled.png" alt="{{state.bases[number]}}"{% else %}"/static/img/base_empty.png"{% endif %} +{%- endmacro %} +{% macro out(number) -%} +{% if number <= state.outs %}/static/img/out_out.png{% else %}/static/img/out_in.png{% endif %} +{%- endmacro %} +
+
Inning: {% if state.display_top_of_inning == true %}🔼{% else %}🔽{% endif %} {{ state.display_inning }}/{{ state.max_innings }}
+
{{ state.weather_emoji }} {{ state.weather_text }}
+
+
+
+
+
{{ state.away_name }}
+
{{ state.away_score }}
+
+
+
{{ state.home_name }}
+
{{ state.home_score }}
+
+
+
+
+ +
+ + +
+
+
+
OUTS
+
+ + +
+
+
+
+
+
PITCHER
+
{{ state.pitcher }}
+
+
+
BATTER
+
{{ state.batter }}
+
+
+
+
{{ state.update_emoji }}
+
{{ state.update_text }}
+
+
+
+
{% if state.display_top_of_inning == true %}{{ state.away_name }}{% else %}{{ state.home_name }}{% endif %} batting.
+
{{ state.leagueoruser }} (share)
+
\ No newline at end of file diff --git a/templates/index.html b/templates/index.html index f9968a5..0385b01 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,31 +1,14 @@ - - - - - - - - ⚾ The Simmadome - - - - - - - -