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

Enhance animation features and settings in the game interface

Browse Source 
- Updated game animation logic for smoother transitions
- Added toggle for "Less Buttons" feature in settings
- Improved clock display functionality based on user preferences
This commit is contained in:
miles
2025-04-11 13:22:03 +00:00
parent 8dd722ce51
commit 2b3563a0d1
3 changed files with 143 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebGames-master/WebGames-master/index.html
+70 -112
View File
@@ -777,7 +777,7 @@
// Utility function to get a cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
for (let i = 0; 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; i < cookies.length; i++) {
for (let i = 0; cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
@@ -921,127 +921,85 @@
return null;
}
// Check if animation is enabled
const gameAnimationEnabled = getCookie('gameAnimation') === 'true';
// Wait for the page to fully load
window.onload = () => {
if (gameAnimationEnabled) {
// Hide all game elements initially
const games = document.querySelectorAll('.game');
games.forEach(game => {
game.style.opacity = '0'; // Hide games
game.style.transform = 'translateY(-50px)'; // Move them above
});
// Select all game elements
const games = document.querySelectorAll('.game');
// Add a 3-second delay before starting the animation
setTimeout(() => {
anime({
targets: '.game',
translateY: [-50, 0], // Fly in from above
opacity: [0, 1], // Fade in
delay: anime.stagger(100), // Stagger animation for each card
duration: 800,
easing: 'easeOutExpo',
});
}, 3000); // 3000 milliseconds = 3 seconds
}
// 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>
// Wait for the page to fully load
window.onload = () => {
// Select all game elements
const games = document.querySelectorAll('.game');
// 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;
}
// 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
});
// 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
});
}
// Add a delay before starting the animation
setTimeout(() => {
// Function to animate game elements
function animateGames() {
const games = document.querySelectorAll('.game');
games.forEach(game => {
game.style.opacity = '0'; // Hide games initially
game.style.transform = 'translateY(-50px)'; // Move them above
});
// Use Anime.js to animate the games
anime({
targets: '.game',
translateY: [-50, 0], // Fly in from above
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
delay: anime.stagger(100), // Stagger animation for each card
duration: 800, // Animation duration
easing: 'easeOutExpo',
});
}, 2000); // 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; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1);
}
// Check if animation is enabled
const gameAnimationEnabled = getCookie('gameAnimation') === 'true';
// Trigger animations on page load if enabled
window.onload = () => {
if (gameAnimationEnabled) {
animateTitle();
animateGames();
}
}
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');
games.forEach(game => {
game.style.opacity = '0'; // Hide games initially
game.style.transform = 'translateY(-50px)'; // Move them above
});
// Use Anime.js to animate the games
anime({
targets: '.game',
translateY: [-50, 0], // Fly in from above
opacity: [0, 1], // Fade in
delay: anime.stagger(100), // Stagger animation for each card
duration: 800, // Animation duration
easing: 'easeOutExpo',
});
}
// Check if animation is enabled
const gameAnimationEnabled = getCookie('gameAnimation') === 'true';
// Trigger animations on page load if enabled
window.onload = () => {
if (gameAnimationEnabled) {
animateTitle();
animateGames();
}
};
// Toggle Game Animation Button Logic
const toggleGameAnimationButton = document.getElementById('toggleGameAnimation');
toggleGameAnimationButton.addEventListener('click', () => {
const isEnabled = getCookie('gameAnimation') === 'true';
setCookie('gameAnimation', !isEnabled, 30); // Save preference for 30 days
toggleGameAnimationButton.textContent = isEnabled ? 'Enable' : 'Disable';
if (!isEnabled) {
// Trigger animations when enabled
animateTitle();
animateGames();
}
});
</script>
</body>
</html>
// Toggle Game Animation Button Logic
const toggleGameAnimationButton = document.getElementById('toggleGame
index.html
+54 -11
View File
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="/index.css">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<style>
:root {
/* Light mode variables */
@@ -114,6 +115,8 @@
<button class="button" id="gamesComingSoonButton" onclick="location.href='./gametoadd.html'">Coming Soon</button>
</div>
<!-- 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>
@@ -138,7 +141,6 @@
return null;
}
// Apply dark or light mode based on cookie
function applyDarkMode(enabled) {
if (enabled) {
@@ -183,9 +185,15 @@
document.getElementById('clock').innerHTML = `${dateString} <br> ${timeString}`;
}
// Update the clock every second
setInterval(updateClock, 1000);
updateClock(); // Initialize clock immediately
// 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) {
@@ -217,13 +225,6 @@
calculateFPS(); // Start FPS calculation
}
// Check if Date and Time is enabled
const dateTimeEnabled = getCookie('dateTime') === 'true';
if (dateTimeEnabled) {
document.getElementById('clock').style.display = 'block'; // Show the clock
}
// Check if "Games Coming Soon" is enabled
const gamesComingSoonEnabled = getCookie('gamesComingSoon') === 'true';
@@ -231,6 +232,48 @@
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
}
// 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
});
}
// 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
+19 -1
View File
@@ -101,9 +101,13 @@
<button id="toggleSaveSearch">Enable</button>
</div>
<div class="setting-item">
<span>Enable Game Animation</span>
<span>Enable more Animation</span>
<button id="toggleGameAnimation">Enable</button>
</div>
<div class="setting-item">
<span>Less Buttons</span>
<button id="toggleLessButtons">Enable</button>
</div>
<div class="setting-item clear-cookies">
<span>Clear Cookies</span>
<button id="clearCookies">Clear</button>
@@ -166,6 +170,7 @@
toggleSetting('toggleDateTime', 'dateTime');
toggleSetting('toggleSaveSearch', 'saveSearch');
toggleSetting('toggleGameAnimation', 'gameAnimation');
toggleSetting('toggleLessButtons', 'lessButtons');
// Remove the toggle button from other pages
const toggleDarkModeButton = document.getElementById('toggleDarkMode');
@@ -412,6 +417,19 @@
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>