built rudimentary css grid for games, loader.js now directs updates to appropriate grid square as they come in

This commit is contained in:
Sakimori 2020-12-28 19:48:50 -05:00
parent 2a40cbfbd2
commit be18cf83b7
8 changed files with 143 additions and 10 deletions

View File

@ -1,24 +1,32 @@
import asyncio, time, datetime, games, json, threading import asyncio, time, datetime, games, json, threading
from flask import Flask, url_for, Response from flask import Flask, url_for, Response, render_template, request, jsonify
from flask_socketio import SocketIO, emit
app = Flask("the-prestige") app = Flask("the-prestige")
app.config['SECRET KEY'] = 'dev'
socketio = SocketIO(app)
@app.route('/') @app.route('/')
def hello(): def index():
return url_for("boop") return render_template("index.html")
@app.route("/gotoboop") @app.route("/gotoboop")
def boop(): def get_game_states():
return states_to_send return states_to_send
thread2 = threading.Thread(target=app.run) @socketio.on("recieved")
def do_another_thing(data):
print(data)
thread2 = threading.Thread(target=socketio.run,args=(app,))
thread2.start() thread2.start()
master_games_dic = {} #key timestamp : (game game, {} state) master_games_dic = {} #key timestamp : (game game, {} state)
states_to_send = {}
def update_loop(): def update_loop():
while True: while True:
states_to_send = {}
game_times = iter(master_games_dic.copy().keys()) game_times = iter(master_games_dic.copy().keys())
for game_time in game_times: for game_time in game_times:
this_game, state = master_games_dic[game_time] this_game, state = master_games_dic[game_time]
@ -41,7 +49,7 @@ def update_loop():
state["update_pause"] = 2 state["update_pause"] = 2
state["pitcher"] = "-" state["pitcher"] = "-"
state["batter"] = "-" state["batter"] = "-"
if state["top_of_inning"]: if not state["top_of_inning"]:
state["display_inning"] -= 1 state["display_inning"] -= 1
if state["update_pause"] == 1: if state["update_pause"] == 1:
@ -91,4 +99,5 @@ def update_loop():
state["update_pause"] -= 1 state["update_pause"] -= 1
time.sleep(6) socketio.emit("states_update", states_to_send)
time.sleep(1)

43
static/games_page.css Normal file
View File

@ -0,0 +1,43 @@
@import url('https://fonts.googleapis.com/css2?family=Alegreya&display=swap');
body {
background-image: url("prism.png");
}
/* Background pattern from Toptal Subtle Patterns */
.container {
font-family: 'Alegreya', serif;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 300px;
grid-gap: 50px 30px; /*space between rows, then columns*/
align-items: center;
justify-items: center;
grid-auto-rows: 300px;
grid-auto-flow: row;
}
.h1 {
margin: auto;
width: 45%;
font-family: 'Alegreya', serif;
}
.emptyslot {
border: 2px dashed white;
border-radius: 15px;
align-self: stretch;
justify-self: stretch;
text-align: center;
color: white;
}
.game {
font-family: 'Alegreya', serif;
color: white;
}
h2 {
font-family: 'Alegreya', serif;
color: white;
text-align: center;
}

41
static/loader.js Normal file
View File

@ -0,0 +1,41 @@
$(document).ready(function (){
var socket = io.connect();
var gameslist = [];
var maxslot = 3;
var grid = document.getElementById("container");
socket.on('connect', function () {
socket.emit('recieved', { data: 'I\'m connected!' });
});
socket.on("states_update", function (json) { //json is an object containing all game updates
for (const timestamp in json) {
if (!gameslist.includes(timestamp)) { //adds game to list if not there already
gameslist.push(timestamp)
var gridBoxes = grid.children;
for (var slotnum = 3; slotnum <= maxslot; slotnum++) {
if (gridBoxes[slotnum].className == "emptyslot") {
insertGame(slotnum, json[timestamp], timestamp);
maxslot += 1;
break;
};
};
};
for (var slotnum = 3; slotnum <= maxslot; slotnum++) {
if (grid.children[slotnum].timestamp == timestamp) {
console.log(json[timestamp].update_text)
grid.children[slotnum].textContent = json[timestamp].update_text;
};
};
};
});
const insertGame = (gridboxnum, gamestate, timestamp) => {
var thisBox = grid.children[gridboxnum];
thisBox.className = "game";
thisBox.timestamp = timestamp
thisBox.textContent = gamestate.update_text;
};
});

BIN
static/prism.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

32
templates/index.html Normal file
View File

@ -0,0 +1,32 @@
<html lang="en-US">
<head>
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js"></script>
<script src="static/loader.js"></script>
<link rel="stylesheet" href="/static/games_page.css">
<title>⚾ The Blaseball Simsim</title>
</head>
<body>
<section class="container" id="container">
<div></div>
<div class="emptyslot" id="title">
<h1>game page ahoy</h1>
</div>
<div></div>
<div class="emptyslot"></div>
<div class="emptyslot"></div>
<div class="emptyslot"></div>
<div class="emptyslot"></div>
<div class="emptyslot"></div>
<div class="emptyslot"></div>
<div class="emptyslot"></div>
<div class="emptyslot"></div>
<div class="emptyslot"></div>
<div class="emptyslot"></div>
<div class="emptyslot"></div>
<div class="emptyslot"></div>
</section>
</body>
</html>

View File

@ -57,6 +57,14 @@
<Content Include="games_config.json" /> <Content Include="games_config.json" />
<Content Include="ids" /> <Content Include="ids" />
<Content Include="matteo.db" /> <Content Include="matteo.db" />
<Content Include="static\games_page.css" />
<Content Include="static\loader.js" />
<Content Include="static\prism.png" />
<Content Include="templates\index.html" />
</ItemGroup>
<ItemGroup>
<Folder Include="static\" />
<Folder Include="templates\" />
</ItemGroup> </ItemGroup>
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\Python Tools\Microsoft.PythonTools.targets" /> <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\Python Tools\Microsoft.PythonTools.targets" />
<!-- Uncomment the CoreCompile target to enable the Build command in <!-- Uncomment the CoreCompile target to enable the Build command in

View File

@ -550,10 +550,10 @@ async def watch_game(channel, newgame, user = None):
"victory_lap" : False, "victory_lap" : False,
"weather_emoji" : newgame.weather.emoji, "weather_emoji" : newgame.weather.emoji,
"weather_text" : newgame.weather.name, "weather_text" : newgame.weather.name,
"delay" : 3 "delay" : -1
} }
main_controller.master_games_dic[time.time()] = (newgame, state_init) main_controller.master_games_dic[str(time.time())] = (newgame, state_init)
#while not newgame.over or newgame.top_of_inning != top_of_inning: #while not newgame.over or newgame.top_of_inning != top_of_inning:
# state = newgame.gamestate_display_full() # state = newgame.gamestate_display_full()