Extrapolate timer, show module state
This commit is contained in:
redfast00
parent
82d75d40f7
commit
415b77e80c
4 changed files with 102 additions and 26 deletions
|
|
@ -185,7 +185,7 @@ def status():
|
|||
status_dict['puzzles'] = [
|
||||
{'address': address.as_binary(), 'solved': state.solved if address.is_puzzle() else None, 'strikes': state.strike_amount}
|
||||
for address, state
|
||||
in serial_to_web.registered_modules.items()
|
||||
in sorted(serial_to_web.registered_modules.items(), key=(lambda kv: kv[0].as_binary()))
|
||||
]
|
||||
print(status_dict)
|
||||
return jsonify(status_dict)
|
||||
|
|
|
|||
34
python/static/controller.css
Normal file
34
python/static/controller.css
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
body {
|
||||
background: #222;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#display {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#modules div {
|
||||
display: inline-block;
|
||||
color: #111;
|
||||
font-size: 14pt;
|
||||
font-family: monospace;
|
||||
border-radius: 25%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.solved {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.needy {
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.unsolved {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
|
@ -4,18 +4,20 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OBUS controller</title>
|
||||
<link rel="stylesheet" href="/static/7sgd.css">
|
||||
<link rel="stylesheet" href="/static/controller.css">
|
||||
</head>
|
||||
|
||||
<body style="background: #222; color: #888">
|
||||
<p>Timer: <div id="timeleft"></div></p>
|
||||
<p>Game state: <div id="gamestate"></div></p>
|
||||
<body>
|
||||
<p>Game state: <span id="gamestate"></span></p>
|
||||
|
||||
<button onclick="startbutton()">START</button>
|
||||
<button onclick="restartbutton()">RESTART</button>
|
||||
<script src="static/controller.js"></script>
|
||||
|
||||
<canvas id="display" width="700">Timer should be here</canvas>
|
||||
<div class="center">
|
||||
<canvas id="display" width="1000" height="500">Timer should be here</canvas>
|
||||
</div>
|
||||
<script type="text/javascript" src="/static/segment-display.js"></script>
|
||||
<div id="modules" class="center"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
var estimated_timeout_date;
|
||||
var display;
|
||||
var laststate;
|
||||
let estimated_timeout_date;
|
||||
let display;
|
||||
let gamestate;
|
||||
let last_strike_amount = 0;
|
||||
let strike_audio = new Audio('/static/strike.mp3');
|
||||
strike_audio.preload = 'auto';
|
||||
let last_puzzle_state = []
|
||||
|
||||
function startbutton() {
|
||||
fetch('/start');
|
||||
|
|
@ -11,18 +15,43 @@ function restartbutton() {
|
|||
}
|
||||
|
||||
function updateDisplay() {
|
||||
if (laststate != 'GAME' || !estimated_timeout_date) {
|
||||
if (gamestate != 'GAME' || !estimated_timeout_date) {
|
||||
return;
|
||||
}
|
||||
setTimeleft((estimated_timeout_date - (new Date()))/1000);
|
||||
}
|
||||
|
||||
setTimeleft((estimated_timeout_date - (new Date())) * 1000);
|
||||
function updateModuleState(data) {
|
||||
if (data.gamestate == 'INACTIVE' || data.gamestate == 'INFO') {
|
||||
document.getElementById("modules").innerHTML = '';
|
||||
}
|
||||
else {
|
||||
let newmodulestate = [];
|
||||
for (const puzzlestate of data.puzzles) {
|
||||
let modulediv = document.createElement('div');
|
||||
modulediv.textContent = puzzlestate.address;
|
||||
if (puzzlestate.solved === true) {
|
||||
modulediv.className = "solved";
|
||||
} else if (puzzlestate.solved === false) {
|
||||
modulediv.className = "unsolved";
|
||||
} else if (puzzlestate.solved === null) {
|
||||
modulediv.className = "needy";
|
||||
}
|
||||
newmodulestate.push(modulediv);
|
||||
}
|
||||
document.getElementById("modules").replaceChildren(...newmodulestate);
|
||||
}
|
||||
}
|
||||
|
||||
function setTimeleft(timeleft) {
|
||||
var integral = Math.floor(timeleft);
|
||||
var fractional = timeleft - integral;
|
||||
var minutes = Math.floor(integral / 60);
|
||||
var seconds = integral % 60;
|
||||
if (timeleft <= 0) {
|
||||
display.setValue('00:00.0');
|
||||
return
|
||||
}
|
||||
let integral = Math.floor(timeleft);
|
||||
let fractional = timeleft - integral;
|
||||
let minutes = Math.floor(integral / 60);
|
||||
let seconds = integral % 60;
|
||||
display.setValue(String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0') + '.' + String(Math.floor(fractional * 10)));
|
||||
}
|
||||
|
||||
|
|
@ -36,14 +65,24 @@ function state_update() {
|
|||
return;
|
||||
}
|
||||
response.json().then(function(data) {
|
||||
document.getElementById('gamestate').innerHTML = data['gamestate'];
|
||||
laststate = data['gamestate'];
|
||||
if (data['gamestate'] == 'GAME') {
|
||||
// TODO maybe smooth this with the previous value of estimated_timeout_date?
|
||||
var new_estimate = new Date();
|
||||
new_estimate.setSeconds(new_estimate.getSeconds() + data['timeleft']);
|
||||
estimated_timeout_date = new_estimate;
|
||||
gamestate = data.gamestate;
|
||||
document.getElementById('gamestate').innerHTML = gamestate;
|
||||
if (gamestate != 'GAME') {
|
||||
last_strike_amount = 0;
|
||||
}
|
||||
else if (gamestate == 'GAME') {
|
||||
// TODO maybe smooth this with the previous value of estimated_timeout_date?
|
||||
let new_estimate = new Date();
|
||||
new_estimate.setTime(new_estimate.getTime() + data.timeleft*1000);
|
||||
estimated_timeout_date = new_estimate;
|
||||
let total_strikes = data.puzzles.map(x => x.strikes).reduce((a, b) => a + b, 0);
|
||||
if (last_strike_amount < total_strikes) {
|
||||
strike_audio.load();
|
||||
strike_audio.play();
|
||||
}
|
||||
last_strike_amount = total_strikes;
|
||||
}
|
||||
updateModuleState(data);
|
||||
});
|
||||
}
|
||||
)
|
||||
|
|
@ -54,15 +93,16 @@ window.onload = function() {
|
|||
display = new SegmentDisplay("display");
|
||||
display.pattern = "##:##.#";
|
||||
display.displayAngle = 0;
|
||||
display.digitHeight = 26.5;
|
||||
display.digitHeight = 100;
|
||||
display.digitWidth = display.digitHeight / 2;
|
||||
display.digitDistance = 2.9;
|
||||
display.segmentWidth = 3;
|
||||
display.segmentDistance = 0.3;
|
||||
display.digitDistance = display.digitHeight / 10;
|
||||
display.segmentWidth = display.digitHeight / 10;
|
||||
display.segmentDistance = display.digitHeight / 100;
|
||||
display.segmentCount = 7;
|
||||
display.cornerType = 1;
|
||||
display.colorOn = "#24dd22";
|
||||
display.colorOff = "#1b4105";
|
||||
display.draw();
|
||||
display.draw();
|
||||
setInterval(updateDisplay, 100);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue