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

WebGames-master/WebGames-master/index.html

@@ -871,23 +871,20 @@
             });
         }
 
-        // 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
+                rotate: [-10, 0], // Rotate back to normal
                 opacity: [0, 1], // Fade in
-                    duration: 800,
+                duration: 1000, // Animation duration
-                    easing: 'easeOutExpo',
+                easing: 'easeOutElastic(1, 0.5)', // Elastic easing for a bouncy effect
             });
         }
 
         // Create an Intersection Observer to detect when games come into view
-            const observer = new IntersectionObserver((entries) => {
+        const observer = new IntersectionObserver((entries, observer) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
                     // Animate the game when it comes into view
@@ -902,13 +899,11 @@
         // Select all game elements and hide them initially
         const games = document.querySelectorAll('.game');
         games.forEach(game => {
-                game.style.opacity = '0'; // Hide games
+            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
             observer.observe(game); // Start observing the game
         });
-        }
+
-    </script>
-    <script>
         // 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
+                delay: anime.stagger(150), // Stagger animation for each card
-                duration: 800, // Animation duration
+                duration: 1000, // Animation duration
-                easing: 'easeOutExpo',
+                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.') {
+            // Show extra description for "Gay Day"
-                const sanitizedClassName = eventText.replace(/[^a-zA-Z0-9-]/g, '').replace(/\s+/g, '-').toLowerCase();
+            const extraDescription = document.getElementById('event-extra-description');
-                eventDescription.classList.add(sanitizedClassName); // Set sanitized class name based on event name
+            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