Focus on d overrides

Author: jbampton

src/_includes/footer.njk

@@ -52,34 +52,34 @@
     </div>
 
     <div class="grid grid-cols-2 gap-1.5 mb-2">
-        <button onclick="triggerSecretUnlock('matrix')" class="py-1.5 bg-green-500/5 hover:bg-green-500/20 text-green-500 text-[8px] border border-green-500/20 rounded transition-all">
+        <button onclick="triggerSecretUnlock('matrix')" class="override-btn py-1.5 bg-green-500/5 hover:bg-green-500/20 text-green-500 text-[8px] border border-green-500/20 rounded transition-all">
             MATRIX
         </button>
-        <button onclick="triggerSecretUnlock('konami')" class="py-1.5 bg-yellow-500/5 hover:bg-yellow-500/20 text-yellow-500 text-[8px] border border-yellow-500/20 rounded transition-all">
+        <button onclick="triggerSecretUnlock('konami')" class="override-btn py-1.5 bg-yellow-500/5 hover:bg-yellow-500/20 text-yellow-500 text-[8px] border border-yellow-500/20 rounded transition-all">
             KONAMI
         </button>
-        <button onclick="triggerSecretUnlock('gravity')" class="py-1.5 bg-red-500/5 hover:bg-red-500/20 text-red-500 text-[8px] border border-red-500/20 rounded transition-all">
+        <button onclick="triggerSecretUnlock('gravity')" class="override-btn py-1.5 bg-red-500/5 hover:bg-red-500/20 text-red-500 text-[8px] border border-red-500/20 rounded transition-all">
             GRAVITY
         </button>
-        <button onclick="triggerSecretUnlock('badge_click')" class="py-1.5 bg-purple-500/5 hover:bg-purple-500/20 text-purple-400 text-[8px] border border-purple-500/20 rounded transition-all">
+        <button onclick="triggerSecretUnlock('badge_click')" class="override-btn py-1.5 bg-purple-500/5 hover:bg-purple-500/20 text-purple-400 text-[8px] border border-purple-500/20 rounded transition-all">
             BADGE_XP
         </button>
     </div>
 
     <div class="space-y-1 mb-2">
-        <button onclick="addExperience(5); playSound('click');" class="w-full flex justify-between px-2 py-1 bg-cyan-500/5 text-cyan-400 text-[8px] border border-cyan-500/20 rounded">
+        <button onclick="addExperience(5); playSound('click');" class="override-btn w-full flex justify-between px-2 py-1 bg-cyan-500/5 text-cyan-400 text-[8px] border border-cyan-500/20 rounded">
             <span>💎 SKILL_MINER</span>
             <span class="opacity-50">+5</span>
         </button>
-        <button onclick="addExperience(15); playSound('restore');" class="w-full flex justify-between px-2 py-1 bg-pink-500/5 text-pink-400 text-[8px] border border-pink-500/20 rounded">
+        <button onclick="addExperience(15); playSound('restore');" class="override-btn w-full flex justify-between px-2 py-1 bg-pink-500/5 text-pink-400 text-[8px] border border-pink-500/20 rounded">
             <span>🛠️ SYS_OPTIMIZE</span>
             <span class="opacity-50">+15</span>
         </button>
-        <button onclick="triggerMagicXP(); playSound('levelUp');" class="w-full flex justify-between px-2 py-1.5 bg-gradient-to-r from-purple-600/20 to-blue-600/20 text-purple-400 text-[8px] border border-purple-500/30 rounded hover:from-purple-600/40 hover:to-blue-600/40 transition-all group">
+        <button onclick="triggerMagicXP(); playSound('levelUp');" class="override-btn w-full flex justify-between px-2 py-1.5 bg-gradient-to-r from-purple-600/20 to-blue-600/20 text-purple-400 text-[8px] border border-purple-500/30 rounded hover:from-purple-600/40 hover:to-blue-600/40 transition-all group">
             <span>✨ CAST_MAGIC_XP</span>
             <span class="group-hover:animate-pulse">+50 XP</span>
         </button>
-        <button onclick="toggleScreenshotMode()" class="w-full flex justify-between px-2 py-1 bg-white/5 text-slate-400 text-[8px] border border-white/10 rounded">
+        <button onclick="toggleScreenshotMode()" class="override-btn w-full flex justify-between px-2 py-1 bg-white/5 text-slate-400 text-[8px] border border-white/10 rounded">
             <span>📸 SCREENSHOT</span>
             <span class="opacity-50">[5 Seconds]</span>
         </button>
@@ -93,11 +93,12 @@
             placeholder="0"
             min="0"
             max="200"
+            class="override-btn"
             style="background-color: #000 !important; color: #00ffcc !important; border: 1px solid #00ffcc !important; width: 60px !important; height: 30px !important; font-size: 14px !important; padding: 0 5px !important; border-radius: 4px !important;"
         >
         <button
             onclick="jumpToLevel()"
-            class="flex-1 bg-accent/20 hover:bg-accent/40 text-accent text-[10px] font-black py-1 rounded transition-all border border-accent/40 uppercase"
+            class="override-btn flex-1 bg-accent/20 hover:bg-accent/40 text-accent text-[10px] font-black py-1 rounded transition-all border border-accent/40 uppercase"
             style="height: 30px !important;"
         >
             EXECUTE
@@ -106,11 +107,11 @@
 </div>
 
     <div class="flex gap-1.5 pt-2 border-t border-white/10">
-        <button id="self-destruct-btn" onclick="startSelfDestruct()" class="flex-1 py-1.5 bg-red-600/10 hover:bg-red-600/30 text-red-500 text-[8px] border border-red-500/30 rounded flex justify-center gap-1">
+        <button id="self-destruct-btn" onclick="startSelfDestruct()" class="override-btn flex-1 py-1.5 bg-red-600/10 hover:bg-red-600/30 text-red-500 text-[8px] border border-red-500/30 rounded flex justify-center gap-1">
             <span id="destruct-text">DESTRUCT</span>
             <span id="destruct-timer"></span>
         </button>
-        <button onclick="localStorage.clear(); location.reload();" class="px-2 py-1.5 bg-blue-600/10 hover:bg-blue-600/30 text-blue-400 text-[8px] border border-blue-500/20 rounded uppercase">
+        <button onclick="localStorage.clear(); location.reload();" class="override-btn px-2 py-1.5 bg-blue-600/10 hover:bg-blue-600/30 text-blue-400 text-[8px] border border-blue-500/20 rounded uppercase">
             Reset
         </button>
     </div>

src/assets/js/script.js

@@ -682,13 +682,27 @@ window.addEventListener('keydown', (e) => {
     if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
 
     if (key === 'd') {
-        const devPanel = document.getElementById('dev-tools');
-        if (devPanel) {
-            const isHidden = devPanel.classList.toggle('hidden');
-            localStorage.setItem('devToolsVisible', !isHidden);
-            playSound(isHidden ? 'click' : 'secret');
+        e.preventDefault();
+
+        const systemDash = document.getElementById('dev-tools'); // Adjust ID as needed
+        const isOpening = systemDash.classList.contains('hidden');
+
+        if (isOpening) {
+            document.getElementById('matrix-console-container').classList.add('hidden');
+            systemDash.classList.remove('hidden');
+
+            // Wait 100-150ms for the animation/display to settle
+            setTimeout(() => {
+                // Find the first interactive element (button or link)
+                const firstControl = systemDash.querySelector('button, a, input');
+                if (firstControl) {
+                    firstControl.focus();
+                }
+            }, 150);
+        } else {
+            systemDash.classList.add('hidden');
+            document.body.focus(); // Return focus to the page
         }
-        return;
     }
 
     if (key === konamiCode[konamiPosition]) {