aboutsummaryrefslogtreecommitdiff
path: root/utils
diff options
context:
space:
mode:
Diffstat (limited to 'utils')
-rw-r--r--utils/minesweeper/digital-7.ttfbin0 -> 34404 bytes
-rw-r--r--utils/minesweeper/index.html81
-rw-r--r--utils/minesweeper/script.js38
-rw-r--r--utils/minesweeper/style.css93
4 files changed, 128 insertions, 84 deletions
diff --git a/utils/minesweeper/digital-7.ttf b/utils/minesweeper/digital-7.ttf
new file mode 100644
index 0000000..a481b97
--- /dev/null
+++ b/utils/minesweeper/digital-7.ttf
Binary files differ
diff --git a/utils/minesweeper/index.html b/utils/minesweeper/index.html
index 546d0f8..c984ead 100644
--- a/utils/minesweeper/index.html
+++ b/utils/minesweeper/index.html
@@ -3,89 +3,19 @@
<html>
<head>
<title>cacharle - minesweeper</title>
- <link rel="stylesheet" type="text/css" href="../../style.css"/>
<meta charset="utf-8"/>
<link rel="icon" type="image/png" href="../../favicon.png" />
- <style>
- h1 {
- text-align: center;
- }
- td {
- padding: 0px;
- }
- table {
- margin: auto;
- margin-top: 0%;
- margin-bottom: 5%;
- border-collapse: collapse;
- border-spacing: 0px;
- }
- table td {
- width: 2.5em;
- height: 2.5em;
- }
- table button {
- display: block;
- background: lightgrey;
- margin: 0px;
- width: 100%;
- height: 100%;
- text-align: center;
- font-size: 1.6em;
- border-width: 6px;
- border-style: outset;
- border-radius: 0px;
- border-color: grey;
- }
- table button:hover {
- background: forestgreen;
- }
- table button.visited {
- background: lightgrey;
- border-style: solid;
- border-width: 1px;
- }
- button {
- font-weight: bold;
- }
-
- label,
- input {
- display: inline-block;
- }
- label {
- width: 13%;
- text-align: right;
- }
- input {
- width: 40%;
- margin: 0px;
- }
- button.game-state {
- float: right;
- margin-right: 20%;
- font-size: 2em;
- text-transform: uppercase;
- }
- #minesweeper-timer {
- display: block;
- font-weight: bolder;
- text-align: center;
-
- }
-
- </style>
+ <link rel="stylesheet" type="text/css" href="../../style.css"/>
+ <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body><div id="page-wrapper">
<h1>minesweeper</h1>
-
<table id="minesweeper-table">
</table>
<div id="minesweeper-settings">
- <button id="minesweeper-start" class="game-state">start</button>
<div>
<label for="width">width</label>
<input id="minesweeper-width" name="width" type="range" min="3" max="20" value="10"/>
@@ -99,9 +29,12 @@
<input id="minesweeper-mine-rate" name="mine-rate" type="range" min="0" max="100" value="20"/>
</div>
</div>
+
<div id="minesweeper-game-info" hidden>
- <button id="minesweeper-stop" class="game-state">stop</button>
- <div id="minesweeper-timer">timer</div>
+ <div>
+ <div id="minesweeper-timer">1:30</div>
+ <button id="minesweeper-stop" class="game-state">stop</button>
+ </div>
</div>
diff --git a/utils/minesweeper/script.js b/utils/minesweeper/script.js
index 059efdf..f19c7a2 100644
--- a/utils/minesweeper/script.js
+++ b/utils/minesweeper/script.js
@@ -1,7 +1,8 @@
-let height = 10
-let width = 10
-let mine_rate = 0.10
-let timer = undefined
+let height = 10
+let width = 10
+let mine_rate = 0.10
+let current_time = undefined
+let interval = undefined
let mines = []
let visited = []
@@ -90,7 +91,14 @@ function initGrid() {
let table_cell = document.createElement("td")
let cell = document.createElement("button")
cell.textContent = ""
- cell.addEventListener("click", () => floodFill(i, j))
+ cell.addEventListener("click", () => {
+ if (!running)
+ toggleRunning()
+ if (mines[i][j] === -1)
+ toggleRunning()
+ else
+ floodFill(i, j)
+ })
cells[i].push(cell)
table_cell.appendChild(cell)
table_row.appendChild(table_cell)
@@ -104,16 +112,26 @@ for (input of document.querySelectorAll("#minesweeper-settings input")) {
}
function toggleRunning() {
+ if (running) {
+ clearInterval(interval)
+ initGrid()
+ }
+ else {
+ let timer_elem = document.getElementById("minesweeper-timer")
+ current_time = 0
+ timer_elem.textContent = current_time
+ interval = setInterval(() => {
+ timer_elem.textContent = current_time
+ current_time++
+ }, 1000)
+ }
running = !running
- settings = document.getElementById("minesweeper-settings")
- info = document.getElementById("minesweeper-game-info")
+ let settings = document.getElementById("minesweeper-settings")
+ let info = document.getElementById("minesweeper-game-info")
settings.hidden = !settings.hidden
info.hidden = !info.hidden
- // if (timer === undefined) {
- // }
}
-document.getElementById("minesweeper-start").addEventListener("click", toggleRunning)
document.getElementById("minesweeper-stop") .addEventListener("click", toggleRunning)
initGrid()
diff --git a/utils/minesweeper/style.css b/utils/minesweeper/style.css
new file mode 100644
index 0000000..b9c6c1c
--- /dev/null
+++ b/utils/minesweeper/style.css
@@ -0,0 +1,93 @@
+@font-face {
+ font-family: "Digital-7";
+ src: url("digital-7.ttf");
+}
+
+h1 {
+ text-align: center;
+}
+
+td {
+ padding: 0px;
+}
+
+table {
+ margin: auto;
+ margin-top: 0;
+ margin-bottom: 5%;
+ border-collapse: collapse;
+ border-spacing: 0px;
+}
+
+table td {
+ width: 2.5em;
+ height: 2.5em;
+}
+
+table button {
+ display: block;
+ background: lightgrey;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ font-size: 1.6em;
+ border-width: 6px;
+ border-style: outset;
+ border-radius: 0px;
+ border-color: grey;
+}
+
+table button.visited {
+ background: lightgrey;
+ border-style: solid;
+ border-width: 1px;
+}
+
+button {
+ font-weight: bold;
+}
+
+label {
+ width: 15%;
+ text-align: right;
+}
+
+input {
+ width: 45%;
+ margin-left: 10px;
+}
+
+#minesweeper-settings div {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 10px;
+}
+
+#minesweeper-game-info div {
+ display: flex;
+ justify-content: space-around;
+ margin: 0 30%;
+}
+
+#minesweeper-stop,
+#minesweeper-timer {
+ font-size: 2em;
+ text-transform: uppercase;
+}
+
+#minesweeper-timer {
+ min-width: 100px;
+ font-family: "Digital-7";
+ font-size: 3em;
+ display: block;
+ font-weight: bolder;
+ text-align: center;
+ background: black;
+ border: 2px;
+ border-color: white;
+ border-radius: 3px;
+ padding: 5px 10px;
+ margin: 0 !important;
+}
generated by cgit (git 2.34.1) at 2026-05-16 08:49:57 +0000