Patch 2 fix: remove inline button handlers and centralize UI click binding (#627)

src/_includes/bio.njk

@@ -3,38 +3,33 @@ layout: layouts/base.njk
 ---
 <main id="profile-data" data-name="{{ name }}" data-skills="{{ languages }}" data-email="{{ email }}" class="max-w-5xl mx-auto px-4 py-12">
   <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-
     <div class="lg:col-span-1 space-y-6">
       <div class="user-card p-8 rounded-3xl sticky top-24">
         <div class="mb-6">
           <h1 class="text-3xl font-black leading-tight">{{ name }}</h1>
           <p class="text-accent font-bold mt-1">{{ role }}</p>
         </div>
-
         <div class="space-y-4 text-sm border-t border-[var(--border-color)] pt-6">
           {% if location or country %}
           <div class="flex items-center gap-3">
             <span class="text-lg">📍</span>
             <span class="text-[var(--text-muted)]">{{ location }}{% if location and country %}, {% endif %}{{ country }}</span>
           </div>
           {% endif %}
-
           {% if email %}
           <div class="flex items-center gap-3 group cursor-pointer copy-email-btn" data-email="{{ email }}">
             <span class="text-lg">✉️</span>
             <span class="text-[var(--text-muted)] group-hover:text-accent truncate">{{ email }}</span>
             <span class="hidden group-hover:inline text-[10px] bg-accent text-white px-2 py-0.5 rounded">Copy</span>
           </div>
           {% endif %}
-
           {% if website %}
           <div class="flex items-center gap-3">
             <span class="text-lg">🔗</span>
             <a href="{{ website }}" target="_blank" rel="noopener noreferrer" class="text-accent font-bold hover:underline truncate">{{ website | replace("https://", "") }}</a>
           </div>
           {% endif %}
         </div>
-
         <div class="mt-8 pt-8 border-t border-[var(--border-color)]">
           <h3 class="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] mb-4">Connect</h3>
           <div class="grid grid-cols-2 gap-3">
@@ -62,7 +57,6 @@ layout: layouts/base.njk
         </div>
       </div>
     </div>
-
     <div class="lg:col-span-2 space-y-8">
       {% if bio %}
       <div class="user-card p-8 sm:p-12 rounded-3xl">
@@ -74,7 +68,6 @@ layout: layouts/base.njk
         </div>
       </div>
       {% endif %}
-
       {% if languages is defined and languages is not null %}
       <div class="user-card p-8 sm:p-12 rounded-3xl">
         <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
         </div>
       </div>
       {% endif %}
-
       <div class="user-card p-8 sm:p-12 rounded-3xl">
         <h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
           <span class="w-8 h-[2px] bg-accent" aria-hidden="true"></span> Mini-Game
         </h2>
         <p class="text-sm text-[var(--text-muted)] mb-4">Catch the skill tiles before they fall! Collect enough to win XP.</p>
-        <button
-          onclick="CodeBreaker.launch(window.PROFILE_SKILLS, window.PROFILE_NAME)"
-          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">
+        <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">
           ⌨️ Play Code Breaker
         </button>
       </div>
     </div>
   </div>
 </main>
-
 <script>
   function copyToClipboard(text, el) {
     const span = el.querySelector('span:last-child');
@@ -112,29 +101,19 @@ layout: layouts/base.njk
         el.copyTimeout = setTimeout(() => { span.innerText = 'Copy'; }, 2000);
       }
     };
-
     if (!navigator.clipboard) {
       const ta = document.createElement('textarea');
       ta.value = text;
       ta.style.position = 'fixed';
       ta.style.opacity = '0';
       document.body.appendChild(ta);
       ta.select();
-      try {
-        document.execCommand('copy');
-        showSuccess();
-      } catch (err) {
-        console.error('Fallback copy failed:', err);
-      }
+      try { document.execCommand('copy'); showSuccess(); } catch (err) { console.error('Fallback copy failed:', err); }
       document.body.removeChild(ta);
       return;
     }
-
-    navigator.clipboard.writeText(text)
-      .then(showSuccess)
-      .catch(err => console.error('Failed to copy:', err));
+    navigator.clipboard.writeText(text).then(showSuccess).catch(err => console.error('Failed to copy:', err));
   }
-
   document.querySelector('.copy-email-btn')?.addEventListener('click', function() {
     copyToClipboard(this.getAttribute('data-email'), this);
   });

src/_includes/footer-details.njk

@@ -27,7 +27,7 @@
       <div class="flex items-center gap-3">
         <button
           id="footer-surge-button"
-          onclick="handleFooterDotClick()"
+          data-action="footer-dot"
           class="relative flex h-6 w-6 items-center justify-center focus:outline-none group cursor-pointer"
         >
           <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 @@
       </div>
 
      <div class="flex items-center bg-[var(--bg-card)] border border-[var(--border-color)] rounded-lg overflow-hidden shadow-sm">
-      <button onclick="triggerSecretUnlock('gravity')" class="px-3 py-1.5 text-[10px] font-mono hover:bg-red-500/10 transition-colors group/hash">
+      <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">
+
         <span class="text-[var(--text-muted)] group-hover/hash:text-red-500">Hash:</span>
         <span class="text-accent font-bold underline decoration-dotted">
           <code class="cursor-pointer hover:text-red-500 transition-colors">{{ build.hash }}</code>

src/_includes/game-stats.njk

@@ -1,87 +1,53 @@
 <div class="flex items-center gap-3 md:gap-4">
     {% if page.url == "/" %}
-    <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">
+    <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">
         ✨ Surprise Me
     </button>
     {% endif %}
 
     <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">
 
-        <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">
+        <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">
             🐣
         </div>
 
         <div class="hidden sm:flex flex-col">
             <div class="flex items-center gap-2">
-
                 <div class="relative group">
                     <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">
                         Newbie
                     </span>
-
                     <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">
                         <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>
                         <p id="tooltip-desc" class="text-[10px] leading-relaxed text-[var(--text-main)] opacity-70 italic">Just starting your cosmic journey.</p>
                         <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>
                     </div>
                 </div>
-
                 <span class="text-[8px] font-mono font-bold text-accent bg-accent/10 px-1.5 py-0.5 rounded">
                     XP: <span id="total-xp-display">0 / 45</span>
                 </span>
-
                 <div class="relative group">
                     <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">
                         LVL <span id="level-number">0</span>
                     </span>
-
                     <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">
                         <div class="text-[8px] font-black uppercase tracking-widest mb-2 opacity-50 border-b border-[var(--border-color)] pb-1">Collection</div>
                         <div class="grid grid-cols-1 gap-1.5 text-[9px] font-bold">
-                            <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>
-                            <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>
-                            <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>
-                            <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>
-                            <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>
-
-                            <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>
-
-                            <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>
+                            <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>
+                            <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>
+                            <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>
+                            <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>
+                            <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>
+                            <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>
+                            <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>
                         </div>
                         <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>
                     </div>
                 </div>
-
             </div>
             <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">
                 <div id="level-progress" class="h-full bg-accent transition-all duration-1000" style="width: 0%"></div>
             </div>
-
-            {# Per-game high score mini-strip (hidden on xs) #}
             <div class="hidden md:flex items-center gap-3 mt-1.5">
                 <span class="text-[7px] font-mono text-[var(--text-muted)] uppercase tracking-widest opacity-60">HS:</span>
                 <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 @@
 
         <div class="w-px h-6 md:h-8 bg-[var(--border-color)] ml-1"></div>
 
-        <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">
+        <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">
             🌙
         </button>
-
-        {# Achievement badges — shown when earned, read from localStorage #}
-        <div id="achievement-badges" class="hidden sm:flex items-center gap-1 ml-1">
-        </div>
+        <div id="achievement-badges" class="hidden sm:flex items-center gap-1 ml-1"></div>
     </div>
 </div>
-
 <script>
 (function refreshGameStats() {
-  // High scores
   var hs = {
     "hs-si": localStorage.getItem("hs_space-invaders"),
     "hs-cb": localStorage.getItem("hs_code-breaker"),
@@ -114,8 +75,6 @@
     var el = document.getElementById(id);
     if (el && hs[id]) el.textContent = hs[id];
   });
-
-  // Achievement badges
   var badgeContainer = document.getElementById("achievement-badges");
   if (!badgeContainer) return;
   var earned = {};

src/_includes/matrix-overlay.njk

@@ -1,6 +1,6 @@
 <div id="matrix-overlay" class="fixed inset-0 bg-black hidden z-[9999]">
     <canvas id="matrix-canvas" class="block"></canvas>
-    <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">
+    <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">
         [ESC] EXIT_SIMULATION
     </button>
 </div>

src/_includes/scripts.njk

@@ -12,3 +12,4 @@
 <script src="/assets/js/games/code-breaker.js"></script>
 <script src="/assets/js/games/dev-duel.js"></script>
 <script src="/assets/js/eggs.js"></script>
+<script src="/assets/js/ui-bindings.js"></script>

src/_includes/skills-list.njk

@@ -1,7 +1,7 @@
 <div class="skills-list">
   {% for skill in skills %}
     <span class="skill-item">
-      <span onmouseenter="createFloatingXP(event)" class="skill-tag cursor-crosshair">{{ skill }}</span>
+      <span data-action="floating-xp" class="skill-tag cursor-crosshair">{{ skill }}</span>
     </span>
   {% endfor %}
 </div>