From 09ce4edb43172994fa0d5504d3f025b0d3eb8ff9 Mon Sep 17 00:00:00 2001 From: Elijah Steres Date: Sat, 2 Jan 2021 01:52:51 -0500 Subject: [PATCH] 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 %}