© {% currentYear %} Built with - + by the Open-Source Community
diff --git a/src/_includes/footer.njk b/src/_includes/footer.njk index 886a51f..08c374c 100644 --- a/src/_includes/footer.njk +++ b/src/_includes/footer.njk @@ -1,5 +1,7 @@ {% include "footer-details.njk" %} + + {% include "system-override.njk" %} {% include "matrix-overlay.njk" %} diff --git a/src/_includes/scripts.njk b/src/_includes/scripts.njk index c7499bc..c697ac2 100644 --- a/src/_includes/scripts.njk +++ b/src/_includes/scripts.njk @@ -4,3 +4,4 @@ + diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 3bdf775..a66e583 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -912,3 +912,12 @@ a:hover { opacity: 0; } } +#phaser-container { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 9999; + pointer-events: none; /* Allow clicks to pass through to the site if needed */ +} diff --git a/src/assets/js/eggs.js b/src/assets/js/eggs.js new file mode 100644 index 0000000..63c3cbd --- /dev/null +++ b/src/assets/js/eggs.js @@ -0,0 +1,113 @@ +function initPhaserGame() { + const config = { + type: Phaser.AUTO, + width: window.innerWidth, + height: window.innerHeight, + parent: "phaser-container", // Make sure this div exists in your HTML + transparent: true, + physics: { + default: "arcade", + arcade: { gravity: { y: 300 } }, + }, + scene: { + preload: preload, + create: create, + }, + }; + + const game = new Phaser.Game(config); +} + +function preload() { + // No need to preload images if we are only using text/emojis! +} + +function create() { + const emojis = [ + // Gaming & Tech + "๐ฎ", + "๐น๏ธ", + "๐พ", + "๐", + "๐ป", + "๐ฑ", + "โจ๏ธ", + "๐ฑ๏ธ", + "๐", + "๐", + // Magic & Space + "โจ", + "โญ", + "๐", + "๐ฎ", + "๐", + "๐ ", + "๐", + "โ๏ธ", + "๐ธ", + "๐ฝ", + // Action & Fun + "๐ฅ", + "๐ฅ", + "๐งจ", + "โก", + "๐", + "๐", + "๐", + "๐", + "๐", + "๐", + // Hearts & Expressions + "๐", + "๐ฏ", + "๐", + "๐ฅ", + "๐งฟ", + "๐", + "๐", + "๐ญ", + "๐ฆ", + "๐ฉ", + // Creatures & Icons + "๐ค", + "๐ป", + "๐ฒ", + "๐ฆ", + "๐ฆ", + "๐ฑ", + "๐ง", + "๐ฆ", + "๐", + "๐", + ]; + const heartRect = document + .getElementById("footer-heart") + .getBoundingClientRect(); + + for (let i = 0; i < 75; i++) { + // 1. Pick a random emoji + const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)]; + + // 2. Create the emoji at the heart's location + // We use this.add.text instead of this.physics.add.image + const particle = this.add.text(heartRect.left, heartRect.top, randomEmoji, { + fontSize: "32px", + }); + + // 3. Manually add physics to the text object + this.physics.add.existing(particle); + + // 4. Apply the "Explosion" physics + // Shoots them out in a cone shape upward + particle.body.setVelocity( + Phaser.Math.Between(-300, 300), + Phaser.Math.Between(-500, -1000), + ); + + particle.body.setCollideWorldBounds(true); + particle.body.setBounce(0.7); + + // Optional: Add a little random rotation for flair + particle.setAngle(Phaser.Math.Between(0, 360)); + } +} diff --git a/src/assets/js/script.js b/src/assets/js/script.js index a6d41a9..031f7cf 100644 --- a/src/assets/js/script.js +++ b/src/assets/js/script.js @@ -1337,6 +1337,41 @@ window.addEventListener("DOMContentLoaded", () => { } }); +let heartClickCount = 0; +let phaserStarted = false; + +const heart = document.getElementById("footer-heart"); + +heart.addEventListener("click", () => { + heartClickCount++; + + // 1. Grow the heart with each click + const scaleAmount = 1 + heartClickCount * 0.3; + heart.style.transform = `scale(${scaleAmount})`; + heart.style.display = "inline-block"; // Ensuring transform works + heart.style.transition = + "transform 0.1s cubic-bezier(0.17, 0.67, 0.83, 0.67)"; + + // 2. The Big Swap at 5 clicks + if (heartClickCount === 5 && !phaserStarted) { + phaserStarted = true; + + // Visual "Pop" effect + heart.innerHTML = "๐ฎ"; // Swap to gamer emoji + heart.style.transform = "scale(1.5)"; // Slight bounce + + // Give the user a split second to see the emoji before Phaser starts + setTimeout(() => { + // Optional: make the emoji float away or disappear + heart.classList.add("animate-ping"); // Uses Tailwind's built-in animation + + initPhaserGame(); + + // Optional: Hide the emoji after Phaser covers the screen + // setTimeout(() => { heart.style.opacity = '0'; }, 500); + }, 300); + } +}); /** * INITIALIZATION */ diff --git a/src/index.njk b/src/index.njk index 8a54906..f7b6707 100644 --- a/src/index.njk +++ b/src/index.njk @@ -8,6 +8,7 @@ layout: false