Enhance game animations with rotation and elastic easing; update event details display in calendar

WebGames-master/WebGames-master/index.html

@@ -871,44 +871,39 @@
             });
         }
 
-        // Check if animation is enabled
-        const gameAnimationEnabled = getCookie('gameAnimation') === 'true';
-
-        if (gameAnimationEnabled) {
-            // Function to animate a single game element
-            function animateGame(game) {
-                anime({
-                    targets: game,
-                    translateY: [-50, 0], // Fly in from above
-                    opacity: [0, 1], // Fade in
-                    duration: 800,
-                    easing: 'easeOutExpo',
-                });
-            }
-
-            // Create an Intersection Observer to detect when games come into view
-            const observer = new IntersectionObserver((entries) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        // Animate the game when it comes into view
-                        animateGame(entry.target);
-
-                        // Stop observing the element after animating it
-                        observer.unobserve(entry.target);
-                    }
-                });
-            });
-
-            // Select all game elements and hide them initially
-            const games = document.querySelectorAll('.game');
-            games.forEach(game => {
-                game.style.opacity = '0'; // Hide games
-                game.style.transform = 'translateY(-50px)'; // Move them above
-                observer.observe(game); // Start observing the game
+        // Function to animate a single game element
+        function animateGame(game) {
+            anime({
+                targets: game,
+                translateY: [-50, 0], // Fly in from above
+                rotate: [-10, 0], // Rotate back to normal
+                opacity: [0, 1], // Fade in
+                duration: 1000, // Animation duration
+                easing: 'easeOutElastic(1, 0.5)', // Elastic easing for a bouncy effect
             });
         }
-    </script>
-    <script>
+
+        // Create an Intersection Observer to detect when games come into view
+        const observer = new IntersectionObserver((entries, observer) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    // Animate the game when it comes into view
+                    animateGame(entry.target);
+
+                    // Stop observing the element after animating it
+                    observer.unobserve(entry.target);
+                }
+            });
+        });
+
+        // Select all game elements and hide them initially
+        const games = document.querySelectorAll('.game');
+        games.forEach(game => {
+            game.style.opacity = '0'; // Hide games initially
+            game.style.transform = 'translateY(-50px) rotate(-10deg)'; // Move them above and rotate slightly
+            observer.observe(game); // Start observing the game
+        });
+
         // Utility function to get a cookie
         function getCookie(name) {
             const cookies = document.cookie.split(';');
@@ -926,17 +921,18 @@
             const games = document.querySelectorAll('.game');
             games.forEach(game => {
                 game.style.opacity = '0'; // Hide games initially
-                game.style.transform = 'translateY(-50px)'; // Move them above
+                game.style.transform = 'translateY(-50px) rotate(-10deg)'; // Move them above and rotate slightly
             });
 
             // Use Anime.js to animate the games
             anime({
                 targets: '.game',
                 translateY: [-50, 0], // Fly in from above
+                rotate: [-10, 0], // Rotate back to normal
                 opacity: [0, 1], // Fade in
-                delay: anime.stagger(100), // Stagger animation for each card
-                duration: 800, // Animation duration
-                easing: 'easeOutExpo',
+                delay: anime.stagger(150), // Stagger animation for each card
+                duration: 1000, // Animation duration
+                easing: 'easeOutElastic(1, 0.5)', // Elastic easing for a bouncy effect
             });
         }
 

cal.html

@@ -172,6 +172,7 @@
         <h2>Event Details</h2>
         <p id="event-date">Date: Not selected</p>
         <p id="event-description">No event selected.</p>
+        <p id="event-extra-description" style="display: none;">This is star word day</p>
         <button id="close-details">Close</button>
     </div>
 
@@ -259,11 +260,15 @@
             const eventText = events[dateKey] || 'No event selected.';
             eventDate.textContent = `Date: ${dateKey}`;
             eventDescription.textContent = eventText;
-            eventDescription.className = ''; // Clear previous class
-            if (eventText !== 'No event selected.') {
-                const sanitizedClassName = eventText.replace(/[^a-zA-Z0-9-]/g, '').replace(/\s+/g, '-').toLowerCase();
-                eventDescription.classList.add(sanitizedClassName); // Set sanitized class name based on event name
+
+            // Show extra description for "Gay Day"
+            const extraDescription = document.getElementById('event-extra-description');
+            if (dateKey === '2025-05-04') {
+                extraDescription.style.display = 'block';
+            } else {
+                extraDescription.style.display = 'none';
             }
+
             eventDetails.classList.add('active'); // Show sidebar
         }
 
@@ -296,5 +301,3 @@
     </script>
 </body>
 </html>
-<div class="Gay Day">hi mom</div>
-<p class="Gay Day">hi mom</p>

index.html

@@ -149,12 +149,12 @@
             // Make the title visible
             const title = document.querySelector('h1');
             if (title) {
-                title.style.opacity = '1';
+                title.style.opacity = '1'; // Ensure the title is fully visible
                 title.style.transform = 'none';
             }
 
             // Make all buttons visible
-            const buttons = document.querySelectorAll('.button, .calendar-button');
+            const buttons = document.querySelectorAll('.button, .calendar-button, .button-container');
             buttons.forEach(button => {
                 button.style.opacity = '1'; // Ensure the button is fully visible
                 button.style.transform = 'none'; // Reset any transform styles