aboutsummaryrefslogtreecommitdiff
path: root/utils/minesweeper
diff options
context:
space:
mode:
authorCharles Cabergs <me@cacharle.xyz>2020-11-07 18:20:08 +0100
committerCharles Cabergs <me@cacharle.xyz>2020-11-07 18:20:08 +0100
commitd656de03fc22e5b39117087ef4e95cfc9f239708 (patch)
tree68413f4bdf9dffcd89288fc5f4eb939b495ac6af /utils/minesweeper
parent4a890dad70bed4fa158f0607ee44fa5f02502b9c (diff)
downloadcacharle.xyz-d656de03fc22e5b39117087ef4e95cfc9f239708.tar.gz
cacharle.xyz-d656de03fc22e5b39117087ef4e95cfc9f239708.tar.bz2
cacharle.xyz-d656de03fc22e5b39117087ef4e95cfc9f239708.zip
Added mine flagging, lost and won flash messages, won detection
Diffstat (limited to 'utils/minesweeper')
-rw-r--r--utils/minesweeper/flag.svg45
-rw-r--r--utils/minesweeper/index.html2
-rw-r--r--utils/minesweeper/script.js55
-rw-r--r--utils/minesweeper/style.css26
4 files changed, 122 insertions, 6 deletions
diff --git a/utils/minesweeper/flag.svg b/utils/minesweeper/flag.svg
new file mode 100644
index 0000000..7ebc51c
--- /dev/null
+++ b/utils/minesweeper/flag.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#FC495C;" d="M427.155,206l37.772-94.429c1.849-4.622,1.284-9.859-1.506-13.98C460.63,93.469,455.977,91,451,91
+ H261c-8.284,0-15,6.716-15,15v135h-35c-8.284,0-15,6.716-15,15v50c0,8.284,6.716,15,15,15h240c4.978,0,9.63-2.469,12.421-6.591
+ c2.791-4.121,3.355-9.358,1.506-13.98L427.155,206z"/>
+<path style="fill:#D12657;" d="M210.997,321c-1.932,0-3.881-0.373-5.737-1.142c-5.605-2.322-9.26-7.791-9.26-13.858v-50
+ c0-8.284,6.716-15,15-15h50c6.067,0,11.537,3.654,13.858,9.26c2.321,5.605,1.038,12.057-3.252,16.347l-50,50
+ C218.737,319.477,214.9,321,210.997,321z"/>
+<path style="fill:#FD6B82;" d="M261,41H61c-8.284,0-15,6.716-15,15v200c0,8.284,6.716,15,15,15h200c8.284,0,15-6.716,15-15V56
+ C276,47.716,269.284,41,261,41z"/>
+<path style="fill:#A4B0BE;" d="M61,512c-8.284,0-15-6.716-15-15V15c0-8.284,6.716-15,15-15s15,6.716,15,15v482
+ C76,505.284,69.284,512,61,512z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/utils/minesweeper/index.html b/utils/minesweeper/index.html
index c984ead..a5ece6b 100644
--- a/utils/minesweeper/index.html
+++ b/utils/minesweeper/index.html
@@ -12,6 +12,8 @@
<body><div id="page-wrapper">
<h1>minesweeper</h1>
+ <div id="flash-message" hidden>You lost in asdf seconds</div>
+
<table id="minesweeper-table">
</table>
diff --git a/utils/minesweeper/script.js b/utils/minesweeper/script.js
index f19c7a2..3bc23f4 100644
--- a/utils/minesweeper/script.js
+++ b/utils/minesweeper/script.js
@@ -51,6 +51,21 @@ function floodFill(y, x) {
floodFill(ny, nx)
}
+const timer_node = document.getElementById("minesweeper-timer")
+
+const flash_message_node = document.getElementById("flash-message")
+flash_message_node.addEventListener("click", () => { flash_message_node.hidden = true })
+
+function endFlashMessage(won) {
+ flash_message_node.textContent =
+ `You ${won ? "won" : "lost"} in ${timer_node.textContent} seconds`
+ flash_message_node.classList.remove("flash-won")
+ flash_message_node.classList.remove("flash-lost")
+ flash_message_node.classList.add(won ? "flash-won" : "flash-lost")
+ flash_message_node.hidden = false;
+ setTimeout(() => { flash_message_node.hidden = true }, 5000)
+}
+
function initGrid() {
let table = document.getElementById("minesweeper-table")
table.innerHTML = ""
@@ -94,10 +109,39 @@ function initGrid() {
cell.addEventListener("click", () => {
if (!running)
toggleRunning()
- if (mines[i][j] === -1)
+ if (cell.classList.contains("flagged")) {
+ cell.classList.remove("flagged")
+ return
+ }
+ if (mines[i][j] === -1) {
+ endFlashMessage(false)
toggleRunning()
- else
+ }
+ else {
floodFill(i, j)
+ won = true;
+ for (let y = 0; y < width; y++) {
+ for (let x = 0; x < width; x++) {
+ if (mines[y][x] !== -1 && !cells[y][x].classList.contains("visited"))
+ won = false
+ }
+ }
+ if (won) {
+ endFlashMessage(true)
+ toggleRunning()
+ }
+ }
+ })
+ cell.addEventListener("contextmenu", event => {
+ event.preventDefault()
+ if (!running)
+ toggleRunning()
+ if (cell.classList.contains("visited"))
+ return
+ if (cell.classList.contains("flagged"))
+ cell.classList.remove("flagged")
+ else
+ cell.classList.add("flagged")
})
cells[i].push(cell)
table_cell.appendChild(cell)
@@ -117,11 +161,10 @@ function toggleRunning() {
initGrid()
}
else {
- let timer_elem = document.getElementById("minesweeper-timer")
current_time = 0
- timer_elem.textContent = current_time
+ timer_node.textContent = current_time
interval = setInterval(() => {
- timer_elem.textContent = current_time
+ timer_node.textContent = current_time
current_time++
}, 1000)
}
@@ -132,6 +175,6 @@ function toggleRunning() {
info.hidden = !info.hidden
}
-document.getElementById("minesweeper-stop") .addEventListener("click", toggleRunning)
+document.getElementById("minesweeper-stop").addEventListener("click", toggleRunning)
initGrid()
diff --git a/utils/minesweeper/style.css b/utils/minesweeper/style.css
index b9c6c1c..7d2a0b1 100644
--- a/utils/minesweeper/style.css
+++ b/utils/minesweeper/style.css
@@ -44,6 +44,10 @@ table button.visited {
border-width: 1px;
}
+table button.flagged {
+ background: url("flag.svg");
+}
+
button {
font-weight: bold;
}
@@ -91,3 +95,25 @@ input {
padding: 5px 10px;
margin: 0 !important;
}
+
+#flash-message {
+ padding: 10px;
+ border: solid;
+ border-width: 2px;
+ border-radius: 7px;
+ margin: auto;
+ width: 50%;
+ margin-bottom: 30px;
+ text-align: center;
+}
+
+#flash-message.flash-won {
+ background: #2e7d32;
+ border-color: #1b5e20;
+}
+
+#flash-message.flash-lost {
+ background: #c62828;
+ border-color: #b71c1c;
+}
+
generated by cgit (git 2.34.1) at 2026-05-16 02:51:07 +0000