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)

48
static/loader.js
View File

@ -1,23 +1,22 @@
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) => {
filterjson = []; filterjson = [];
for (var game of json) { for (var game of json) {
@ -74,22 +73,22 @@ $(document).ready(function (){
grid.removeChild(grid.children[grid.children.length-1]); grid.removeChild(grid.children[grid.children.length-1]);
} }
} }
} }
const insertEmpty = (grid) => { const insertEmpty = (grid) => {
var newBox = document.createElement("DIV"); var newBox = document.createElement("DIV");
newBox.className = "emptyslot"; newBox.className = "emptyslot";
grid.appendChild(newBox); grid.appendChild(newBox);
} }
const insertGame = (gridboxnum, game) => { const insertGame = (gridboxnum, game) => {
var thisBox = grid.children[gridboxnum]; var thisBox = grid.children[gridboxnum];
thisBox.innerHTML = game.html; thisBox.innerHTML = game.html;
thisBox.className = "game"; thisBox.className = "game";
thisBox.timestamp = game.timestamp; thisBox.timestamp = game.timestamp;
}; };
const updateLeagues = (games) => { const updateLeagues = (games) => {
//get all leagues //get all leagues
var leagues = [] var leagues = []
for (var game of games) { for (var game of games) {
@ -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', {});
} }