Skip to content

Commit 2f0945a

Browse files
BaseMaxBaseMax
authored
Revert "Patch 2 fix: remove inline button handlers and centralize UI click bi…" (#656)
This reverts commit 3482b53.
1 parent 0eed0f7 commit 2f0945a

11 files changed

Lines changed: 169 additions & 106 deletions

File tree

‎src/_includes/bio.njk‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,38 @@ layout: layouts/base.njk
33
---
44
<main id="profile-data" data-name="{{ name }}" data-skills="{{ languages }}" data-email="{{ email }}" class="max-w-5xl mx-auto px-4 py-12">
55
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
6+
67
<div class="lg:col-span-1 space-y-6">
78
<div class="user-card p-8 rounded-3xl sticky top-24">
89
<div class="mb-6">
910
<h1 class="text-3xl font-black leading-tight">{{ name }}</h1>
1011
<p class="text-accent font-bold mt-1">{{ role }}</p>
1112
</div>
13+
1214
<div class="space-y-4 text-sm border-t border-[var(--border-color)] pt-6">
1315
{% if location or country %}
1416
<div class="flex items-center gap-3">
1517
<span class="text-lg">📍</span>
1618
<span class="text-[var(--text-muted)]">{{ location }}{% if location and country %}, {% endif %}{{ country }}</span>
1719
</div>
1820
{% endif %}
21+
1922
{% if email %}
2023
<div class="flex items-center gap-3 group cursor-pointer copy-email-btn" data-email="{{ email }}">
2124
<span class="text-lg">✉️</span>
2225
<span class="text-[var(--text-muted)] group-hover:text-accent truncate">{{ email }}</span>
2326
<span class="hidden group-hover:inline text-[10px] bg-accent text-white px-2 py-0.5 rounded">Copy</span>
2427
</div>
2528
{% endif %}
29+
2630
{% if website %}
2731
<div class="flex items-center gap-3">
2832
<span class="text-lg">🔗</span>
2933
<a href="{{ website }}" target="_blank" rel="noopener noreferrer" class="text-accent font-bold hover:underline truncate">{{ website | replace("https://", "") }}</a>
3034
</div>
3135
{% endif %}
3236
</div>
37+
3338
<div class="mt-8 pt-8 border-t border-[var(--border-color)]">
3439
<h3 class="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] mb-4">Connect</h3>
3540
<div class="grid grid-cols-2 gap-3">
@@ -57,6 +62,7 @@ layout: layouts/base.njk
5762
</div>
5863
</div>
5964
</div>
65+
6066
<div class="lg:col-span-2 space-y-8">
6167
{% if bio %}
6268
<div class="user-card p-8 sm:p-12 rounded-3xl">
@@ -68,6 +74,7 @@ layout: layouts/base.njk
6874
</div>
6975
</div>
7076
{% endif %}
77+
7178
{% if languages is defined and languages is not null %}
7279
<div class="user-card p-8 sm:p-12 rounded-3xl">
7380
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
@@ -79,18 +86,22 @@ layout: layouts/base.njk
7986
</div>
8087
</div>
8188
{% endif %}
89+
8290
<div class="user-card p-8 sm:p-12 rounded-3xl">
8391
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
8492
<span class="w-8 h-[2px] bg-accent" aria-hidden="true"></span> Mini-Game
8593
</h2>
8694
<p class="text-sm text-[var(--text-muted)] mb-4">Catch the skill tiles before they fall! Collect enough to win XP.</p>
87-
<button data-action="launch-codebreaker" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-accent text-white font-black uppercase tracking-wider text-sm hover:opacity-90 active:scale-95 transition-all shadow-lg shadow-accent/30">
95+
<button
96+
onclick="CodeBreaker.launch(window.PROFILE_SKILLS, window.PROFILE_NAME)"
97+
class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-accent text-white font-black uppercase tracking-wider text-sm hover:opacity-90 active:scale-95 transition-all shadow-lg shadow-accent/30">
8898
⌨️ Play Code Breaker
8999
</button>
90100
</div>
91101
</div>
92102
</div>
93103
</main>
104+
94105
<script>
95106
function copyToClipboard(text, el) {
96107
const span = el.querySelector('span:last-child');
@@ -101,19 +112,29 @@ layout: layouts/base.njk
101112
el.copyTimeout = setTimeout(() => { span.innerText = 'Copy'; }, 2000);
102113
}
103114
};
115+
104116
if (!navigator.clipboard) {
105117
const ta = document.createElement('textarea');
106118
ta.value = text;
107119
ta.style.position = 'fixed';
108120
ta.style.opacity = '0';
109121
document.body.appendChild(ta);
110122
ta.select();
111-
try { document.execCommand('copy'); showSuccess(); } catch (err) { console.error('Fallback copy failed:', err); }
123+
try {
124+
document.execCommand('copy');
125+
showSuccess();
126+
} catch (err) {
127+
console.error('Fallback copy failed:', err);
128+
}
112129
document.body.removeChild(ta);
113130
return;
114131
}
115-
navigator.clipboard.writeText(text).then(showSuccess).catch(err => console.error('Failed to copy:', err));
132+
133+
navigator.clipboard.writeText(text)
134+
.then(showSuccess)
135+
.catch(err => console.error('Failed to copy:', err));
116136
}
137+
117138
document.querySelector('.copy-email-btn')?.addEventListener('click', function() {
118139
copyToClipboard(this.getAttribute('data-email'), this);
119140
});

‎src/_includes/footer-details.njk‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
<div class="flex items-center gap-3">
2828
<button
2929
id="footer-surge-button"
30-
data-action="footer-dot"
30+
onclick="handleFooterDotClick()"
3131
class="relative flex h-6 w-6 items-center justify-center focus:outline-none group cursor-pointer"
3232
>
3333
<span id="footer-dot-ping" class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75 transition-colors duration-500"></span>
@@ -37,8 +37,7 @@
3737
</div>
3838

3939
<div class="flex items-center bg-[var(--bg-card)] border border-[var(--border-color)] rounded-lg overflow-hidden shadow-sm">
40-
<button data-action="secret-unlock" data-code="gravity" class="px-3 py-1.5 text-[10px] font-mono hover:bg-red-500/10 transition-colors group/hash">
41-
40+
<button onclick="triggerSecretUnlock('gravity')" class="px-3 py-1.5 text-[10px] font-mono hover:bg-red-500/10 transition-colors group/hash">
4241
<span class="text-[var(--text-muted)] group-hover/hash:text-red-500">Hash:</span>
4342
<span class="text-accent font-bold underline decoration-dotted">
4443
<code class="cursor-pointer hover:text-red-500 transition-colors">{{ build.hash }}</code>

‎src/_includes/game-stats.njk‎

Lines changed: 52 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,87 @@
11
<div class="flex items-center gap-3 md:gap-4">
22
{% if page.url == "/" %}
3-
<button data-action="scroll-to-random" class="surprise-btn bg-blue-600 text-white px-8 py-3 rounded-full font-black uppercase tracking-widest transition-all active:scale-95 shadow-lg shadow-blue-500/30">
3+
<button onclick="scrollToRandomUser()" class="surprise-btn bg-blue-600 text-white px-8 py-3 rounded-full font-black uppercase tracking-widest transition-all active:scale-95 shadow-lg shadow-blue-500/30">
44
✨ Surprise Me
55
</button>
66
{% endif %}
77

88
<div id="game-stats" class="flex items-center gap-3 md:gap-4 px-3 py-1.5 md:px-4 md:py-2 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-2xl shadow-sm">
99

10-
<div id="level-badge" data-action="level-click" class="w-8 h-8 md:w-10 md:h-10 flex items-center justify-center rounded-xl text-lg md:text-xl bg-black/5 dark:bg-white/5 relative cursor-pointer hover:bg-black/10 dark:hover:bg-white/10 transition-colors">
10+
<div id="level-badge" onclick="handleLevelClick()" class="w-8 h-8 md:w-10 md:h-10 flex items-center justify-center rounded-xl text-lg md:text-xl bg-black/5 dark:bg-white/5 relative cursor-pointer hover:bg-black/10 dark:hover:bg-white/10 transition-colors">
1111
🐣
1212
</div>
1313

1414
<div class="hidden sm:flex flex-col">
1515
<div class="flex items-center gap-2">
16+
1617
<div class="relative group">
1718
<span id="level-name" class="text-[9px] md:text-[10px] font-black uppercase tracking-widest text-[var(--text-main)] cursor-help hover:text-accent transition-colors">
1819
Newbie
1920
</span>
21+
2022
<div id="level-tooltip" class="absolute top-full left-0 mt-2 w-56 p-3 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-xl shadow-xl opacity-0 scale-95 -translate-y-2 pointer-events-none transition-all duration-200 group-hover:opacity-100 group-hover:scale-100 group-hover:translate-y-0 z-50">
2123
<div id="tooltip-rarity" class="text-[7px] font-black uppercase tracking-tighter px-1.5 py-0.5 rounded mb-1.5 inline-block bg-accent/10 text-accent border border-current/20">Common</div>
2224
<p id="tooltip-desc" class="text-[10px] leading-relaxed text-[var(--text-main)] opacity-70 italic">Just starting your cosmic journey.</p>
2325
<div class="absolute -top-1 left-4 w-2 h-2 bg-[var(--bg-card)] border-l border-t border-[var(--border-color)] rotate-45"></div>
2426
</div>
2527
</div>
28+
2629
<span class="text-[8px] font-mono font-bold text-accent bg-accent/10 px-1.5 py-0.5 rounded">
2730
XP: <span id="total-xp-display">0 / 45</span>
2831
</span>
32+
2933
<div class="relative group">
3034
<span class="text-[8px] md:text-[9px] opacity-60 font-bold bg-black/5 dark:bg-white/10 px-1.5 py-0.5 rounded cursor-help hover:text-accent transition-colors">
3135
LVL <span id="level-number">0</span>
3236
</span>
37+
3338
<div class="absolute top-full right-0 mt-2 w-44 p-3 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-xl shadow-xl opacity-0 scale-95 -translate-y-2 pointer-events-none transition-all duration-200 group-hover:opacity-100 group-hover:scale-100 group-hover:translate-y-0 z-50">
3439
<div class="text-[8px] font-black uppercase tracking-widest mb-2 opacity-50 border-b border-[var(--border-color)] pb-1">Collection</div>
3540
<div class="grid grid-cols-1 gap-1.5 text-[9px] font-bold">
36-
<div class="flex items-center justify-between"><div class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-[#94a3b8]"></span> Common</div><span id="count-common" class="opacity-60 font-mono">0</span></div>
37-
<div class="flex items-center justify-between"><div class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-[#10b981]"></span> Uncommon</div><span id="count-uncommon" class="opacity-60 font-mono">0</span></div>
38-
<div class="flex items-center justify-between"><div class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-[#3b82f6]"></span> Rare</div><span id="count-rare" class="opacity-60 font-mono">0</span></div>
39-
<div class="flex items-center justify-between"><div class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-[#a855f7]"></span> Epic</div><span id="count-epic" class="opacity-60 font-mono">0</span></div>
40-
<div class="flex items-center justify-between"><div class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-[#fbbf24]"></span> Legend</div><span id="count-legendary" class="opacity-60 font-mono">0</span></div>
41-
<div class="flex items-center justify-between"><div class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-[#ef4444]"></span> Mythic</div><span id="count-mythic" class="opacity-60 font-mono">0</span></div>
42-
<div class="flex items-center justify-between"><div class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-[#ffffff] shadow-[0_0_5px_#fff]"></span> Absolute</div><span id="count-absolute" class="opacity-60 font-mono">0</span></div>
41+
<div class="flex items-center justify-between">
42+
<div class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-[#94a3b8]"></span> Common</div>
43+
<span id="count-common" class="opacity-60 font-mono">0</span>
44+
</div>
45+
<div class="flex items-center justify-between">
46+
<div class="flex items-center gap-1.5">
47+
<span class="w-1.5 h-1.5 rounded-full bg-[#10b981]"></span>
48+
Uncommon
49+
</div>
50+
<span id="count-uncommon" class="opacity-60 font-mono">0</span>
51+
</div>
52+
<div class="flex items-center justify-between">
53+
<div class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-[#3b82f6]"></span> Rare</div>
54+
<span id="count-rare" class="opacity-60 font-mono">0</span>
55+
</div>
56+
<div class="flex items-center justify-between">
57+
<div class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-[#a855f7]"></span> Epic</div>
58+
<span id="count-epic" class="opacity-60 font-mono">0</span>
59+
</div>
60+
<div class="flex items-center justify-between">
61+
<div class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-[#fbbf24]"></span> Legend</div>
62+
<span id="count-legendary" class="opacity-60 font-mono">0</span>
63+
</div>
64+
65+
<div class="flex items-center justify-between">
66+
<div class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-[#ef4444]"></span> Mythic</div>
67+
<span id="count-mythic" class="opacity-60 font-mono">0</span>
68+
</div>
69+
70+
<div class="flex items-center justify-between">
71+
<div class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-[#ffffff] shadow-[0_0_5px_#fff]"></span> Absolute</div>
72+
<span id="count-absolute" class="opacity-60 font-mono">0</span>
73+
</div>
4374
</div>
4475
<div class="absolute -top-1 right-4 w-2 h-2 bg-[var(--bg-card)] border-l border-t border-[var(--border-color)] rotate-45"></div>
4576
</div>
4677
</div>
78+
4779
</div>
4880
<div class="w-full h-1 md:h-1.5 bg-black/10 dark:bg-white/10 rounded-full mt-1.5 md:mt-2 overflow-hidden">
4981
<div id="level-progress" class="h-full bg-accent transition-all duration-1000" style="width: 0%"></div>
5082
</div>
83+
84+
{# Per-game high score mini-strip (hidden on xs) #}
5185
<div class="hidden md:flex items-center gap-3 mt-1.5">
5286
<span class="text-[7px] font-mono text-[var(--text-muted)] uppercase tracking-widest opacity-60">HS:</span>
5387
<span class="text-[7px] font-mono font-bold text-[var(--text-muted)]">👾 <span id="hs-si" class="text-accent">—</span></span>
@@ -58,14 +92,19 @@
5892

5993
<div class="w-px h-6 md:h-8 bg-[var(--border-color)] ml-1"></div>
6094

61-
<button data-action="toggle-theme" class="text-base md:text-lg p-1 md:p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-full transition-all" id="theme-icon">
95+
<button onclick="toggleTheme()" class="text-base md:text-lg p-1 md:p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-full transition-all" id="theme-icon">
6296
🌙
6397
</button>
64-
<div id="achievement-badges" class="hidden sm:flex items-center gap-1 ml-1"></div>
98+
99+
{# Achievement badges — shown when earned, read from localStorage #}
100+
<div id="achievement-badges" class="hidden sm:flex items-center gap-1 ml-1">
101+
</div>
65102
</div>
66103
</div>
104+
67105
<script>
68106
(function refreshGameStats() {
107+
// High scores
69108
var hs = {
70109
"hs-si": localStorage.getItem("hs_space-invaders"),
71110
"hs-cb": localStorage.getItem("hs_code-breaker"),
@@ -75,6 +114,8 @@
75114
var el = document.getElementById(id);
76115
if (el && hs[id]) el.textContent = hs[id];
77116
});
117+
118+
// Achievement badges
78119
var badgeContainer = document.getElementById("achievement-badges");
79120
if (!badgeContainer) return;
80121
var earned = {};

‎src/_includes/matrix-overlay.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div id="matrix-overlay" class="fixed inset-0 bg-black hidden z-[9999]">
22
<canvas id="matrix-canvas" class="block"></canvas>
3-
<button data-action="close-matrix" class="fixed top-8 right-8 z-[10000] bg-white/10 hover:bg-white/20 text-white px-6 py-3 rounded-full font-mono text-xs border border-white/30 backdrop-blur-md">
3+
<button onclick="closeMatrix()" class="fixed top-8 right-8 z-[10000] bg-white/10 hover:bg-white/20 text-white px-6 py-3 rounded-full font-mono text-xs border border-white/30 backdrop-blur-md">
44
[ESC] EXIT_SIMULATION
55
</button>
66
</div>

‎src/_includes/scripts.njk‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,3 @@
1212
<script src="/assets/js/games/code-breaker.js"></script>
1313
<script src="/assets/js/games/dev-duel.js"></script>
1414
<script src="/assets/js/eggs.js"></script>
15-
<script src="/assets/js/ui-bindings.js"></script>

‎src/_includes/skills-list.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="skills-list">
22
{% for skill in skills %}
33
<span class="skill-item">
4-
<span data-action="floating-xp" class="skill-tag cursor-crosshair">{{ skill }}</span>
4+
<span onmouseenter="createFloatingXP(event)" class="skill-tag cursor-crosshair">{{ skill }}</span>
55
</span>
66
{% endfor %}
77
</div>

0 commit comments

Comments
 (0)