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

give leagues their own page

Browse Source
This commit is contained in:
Elijah Steres 2021-01-02 01:52:51 -05:00
parent f0d56c2edd
commit 09ce4edb43
6 changed files with 80 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
main_controller.py
View File

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

50
static/game.html
View File

@ -1,50 +0,0 @@
<div class="header">
<div class="inning"></div>
<div class="weather"></div>
</div>
<div class="body">
<div class="teams">
<div class="team">
<div class="team_name away_name"></div>
<div class="score away_score"></div>
</div>
<div class="team">
<div class="team_name home_name"></div>
<div class="score home_score"></div>
</div>
</div>
<div class="info">
<div class="field">
<img class="base base_2" src=""/>
<div style="display: flex;">
<img class="base base_3" src=""/>
<img class="base base_1" src=""/>
</div>
</div>
<div class="outs">
<div class="outs_title">OUTS</div>
<div class="outs_count">
<img class="out" src=""/>
<img class="out" src=""/>
</div>
</div>
</div>
<div class="players">
<div class="player pitcher">
<div class="player_type">Pitcher:</div>
<div class="player_name pitcher_name"></div>
</div>
<div class="player batter">
<div class="player_type">Batter:</div>
<div class="player_name batter_name"></div>
</div>
</div>
<div class="update">
<div class="update_emoji"></div>
<div class="update_text"></div>
</div>
</div>
<div class="footer">
<div class="batting"></div>
<div class="leagueoruser"></div>
</div>

2
static/games_page.css
View File

@ -83,6 +83,8 @@ div, button {
min-width: 100px;
text-align: center;
border: none;
color: white;
text-decoration: none;
}
#selected_filter {

106
static/loader.js
View File

@ -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("<button class='filter'>"+league+"</button>");
}
//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;
};
});
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("<button class='filter' id='selected_filter'>All</button>")
}
socket.emit('get_states', {});
}

8
templates/game.html
View File

@ -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 @@
</div>
<div class="info">
<div class="field">
<img class="base base_2" src="{{ base(2) }}"/>
<img class="base base_2" {{ base(2) }}/>
<div style="display: flex;">
<img class="base base_3" src="{{ base(3) }}"/>
<img class="base base_1" src="{{ base(1) }}"/>
<img class="base base_3" {{ base(3) }}/>
<img class="base base_1" {{ base(1) }}/>
</div>
</div>
<div class="outs">

3
templates/index.html
View File

@ -23,7 +23,8 @@
<h2 class="page_header">Join SIBR on <a href="https://discord.gg/UhAajY2NCW" class="link"><img src="static/discord.png" height="30"></a> to start your own games!</h2>
<div id="filters">
<div>Filter:</div>
<button class="filter" id="selected_filter">All</button>
<button class="filter" {% if not league %}id="selected_filter"{% endif %}>All</button>
{% if league %}<button class="filter" id="selected_filter">{{ league }}</button>{% endif %}
</div>
</div>
<section class="container" id="container">