sageTheDm/pages
1
0
Fork 0
forked from interstellar_development/interstellar_website
Code Pull requests Activity

formatted like my Boss wants it (help!)

Browse source
This commit is contained in:
sageTheDM 2025-02-25 10:04:34 +01:00
parent 5d11f87dd3
commit b507a6b0ea
19 changed files with 1425 additions and 1136 deletions
Download patch file Download diff file Expand all files Collapse all files

87
secret/guessMyNumber/game.js
View file

@ -1,54 +1,65 @@
'use strict';
"use strict";
const targetNum = Math.trunc(Math.random() * 20) + 1;
let highScore = Number(localStorage.getItem('highscore')) || 0;
let userGuess = 10; // Default guess
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 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 setMsg = (msg) => (msgEl.textContent = msg);
const setScore = (score) =>
(scoreEl.textContent = `Score: ${(currScore = score)}`);
const setHighScore = () => {
highScoreEl.textContent = `Highscore: ${highScore}`;
localStorage.setItem('highscore', highScore);
highScoreEl.textContent = `Highscore: ${highScore}`;
localStorage.setItem("highscore", highScore);
};
const changeColor = color => screenEl.style.backgroundColor = color;
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');
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 {
setMsg(userGuess > targetNum ? 'Too High!' : 'Too Low!');
if (currScore > 1) {
setScore(currScore - 1);
} else {
setScore(1);
setMsg("You lost the game!");
changeColor('#a10000');
}
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));
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');
setMsg("Guess a number");
setScore(currScore);
setHighScore();

226
secret/guessMyNumber/styles.css
View file

@ -1,189 +1,189 @@
/* Base Reset */
body,
html {
margin: 0;
padding: 0;
font-family: monospace;
background-color: #3a2d56;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
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: 0 8px 16px rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
position: relative;
background-color: #5f4c82; /* Game Boy Color purple shell */
width: 441px;
height: 735px;
border-radius: 20px;
box-shadow: 0 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;
}
@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 0 4px 8px rgba(0, 0, 0, 0.5);
overflow: hidden;
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 0 4px 8px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.game {
text-align: center;
width: 90%;
text-align: center;
width: 90%;
}
/* Titles */
h1 {
font-size: 2rem; /* Increased font size */
margin-bottom: 10px;
text-transform: uppercase;
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;
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;
font-size: 1.4rem; /* Increased font size */
margin: 5px 0;
}
.description,
.description p {
font-size: 1.2rem;
margin: 0 auto;
padding: 0 auto;
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;
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 */
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;
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%);
top: 0;
left: 50%;
transform: translateX(-50%);
}
.dpad-btn.down {
bottom: 0;
left: 50%;
transform: translateX(-50%);
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.dpad-btn.left {
top: 50%;
left: 0;
transform: translateY(-50%);
top: 50%;
left: 0;
transform: translateY(-50%);
}
.dpad-btn.right {
top: 50%;
right: 0;
transform: translateY(-50%);
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;
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 */
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;
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;
background-color: #9bbc0f;
color: #0f380f;
}
.btn:active {
transform: scale(0.9);
transform: scale(0.9);
}

174
secret/guessMyNumber/styles.js
View file

@ -1,62 +1,148 @@
'use strict';
const left = document.querySelector('#left');
const right = document.querySelector('#right');
const gameboy = document.querySelector('.gameboy');
"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 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' }
{
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;
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;
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;
});
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;
// 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;
});
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();
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();
right.addEventListener("click", () => {
currentColorIndex = (currentColorIndex + 1) % colors.length;
localStorage.setItem("gameboyColorIndex", currentColorIndex);
updateGameBoyColor();
});
updateGameBoyColor();