frontend complete! for now, at least
This commit is contained in:
Elijah Steres
parent
ed56c8c0ce
commit
b236445d8b
|
|
@ -68,7 +68,7 @@ def update_loop():
|
|||
for attempt in this_game.last_update[0]["steals"]:
|
||||
updatestring += attempt + "\n"
|
||||
|
||||
state["emoji"] = "💎"
|
||||
state["update_emoji"] = "💎"
|
||||
state["update_text"] = updatestring
|
||||
|
||||
else:
|
||||
|
|
@ -85,7 +85,7 @@ def update_loop():
|
|||
if this_game.last_update[1] > 0:
|
||||
updatestring += f"{this_game.last_update[1]} runs scored!"
|
||||
|
||||
state["emoji"] = "🏏"
|
||||
state["update_emoji"] = "🏏"
|
||||
state["update_text"] = updatestring
|
||||
|
||||
state["bases"] = this_game.named_bases()
|
||||
|
|
|
|||
49
static/game.html
Normal file
49
static/game.html
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<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>
|
||||
|
|
@ -7,7 +7,7 @@ body {
|
|||
.container {
|
||||
font-family: 'Alegreya', serif;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
|
||||
grid-template-columns: repeat(3, minmax(500px, 1fr));
|
||||
grid-template-rows: 100px 330px;
|
||||
grid-gap: 50px 30px; /*space between rows, then columns*/
|
||||
align-items: center;
|
||||
|
|
@ -84,7 +84,7 @@ h2 {
|
|||
display: grid;
|
||||
grid-template-columns: 60% 40%;
|
||||
grid-template-areas:
|
||||
"scores info"
|
||||
"teams info"
|
||||
"players players"
|
||||
"update update";
|
||||
grid-template-rows: 130px;
|
||||
|
|
@ -93,7 +93,8 @@ h2 {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.scores {
|
||||
.teams {
|
||||
grid-area: teams;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
|
@ -111,6 +112,7 @@ h2 {
|
|||
}
|
||||
|
||||
.info {
|
||||
grid-area: info;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -124,7 +126,6 @@ h2 {
|
|||
}
|
||||
|
||||
.batting {
|
||||
grid-area: batting;
|
||||
font-size: 10pt;
|
||||
text-align: left;
|
||||
height: max-content;
|
||||
|
|
@ -164,11 +165,11 @@ h2 {
|
|||
}
|
||||
|
||||
.players {
|
||||
grid-area: players;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
grid-area: players;
|
||||
height: max-content;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -177,7 +178,7 @@ h2 {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: 330px;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
.player_name {
|
||||
|
|
@ -200,10 +201,10 @@ h2 {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.base1, .base2, .base3 {
|
||||
.base {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.base2 {
|
||||
.base_2 {
|
||||
margin-bottom: -25%
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ $(document).ready(function (){
|
|||
var socket = io.connect();
|
||||
var gameslist = [];
|
||||
var maxslot = 3;
|
||||
var totalslots = 15;
|
||||
var grid = document.getElementById("container");
|
||||
|
||||
|
||||
|
|
@ -14,7 +15,7 @@ $(document).ready(function (){
|
|||
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++) {
|
||||
for (var slotnum = 3; slotnum <= Math.min(maxslot, totalslots-1); slotnum++) {
|
||||
if (gridBoxes[slotnum].className == "emptyslot") {
|
||||
insertGame(slotnum, json[timestamp], timestamp);
|
||||
maxslot += 1;
|
||||
|
|
@ -23,10 +24,10 @@ $(document).ready(function (){
|
|||
};
|
||||
};
|
||||
|
||||
for (var slotnum = 3; slotnum <= maxslot; slotnum++) {
|
||||
for (var slotnum = 3; slotnum <= Math.min(maxslot, totalslots-1); slotnum++) {
|
||||
if (grid.children[slotnum].timestamp == timestamp) {
|
||||
console.log(json[timestamp].update_text)
|
||||
grid.children[slotnum].textContent = json[timestamp].update_text;
|
||||
console.log(json[timestamp].update_text);
|
||||
updateGame(grid.children[slotnum], json[timestamp]);
|
||||
};
|
||||
};
|
||||
};
|
||||
|
|
@ -35,7 +36,46 @@ $(document).ready(function (){
|
|||
const insertGame = (gridboxnum, gamestate, timestamp) => {
|
||||
var thisBox = grid.children[gridboxnum];
|
||||
thisBox.className = "game";
|
||||
thisBox.timestamp = timestamp
|
||||
thisBox.textContent = gamestate.update_text;
|
||||
thisBox.timestamp = timestamp;
|
||||
thisBox.id = "loadTarget";
|
||||
$('#loadTarget').load("static/game.html");
|
||||
thisBox.id = "";
|
||||
updateGame(thisBox, gamestate);
|
||||
};
|
||||
|
||||
const BASE_EMPTY = "/static/img/base_empty.png"
|
||||
const BASE_FILLED = "/static/img/base_filled.png"
|
||||
const OUT_OUT = "/static/img/out_out.png"
|
||||
const OUT_IN = "/static/img/out_in.png"
|
||||
|
||||
const updateGame = (gamediv, gamestate) => {
|
||||
gamediv.id = "updateTarget";
|
||||
$('#updateTarget .inning').html("Inning: " + (gamestate.top_of_inning ? "🔼" : "🔽") + " " + gamestate.display_inning + "/" + gamestate.max_innings);
|
||||
$('#updateTarget .weather').html(gamestate.weather_emoji + " " + gamestate.weather_text);
|
||||
|
||||
$('#updateTarget .away_name').html(gamestate.away_name);
|
||||
$('#updateTarget .home_name').html(gamestate.home_name);
|
||||
$('#updateTarget .away_score').html("" + gamestate.away_score);
|
||||
$('#updateTarget .home_score').html("" + gamestate.home_score);
|
||||
|
||||
for (var i = 1; i <= 3; i++) {
|
||||
|
||||
$('#updateTarget .base_' + i).attr('src', (gamestate.bases[i] == null ? BASE_EMPTY : BASE_FILLED));
|
||||
}
|
||||
|
||||
$('#updateTarget .outs_count').children().each(function(index) {
|
||||
$(this).attr('src', index < gamestate.outs ? OUT_OUT : OUT_IN);
|
||||
});
|
||||
|
||||
$('#updateTarget .pitcher_name').html(gamestate.pitcher);
|
||||
$('#updateTarget .batter_name').html(gamestate.batter);
|
||||
|
||||
console.log(gamestate.update_emoji);
|
||||
$('#updateTarget .update_emoji').html(gamestate.update_emoji);
|
||||
$('#updateTarget .update_text').html(gamestate.update_text);
|
||||
|
||||
$('#updateTarget .batting').html((gamestate.top_of_inning ? gamestate.away_name : gamestate.home_name) + " batting.");
|
||||
|
||||
gamediv.id = "";
|
||||
};
|
||||
});
|
||||
BIN
templates/.DS_Store
vendored
Normal file
BIN
templates/.DS_Store
vendored
Normal file
Binary file not shown.
|
|
@ -1,55 +0,0 @@
|
|||
<div class="game">
|
||||
<div class="header">
|
||||
<div class="inning">
|
||||
Inning: 🔼 1/9
|
||||
</div>
|
||||
<div class="weather">
|
||||
🌟 Supernova
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="scores">
|
||||
<div class="team">
|
||||
<div class="team_name">Halifax Fire Sharks</div>
|
||||
<div class="score">0</div>
|
||||
</div>
|
||||
<div class="team">
|
||||
<div class="team_name">Dead Batteries</div>
|
||||
<div class="score">1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="field">
|
||||
<img class="base2" src="/static/img/base_filled.png"/>
|
||||
<div style="display: flex;">
|
||||
<img class="base3" src="/static/img/base_empty.png"/>
|
||||
<img class="base1" src="/static/img/base_empty.png"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outs">
|
||||
<div class="outs_title">OUTS</div>
|
||||
<div class="outs_count">
|
||||
<img class="out" src="/static/img/out_out.png"/>
|
||||
<img class="out" src="/static/img/out_in.png"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="players">
|
||||
<div class="player">
|
||||
<div class="player_type">Pitcher:</div>
|
||||
<div class="player_name">Hot Fish Summer</div>
|
||||
</div>
|
||||
<div class="player">
|
||||
<div class="player_type">Batter:</div>
|
||||
<div class="player_name">Shape Batteries</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="update">
|
||||
<div class="update_emoji">🏏</div>
|
||||
<div class="update_text">Shape Batteries grounds out to Honk For Santa.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="batting">Dead Batteries batting</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user