Skip to content

Commit a980c91

Browse files
jbamptonjbampton
authored
Add phaser (#326)
* Add phaser entry * Fixups
1 parent 8e3c3fe commit a980c91

File tree

8 files changed

+163
-1
lines changed

8 files changed

+163
-1
lines changed

‎src/_includes/bio.njk‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>{{ name }} | {{ role }}</title>
77
<script src="https://cdn.tailwindcss.com"></script>
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.90.0/phaser.min.js"></script>
89
<link rel="stylesheet" href="/assets/css/style.css">
910
</head>
1011
<body class="min-h-screen scroll-smooth bg-[var(--bg-page)] text-[var(--text-main)] transition-colors duration-300">

‎src/_includes/footer-details.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<p class="mt-1 text-[var(--text-muted)] text-[10px] font-mono uppercase tracking-[0.15em]">
1010
&copy; <span id="current-year">{% currentYear %}</span> Built with
11-
<span id="footer-heart" class="transition-colors duration-500">❤️</span>
11+
<span id="footer-heart" class="inline-block transition-colors duration-500 cursor-pointer">❤️</span>
1212
by the Open-Source Community
1313
</p>
1414

‎src/_includes/footer.njk‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
{% include "footer-details.njk" %}
22

3+
<div id="phaser-container"></div>
4+
35
{% include "system-override.njk" %}
46

57
{% include "matrix-overlay.njk" %}

‎src/_includes/scripts.njk‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@
44
</script>
55

66
<script src="/assets/js/script.js"></script>
7+
<script src="/assets/js/eggs.js"></script>

‎src/assets/css/style.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -912,3 +912,12 @@ a:hover {
912912
opacity: 0;
913913
}
914914
}
915+
#phaser-container {
916+
position: fixed;
917+
top: 0;
918+
left: 0;
919+
width: 100vw;
920+
height: 100vh;
921+
z-index: 9999;
922+
pointer-events: none; /* Allow clicks to pass through to the site if needed */
923+
}

‎src/assets/js/eggs.js‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
function initPhaserGame() {
2+
const config = {
3+
type: Phaser.AUTO,
4+
width: window.innerWidth,
5+
height: window.innerHeight,
6+
parent: "phaser-container", // Make sure this div exists in your HTML
7+
transparent: true,
8+
physics: {
9+
default: "arcade",
10+
arcade: { gravity: { y: 300 } },
11+
},
12+
scene: {
13+
preload: preload,
14+
create: create,
15+
},
16+
};
17+
18+
const game = new Phaser.Game(config);
19+
}
20+
21+
function preload() {
22+
// No need to preload images if we are only using text/emojis!
23+
}
24+
25+
function create() {
26+
const emojis = [
27+
// Gaming & Tech
28+
"🎮",
29+
"🕹️",
30+
"👾",
31+
"🚀",
32+
"💻",
33+
"📱",
34+
"⌨️",
35+
"🖱️",
36+
"🔋",
37+
"🔌",
38+
// Magic & Space
39+
"✨",
40+
"⭐",
41+
"🌟",
42+
"🔮",
43+
"🌌",
44+
"🌠",
45+
"🌙",
46+
"☄️",
47+
"🛸",
48+
"👽",
49+
// Action & Fun
50+
"🔥",
51+
"💥",
52+
"🧨",
53+
"⚡",
54+
"🌈",
55+
"🎉",
56+
"🎊",
57+
"🎈",
58+
"🎁",
59+
"💎",
60+
// Hearts & Expressions
61+
"💖",
62+
"🎯",
63+
"🏆",
64+
"🥇",
65+
"🧿",
66+
"🍀",
67+
"🍕",
68+
"🍭",
69+
"🍦",
70+
"🍩",
71+
// Creatures & Icons
72+
"🤖",
73+
"👻",
74+
"🐲",
75+
"🦄",
76+
"🦊",
77+
"🐱",
78+
"🐧",
79+
"🦖",
80+
"🍄",
81+
"🌍",
82+
];
83+
const heartRect = document
84+
.getElementById("footer-heart")
85+
.getBoundingClientRect();
86+
87+
for (let i = 0; i < 75; i++) {
88+
// 1. Pick a random emoji
89+
const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
90+
91+
// 2. Create the emoji at the heart's location
92+
// We use this.add.text instead of this.physics.add.image
93+
const particle = this.add.text(heartRect.left, heartRect.top, randomEmoji, {
94+
fontSize: "32px",
95+
});
96+
97+
// 3. Manually add physics to the text object
98+
this.physics.add.existing(particle);
99+
100+
// 4. Apply the "Explosion" physics
101+
// Shoots them out in a cone shape upward
102+
particle.body.setVelocity(
103+
Phaser.Math.Between(-300, 300),
104+
Phaser.Math.Between(-500, -1000),
105+
);
106+
107+
particle.body.setCollideWorldBounds(true);
108+
particle.body.setBounce(0.7);
109+
110+
// Optional: Add a little random rotation for flair
111+
particle.setAngle(Phaser.Math.Between(0, 360));
112+
}
113+
}

‎src/assets/js/script.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1337,6 +1337,41 @@ window.addEventListener("DOMContentLoaded", () => {
13371337
}
13381338
});
13391339

1340+
let heartClickCount = 0;
1341+
let phaserStarted = false;
1342+
1343+
const heart = document.getElementById("footer-heart");
1344+
1345+
heart.addEventListener("click", () => {
1346+
heartClickCount++;
1347+
1348+
// 1. Grow the heart with each click
1349+
const scaleAmount = 1 + heartClickCount * 0.3;
1350+
heart.style.transform = `scale(${scaleAmount})`;
1351+
heart.style.display = "inline-block"; // Ensuring transform works
1352+
heart.style.transition =
1353+
"transform 0.1s cubic-bezier(0.17, 0.67, 0.83, 0.67)";
1354+
1355+
// 2. The Big Swap at 5 clicks
1356+
if (heartClickCount === 5 && !phaserStarted) {
1357+
phaserStarted = true;
1358+
1359+
// Visual "Pop" effect
1360+
heart.innerHTML = "🎮"; // Swap to gamer emoji
1361+
heart.style.transform = "scale(1.5)"; // Slight bounce
1362+
1363+
// Give the user a split second to see the emoji before Phaser starts
1364+
setTimeout(() => {
1365+
// Optional: make the emoji float away or disappear
1366+
heart.classList.add("animate-ping"); // Uses Tailwind's built-in animation
1367+
1368+
initPhaserGame();
1369+
1370+
// Optional: Hide the emoji after Phaser covers the screen
1371+
// setTimeout(() => { heart.style.opacity = '0'; }, 500);
1372+
}, 300);
1373+
}
1374+
});
13401375
/**
13411376
* INITIALIZATION
13421377
*/

‎src/index.njk‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ layout: false
88
<meta name="viewport" content="width=device-width, initial-scale=1.0">
99
<title>Developer Directory</title>
1010
<script src="https://cdn.tailwindcss.com"></script>
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.90.0/phaser.min.js"></script>
1112
<link rel="stylesheet" href="/assets/css/style.css">
1213
</head>
1314
<body class="min-h-screen scroll-smooth bg-[var(--bg-page)] text-[var(--text-main)] transition-colors duration-300">

0 commit comments

Comments
 (0)