Merge pull request 'numberGuessingGame' (#20) from sageTheDm/pages:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/interstellar_development/interstellar_website/pulls/20
2025-01-04 22:33:56 +01:00 · 2025-01-04 22:33:56 +01:00 · 7f48a9bdc2
commit 7f48a9bdc2
parent 7a51b5a94a 61fba34857
13 changed files with 606 additions and 11 deletions
--- a/footer.js
+++ b/footer.js
@ -38,7 +38,7 @@ class Footer extends HTMLElement {

    // Add event listener for button click
    this.querySelector('.secret-button').addEventListener('click', () => {
-      window.location.href = 'secret/index.html'; // Open the secret.html file
+      window.open('secret/index.html', '_blank');
    });
  }
 }
--- a/secret/guessMyNumber/game.js
+++ b/secret/guessMyNumber/game.js
@ -0,0 +1,54 @@
+'use strict';
+
+const targetNum = Math.trunc(Math.random() * 20) + 1;
+let highScore = Number(localStorage.getItem('highscore')) || 0;
+let userGuess = 10;  // Default guess
+let currScore = 20;
+
+const screenEl = document.querySelector('.screen');
+const msgEl = document.querySelector('.message');
+const guessInput = document.querySelector('#guess');
+const scoreEl = document.querySelector('.score');
+const highScoreEl = document.querySelector('.highScore');
+const checkBtn = document.querySelector('#check');
+const restartBtn = document.querySelector('#restart');
+const incBtn = document.querySelector('#up');
+const decBtn = document.querySelector('#down');
+
+const setMsg = msg => msgEl.textContent = msg;
+const setScore = score => scoreEl.textContent = `Score: ${currScore = score}`;
+const setHighScore = () => {
+    highScoreEl.textContent = `Highscore: ${highScore}`;
+    localStorage.setItem('highscore', highScore);
+};
+const changeColor = color => screenEl.style.backgroundColor = color;
+
+checkBtn.addEventListener('click', () => {
+    userGuess = Number(guessInput.textContent);
+    if (!userGuess || userGuess < 1 || userGuess > 20) {
+        setMsg("Please enter a valid number between 1 and 20.");
+    } else if (userGuess === targetNum) {
+        highScore = Math.max(highScore, currScore);
+        setHighScore();
+        setMsg(currScore !== 20 ? 'Correct Number!' : 'Are you sure you didn\'t cheat?');
+        changeColor(currScore !== 20 ? '#1ba100' : '#FFC300');
+    } else {
+        setMsg(userGuess > targetNum ? 'Too High!' : 'Too Low!');
+        if (currScore > 1) {
+            setScore(currScore - 1);
+        } else {
+            setScore(1);
+            setMsg("You lost the game!");
+            changeColor('#a10000');
+        }
+    }
+});
+
+restartBtn.addEventListener('click', () => location.reload());
+incBtn.addEventListener('click', () => guessInput.textContent = Math.min(Number(guessInput.textContent) + 1, 20));
+decBtn.addEventListener('click', () => guessInput.textContent = Math.max(Number(guessInput.textContent) - 1, 1));
+
+guessInput.textContent = userGuess;
+setMsg('Guess a number');
+setScore(currScore);
+setHighScore();
--- a/secret/guessMyNumber/index.html
+++ b/secret/guessMyNumber/index.html
@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Guess My Number</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="gameboy">
+    <!-- Game Boy Screen -->
+    <div class="screen">
+      <article class="game">
+        <h1>Guess My Number - Game</h1>
+        <p class="message"></p>
+        <div class="guess-display">
+          <span id="guess"></span>
+        </div>
+        <p class="score"></p>
+        <p class="highScore"></p>
+        
+        <div class="description">
+            <h2>Description</h2>
+            <p>Guess a number between 1 and 20</p>
+            <p>A = check</p>
+            <p>B = Reload</p>
+            <p>▲ = increases guess by one</p>
+            <p>▼ = decreases guess by one</p>
+        </div>
+      </article>
+    </div>
+
+    <!-- Controls -->
+    <div class="controls">
+      <!-- D-Pad on the left -->
+      <div class="dpad">
+        <button class="dpad-btn up" id="up">▲</button>
+        <button class="dpad-btn left" id="left">◀</button>
+        <div class="dpad-center"></div>
+        <button class="dpad-btn right" id="right">▶</button>
+        <button class="dpad-btn down" id="down">▼</button>
+      </div>
+
+      <!-- A and B Buttons on the right -->
+      <div class="action-buttons">
+        <button class="btn" id="check">A</button>
+        <button class="btn" id="restart">B</button>
+      </div>
+    </div>
+  </div>
+  <script src="game.js"></script>
+  <script src="styles.js"></script>
+</body>
+</html>
--- a/secret/guessMyNumber/styles.css
+++ b/secret/guessMyNumber/styles.css
@ -0,0 +1,186 @@
+/* Base Reset */
+body, html {
+    margin: 0;
+    padding: 0;
+    font-family: monospace;
+    background-color: #3a2d56;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+/* GameBoy Layout */
+.gameboy {
+    background-color: #5f4c82; /* Game Boy Color purple shell */
+    width: 441px;
+    height: 735px;
+    border-radius: 20px;
+    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.6);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px;
+    position: relative;
+}
+
+@media (max-width: 768px) {
+    .gameboy {
+        width: 100vw;
+        height: 100vh;
+        border-radius: 0;
+    }
+}
+
+/* Screen */
+.screen {
+    background-color: #306230; /* Game Boy green screen */
+    border: 4px solid #0f380f;
+    width: 90%;
+    height: 55%;
+    margin-top: 20px;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.5);
+    overflow: hidden;
+}
+
+.game {
+    text-align: center;
+    width: 90%;
+}
+
+/* Titles */
+h1 {
+    font-size: 2rem;  /* Increased font size */
+    margin-bottom: 10px;
+    text-transform: uppercase;
+}
+
+/* Guess Display */
+.guess-display {
+    background-color: #9bbc0f;
+    color: #0f380f;
+    border: 2px solid #0f380f;
+    font-size: 2rem;  /* Increased font size */
+    width: 80px;  /* Increased width */
+    text-align: center;
+    margin: 10px auto;
+    padding: 10px;  /* Increased padding */
+    border-radius: 4px;
+}
+
+/* Messages */
+.message, .score, .highScore {
+    font-size: 1.4rem;  /* Increased font size */
+    margin: 5px 0;
+}
+
+.description,
+.description p{
+    font-size: 1.2rem;
+    margin: 0 auto;
+    padding: 0 auto;
+}
+
+/* Controls Section */
+.controls {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+    width: 80%;
+    align-items: center;
+}
+
+/* D-Pad */
+.dpad {
+    position: relative;
+    width: 120px;  /* Increased size */
+    height: 120px;  /* Increased size */
+}
+
+/* Base Styling for D-Pad Buttons */
+.dpad-btn {
+    background-color: #0f380f;
+    color: #9bbc0f;
+    border: none;
+    border-radius: 5px;
+    position: absolute;
+    width: 42px;
+    height: 42px;
+    font-size: 1.5rem;  /* Increased size */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    z-index: 1;
+}
+
+.dpad-btn.up {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.dpad-btn.down {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.dpad-btn.left {
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+}
+
+.dpad-btn.right {
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+}
+
+/* D-Pad Center to Connect Buttons */
+.dpad-center {
+    background-color: #0f380f;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 40px;
+    height: 40px;
+    border: 2px solid #9cbc0f00;
+    z-index: 0;
+    border-radius: 5px;
+}
+
+/* A and B Buttons */
+.action-buttons {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 140px;  /* Increased height */
+}
+
+.btn {
+    background-color: #0f380f;
+    color: #9bbc0f;
+    border: 2px solid #9bbc0f;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    font-size: 1.8rem;  /* Increased font size */
+    cursor: pointer;
+    transition: transform 0.1s, background-color 0.2s;
+}
+
+.btn:hover {
+    background-color: #9bbc0f;
+    color: #0f380f;
+}
+
+.btn:active {
+    transform: scale(0.9);
+}
--- a/secret/guessMyNumber/styles.js
+++ b/secret/guessMyNumber/styles.js
@ -0,0 +1,62 @@
+'use strict';
+const left = document.querySelector('#left');
+const right = document.querySelector('#right');
+const gameboy = document.querySelector('.gameboy');
+const html = document.documentElement;
+const body = document.body;
+const screen = document.querySelector('.screen');
+const dpadButtons = document.querySelectorAll('.dpad-btn');
+const dpadCenter = document.querySelector('.dpad-center'); // Darker variant
+const actionButtons = document.querySelectorAll('.btn');
+
+const colors = [
+    { gameboyColor: '#B39DDB', htmlColor: '#D1C4E9', screenColor: '#E1BEE7', buttonColor: '#673AB7', buttonTextColor: '#FFFFFF', dpadCenterColor: '#5E35B1' },
+    { gameboyColor: '#FFC107', htmlColor: '#FFF9C4', screenColor: '#FFEB3B', buttonColor: '#FF9800', buttonTextColor: '#000000', dpadCenterColor: '#EF6C00' },
+    { gameboyColor: '#8BC34A', htmlColor: '#C5E1A5', screenColor: '#A5D6A7', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#E64A19' },
+    { gameboyColor: '#F44336', htmlColor: '#FFCDD2', screenColor: '#EF9A9A', buttonColor: '#E91E63', buttonTextColor: '#FFFFFF', dpadCenterColor: '#C2185B' },
+    { gameboyColor: '#03A9F4', htmlColor: '#BBDEFB', screenColor: '#90CAF9', buttonColor: '#FFEB3B', buttonTextColor: '#000000', dpadCenterColor: '#0277BD' },
+    { gameboyColor: '#FF7043', htmlColor: '#FFCCBC', screenColor: '#FFAB91', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#D84315' },
+    { gameboyColor: '#9C27B0', htmlColor: '#E1BEE7', screenColor: '#D1C4E9', buttonColor: '#7B1FA2', buttonTextColor: '#FFFFFF', dpadCenterColor: '#6A1B9A' },
+    { gameboyColor: '#FFD700', htmlColor: '#FFF9C4', screenColor: '#FFF59D', buttonColor: '#FF9800', buttonTextColor: '#FFFFFF', dpadCenterColor: '#F57F17' },
+    { gameboyColor: '#009688', htmlColor: '#B2DFDB', screenColor: '#80CBC4', buttonColor: '#4CAF50', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00796B' },
+    { gameboyColor: '#795548', htmlColor: '#D7CCC8', screenColor: '#A1887F', buttonColor: '#9E9E9E', buttonTextColor: '#000000', dpadCenterColor: '#5D4037' },
+    { gameboyColor: '#FF5733', htmlColor: '#FFCCCB', screenColor: '#FFABAB', buttonColor: '#C70039', buttonTextColor: '#FFFFFF', dpadCenterColor: '#B71C1C' },
+    { gameboyColor: '#00BCD4', htmlColor: '#B2EBF2', screenColor: '#80DEEA', buttonColor: '#00ACC1', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00838F' }
+];
+
+let currentColorIndex = localStorage.getItem('gameboyColorIndex') ? parseInt(localStorage.getItem('gameboyColorIndex')) : 0;
+
+function updateGameBoyColor() {
+    gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor;
+    html.style.backgroundColor = colors[currentColorIndex].htmlColor;
+    body.style.backgroundColor = colors[currentColorIndex].htmlColor;
+    screen.style.backgroundColor = colors[currentColorIndex].screenColor;
+
+    dpadButtons.forEach(button => {
+        button.style.backgroundColor = colors[currentColorIndex].buttonColor;
+        button.style.color = colors[currentColorIndex].buttonTextColor;
+    });
+
+    // Using darker dpad center color
+    dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor;
+    dpadCenter.style.color = colors[currentColorIndex].buttonTextColor;
+
+    actionButtons.forEach(button => {
+        button.style.backgroundColor = colors[currentColorIndex].buttonColor;
+        button.style.color = colors[currentColorIndex].buttonTextColor;
+    });
+}
+
+left.addEventListener('click', () => {
+    currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length;
+    localStorage.setItem('gameboyColorIndex', currentColorIndex);
+    updateGameBoyColor();
+});
+
+right.addEventListener('click', () => {
+    currentColorIndex = (currentColorIndex + 1) % colors.length;
+    localStorage.setItem('gameboyColorIndex', currentColorIndex);
+    updateGameBoyColor();
+});
+
+updateGameBoyColor();
--- a/secret/images/background.jpg
+++ b/secret/images/background.jpg
--- a/secret/images/number.jpeg
+++ b/secret/images/number.jpeg
--- a/secret/index.html
+++ b/secret/index.html
@ -49,7 +49,7 @@
                    <p>Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.</p>
                </div>
            </a>
-            <a href="#" target="_blank" class="item">
+            <a href="guessMyNumber/index.html" target="_blank" class="item">
                <img src="images/number.jpeg" alt="Image can't be displayed">
                <h2>Guess My Number</h2>
                <div class="description">
--- a/secret/mineSweeper/index.html
+++ b/secret/mineSweeper/index.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Minesweeper</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <div id="settings">
+        <label for="gridSize">Grid Size:</label>
+        <input type="number" id="gridSize" min="1" value="18">
+        <label for="bombs">Number of Bombs:</label>
+        <input type="number" id="bombs" min="1" value="54">
+        <button id="startGame">Start Game</button>
+    </div>
+    <canvas id="game"></canvas>    
+    <script src="script.js"></script>
+</body>
+
+</html>
--- a/secret/mineSweeper/script.js
+++ b/secret/mineSweeper/script.js
@ -0,0 +1,173 @@
+// 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);
+
+//     // Hide settings and show canvas
+//     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);
+// }
+
+const canvas = document.getElementById('game');
+const ctx = canvas.getContext('2d');
+
+class Minesweeper {
+    constructor(w, h, bombs) {
+        this.size = 25;
+        this.field = new Array(w);
+        this.bombs = new Array(w);
+        for (let x = 0; x < this.field.length; x++) {
+            this.field[x] = new Array(h);
+            this.bombs[x] = new Array(h);
+            for (let y = 0; y < this.field.length; y++) {
+                this.field[x][y] = 1;
+                this.bombs[x][y] = false;
+            }
+        }
+
+        for (let i = 0; i < bombs; i++) {
+            let x = Math.floor(Math.random() * w);
+            let y = Math.floor(Math.random() * h);
+            this.bombs[x][y] ? i-- : this.bombs[x][y] = true;
+        }
+
+        this.drawField();
+    }
+
+    getNearbyBombs(x, y) {
+        let counter = 0;
+        for (let newX = x - 1; newX <= x + 1; newX++) {
+            for (let newY = y - 1; newY <= y + 1; newY++) {
+                if (newX < this.field.length && newX >= 0 && newY < this.field[0].length && newY >= 0) {
+                    this.bombs[newX][newY] ? counter++ : {};
+                }
+            }
+        }
+        return counter;
+    }
+
+    checkWin() {
+        for (let x = 0; x < this.field.length; x++) {
+            for (let y = 0; y < this.field[x].length; y++) {
+                if (this.field[x][y] != 0 && !this.bombs[x][y]) {
+                    return;
+                }
+            }
+        }
+        this.drawField();
+        alert("You won!");
+        window.location.reload();
+    }
+
+    markSquare(x, y) {
+        if (x < this.field.length && y < this.field[0].length) {
+            switch (this.field[x][y]) {
+                case 1:
+                    this.field[x][y]++;
+                    break;
+                case 2:
+                    this.field[x][y]++;
+                    break;
+                case 3:
+                    this.field[x][y] = 1;
+                    break;
+                default:
+                    break;
+            }
+            this.drawField();
+        }
+    }
+
+    uncoverSquare(x, y) {
+        if (x < this.field.length && x >= 0 && y < this.field[0].length && y >= 0) {
+            if (this.bombs[x][y] && this.field[x][y] == 1) {
+                alert("You lost!");
+                window.location.reload();
+            } else if (this.field[x][y] == 1) {
+                this.field[x][y] = 0;
+                if (this.getNearbyBombs(x, y) == 0) {
+                    for (let newX = x - 1; newX <= x + 1; newX++) {
+                        for (let newY = y - 1; newY <= y + 1; newY++) {
+                            if (newX < this.field.length && newX >= 0 && newY < this.field[0].length && newY >= 0) {
+                                this.field[newX][newY] == 1 ? this.uncoverSquare(newX, newY) : {};
+                            }
+                        }
+                    }
+                }
+            };
+            this.checkWin();
+            this.drawField();
+        }
+    }
+
+    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;
+        ctx.fillRect(x * this.size, y * this.size, this.size, this.size);
+        ctx.strokeStyle = '#000';
+        ctx.strokeRect(x * this.size, y * this.size, this.size, this.size);
+
+        if (type != 1) {
+            const fontSize = this.size / 2;
+            const number = this.getNearbyBombs(x - 2, y - 2);
+            let finalPrint;
+            ctx.font = `${fontSize}px sans-serif`;
+            ctx.fillStyle = '#000';
+            type == 0 ? finalPrint = number ? number : ' ' : {};
+            type == 2 ? finalPrint = '🚩' : {};
+            type == 3 ? finalPrint = '❓' : {};
+            ctx.fillText(finalPrint, x * this.size + fontSize / (type == 0 ? 1.5 : 1.8), y * this.size + fontSize * 1.3);
+        }
+    }
+
+    drawField() {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+        const squareWidth = canvas.width / (this.field.length + 4);
+        const squareHeight = canvas.height / (this.field[0].length + 4);
+        squareHeight > squareWidth ? this.size = squareWidth : this.size = squareHeight;
+
+        const offsetX = (canvas.width - (this.field.length * this.size)) / 2;
+        const offsetY = (canvas.height - (this.field[0].length * this.size)) / 2;
+
+        for (let x = 0; x < this.field.length; x++) {
+            for (let y = 0; y < this.field[x].length; y++) {
+                this.drawSquare(x, y, this.field[x][y], offsetX, offsetY);
+            }
+        }
+    }
+}
+
+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);
+});
--- a/secret/mineSweeper/styles.css
+++ b/secret/mineSweeper/styles.css
@ -0,0 +1,49 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #f0f0f0;
+    color: #333;
+    margin: 0;
+    padding: 0;
+}
+
+#settings {
+    margin: 20px;
+    text-align: center;
+}
+
+label {
+    margin-right: 10px;
+}
+
+input {
+    padding: 5px;
+    margin-right: 10px;
+    width: 60px;
+    text-align: center;
+}
+
+button {
+    padding: 8px 16px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+canvas {
+    display: none;
+    margin: 20px auto;
+    border: 1px solid #ccc;
+}
--- a/secret/styles.css
+++ b/secret/styles.css
@ -10,14 +10,8 @@ body {
    color: #b0b0b0;
    margin: 0;
    line-height: 1.6;
-    background-image: repeating-linear-gradient(
-        45deg,
-        #ffcc00 0%,
-        #ffcc00 10%,
-        #0d0d0d 10%,
-        #0d0d0d 20%
-    );
-    background-size: 20px 20px; /* Adjust size for tape appearance */
+    background-image: url('images/background.jpg');
+    background-size: cover /* Adjust size for tape appearance */
 }

 header {
--- a/webGames/index.html
+++ b/webGames/index.html
@ -34,7 +34,7 @@
                    <p>Uncover squares on a grid while avoiding hidden mines, using numbers to deduce safe spots.</p>
                </div>
            </a>
-            <a href="" target="_blank" class="item">
+            <a href="../secret/guessMyNumber/index.html" target="_blank" class="item">
                <img src="../secret/images/number.jpeg" alt="Image can't be displayed">
                <h2>Guess My Number</h2>
                <div class="description">