interstellar_development/interstellar_website
3
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: interstellar_development:465ed64ba489e99a0c30cc632d2258079f91d86f
Branches Tags
interstellar_development:main
...
compare: interstellar_development:11087d4935bea0f4b6dd03d443c08ec1b45b7a47
Branches Tags
interstellar_development:main

3 commits
465ed64ba4 ... 11087d4935

Author SHA1 Message Date
Patrick
11087d4935 Merge pull request 'main' (#21) from sageTheDm/pages:main into main 
Reviewed-on: https://interstellardevelopment.org/code/code/interstellar_development/interstellar_website/pulls/21
 2025-01-05 00:14:17 +01:00
sageTheDM
c8ba7b494f what the hell 2025-01-05 00:13:09 +01:00
sageTheDm
ece497e2cf Merge pull request 'main' (#2) from interstellar_development/interstellar_website:main into main 
Reviewed-on: https://interstellardevelopment.org/code/code/sageTheDm/pages/pulls/2
 2025-01-04 22:41:01 +01:00
3 changed files with 113 additions and 61 deletions
Show stats Expand all files Collapse all files

11
secret/mineSweeper/index.html
View file

@ -10,13 +10,20 @@
<body> <body>
<div id="settings"> <div id="settings">
<h1>Minesweeper</h1>
<label for="gridSize">Grid Size:</label> <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> <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> <button id="startGame">Start Game</button>
</div> </div>
<div class="container">
<canvas id="game"></canvas> <canvas id="game"></canvas>
</div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>

50
secret/mineSweeper/script.js
View file

@ -1,27 +1,12 @@
// document.getElementById('startGame').addEventListener('click', function () { document.getElementById('startGame').addEventListener('click', function () {
// // Get values from the inputs const gridSize = parseInt(document.getElementById('gridSize').value);
// const gridSize = parseInt(document.getElementById('gridSize').value); const bombs = parseInt(document.getElementById('bombs').value);
// const bombs = parseInt(document.getElementById('bombs').value);
// // Hide settings and show canvas document.getElementById('settings').style.display = 'none';
// document.getElementById('settings').style.display = 'none'; document.getElementById('game').style.display = 'block';
// document.getElementById('game').style.display = 'block';
// // Assuming renderGame is a function to draw the canvas or initiate the game renderGame(gridSize, bombs);
// 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);
// }
const canvas = document.getElementById('game'); const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
@ -117,7 +102,6 @@ class Minesweeper {
drawSquare(x, y, type) { drawSquare(x, y, type) {
ctx.lineWidth = 3; ctx.lineWidth = 3;
x += 2, y += 2;
let color1 = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9'; let color1 = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9';
let activeColor = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784'; let activeColor = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784';
ctx.fillStyle = type !== 0 ? activeColor : color1; ctx.fillStyle = type !== 0 ? activeColor : color1;
@ -127,7 +111,7 @@ class Minesweeper {
if (type != 1) { if (type != 1) {
const fontSize = this.size / 2; const fontSize = this.size / 2;
const number = this.getNearbyBombs(x - 2, y - 2); const number = this.getNearbyBombs(x, y);
let finalPrint; let finalPrint;
ctx.font = `${fontSize}px sans-serif`; ctx.font = `${fontSize}px sans-serif`;
ctx.fillStyle = '#000'; ctx.fillStyle = '#000';
@ -141,9 +125,9 @@ class Minesweeper {
drawField() { drawField() {
const squareWidth = window.innerWidth / (this.field.length + 4); const squareWidth = window.innerWidth / (this.field.length + 4);
const squareHeight = window.innerHeight / (this.field[0].length + 4); const squareHeight = window.innerHeight / (this.field[0].length + 4);
canvas.width = squareWidth * this.field.length; squareHeight > this.size ? this.size = squareWidth : this.size = squareHeight;
canvas.height = squareHeight * this.field[0].length; canvas.width = this.size * this.field.length;
squareHeight > squareWidth ? this.size = squareWidth : this.size = squareHeight; canvas.height = this.size * this.field[0].length;
const offsetX = (canvas.width - (this.field.length * this.size)) / 2; const offsetX = (canvas.width - (this.field.length * this.size)) / 2;
const offsetY = (canvas.height - (this.field[0].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); const renderGame = (gridSize, bombs) => {
let field = new Minesweeper(gridSize, gridSize, bombs);
window.addEventListener('resize', () => field.drawField()); window.addEventListener('resize', () => field.drawField());
canvas.addEventListener('click', (event) => { canvas.addEventListener('click', (event) => {
const rect = canvas.getBoundingClientRect(); const rect = canvas.getBoundingClientRect();
const x = Math.floor((event.clientX - rect.left - field.size * 2) / field.size); const x = Math.floor((event.clientX - rect.left) / field.size);
const y = Math.floor((event.clientY - rect.top - field.size * 2) / field.size); const y = Math.floor((event.clientY - rect.top) / field.size);
field.uncoverSquare(x, y); field.uncoverSquare(x, y);
}); });
canvas.addEventListener('contextmenu', (event) => { canvas.addEventListener('contextmenu', (event) => {
event.preventDefault(); event.preventDefault();
const rect = canvas.getBoundingClientRect(); const rect = canvas.getBoundingClientRect();
const x = Math.floor((event.clientX - rect.left - field.size * 2) / field.size); const x = Math.floor((event.clientX - rect.left) / field.size);
const y = Math.floor((event.clientY - rect.top - field.size * 2) / field.size); const y = Math.floor((event.clientY - rect.top) / field.size);
field.markSquare(x, y); field.markSquare(x, y);
}); });
};

91
secret/mineSweeper/styles.css
View file

@ -4,46 +4,105 @@
box-sizing: border-box; box-sizing: border-box;
} }
body { body,
font-family: 'Arial', sans-serif; html {
background-color: #f0f0f0; height: 100%;
color: #333;
margin: 0; 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 { #settings {
margin: 20px; display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: 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 { label {
margin-right: 10px; margin-bottom: 12px;
font-size: 20px;
color: #d1d1d1;
} }
input { input[type="number"],
padding: 5px; input[type="range"] {
margin-right: 10px; padding: 12px;
width: 60px; margin-bottom: 20px;
width: 100%;
max-width: 400px;
text-align: center; 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 { button {
padding: 8px 16px; padding: 12px 24px;
background-color: #007bff; background-color: #007bff;
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 6px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease, transform 0.2s ease;
font-size: 18px;
} }
button:hover { button:hover {
background-color: #0056b3; background-color: #0056b3;
transform: translateY(-2px);
}
button:active {
transform: translateY(0);
} }
canvas { canvas {
display: none; display: none;
margin: 20px auto; height: 69vh;
border: 1px solid #ccc; }
@media(max-width: 600px) {
#settings {
font-size: 16px;
}
input[type="number"],
input[type="range"],
button {
width: 90%;
max-width: none;
}
canvas {
height: 50vh;
}
} }