Skip to content

Commit 3482b53

Browse files
quantumchain-coreCopilotBaseMax
authored
Patch 2 fix: remove inline button handlers and centralize UI click binding (#627) (#649)
* Create ui-bindings.js * Update matrix-overlay.njk * Update ui-bindings.js * Update system-log.njk * Update system-override.njk * Update ui-bindings.js * Update bio.njk * Update ui-bindings.js * Update footer-details.njk * Update ui-bindings.js * Update ui-bindings.js * Update game-stats.njk * Update scripts.njk * Update skills-list.njk * Update ui-bindings.js * Update system-override.njk * Update ui-bindings.js * Update games.njk * Update ui-bindings.js * Update index.njk * Update ui-bindings.js * Update ui-bindings.js * Update system-override.njk * Update ui-bindings.js * Update ui-bindings.js * Potential fix for pull request finding 'Remove duplicate profile initialization and unmatched script closing tag' Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * Update footer-details.njk * Update footer-details.njk --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Seyyed Ali Mohammadiyeh (Max Base) <MaxBaseCode@Gmail.Com>
1 parent 39e6ba3 commit 3482b53

11 files changed

Lines changed: 106 additions & 169 deletions

File tree

‎src/_includes/bio.njk‎

Lines changed: 3 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,33 @@ 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-
76
<div class="lg:col-span-1 space-y-6">
87
<div class="user-card p-8 rounded-3xl sticky top-24">
98
<div class="mb-6">
109
<h1 class="text-3xl font-black leading-tight">{{ name }}</h1>
1110
<p class="text-accent font-bold mt-1">{{ role }}</p>
1211
</div>
13-
1412
<div class="space-y-4 text-sm border-t border-[var(--border-color)] pt-6">
1513
{% if location or country %}
1614
<div class="flex items-center gap-3">
1715
<span class="text-lg">📍</span>
1816
<span class="text-[var(--text-muted)]">{{ location }}{% if location and country %}, {% endif %}{{ country }}</span>
1917
</div>
2018
{% endif %}
21-
2219
{% if email %}
2320
<div class="flex items-center gap-3 group cursor-pointer copy-email-btn" data-email="{{ email }}">
2421
<span class="text-lg">✉️</span>
2522
<span class="text-[var(--text-muted)] group-hover:text-accent truncate">{{ email }}</span>
2623
<span class="hidden group-hover:inline text-[10px] bg-accent text-white px-2 py-0.5 rounded">Copy</span>
2724
</div>
2825
{% endif %}
29-
3026
{% if website %}
3127
<div class="flex items-center gap-3">
3228
<span class="text-lg">🔗</span>
3329
<a href="{{ website }}" target="_blank" rel="noopener noreferrer" class="text-accent font-bold hover:underline truncate">{{ website | replace("https://", "") }}</a>
3430
</div>
3531
{% endif %}
3632
</div>
37-
3833
<div class="mt-8 pt-8 border-t border-[var(--border-color)]">
3934
<h3 class="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] mb-4">Connect</h3>
4035
<div class="grid grid-cols-2 gap-3">
@@ -62,7 +57,6 @@ layout: layouts/base.njk
6257
</div>
6358
</div>
6459
</div>
65-
6660
<div class="lg:col-span-2 space-y-8">
6761
{% if bio %}
6862
<div class="user-card p-8 sm:p-12 rounded-3xl">
@@ -74,7 +68,6 @@ layout: layouts/base.njk
7468
</div>
7569
</div>
7670
{% endif %}
77-
7871
{% if languages is defined and languages is not null %}
7972
<div class="user-card p-8 sm:p-12 rounded-3xl">
8073
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
@@ -86,22 +79,18 @@ layout: layouts/base.njk
8679
</div>
8780
</div>
8881
{% endif %}
89-
9082
<div class="user-card p-8 sm:p-12 rounded-3xl">
9183
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
9284
<span class="w-8 h-[2px] bg-accent" aria-hidden="true"></span> Mini-Game
9385
</h2>
9486
<p class="text-sm text-[var(--text-muted)] mb-4">Catch the skill tiles before they fall! Collect enough to win XP.</p>
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">
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">
9888
⌨️ Play Code Breaker
9989
</button>
10090
</div>
10191
</div>
10292
</div>
10393
</main>
104-
10594
<script>
10695
function copyToClipboard(text, el) {
10796
const span = el.querySelector('span:last-child');
@@ -112,29 +101,19 @@ layout: layouts/base.njk
112101
el.copyTimeout = setTimeout(() => { span.innerText = 'Copy'; }, 2000);
113102
}
114103
};
115-
116104
if (!navigator.clipboard) {
117105
const ta = document.createElement('textarea');
118106
ta.value = text;
119107
ta.style.position = 'fixed';
120108
ta.style.opacity = '0';
121109
document.body.appendChild(ta);
122110
ta.select();
123-
try {
124-
document.execCommand('copy');
125-
showSuccess();
126-
} catch (err) {
127-
console.error('Fallback copy failed:', err);
128-
}
111+
try { document.execCommand('copy'); showSuccess(); } catch (err) { console.error('Fallback copy failed:', err); }
129112
document.body.removeChild(ta);
130113
return;
131114
}
132-
133-
navigator.clipboard.writeText(text)
134-
.then(showSuccess)
135-
.catch(err => console.error('Failed to copy:', err));
115+
navigator.clipboard.writeText(text).then(showSuccess).catch(err => console.error('Failed to copy:', err));
136116
}
137-
138117
document.querySelector('.copy-email-btn')?.addEventListener('click', function() {
139118
copyToClipboard(this.getAttribute('data-email'), this);
140119
});

‎src/_includes/footer-details.njk‎

Lines changed: 3 additions & 2 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-
onclick="handleFooterDotClick()"
30+
data-action="footer-dot"
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,7 +37,8 @@
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 onclick="triggerSecretUnlock('gravity')" class="px-3 py-1.5 text-[10px] font-mono hover:bg-red-500/10 transition-colors group/hash">
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+
4142
<span class="text-[var(--text-muted)] group-hover/hash:text-red-500">Hash:</span>
4243
<span class="text-accent font-bold underline decoration-dotted">
4344
<code class="cursor-pointer hover:text-red-500 transition-colors">{{ build.hash }}</code>

‎src/_includes/game-stats.njk‎

Lines changed: 11 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,53 @@
11
<div class="flex items-center gap-3 md:gap-4">
22
{% if page.url == "/" %}
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">
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">
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" 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">
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">
1111
🐣
1212
</div>
1313

1414
<div class="hidden sm:flex flex-col">
1515
<div class="flex items-center gap-2">
16-
1716
<div class="relative group">
1817
<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">
1918
Newbie
2019
</span>
21-
2220
<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">
2321
<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>
2422
<p id="tooltip-desc" class="text-[10px] leading-relaxed text-[var(--text-main)] opacity-70 italic">Just starting your cosmic journey.</p>
2523
<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>
2624
</div>
2725
</div>
28-
2926
<span class="text-[8px] font-mono font-bold text-accent bg-accent/10 px-1.5 py-0.5 rounded">
3027
XP: <span id="total-xp-display">0 / 45</span>
3128
</span>
32-
3329
<div class="relative group">
3430
<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">
3531
LVL <span id="level-number">0</span>
3632
</span>
37-
3833
<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">
3934
<div class="text-[8px] font-black uppercase tracking-widest mb-2 opacity-50 border-b border-[var(--border-color)] pb-1">Collection</div>
4035
<div class="grid grid-cols-1 gap-1.5 text-[9px] font-bold">
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>
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>
7443
</div>
7544
<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>
7645
</div>
7746
</div>
78-
7947
</div>
8048
<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">
8149
<div id="level-progress" class="h-full bg-accent transition-all duration-1000" style="width: 0%"></div>
8250
</div>
83-
84-
{# Per-game high score mini-strip (hidden on xs) #}
8551
<div class="hidden md:flex items-center gap-3 mt-1.5">
8652
<span class="text-[7px] font-mono text-[var(--text-muted)] uppercase tracking-widest opacity-60">HS:</span>
8753
<span class="text-[7px] font-mono font-bold text-[var(--text-muted)]">👾 <span id="hs-si" class="text-accent">—</span></span>
@@ -92,19 +58,14 @@
9258

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

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">
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">
9662
🌙
9763
</button>
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>
64+
<div id="achievement-badges" class="hidden sm:flex items-center gap-1 ml-1"></div>
10265
</div>
10366
</div>
104-
10567
<script>
10668
(function refreshGameStats() {
107-
// High scores
10869
var hs = {
10970
"hs-si": localStorage.getItem("hs_space-invaders"),
11071
"hs-cb": localStorage.getItem("hs_code-breaker"),
@@ -114,8 +75,6 @@
11475
var el = document.getElementById(id);
11576
if (el && hs[id]) el.textContent = hs[id];
11677
});
117-
118-
// Achievement badges
11978
var badgeContainer = document.getElementById("achievement-badges");
12079
if (!badgeContainer) return;
12180
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 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">
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">
44
[ESC] EXIT_SIMULATION
55
</button>
66
</div>

‎src/_includes/scripts.njk‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@
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 onmouseenter="createFloatingXP(event)" class="skill-tag cursor-crosshair">{{ skill }}</span>
4+
<span data-action="floating-xp" class="skill-tag cursor-crosshair">{{ skill }}</span>
55
</span>
66
{% endfor %}
77
</div>

0 commit comments

Comments
 (0)