From c8ba7b494f04be6ff4799080bd3d1d344f26fa76 Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Sun, 5 Jan 2025 00:13:09 +0100
Subject: [PATCH] what the hell
---
secret/mineSweeper/index.html | 13 +++--
secret/mineSweeper/script.js | 70 +++++++++++----------------
secret/mineSweeper/styles.css | 91 +++++++++++++++++++++++++++++------
3 files changed, 113 insertions(+), 61 deletions(-)
diff --git a/secret/mineSweeper/index.html b/secret/mineSweeper/index.html
index c393c43..9109ff7 100644
--- a/secret/mineSweeper/index.html
+++ b/secret/mineSweeper/index.html
@@ -10,13 +10,20 @@
<body>
<div id="settings">
+ <h1>Minesweeper</h1>
<label for="gridSize">Grid Size:</label>
- <input type="number" id="gridSize" min="1" value="18">
+ <input type="number" id="gridSize" min="1" max="25" value="9" aria-label="Grid Size">
+
<label for="bombs">Number of Bombs:</label>
- <input type="number" id="bombs" min="1" value="54">
+ <input type="range" id="bombs" min="1" max="80" value="20" aria-label="Number of Bombs">
+
<button id="startGame">Start Game</button>
</div>
- <canvas id="game"></canvas>
+
+ <div class="container">
+ <canvas id="game"></canvas>
+ </div>
+
<script src="script.js"></script>
</body>
diff --git a/secret/mineSweeper/script.js b/secret/mineSweeper/script.js
index f37cb34..8945dd7 100644
--- a/secret/mineSweeper/script.js
+++ b/secret/mineSweeper/script.js
@@ -1,27 +1,12 @@
-// document.getElementById('startGame').addEventListener('click', function () {
-// // Get values from the inputs
-// const gridSize = parseInt(document.getElementById('gridSize').value);
-// const bombs = parseInt(document.getElementById('bombs').value);
+document.getElementById('startGame').addEventListener('click', function () {
+ const gridSize = parseInt(document.getElementById('gridSize').value);
+ const bombs = parseInt(document.getElementById('bombs').value);
-// // Hide settings and show canvas
-// document.getElementById('settings').style.display = 'none';
-// document.getElementById('game').style.display = 'block';
+ document.getElementById('settings').style.display = 'none';
+ document.getElementById('game').style.display = 'block';
-// // Assuming renderGame is a function to draw the canvas or initiate the game
-// renderGame(gridSize, bombs);
-// });
-
-// function renderGame(gridSize, bombs) {
-// // Placeholder for actual game rendering logic
-// const canvas = document.getElementById('game');
-// const ctx = canvas.getContext('2d');
-// canvas.width = gridSize * 20; // Assuming gridSize affects canvas size
-// canvas.height = gridSize * 20;
-
-// // Draw grid or bombs based on input values
-// ctx.fillStyle = '#007bff';
-// ctx.fillRect(0, 0, canvas.width, canvas.height);
-// }
+ renderGame(gridSize, bombs);
+});
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
@@ -117,7 +102,6 @@ class Minesweeper {
drawSquare(x, y, type) {
ctx.lineWidth = 3;
- x += 2, y += 2;
let color1 = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9';
let activeColor = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784';
ctx.fillStyle = type !== 0 ? activeColor : color1;
@@ -127,7 +111,7 @@ class Minesweeper {
if (type != 1) {
const fontSize = this.size / 2;
- const number = this.getNearbyBombs(x - 2, y - 2);
+ const number = this.getNearbyBombs(x, y);
let finalPrint;
ctx.font = `${fontSize}px sans-serif`;
ctx.fillStyle = '#000';
@@ -141,9 +125,9 @@ class Minesweeper {
drawField() {
const squareWidth = window.innerWidth / (this.field.length + 4);
const squareHeight = window.innerHeight / (this.field[0].length + 4);
- canvas.width = squareWidth * this.field.length;
- canvas.height = squareHeight * this.field[0].length;
- squareHeight > squareWidth ? this.size = squareWidth : this.size = squareHeight;
+ squareHeight > this.size ? this.size = squareWidth : this.size = squareHeight;
+ canvas.width = this.size * this.field.length;
+ canvas.height = this.size * this.field[0].length;
const offsetX = (canvas.width - (this.field.length * this.size)) / 2;
const offsetY = (canvas.height - (this.field[0].length * this.size)) / 2;
@@ -156,18 +140,20 @@ class Minesweeper {
}
}
-let field = new Minesweeper(18, 18, 54);
-window.addEventListener('resize', () => field.drawField());
-canvas.addEventListener('click', (event) => {
- const rect = canvas.getBoundingClientRect();
- const x = Math.floor((event.clientX - rect.left - field.size * 2) / field.size);
- const y = Math.floor((event.clientY - rect.top - field.size * 2) / field.size);
- field.uncoverSquare(x, y);
-});
-canvas.addEventListener('contextmenu', (event) => {
- event.preventDefault();
- const rect = canvas.getBoundingClientRect();
- const x = Math.floor((event.clientX - rect.left - field.size * 2) / field.size);
- const y = Math.floor((event.clientY - rect.top - field.size * 2) / field.size);
- field.markSquare(x, y);
-});
+const renderGame = (gridSize, bombs) => {
+ let field = new Minesweeper(gridSize, gridSize, bombs);
+ window.addEventListener('resize', () => field.drawField());
+ canvas.addEventListener('click', (event) => {
+ const rect = canvas.getBoundingClientRect();
+ const x = Math.floor((event.clientX - rect.left) / field.size);
+ const y = Math.floor((event.clientY - rect.top) / field.size);
+ field.uncoverSquare(x, y);
+ });
+ canvas.addEventListener('contextmenu', (event) => {
+ event.preventDefault();
+ const rect = canvas.getBoundingClientRect();
+ const x = Math.floor((event.clientX - rect.left) / field.size);
+ const y = Math.floor((event.clientY - rect.top) / field.size);
+ field.markSquare(x, y);
+ });
+};
diff --git a/secret/mineSweeper/styles.css b/secret/mineSweeper/styles.css
index a2cbba2..e9155df 100644
--- a/secret/mineSweeper/styles.css
+++ b/secret/mineSweeper/styles.css
@@ -4,46 +4,105 @@
box-sizing: border-box;
}
-body {
- font-family: 'Arial', sans-serif;
- background-color: #f0f0f0;
- color: #333;
+body,
+html {
+ height: 100%;
margin: 0;
- padding: 0;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #121212;
+ color: #e0e0e0;
}
#settings {
- margin: 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
text-align: center;
+ margin: auto;
+ background-color: #1e1e1e;
+ padding: 40px;
+ border-radius: 12px;
+ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
+ width: 100%;
+ max-width: 600px;
+}
+
+h1 {
+ font-size: 2.5em;
+ margin-bottom: 20px;
+ color: #007bff;
}
label {
- margin-right: 10px;
+ margin-bottom: 12px;
+ font-size: 20px;
+ color: #d1d1d1;
}
-input {
- padding: 5px;
- margin-right: 10px;
- width: 60px;
+input[type="number"],
+input[type="range"] {
+ padding: 12px;
+ margin-bottom: 20px;
+ width: 100%;
+ max-width: 400px;
text-align: center;
+ border: 1px solid #444;
+ border-radius: 6px;
+ background-color: #333;
+ color: #e0e0e0;
+ font-size: 18px;
+ transition: border-color 0.3s ease;
+}
+
+input[type="number"]:focus,
+input[type="range"]:focus {
+ border-color: #007bff;
+ outline: none;
}
button {
- padding: 8px 16px;
+ padding: 12px 24px;
background-color: #007bff;
color: white;
border: none;
- border-radius: 4px;
+ border-radius: 6px;
cursor: pointer;
- transition: background-color 0.3s ease;
+ transition: background-color 0.3s ease, transform 0.2s ease;
+ font-size: 18px;
}
button:hover {
background-color: #0056b3;
+ transform: translateY(-2px);
+}
+
+button:active {
+ transform: translateY(0);
}
canvas {
display: none;
- margin: 20px auto;
- border: 1px solid #ccc;
+ height: 69vh;
+}
+
+@media(max-width: 600px) {
+ #settings {
+ font-size: 16px;
+ }
+
+ input[type="number"],
+ input[type="range"],
+ button {
+ width: 90%;
+ max-width: none;
+ }
+
+ canvas {
+ height: 50vh;
+ }
}