Redesign controller page
This commit is contained in:
maartenvn
parent
6dded0b1f2
commit
a07e105d47
4 changed files with 132 additions and 26 deletions
|
|
@ -8,23 +8,38 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Hud -->
|
||||
<div class="hud">
|
||||
<!-- State -->
|
||||
<div class="state">
|
||||
<p>Game state: <span id="gamestate"></span></p>
|
||||
|
||||
<button onclick="onStartButtonClick()">START</button>
|
||||
<button onclick="onRestartButtonClick()">RESTART</button>
|
||||
<div>
|
||||
<div>Game state: <span id="gamestate"></span></div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div>
|
||||
<button id="buttonStart" onclick="onStartButtonClick()">START</button>
|
||||
<button id="buttonRestart" onclick="onRestartButtonClick()">
|
||||
RESTART
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<!-- Timer -->
|
||||
<div class="center">
|
||||
<canvas id="display" width="1000" height="500">
|
||||
<div class="box center">
|
||||
<canvas id="display" width="1000" height="400">
|
||||
Timer should be here
|
||||
</canvas>
|
||||
</div>
|
||||
|
||||
<!-- Modules -->
|
||||
<div id="modules" class="center"></div>
|
||||
<div class="box center" style="margin-top: 2rem">
|
||||
<div class="box-header">Modules</div>
|
||||
|
||||
<div id="modules"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="/static/js/controller.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,108 @@
|
|||
@font-face {
|
||||
font-family: "digital";
|
||||
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/38273/digital-webfont.woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #222;
|
||||
color: #888;
|
||||
color: white;
|
||||
font-family: "digital", sans-serif;
|
||||
font-size: 32px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
background: #ddd;
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: 1.5rem;
|
||||
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 2px 2px #fff, inset -2px -2px #bbb,
|
||||
4px 4px rgba(0, 0, 0, 0.2);
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: default;
|
||||
color: #999999 !important;
|
||||
}
|
||||
|
||||
#buttonStart {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.hud {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 2rem 2rem;
|
||||
}
|
||||
|
||||
.hud-state {
|
||||
font-size: #bbbbbb;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.box {
|
||||
background: #000;
|
||||
border: 5px solid #4d4d4d;
|
||||
box-shadow: inset 0 0 0 10px #d6d6d6, 0 10px 0 -5px rgba(0, 0, 0, 0.2);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.box-header {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#display {
|
||||
display: inline;
|
||||
padding: 1rem 5rem;
|
||||
}
|
||||
|
||||
#modules div {
|
||||
#modules > div {
|
||||
display: inline-block;
|
||||
color: #111;
|
||||
font-size: 14pt;
|
||||
font-family: monospace;
|
||||
border-radius: 25%;
|
||||
padding: 20px;
|
||||
color: #333;
|
||||
background: #ddd;
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: 3rem;
|
||||
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 2px 2px #fff, inset -2px -2px #bbb,
|
||||
4px 4px rgba(0, 0, 0, 0.2);
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.solved {
|
||||
background-color: green;
|
||||
background-color: green !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.needy {
|
||||
background-color: grey;
|
||||
background-color: grey !important;
|
||||
}
|
||||
|
||||
.unsolved {
|
||||
background-color: yellow;
|
||||
background-color: yellow !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
*/
|
||||
const sounds = {
|
||||
strike: new Audio("/static/sounds/strike.mp3"),
|
||||
alarm: new Audio("/static/sounds/alarm.mp3"),
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -20,6 +21,9 @@ const state = {
|
|||
|
||||
// Amount of strikes (wrong answers) the player has made.
|
||||
strikes: 0,
|
||||
|
||||
// If the alarm has been played already
|
||||
alarmPlayed: false,
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -93,6 +97,7 @@ function updateGameState() {
|
|||
// Reset the strike amount if the game is not running anymore.
|
||||
if (state.gamestate != "GAME") {
|
||||
state.strikeAmount = 0;
|
||||
state.alarmPlayed = false;
|
||||
}
|
||||
|
||||
if (state.gamestate === "GAME") {
|
||||
|
|
@ -111,10 +116,22 @@ function updateGameState() {
|
|||
playSound(sounds.strike);
|
||||
}
|
||||
|
||||
// Play a "alarm" sound when the time is at 10 seconds.
|
||||
if (data.timeleft <= 20 && data.timeleft > 19 && !state.alarmPlayed) {
|
||||
playSound(sounds.alarm);
|
||||
state.alarmPlayed = true;
|
||||
}
|
||||
|
||||
// Update the total amount of strikes
|
||||
state.strikes = newStrikes;
|
||||
}
|
||||
|
||||
// Update the start/restart button visibility.
|
||||
const startButton = document.querySelector("#buttonStart");
|
||||
const restartButton = document.querySelector("#buttonRestart");
|
||||
startButton.disabled = state.gamestate !== "DISCOVER";
|
||||
restartButton.disabled = state.gamestate !== "GAMEOVER";
|
||||
|
||||
// Update the modules
|
||||
updateModules(data.puzzles);
|
||||
});
|
||||
|
|
@ -148,8 +165,8 @@ function initializeSegmentDisplay() {
|
|||
display.segmentDistance = display.digitHeight / 100;
|
||||
display.segmentCount = 7;
|
||||
display.cornerType = 1;
|
||||
display.colorOn = "#24dd22";
|
||||
display.colorOff = "#1b4105";
|
||||
display.colorOn = "#ff0000";
|
||||
display.colorOff = "#ff000022";
|
||||
display.draw();
|
||||
|
||||
// Update the segment
|
||||
|
|
|
|||
BIN
python/static/sounds/alarm.mp3
Normal file
BIN
python/static/sounds/alarm.mp3
Normal file
Binary file not shown.
Loading…
Reference in a new issue