From 067fe13cd04e262d9826eb45a506302a71d8859c Mon Sep 17 00:00:00 2001 From: Elijah Steres Date: Fri, 1 Jan 2021 19:37:55 -0500 Subject: [PATCH 1/5] more css tweaks --- static/games_page.css | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/static/games_page.css b/static/games_page.css index 12e4d62..62ea548 100644 --- a/static/games_page.css +++ b/static/games_page.css @@ -43,10 +43,13 @@ div, button { grid-gap: 50px 30px; /*space between rows, then columns*/ align-items: center; justify-items: center; - grid-auto-rows: 360px; grid-auto-flow: row; } +.container > div { + min-height: 350px; +} + #header { width: 100%; height: 150px; @@ -125,7 +128,6 @@ div, button { justify-self: stretch; text-align: center; color: white; - flex: 1; } .game { @@ -175,12 +177,12 @@ h2 { .body { margin: 10px; display: grid; - grid-template-columns: 60% 40%; + grid-template-columns: 66% 33%; grid-template-areas: "teams info" "players info" "update update"; grid-template-rows: 90px; grid-row-gap: 8px; - grid-column-gap: 10px; + grid-column-gap: 14px; flex: 1; } @@ -189,6 +191,7 @@ h2 { display: flex; flex-direction: column; justify-content: space-around; + margin-right: 12px; } .team { @@ -200,6 +203,7 @@ h2 { .team_name { overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } @@ -210,9 +214,7 @@ h2 { align-items: center; justify-content: space-around; background: #4f545c; - padding-top: 8px; - padding-bottom: 4px; - margin-left: 15%; + padding: 25px 0px; margin-right: 10px; border-radius: 4px; } @@ -287,6 +289,7 @@ h2 { .player_name { overflow: hidden; + text-overflow: ellipsis; text-align: start; white-space: nowrap; width: 95%; @@ -297,12 +300,13 @@ h2 { margin-right: 10px; margin-top: 5px; min-height: 50px; + padding: 0px 10px; height: 100%; background: var(--background-secondary); border-radius: 4px; align-items: center; display: flex; - justify-content: center; + justify-content: start; } .player_type { @@ -311,8 +315,13 @@ h2 { font-weight: bolder; } -.update_emoji, .update_text { - display: inline +.update_emoji { + margin-right: 10px; + margin-left: 4px; +} + +.update_text { + text-align: start; } .field { From f0d56c2edd5739f2f187772d2896adfd263da343 Mon Sep 17 00:00:00 2001 From: Elijah Steres Date: Fri, 1 Jan 2021 20:06:33 -0500 Subject: [PATCH 2/5] tiny bump to the left --- static/games_page.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/games_page.css b/static/games_page.css index 62ea548..566005e 100644 --- a/static/games_page.css +++ b/static/games_page.css @@ -317,7 +317,7 @@ h2 { .update_emoji { margin-right: 10px; - margin-left: 4px; + margin-left: 2px; } .update_text { From 09ce4edb43172994fa0d5504d3f025b0d3eb8ff9 Mon Sep 17 00:00:00 2001 From: Elijah Steres Date: Sat, 2 Jan 2021 01:52:51 -0500 Subject: [PATCH 3/5] give leagues their own page --- main_controller.py | 7 ++- static/game.html | 50 -------------------- static/games_page.css | 2 + static/loader.js | 106 ++++++++++++++++++++++++++---------------- templates/game.html | 8 ++-- templates/index.html | 3 +- 6 files changed, 80 insertions(+), 96 deletions(-) delete mode 100644 static/game.html diff --git a/main_controller.py b/main_controller.py index c439608..e8a5a75 100644 --- a/main_controller.py +++ b/main_controller.py @@ -11,13 +11,18 @@ socketio = SocketIO(app) def index(): return render_template("index.html") +@app.route('/league') +def league(): + print(request.args) + return render_template("index.html", league=request.args['name']) + thread2 = threading.Thread(target=socketio.run,args=(app,'0.0.0.0')) thread2.start() master_games_dic = {} #key timestamp : (game game, {} state) data_to_send = [] -@socketio.on("recieved") +@socketio.on("get_states") def handle_new_conn(data): socketio.emit("states_update", data_to_send, room=request.sid) diff --git a/static/game.html b/static/game.html deleted file mode 100644 index 633fa17..0000000 --- a/static/game.html +++ /dev/null @@ -1,50 +0,0 @@ -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- - -
-
-
-
OUTS
-
- - -
-
-
-
-
-
Pitcher:
-
-
-
-
Batter:
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file diff --git a/static/games_page.css b/static/games_page.css index 566005e..68c032a 100644 --- a/static/games_page.css +++ b/static/games_page.css @@ -83,6 +83,8 @@ div, button { min-width: 100px; text-align: center; border: none; + color: white; + text-decoration: none; } #selected_filter { diff --git a/static/loader.js b/static/loader.js index fa83ceb..53f1441 100644 --- a/static/loader.js +++ b/static/loader.js @@ -1,52 +1,20 @@ +var socket = io.connect(); + $(document).ready(function (){ - var socket = io.connect(); var lastupdate; var grid = document.getElementById("container"); socket.on('connect', function () { - socket.emit('recieved', { data: 'I\'m connected!' }); + socket.emit('get_states', {}); }); socket.on("states_update", function (json) { //json is an object containing all game updates + console.log(json) lastupdate = json; updateGames(json, $('#selected_filter').text()); - - //get all leagues - leagues = [] - for (var game of json) { - if (game.league != "" && !leagues.includes(game.league)) { - leagues.push(game.league) - } - } - - //remove leagues no longer present - $('#filters .filter').each(function(index) { - if (!leagues.includes($(this).text())) { - if ($(this).attr('id') != 'selected_filter' && $(this).text() != "All") { //don't remove the currently selected filter or the "all" filter - $(this).remove(); - } - } else { - leagues.splice(leagues.indexOf($(this).text()), 1); - } - }) - - // add leagues not already present - for (var league of leagues) { // we removed the entries that are already there in the loop above - $('#filters').append(""); - } - - //add click handlers to each filter - $('#filters .filter').each(function(index) { - $(this).click(function() { - if ($('#filters #selected_filter').text() == 'All') { - updateGames([], ""); // clear grid when switching off of All, to make games collapse to top - } - $('#filters #selected_filter').attr('id', ''); - $(this).attr('id', 'selected_filter'); - updateGames(lastupdate, $(this).text()); - }) - }) + updateLeagues(json); + document.getElementsByTagName("html")[0].style.visibility = "visible"; }); const updateGames = (json, filter) => { @@ -109,7 +77,7 @@ $(document).ready(function (){ } const insertEmpty = (grid) => { - newBox = document.createElement("DIV"); + var newBox = document.createElement("DIV"); newBox.className = "emptyslot"; grid.appendChild(newBox); } @@ -120,4 +88,62 @@ $(document).ready(function (){ thisBox.className = "game"; thisBox.timestamp = game.timestamp; }; -}); \ No newline at end of file + + const updateLeagues = (games) => { + //get all leagues + var leagues = [] + for (var game of games) { + if (game.league != "" && !leagues.includes(game.league)) { + leagues.push(game.league) + } + } + + //remove leagues no longer present + $('#filters .filter').each(function(index) { + if (!leagues.includes($(this).text())) { + if (this.id != 'selected_filter' && $(this).text() != "All") { //don't remove the currently selected filter or the "all" filter + $(this).remove(); + } + } else { + leagues.splice(leagues.indexOf($(this).text()), 1); + } + }) + + // add leagues not already present + for (var league of leagues) { // we removed the entries that are already there in the loop above + var btn = document.createElement("BUTTON"); + btn.className = "filter" + btn.innerHTML = league + $('#filters').append(btn); + } + + //add click handlers to each filter + $('#filters .filter').each(function(index) { + this.onclick = function() { + if ($('#filters #selected_filter').text() == 'All') { + updateGames([], ""); // clear grid when switching off of All, to make games collapse to top + } + $('#filters #selected_filter').attr('id', ''); + this.id = 'selected_filter'; + + var search = new URLSearchParams(); + search.append("name", this.textContent); + console.log("pushing state due to:"); + console.log(this); + history.pushState({'filters' : $('#filters').html()}, "", (this.textContent != 'All' ? "/league?" + search.toString() : "/")); + updateGames(lastupdate, this.textContent); + } + }) + } +}); + +window.onpopstate = function(e) { + console.log(e) + if (e.state) { + $('#filters').html(e.state.filters) + } else { + $('#filters').html("") + $('#filters').append("") + } + socket.emit('get_states', {}); +} \ No newline at end of file diff --git a/templates/game.html b/templates/game.html index 6e49d0a..9c0306f 100644 --- a/templates/game.html +++ b/templates/game.html @@ -1,5 +1,5 @@ {% macro base(number) -%} -{% if state.bases[number] %}/static/img/base_filled.png{% else %}/static/img/base_empty.png{% endif %} +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 %} @@ -22,10 +22,10 @@
- +
- - + +
diff --git a/templates/index.html b/templates/index.html index fc9e1ce..f9968a5 100644 --- a/templates/index.html +++ b/templates/index.html @@ -23,7 +23,8 @@

Join SIBR on to start your own games!

Filter:
- + + {% if league %}{% endif %}
From 594fef822993cfbc784fe8c97d2b1ea88c1a075c Mon Sep 17 00:00:00 2001 From: Elijah Steres Date: Sat, 2 Jan 2021 02:29:03 -0500 Subject: [PATCH 4/5] use history.pushState to make site experience smoother --- main_controller.py | 2 +- static/loader.js | 266 ++++++++++++++++++++++----------------------- 2 files changed, 133 insertions(+), 135 deletions(-) diff --git a/main_controller.py b/main_controller.py index e8a5a75..9d995cc 100644 --- a/main_controller.py +++ b/main_controller.py @@ -22,7 +22,7 @@ thread2.start() master_games_dic = {} #key timestamp : (game game, {} state) data_to_send = [] -@socketio.on("get_states") +@socketio.on("recieved") def handle_new_conn(data): socketio.emit("states_update", data_to_send, room=request.sid) diff --git a/static/loader.js b/static/loader.js index 53f1441..9c07c32 100644 --- a/static/loader.js +++ b/static/loader.js @@ -1,149 +1,147 @@ var socket = io.connect(); +var lastupdate; +var grid; $(document).ready(function (){ - var lastupdate; - var grid = document.getElementById("container"); - + grid = document.getElementById("container") socket.on('connect', function () { - socket.emit('get_states', {}); + socket.emit('recieved', {}); }); - socket.on("states_update", function (json) { //json is an object containing all game updates - console.log(json) + socket.on("states_update", function (json) { //json is an object containing all game updates\ lastupdate = json; updateGames(json, $('#selected_filter').text()); updateLeagues(json); - document.getElementsByTagName("html")[0].style.visibility = "visible"; }); - - const updateGames = (json, filter) => { - - filterjson = []; - for (var game of json) { - if (game.league == filter || filter == "All") { - filterjson.push(game); - } - } - - if (filterjson.length == 0) { - $('#footer div').html("No games right now. Why not head over to Discord and start one?"); - } else { - $('#footer div').html(""); - } - - //replace games that have ended with empty slots - for (var slotnum = 0; slotnum < grid.children.length; slotnum++) { - if (grid.children[slotnum].className == "game" && !filterjson.some((x) => x.timestamp == grid.children[slotnum].timestamp)) { - grid.children[slotnum].className = "emptyslot"; - grid.children[slotnum].timestamp = null; - grid.children[slotnum].innerHTML = ""; - } - } - - for (var game of filterjson) { - //updates game in list - for (var slotnum = 0; slotnum < grid.children.length; slotnum++) { - if (grid.children[slotnum].timestamp == game.timestamp) { - insertGame(slotnum, game); - }; - }; - - //adds game to list if not there already - if (!Array.prototype.slice.call(grid.children).some((x) => x.timestamp == game.timestamp)) { - for (var slotnum = 0; true; slotnum++) { //this is really a while loop but shh don't tell anyone - if (slotnum >= grid.children.length) { - for (var i = 0; i < 3; i ++) { - insertEmpty(grid); - } - } - if (grid.children[slotnum].className == "emptyslot") { - insertGame(slotnum, game); - break; - }; - }; - } - }; - - //remove last rows if not needed - while (grid.children[grid.children.length-1].className == "emptyslot" && - grid.children[grid.children.length-2].className == "emptyslot" && - grid.children[grid.children.length-3].className == "emptyslot" && - grid.children.length > 3) { - for (var i = 0; i < 3; i++) { - grid.removeChild(grid.children[grid.children.length-1]); - } - } - } - - const insertEmpty = (grid) => { - var newBox = document.createElement("DIV"); - newBox.className = "emptyslot"; - grid.appendChild(newBox); - } - - const insertGame = (gridboxnum, game) => { - var thisBox = grid.children[gridboxnum]; - thisBox.innerHTML = game.html; - thisBox.className = "game"; - thisBox.timestamp = game.timestamp; - }; - - const updateLeagues = (games) => { - //get all leagues - var leagues = [] - for (var game of games) { - if (game.league != "" && !leagues.includes(game.league)) { - leagues.push(game.league) - } - } - - //remove leagues no longer present - $('#filters .filter').each(function(index) { - if (!leagues.includes($(this).text())) { - if (this.id != 'selected_filter' && $(this).text() != "All") { //don't remove the currently selected filter or the "all" filter - $(this).remove(); - } - } else { - leagues.splice(leagues.indexOf($(this).text()), 1); - } - }) - - // add leagues not already present - for (var league of leagues) { // we removed the entries that are already there in the loop above - var btn = document.createElement("BUTTON"); - btn.className = "filter" - btn.innerHTML = league - $('#filters').append(btn); - } - - //add click handlers to each filter - $('#filters .filter').each(function(index) { - this.onclick = function() { - if ($('#filters #selected_filter').text() == 'All') { - updateGames([], ""); // clear grid when switching off of All, to make games collapse to top - } - $('#filters #selected_filter').attr('id', ''); - this.id = 'selected_filter'; - - var search = new URLSearchParams(); - search.append("name", this.textContent); - console.log("pushing state due to:"); - console.log(this); - history.pushState({'filters' : $('#filters').html()}, "", (this.textContent != 'All' ? "/league?" + search.toString() : "/")); - updateGames(lastupdate, this.textContent); - } - }) - } }); -window.onpopstate = function(e) { - console.log(e) - if (e.state) { - $('#filters').html(e.state.filters) - } else { - $('#filters').html("") - $('#filters').append("") +const updateGames = (json, filter) => { + + filterjson = []; + for (var game of json) { + if (game.league == filter || filter == "All") { + filterjson.push(game); + } + } + + if (filterjson.length == 0) { + $('#footer div').html("No games right now. Why not head over to Discord and start one?"); + } else { + $('#footer div').html(""); + } + + //replace games that have ended with empty slots + for (var slotnum = 0; slotnum < grid.children.length; slotnum++) { + if (grid.children[slotnum].className == "game" && !filterjson.some((x) => x.timestamp == grid.children[slotnum].timestamp)) { + grid.children[slotnum].className = "emptyslot"; + grid.children[slotnum].timestamp = null; + grid.children[slotnum].innerHTML = ""; + } + } + + for (var game of filterjson) { + //updates game in list + for (var slotnum = 0; slotnum < grid.children.length; slotnum++) { + if (grid.children[slotnum].timestamp == game.timestamp) { + insertGame(slotnum, game); + }; + }; + + //adds game to list if not there already + if (!Array.prototype.slice.call(grid.children).some((x) => x.timestamp == game.timestamp)) { + for (var slotnum = 0; true; slotnum++) { //this is really a while loop but shh don't tell anyone + if (slotnum >= grid.children.length) { + for (var i = 0; i < 3; i ++) { + insertEmpty(grid); + } + } + if (grid.children[slotnum].className == "emptyslot") { + insertGame(slotnum, game); + break; + }; + }; + } + }; + + //remove last rows if not needed + while (grid.children[grid.children.length-1].className == "emptyslot" && + grid.children[grid.children.length-2].className == "emptyslot" && + grid.children[grid.children.length-3].className == "emptyslot" && + grid.children.length > 3) { + for (var i = 0; i < 3; i++) { + grid.removeChild(grid.children[grid.children.length-1]); + } + } +} + +const insertEmpty = (grid) => { + var newBox = document.createElement("DIV"); + newBox.className = "emptyslot"; + grid.appendChild(newBox); +} + +const insertGame = (gridboxnum, game) => { + var thisBox = grid.children[gridboxnum]; + thisBox.innerHTML = game.html; + thisBox.className = "game"; + thisBox.timestamp = game.timestamp; +}; + +const updateLeagues = (games) => { + //get all leagues + var leagues = [] + for (var game of games) { + if (game.league != "" && !leagues.includes(game.league)) { + leagues.push(game.league) + } + } + + //remove leagues no longer present + $('#filters .filter').each(function(index) { + if (!leagues.includes($(this).text())) { + if (this.id != 'selected_filter' && $(this).text() != "All") { //don't remove the currently selected filter or the "all" filter + $(this).remove(); + } + } else { + leagues.splice(leagues.indexOf($(this).text()), 1); + } + }) + + // add leagues not already present + for (var league of leagues) { // we removed the entries that are already there in the loop above + var btn = document.createElement("BUTTON"); + btn.className = "filter" + btn.innerHTML = league + $('#filters').append(btn); + } + + //add click handlers to each filter + $('#filters .filter').each(function(index) { + this.onclick = function() { + if ($('#filters #selected_filter').text() == 'All') { + updateGames([], ""); // clear grid when switching off of All, to make games collapse to top + } + $('#filters #selected_filter').attr('id', ''); + this.id = 'selected_filter'; + + var search = new URLSearchParams(); + search.append("name", this.textContent); + history.pushState({}, "", (this.textContent != 'All' ? "/league?" + search.toString() : "/")); + updateGames(lastupdate, this.textContent); + } + }) +} + +window.onpopstate = function(e) { + var searchparams = new URLSearchParams(window.location.search) + updateLeagues(lastupdate); + $('#filters #selected_filter').attr('id', ''); + if (searchparams.has('name')) { + $('#filters .filter').each(function(i) { if (this.textContent == searchparams.get('name')) { this.id = 'selected_filter' }}) + updateGames(lastupdate, searchparams.get('name')); + } else { + $('#filters .filter').each(function(i) { if (this.textContent == 'All') { this.id = 'selected_filter' }}) + updateGames(lastupdate, "All"); } - socket.emit('get_states', {}); } \ No newline at end of file From 5bd45bacf810e8e1ff535ee5c2309681d33e0cd5 Mon Sep 17 00:00:00 2001 From: Elijah Steres Date: Sat, 2 Jan 2021 03:05:54 -0500 Subject: [PATCH 5/5] make startgame command post link to league --- main_controller.py | 1 - the_prestige.py | 8 ++++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/main_controller.py b/main_controller.py index 0fdfb38..01d35a5 100644 --- a/main_controller.py +++ b/main_controller.py @@ -13,7 +13,6 @@ def index(): @app.route('/league') def league(): - print(request.args) return render_template("index.html", league=request.args['name']) thread2 = threading.Thread(target=socketio.run,args=(app,'0.0.0.0')) diff --git a/the_prestige.py b/the_prestige.py index 239595b..31535e4 100644 --- a/the_prestige.py +++ b/the_prestige.py @@ -1,4 +1,4 @@ -import discord, json, math, os, roman, games, asyncio, random, main_controller, threading, time, leagues +import discord, json, math, os, roman, games, asyncio, random, main_controller, threading, time, leagues, urllib import database as db import onomancer as ono from flask import Flask @@ -646,7 +646,11 @@ async def watch_game(channel, newgame, user = None, league = None): discrim_string = "Unclaimed game." state_init["is_league"] = False - await channel.send(f"{newgame.teams['away'].name} vs. {newgame.teams['home'].name}, starting at {config()['simmadome_url']}") + if league is not None: + league_ext = "league?name=" + urllib.parse.quote_plus(league) + else: + league_ext = "" + await channel.send(f"{newgame.teams['away'].name} vs. {newgame.teams['home'].name}, starting at {config()['simmadome_url']+league_ext}") timestamp = str(time.time() * 1000.0) gamesarray.append((newgame, channel, user, timestamp))