kass/matteo-the-prestige
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

use history.pushState to make site experience smoother

Browse Source
This commit is contained in:
Elijah Steres 2021-01-02 02:29:03 -05:00
parent 09ce4edb43
commit 594fef8229
2 changed files with 133 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
main_controller.py
View File

@ -22,7 +22,7 @@ thread2.start()
master_games_dic = {} #key timestamp : (game game, {} state) master_games_dic = {} #key timestamp : (game game, {} state)
data_to_send = [] data_to_send = []
@socketio.on("get_states") @socketio.on("recieved")
def handle_new_conn(data): def handle_new_conn(data):
socketio.emit("states_update", data_to_send, room=request.sid) socketio.emit("states_update", data_to_send, room=request.sid)

32
static/loader.js
View File

@ -1,20 +1,19 @@
var socket = io.connect(); var socket = io.connect();
var lastupdate;
var grid;
$(document).ready(function (){ $(document).ready(function (){
var lastupdate; grid = document.getElementById("container")
var grid = document.getElementById("container");
socket.on('connect', function () { 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 socket.on("states_update", function (json) { //json is an object containing all game updates\
console.log(json)
lastupdate = json; lastupdate = json;
updateGames(json, $('#selected_filter').text()); updateGames(json, $('#selected_filter').text());
updateLeagues(json); updateLeagues(json);
document.getElementsByTagName("html")[0].style.visibility = "visible"; });
}); });
const updateGames = (json, filter) => { const updateGames = (json, filter) => {
@ -128,22 +127,21 @@ $(document).ready(function (){
var search = new URLSearchParams(); var search = new URLSearchParams();
search.append("name", this.textContent); search.append("name", this.textContent);
console.log("pushing state due to:"); history.pushState({}, "", (this.textContent != 'All' ? "/league?" + search.toString() : "/"));
console.log(this);
history.pushState({'filters' : $('#filters').html()}, "", (this.textContent != 'All' ? "/league?" + search.toString() : "/"));
updateGames(lastupdate, this.textContent); updateGames(lastupdate, this.textContent);
} }
}) })
} }
});
window.onpopstate = function(e) { window.onpopstate = function(e) {
console.log(e) var searchparams = new URLSearchParams(window.location.search)
if (e.state) { updateLeagues(lastupdate);
$('#filters').html(e.state.filters) $('#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 { } else {
$('#filters').html("") $('#filters .filter').each(function(i) { if (this.textContent == 'All') { this.id = 'selected_filter' }})
$('#filters').append("<button class='filter' id='selected_filter'>All</button>") updateGames(lastupdate, "All");
} }
socket.emit('get_states', {});
} }