Szopen_Interactif/minesweeper.xdc
3
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI tweaks, add visible game timer

Browse Source
This commit is contained in:
emil
2024-10-01 19:33:46 +02:00
parent f66a985a14
commit 5550827ce6
4 changed files with 46 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
chopin.sh
+1 -1
Submodule chopin.sh updated: 5ec3576f96...ff2c7412d6
index.html
+9 -2
View File
@@ -6,8 +6,15 @@
</head>
<body>
<div id="top-bar">
<p id="result"></p>
<button id="newgame" onclick="location.reload()" style="display:none;">New game</button>
<div id="time-container">
<span>Time</span>
<span class="data" id="time">0:00</span>
</div>
<div id="level-container">
<span>Level</span>
<span class="data">1</span>
</div>
<button id="newgame" onclick="location.reload()">New game</button>
</div>
<div id="minefield">
</div>
main.js
+15 -4
View File
@@ -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";
}
}
style.css
+21 -1
View File
@@ -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; }