-
Game state:
+
+
+
+
-
-
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
-
-
+
+
+
diff --git a/python/static/css/controller.css b/python/static/css/controller.css
index 0362408..f500b47 100644
--- a/python/static/css/controller.css
+++ b/python/static/css/controller.css
@@ -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;
}
diff --git a/python/static/js/controller.js b/python/static/js/controller.js
index 7451a5a..65918da 100644
--- a/python/static/js/controller.js
+++ b/python/static/js/controller.js
@@ -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
diff --git a/python/static/sounds/alarm.mp3 b/python/static/sounds/alarm.mp3
new file mode 100644
index 0000000..4e2349f
Binary files /dev/null and b/python/static/sounds/alarm.mp3 differ