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)
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)

48
static/loader.js
View File

@ -1,23 +1,22 @@
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) => {
const updateGames = (json, filter) => {
filterjson = [];
for (var game of json) {
@ -74,22 +73,22 @@ $(document).ready(function (){
grid.removeChild(grid.children[grid.children.length-1]);
}
}
}
}
const insertEmpty = (grid) => {
const insertEmpty = (grid) => {
var newBox = document.createElement("DIV");
newBox.className = "emptyslot";
grid.appendChild(newBox);
}
}
const insertGame = (gridboxnum, game) => {
const insertGame = (gridboxnum, game) => {
var thisBox = grid.children[gridboxnum];
thisBox.innerHTML = game.html;
thisBox.className = "game";
thisBox.timestamp = game.timestamp;
};
};
const updateLeagues = (games) => {
const updateLeagues = (games) => {
//get all leagues
var leagues = []
for (var game of games) {
@ -128,22 +127,21 @@ $(document).ready(function (){
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() : "/"));
history.pushState({}, "", (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)
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').html("")
$('#filters').append("<button class='filter' id='selected_filter'>All</button>")
$('#filters .filter').each(function(i) { if (this.textContent == 'All') { this.id = 'selected_filter' }})
updateGames(lastupdate, "All");
}
socket.emit('get_states', {});
}