miles/moon-gaming
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement dark mode support and enhance UI animations in settings page

Browse Source
This commit is contained in:
miles
2025-04-11 14:33:34 +00:00
parent 2b3563a0d1
commit 86f91e7216
3 changed files with 174 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebGames-master/WebGames-master/index.html
+6 -57
View File
@@ -203,7 +203,7 @@
<p>No games found</p>
</div>
<div class="game-container">
<div class="game">
<div class="game" style="opacity: 0; transform: translateY(-50px);">
<a href="/WebGames-master/WebGames-master/tic-tac-toe/index.html">
<img src="./assets/tic-tac-toe.png" alt="tic-tac-toe">
<div class="game-title">Tic Tac Toe</div>
@@ -777,7 +777,7 @@
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; cookies.length; i++) {
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
@@ -912,7 +912,7 @@
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; cookies.length; i++) {
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
@@ -921,56 +921,6 @@
return null;
}
// Wait for the page to fully load
window.onload = () => {
// Select all game elements
const games = document.querySelectorAll('.game');
// Hide all game elements initially
games.forEach(game => {
game.style.opacity = '0'; // Hide games
game.style.transform = 'scale(0.5) rotate(45deg)'; // Shrink and rotate
});
// Add a delay before starting the animation
setTimeout(() => {
anime({
targets: '.game',
opacity: [0, 1], // Fade in
scale: [0.5, 1], // Scale up
rotate: ['45deg', '0deg'], // Rotate back to normal
delay: anime.stagger(150), // Stagger animation for each card
duration: 1000, // Animation duration
easing: 'easeOutElastic(1, .8)', // Elastic easing for a bouncy effect
});
}, 100); // 2-second delay before animation starts
};
</script>
<script>
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
}
return null;
}
// Function to animate the "WEB GAMES" title
function animateTitle() {
anime({
targets: '#pageTitle',
opacity: [0, 1], // Fade in
scale: [0.8, 1], // Scale up
delay: 500, // Start after 500ms
duration: 1000, // Animation duration
easing: 'easeOutExpo', // Smooth easing
});
}
// Function to animate game elements
function animateGames() {
const games = document.querySelectorAll('.game');
@@ -996,10 +946,9 @@
// Trigger animations on page load if enabled
window.onload = () => {
if (gameAnimationEnabled) {
animateTitle();
animateGames();
}
};
// Toggle Game Animation Button Logic
const toggleGameAnimationButton = document.getElementById('toggleGame
</script>
</body>
</html>
index.html
+125 -85
View File
@@ -107,19 +107,17 @@
</style>
</head>
<body>
<h1>Moon Gaming</h1>
<div class="button-container">
<h1 style="opacity: 0;">Moon Gaming</h1>
<div class="button-container" style="opacity: 0;">
<button class="button" onclick="location.href='chatroom.html'">Chatroom</button>
<button class="button" onclick="location.href='setting.html'">Settings</button>
<button class="button" onclick="location.href='./WebGames-master/WebGames-master/index.html'">Games</button>
<button class="button" id="gamesComingSoonButton" onclick="location.href='./gametoadd.html'">Coming Soon</button>
</div>
<button class="calendar-button" style="opacity: 0;" onclick="location.href='cal.html'">Calendar</button>
<!-- Add a clock element to display date and time -->
<div id="clock" style="display: none; font-size: 1.5rem; margin-top: 20px;"></div>
<!-- Calendar Button -->
<button class="calendar-button" onclick="location.href='cal.html'">Calendar</button>
<div id="clock" style="opacity: 0; font-size: 1.5rem; margin-top: 20px;"></div>
<script>
// Utility function to set a cookie
@@ -141,30 +139,112 @@
return null;
}
// Apply dark or light mode based on cookie
function applyDarkMode(enabled) {
if (enabled) {
document.body.style.setProperty('--background-color', 'var(--background-color-dark)');
document.body.style.setProperty('--text-color', 'var(--text-color-dark)');
document.body.style.setProperty('--button-bg', 'var(--button-bg-dark)');
document.body.style.setProperty('--button-hover-bg', 'var(--button-hover-bg-dark)');
document.body.style.setProperty('--button-hover-text', 'var(--button-hover-text-dark)');
} else {
document.body.style.setProperty('--background-color', 'var(--background-color-light)');
document.body.style.setProperty('--text-color', 'var(--text-color-light)');
document.body.style.setProperty('--button-bg', 'var(--button-bg-light)');
document.body.style.setProperty('--button-hover-bg', 'var(--button-hover-bg-light)');
document.body.style.setProperty('--button-hover-text', 'var(--button-hover-text-light)');
// Function to make everything visible if animations are turned off
function makeEverythingVisible() {
// Make the title visible
const title = document.querySelector('h1');
if (title) {
title.style.opacity = '1';
title.style.transform = 'none';
}
// Make all buttons visible
const buttons = document.querySelectorAll('.button, .calendar-button');
buttons.forEach(button => {
button.style.opacity = '1'; // Ensure the button is fully visible
button.style.transform = 'none'; // Reset any transform styles
button.style.display = 'inline-block'; // Ensure the button is displayed
});
// Make the clock visible
const clockElement = document.getElementById('clock');
if (clockElement) {
clockElement.style.opacity = '1'; // Ensure the clock is fully visible
clockElement.style.transform = 'none'; // Reset any transform styles
clockElement.style.display = 'block'; // Ensure the clock is displayed
}
}
// Toggle dark mode
function toggleDarkMode() {
const darkModeEnabled = getCookie('darkMode') === 'true';
setCookie('darkMode', !darkModeEnabled, 30);
applyDarkMode(!darkModeEnabled);
// Function to update the clock
function updateClock() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const timeString = `${hours}:${minutes}:${seconds}`;
const dateString = now.toDateString();
document.getElementById('clock').innerHTML = `${dateString} <br> ${timeString}`;
}
// Function to animate the clock
function animateClock() {
anime({
targets: '#clock',
opacity: [0, 1], // Fade in
translateY: [-20, 0], // Slide down slightly
duration: 1000, // Animation duration
easing: 'easeOutExpo', // Smooth easing
});
}
// Function to animate the title and buttons
function animatePage() {
// Animate the title
anime({
targets: 'h1',
opacity: [0, 1], // Fade in
translateY: [-50, 0], // Slide down
duration: 1000, // Animation duration
easing: 'easeOutExpo', // Smooth easing
});
// Animate the buttons
anime({
targets: '.button-container, .calendar-button',
opacity: [0, 1], // Fade in
translateY: [50, 0], // Slide up
delay: anime.stagger(200), // Stagger animation for each button
duration: 800, // Animation duration
easing: 'easeOutExpo', // Smooth easing
complete: () => {
// Animate the clock after the buttons finish animating
if (dateTimeEnabled) {
const clockElement = document.getElementById('clock');
clockElement.style.display = 'block'; // Ensure the clock is visible
animateClock(); // Trigger the clock animation
setInterval(updateClock, 1000); // Start updating the clock every second
updateClock(); // Initialize the clock immediately
}
},
});
}
// Wait for the page to fully load
window.onload = () => {
// Check if Game Animation is enabled
const gameAnimationEnabled = getCookie('gameAnimation') === 'true';
if (gameAnimationEnabled) {
animatePage();
} else {
// If animations are disabled, make everything visible
makeEverythingVisible();
}
// Check if Less Buttons is enabled
const lessButtonsEnabled = getCookie('lessButtons') === 'true';
if (lessButtonsEnabled) {
// Hide the specified buttons
document.querySelector("button[onclick*='chatroom.html']").style.display = 'none'; // Chatroom button
document.querySelector("button[onclick*='cal.html']").style.display = 'none'; // Calendar button
document.querySelector("button[onclick*='gametoadd.html']").style.display = 'none'; // Coming Soon button
}
};
// Check if Date and Time is enabled
const dateTimeEnabled = getCookie('dateTime') === 'true';
// Ensure dark mode is the default
if (getCookie('darkMode') === null) {
setCookie('darkMode', 'true', 30); // Default to dark mode
@@ -174,27 +254,6 @@
const darkModeEnabled = getCookie('darkMode') === 'true';
applyDarkMode(darkModeEnabled);
// Clock Functionality
function updateClock() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const timeString = `${hours}:${minutes}:${seconds}`;
const dateString = now.toDateString(); // Get the current date as a string
document.getElementById('clock').innerHTML = `${dateString} <br> ${timeString}`;
}
// Check if Date and Time is enabled
const dateTimeEnabled = getCookie('dateTime') === 'true';
if (dateTimeEnabled) {
const clockElement = document.getElementById('clock');
clockElement.style.display = 'block'; // Show the clock
setInterval(updateClock, 1000); // Update the clock every second
updateClock(); // Initialize the clock immediately
}
// Ensure FPS Counter is enabled by default
if (getCookie('fpsCounter') === null) {
setCookie('fpsCounter', 'true', 30); // Default to enabled
@@ -232,48 +291,29 @@
document.getElementById('gamesComingSoonButton').style.display = 'inline-block'; // Show the button
}
// Check if Less Buttons is enabled
const lessButtonsEnabled = getCookie('lessButtons') === 'true';
if (lessButtonsEnabled) {
// Hide the specified buttons
document.querySelector("button[onclick*='chatroom.html']").style.display = 'none'; // Chatroom button
document.querySelector("button[onclick*='cal.html']").style.display = 'none'; // Calendar button
document.querySelector("button[onclick*='gametoadd.html']").style.display = 'none'; // Coming Soon button
// Apply dark or light mode based on cookie
function applyDarkMode(enabled) {
if (enabled) {
document.body.style.setProperty('--background-color', 'var(--background-color-dark)');
document.body.style.setProperty('--text-color', 'var(--text-color-dark)');
document.body.style.setProperty('--button-bg', 'var(--button-bg-dark)');
document.body.style.setProperty('--button-hover-bg', 'var(--button-hover-bg-dark)');
document.body.style.setProperty('--button-hover-text', 'var(--button-hover-text-dark)');
} else {
document.body.style.setProperty('--background-color', 'var(--background-color-light)');
document.body.style.setProperty('--text-color', 'var(--text-color-light)');
document.body.style.setProperty('--button-bg', 'var(--button-bg-light)');
document.body.style.setProperty('--button-hover-bg', 'var(--button-hover-bg-light)');
document.body.style.setProperty('--button-hover-text', 'var(--button-hover-text-light)');
}
}
// Function to animate the title and buttons
function animatePage() {
// Animate the title
anime({
targets: 'h1',
opacity: [0, 1], // Fade in
translateY: [-50, 0], // Slide down
duration: 1000, // Animation duration
easing: 'easeOutExpo', // Smooth easing
});
// Animate the buttons
anime({
targets: '.button, .calendar-button',
opacity: [0, 1], // Fade in
translateY: [50, 0], // Slide up
delay: anime.stagger(200), // Stagger animation for each button
duration: 800, // Animation duration
easing: 'easeOutExpo', // Smooth easing
});
// Toggle dark mode
function toggleDarkMode() {
const darkModeEnabled = getCookie('darkMode') === 'true';
setCookie('darkMode', !darkModeEnabled, 30);
applyDarkMode(!darkModeEnabled);
}
// Wait for the page to fully load
window.onload = () => {
// Check if Game Animation is enabled
const gameAnimationEnabled = getCookie('gameAnimation') === 'true';
// Trigger the animation if enabled
if (gameAnimationEnabled) {
animatePage();
}
};
</script>
</body>
</html>
setting.html
+41 -265
View File
@@ -11,12 +11,24 @@
crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="settings.css">
<style>
:root {
/* Light mode variables */
--background-color: #ffffff;
--text-color: #000000;
--card-background-color: #f9f9f9;
/* Dark mode variables */
--background-color-dark: #121212;
--text-color-dark: #ffffff;
--card-background-color-dark: #1e1e1e;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: var(--background-color, #ffffff);
color: var(--text-color, #000000);
background-color: var(--background-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
@@ -26,7 +38,7 @@
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background-color: var(--card-background-color, #f9f9f9);
background-color: var(--card-background-color);
}
h1 {
@@ -77,7 +89,7 @@
<button id="toggleDarkMode">Enable</button>
</div>
<div class="setting-item">
<span>Enable CloakJS (comming soon)</span>
<span>Enable CloakJS (coming soon)</span>
<button id="toggleCloakJS">Enable</button>
</div>
<div class="setting-item">
@@ -85,7 +97,7 @@
<button id="toggleFPSCounter">Enable</button>
</div>
<div class="setting-item">
<span>Enable Maturity Filter(comming-soon)</span>
<span>Enable Maturity Filter (coming soon)</span>
<button id="toggleMaturityFilter">Enable</button>
</div>
<div class="setting-item">
@@ -101,7 +113,7 @@
<button id="toggleSaveSearch">Enable</button>
</div>
<div class="setting-item">
<span>Enable more Animation</span>
<span>Enable More Animation</span>
<button id="toggleGameAnimation">Enable</button>
</div>
<div class="setting-item">
@@ -145,6 +157,19 @@
return null;
}
// Function to apply dark mode
function applyDarkMode(enabled) {
if (enabled) {
document.body.style.setProperty('--background-color', 'var(--background-color-dark)');
document.body.style.setProperty('--text-color', 'var(--text-color-dark)');
document.body.style.setProperty('--card-background-color', 'var(--card-background-color-dark)');
} else {
document.body.style.setProperty('--background-color', 'var(--background-color)');
document.body.style.setProperty('--text-color', 'var(--text-color)');
document.body.style.setProperty('--card-background-color', 'var(--card-background-color)');
}
}
// Function to toggle a setting
function toggleSetting(buttonId, cookieName) {
const button = document.getElementById(buttonId);
@@ -153,11 +178,21 @@
// Set initial button text
button.textContent = isEnabled ? 'Disable' : 'Enable';
// Apply dark mode if enabled
if (cookieName === 'darkMode') {
applyDarkMode(isEnabled);
}
// Add event listener to toggle the setting
button.addEventListener('click', () => {
const currentState = getCookie(cookieName) === 'true';
setCookie(cookieName, !currentState, 30); // Save preference for 30 days
button.textContent = currentState ? 'Enable' : 'Disable';
// Apply dark mode dynamically
if (cookieName === 'darkMode') {
applyDarkMode(!currentState);
}
});
}
@@ -171,265 +206,6 @@
toggleSetting('toggleSaveSearch', 'saveSearch');
toggleSetting('toggleGameAnimation', 'gameAnimation');
toggleSetting('toggleLessButtons', 'lessButtons');
// Remove the toggle button from other pages
const toggleDarkModeButton = document.getElementById('toggleDarkMode');
// Ensure this button is the only one controlling dark mode
function applyDarkMode(enabled) {
if (enabled) {
document.body.style.setProperty('--background-color', '#121212');
document.body.style.setProperty('--text-color', '#ffffff');
document.body.style.setProperty('--card-background-color', '#1e1e1e');
toggleDarkModeButton.textContent = 'Disable';
} else {
document.body.style.setProperty('--background-color', '#ffffff');
document.body.style.setProperty('--text-color', '#000000');
document.body.style.setProperty('--card-background-color', '#f9f9f9');
toggleDarkModeButton.textContent = 'Enable';
}
}
toggleDarkModeButton.addEventListener('click', () => {
const isDarkMode = getCookie('darkMode') === 'true';
setCookie('darkMode', !isDarkMode, 30); // Save preference for 30 days
applyDarkMode(!isDarkMode);
});
// Apply saved dark mode preference on load
const darkModeEnabled = getCookie('darkMode') === 'true';
applyDarkMode(darkModeEnabled);
// Clear Cookies Button
const clearCookiesButton = document.getElementById('clearCookies');
const confirmationModal = document.getElementById('confirmationModal');
const cancelClearButton = document.getElementById('cancelClear');
const confirmClearButton = document.getElementById('confirmClear');
// Show confirmation modal when Clear Cookies is clicked
clearCookiesButton.addEventListener('click', () => {
confirmationModal.style.display = 'flex';
});
// Cancel clearing cookies
cancelClearButton.addEventListener('click', () => {
confirmationModal.style.display = 'none';
});
// Confirm clearing cookies
confirmClearButton.addEventListener('click', () => {
// Clear all cookies
document.cookie.split(";").forEach(cookie => {
document.cookie = cookie.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date(0).toUTCString() + ";path=/");
});
// Hide the modal
confirmationModal.style.display = 'none';
// Notify the user
alert('Cookies have been cleared!');
});
// CloakJS Toggle
const toggleCloakJSButton = document.getElementById('toggleCloakJS');
const cloakJSEnabled = getCookie('cloakJS') === 'true';
function applyCloakJSSetting(enabled) {
if (enabled) {
toggleCloakJSButton.textContent = 'Disable';
} else {
toggleCloakJSButton.textContent = 'Enable';
}
}
toggleCloakJSButton.addEventListener('click', () => {
const isCloakJSEnabled = getCookie('cloakJS') === 'true';
setCookie('cloakJS', !isCloakJSEnabled, 30); // Save preference for 30 days
applyCloakJSSetting(!isCloakJSEnabled);
});
// Apply saved CloakJS preference on load
applyCloakJSSetting(cloakJSEnabled);
// FPS Counter Toggle
const toggleFPSCounterButton = document.getElementById('toggleFPSCounter');
const fpsCounterEnabled = getCookie('fpsCounter') === 'true';
function applyFPSCounterSetting(enabled) {
if (enabled) {
toggleFPSCounterButton.textContent = 'Disable';
} else {
toggleFPSCounterButton.textContent = 'Enable';
}
}
toggleFPSCounterButton.addEventListener('click', () => {
const isFPSCounterEnabled = getCookie('fpsCounter') === 'true';
setCookie('fpsCounter', !isFPSCounterEnabled, 30); // Save preference for 30 days
applyFPSCounterSetting(!isFPSCounterEnabled);
});
// Apply saved FPS Counter preference on load
applyFPSCounterSetting(fpsCounterEnabled);
// Maturity Filter Toggle
const toggleMaturityFilterButton = document.getElementById('toggleMaturityFilter');
const maturityFilterEnabled = getCookie('maturityFilter') === 'true';
function applyMaturityFilterSetting(enabled) {
if (enabled) {
toggleMaturityFilterButton.textContent = 'Disable';
} else {
toggleMaturityFilterButton.textContent = 'Enable';
}
}
toggleMaturityFilterButton.addEventListener('click', () => {
const isMaturityFilterEnabled = getCookie('maturityFilter') === 'true';
setCookie('maturityFilter', !isMaturityFilterEnabled, 30); // Save preference for 30 days
applyMaturityFilterSetting(!isMaturityFilterEnabled);
});
// Apply saved Maturity Filter preference on load
applyMaturityFilterSetting(maturityFilterEnabled);
// Text-to-Speech Toggle
const toggleTextToSpeechButton = document.getElementById('toggleTextToSpeech');
const textToSpeechEnabled = getCookie('textToSpeech') === 'true';
function applyTextToSpeechSetting(enabled) {
if (enabled) {
toggleTextToSpeechButton.textContent = 'Disable';
} else {
toggleTextToSpeechButton.textContent = 'Enable';
}
}
toggleTextToSpeechButton.addEventListener('click', () => {
const isTextToSpeechEnabled = getCookie('textToSpeech') === 'true';
setCookie('textToSpeech', !isTextToSpeechEnabled, 30); // Save preference for 30 days
applyTextToSpeechSetting(!isTextToSpeechEnabled);
});
// Apply saved Text-to-Speech preference on load
applyTextToSpeechSetting(textToSpeechEnabled);
// Date and Time Toggle
const toggleDateTimeButton = document.getElementById('toggleDateTime');
const dateTimeEnabled = getCookie('dateTime') === 'true';
function applyDateTimeSetting(enabled) {
if (enabled) {
toggleDateTimeButton.textContent = 'Disable';
} else {
toggleDateTimeButton.textContent = 'Enable';
}
}
toggleDateTimeButton.addEventListener('click', () => {
const isDateTimeEnabled = getCookie('dateTime') === 'true';
setCookie('dateTime', !isDateTimeEnabled, 30); // Save preference for 30 days
applyDateTimeSetting(!isDateTimeEnabled);
});
// Apply saved Date and Time preference on load
applyDateTimeSetting(dateTimeEnabled);
// Games Coming Soon Toggle
const toggleGamesComingSoonButton = document.getElementById('toggleGamesComingSoon');
const gamesComingSoonEnabled = getCookie('gamesComingSoon') === 'true';
function applyGamesComingSoonSetting(enabled) {
if (enabled) {
toggleGamesComingSoonButton.textContent = 'Disable';
} else {
toggleGamesComingSoonButton.textContent = 'Enable';
}
}
toggleGamesComingSoonButton.addEventListener('click', () => {
const isGamesComingSoonEnabled = getCookie('gamesComingSoon') === 'true';
setCookie('gamesComingSoon', !isGamesComingSoonEnabled, 30); // Save preference for 30 days
applyGamesComingSoonSetting(!isGamesComingSoonEnabled);
});
// Apply saved Games Coming Soon preference on load
applyGamesComingSoonSetting(gamesComingSoonEnabled);
// Regional Settings
const regionSelect = document.getElementById('regionSelect');
const savedRegion = getCookie('region') || 'us'; // Default to 'us'
// Set the dropdown to the saved region
regionSelect.value = savedRegion;
// Save the selected region when changed
regionSelect.addEventListener('change', () => {
const selectedRegion = regionSelect.value;
setCookie('region', selectedRegion, 30); // Save preference for 30 days
alert(`Region set to: ${selectedRegion.toUpperCase()}`);
});
const region = getCookie('region') || 'us'; // Default to 'us'
// Example: Load regional content
if (region === 'fr') {
document.body.innerHTML += '<p>Bienvenue! (Welcome in French)</p>';
} else if (region === 'de') {
document.body.innerHTML += '<p>Willkommen! (Welcome in German)</p>';
} else if (region === 'jp') {
document.body.innerHTML += '<p>ようこそ! (Welcome in Japanese)</p>';
} else {
document.body.innerHTML += '<p>Welcome!</p>';
}
// Reset to Default Settings
const resetSettingsButton = document.getElementById('resetSettings');
resetSettingsButton.addEventListener('click', () => {
// Clear all cookies
document.cookie.split(";").forEach(cookie => {
document.cookie = cookie.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date(0).toUTCString() + ";path=/");
});
// Reset UI elements to default states
applyDarkMode(false); // Default: Light mode
applyCloakJSSetting(false); // Default: CloakJS disabled
applyFPSCounterSetting(false); // Default: FPS Counter disabled
applyMaturityFilterSetting(false); // Default: Maturity Filter disabled
applyTextToSpeechSetting(false); // Default: Text-to-Speech disabled
applyDateTimeSetting(false); // Default: Date and Time disabled
applyGamesComingSoonSetting(false); // Default: Games Coming Soon disabled
alert('Settings have been reset to default!');
});
// Handle Game Animation Toggle
const toggleGameAnimationButton = document.getElementById('toggleGameAnimation');
const gameAnimationEnabled = getCookie('gameAnimation') === 'true';
// Set initial button state
toggleGameAnimationButton.textContent = gameAnimationEnabled ? 'Disable' : 'Enable';
toggleGameAnimationButton.addEventListener('click', () => {
const isEnabled = getCookie('gameAnimation') === 'true';
setCookie('gameAnimation', !isEnabled, 30); // Save preference for 30 days
toggleGameAnimationButton.textContent = isEnabled ? 'Enable' : 'Disable';
});
// Handle Less Buttons Toggle
const toggleLessButtonsButton = document.getElementById('toggleLessButtons');
const lessButtonsEnabled = getCookie('lessButtons') === 'true';
// Set initial button state
toggleLessButtonsButton.textContent = lessButtonsEnabled ? 'Disable' : 'Enable';
toggleLessButtonsButton.addEventListener('click', () => {
const isEnabled = getCookie('lessButtons') === 'true';
setCookie('lessButtons', !isEnabled, 30); // Save preference for 30 days
toggleLessButtonsButton.textContent = isEnabled ? 'Enable' : 'Disable';
});
</script>
</body>