diff --git a/chopin.sh b/chopin.sh
index 5ec3576..ff2c741 160000
--- a/chopin.sh
+++ b/chopin.sh
@@ -1 +1 @@
-Subproject commit 5ec3576f966a2dfa27b8ae700954331153205f5a
+Subproject commit ff2c7412d6d08a07c50f81de18f5996f8c0a3c83
diff --git a/index.html b/index.html
index cd228bd..79003cb 100644
--- a/index.html
+++ b/index.html
@@ -6,8 +6,15 @@
-
-
+
+ Time
+ 0:00
+
+
+ Level
+ 1
+
+
diff --git a/main.js b/main.js
index d046877..54b9fe7 100644
--- a/main.js
+++ b/main.js
@@ -7,13 +7,25 @@ var mines_placed = false;
let cut_sound = new Audio("./res/scissor_cut.wav");
let dig_sound = new Audio("./res/dig.wav");
var t0; // When did the player click for the first time?
+let ui_timer;
minefield_initialize();
+// Used for the displayed timer. It's more or less how much time you
+// took, but the final time is calculated from a date.
+function start_ui_timer() {
+ ui_timer = window.setInterval(function () {
+ var time = new Date(new Date() - t0);
+ var t = (time.getMinutes() + ":").padStart(2, '0') + ("" + (time.getSeconds())).padStart(2, '0');
+ $("#time").innerText = t;
+ }, 1000);
+}
+
function cell_onclick() {
if (!mines_placed) {
place_mines(this.x, this.y);
t0 = new Date();
+ start_ui_timer();
}
if (this.classList.contains("unknown") && !this.classList.contains("flagged")) {
if (this.classList.contains("mine")) {
@@ -80,12 +92,11 @@ function check_victory() {
// If we get here, we've won
var time = new Date(new Date() - t0);
var t = (time.getMinutes() + ":").padStart(2, '0') + ("" + (time.getSeconds())).padStart(2, '0');
+ window.clearInterval (ui_timer);
let promise = window.webxdc.sendUpdate({
payload: {},
info: window.webxdc.selfName + " cleaned up all the mines in " + t + "!"
}, window.webxdc.selfName + " won a game of Minesweeper");
- $("#newgame").style.display = "block";
- $("#result").innerText = "Finished in " + t;
return true;
}
@@ -133,6 +144,7 @@ function reveal_mines(cell) {
}
function lose_game() {
+ window.clearInterval (ui_timer);
$$("#minefield div").forEach(function(cell) {
cell.classList.remove("unknown");
cell.classList.add("known");
@@ -141,5 +153,4 @@ function lose_game() {
cell.innerText = "";
}
});
- $("#newgame").style.display = "block";
-}
\ No newline at end of file
+}
diff --git a/style.css b/style.css
index 25c4f9c..328775f 100644
--- a/style.css
+++ b/style.css
@@ -4,7 +4,7 @@
@media (orientation: landscape) {
#minefield {
- width: 35% !important;;
+ width: 35% !important;
}
}
@@ -15,6 +15,7 @@ body {
background: gray;
display: flex;
justify-content: center;
+ font-family: Sans;
}
#top-bar {
@@ -22,6 +23,24 @@ body {
width: 100vw;
height: var(--top-bar-height);
background: rgba(0, 0, 0, 0.5);
+ display: flex;
+}
+
+#top-bar > div {
+ flex: 1;
+ display: flex;
+ flex-flow: column;
+}
+
+#top-bar > div > * {
+ text-align: center;
+ color: white;
+ padding: 8px;
+}
+
+.data {
+ flex: 1;
+ align-content: center;
}
#minefield {
@@ -42,6 +61,7 @@ body {
-webkit-text-stroke: 1px white;
text-align: center;
font-size: 2em;
+ margin: 3px;
}
.unknown, .known { background-size: cover; }