Add XP mining on skills (#246)

Author: jbampton

src/_includes/footer.njk

@@ -72,13 +72,23 @@
             <span class="opacity-50">+1 LVL</span>
         </button>
 
-        <button
-          onclick="toggleScreenshotMode()"
-          class="w-full flex justify-between items-center p-2 mb-2 rounded-md border border-white/5 bg-white/5 text-[10px] font-mono text-slate-400 hover:bg-white/10 hover:border-slate-400 hover:translate-x-1 transition-all duration-200 cursor-pointer"
-        >
-          <span class="flex items-center gap-2">📸 SCREENSHOT</span>
-          <span class="opacity-50">[5 seconds]</span>
-        </button>
+      <div class="flex flex-col gap-2 mt-4 pt-4 border-t border-white/10">
+            <button
+              onclick="addExperience(5)"
+              class="w-full flex justify-between items-center p-2 rounded-md border border-cyan-500/30 bg-cyan-500/5 text-[10px] font-mono text-cyan-400 hover:bg-cyan-500/20 hover:border-cyan-400 transition-all cursor-pointer"
+            >
+              <span class="flex items-center gap-2">💎 SIMULATE SKILL MINING</span>
+              <span class="opacity-60">+5 XP</span>
+            </button>
+
+            <button
+              onclick="toggleScreenshotMode()"
+              class="w-full flex justify-between items-center p-2 rounded-md border border-white/5 bg-white/5 text-[10px] font-mono text-slate-400 hover:bg-white/10 hover:border-slate-400 transition-all cursor-pointer"
+            >
+              <span class="flex items-center gap-2">📸 SCREENSHOT MODE</span>
+              <span class="opacity-40">[5S]</span>
+            </button>
+        </div>
 
         <div class="pt-2">
             <button onclick="localStorage.clear(); location.reload();" class="w-full py-3 bg-blue-600/20 hover:bg-blue-600/40 text-blue-400 text-[10px] font-bold border border-blue-500/30 rounded-lg transition-all">

src/assets/css/style.css

@@ -343,3 +343,51 @@ html body #dev-tools[data-lock="true"] {
         filter: drop-shadow(0 0 12px var(--accent)) hue-rotate(360deg);
     }
 }
+/* Visual feedback when hovering a skill to gain XP */
+.mining-xp {
+    filter: brightness(1.5);
+    box-shadow: 0 0 15px var(--accent);
+    transition: all 0.2s ease;
+}
+
+/* Special styling for those who have reached Level 5 (Data Miner) */
+body[data-level="5"] .skill-item {
+    border-color: #06b6d4 !important; /* Data Miner Cyan */
+    background: rgba(6, 182, 212, 0.1) !important;
+    position: relative;
+    overflow: hidden;
+}
+
+/* Add a gem-like sparkle to skills at Level 5 */
+body[data-level="5"] .skill-item::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
+    transform: rotate(45deg);
+    animation: gem-shimmer 3s infinite;
+}
+
+@keyframes gem-shimmer {
+    0% { transform: translateX(-100%) rotate(45deg); }
+    100% { transform: translateX(100%) rotate(45deg); }
+}
+@keyframes float-up {
+    0% { transform: translate(-50%, 0); opacity: 1; }
+    100% { transform: translate(-50%, -50px); opacity: 0; }
+}
+
+/* Level 5 Specific Visual Perk */
+.level-architect .skill-item,
+body[data-level="5"] .skill-item {
+    border-color: #06b6d4 !important;
+    background: rgba(6, 182, 212, 0.1) !important;
+    box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
+}
+
+.skill-item {
+    cursor: crosshair; /* Makes it feel like you are "mining" */
+}

src/assets/js/script.js

@@ -520,10 +520,85 @@ window.toggleScreenshotMode = function() {
 document.addEventListener('DOMContentLoaded', () => {
     const devToolsVisible = localStorage.getItem('devToolsVisible') === 'true';
     const devPanel = document.getElementById('dev-tools');
+    // Add this to your initialization script
+    let skillHoverCount = 0;
+
     if (devToolsVisible && devPanel) {
         devPanel.classList.remove('hidden');
     }
 
     applyTheme(localStorage.getItem('theme') || 'light');
     updateGameUI();
 });
+
+/**
+ * 9. ENHANCED XP & SKILL MINING SYSTEM
+ */
+let currentXP = JSON.parse(localStorage.getItem('userXP')) || 0;
+const XP_PER_LEVEL = 20; // Adjust this to make leveling harder/easier
+
+function addExperience(amount) {
+    // Stop XP if at Max Level or if system is locked (Self-Destruct)
+    const isLocked = document.getElementById('dev-tools')?.hasAttribute('data-lock');
+    if (unlockedEggs.length >= LEVELS.length - 1 || isLocked) return;
+
+    currentXP += amount;
+
+    // Check for Level Up
+    // If XP exceeds threshold, we "unlock" a new egg/level
+    if (currentXP >= XP_PER_LEVEL) {
+        currentXP = 0; // Reset for next level
+        unlockEgg(`level_up_${unlockedEggs.length + 1}`);
+    }
+
+    localStorage.setItem('userXP', JSON.stringify(currentXP));
+    updateGameUI();
+}
+
+function createFloatingXP(event) {
+    const float = document.createElement('div');
+    // Color matches Level 5 "Data Miner" Cyan
+    const levelColor = LEVELS[unlockedEggs.length]?.color || '#06b6d4';
+
+    float.innerText = '+1 XP';
+    float.style.cssText = `
+        position: fixed;
+        left: ${event.clientX}px;
+        top: ${event.clientY}px;
+        color: ${levelColor};
+        font-family: monospace;
+        font-weight: 900;
+        font-size: 14px;
+        pointer-events: none;
+        z-index: 10000;
+        animation: float-up 0.8s ease-out forwards;
+        text-shadow: 0 0 10px rgba(0,0,0,0.5);
+    `;
+
+    document.body.appendChild(float);
+    setTimeout(() => float.remove(), 800);
+}
+
+function initSkillXP() {
+    const skills = document.querySelectorAll('.skill-item');
+    skills.forEach(skill => {
+        skill.addEventListener('mouseenter', (e) => {
+            const isLocked = document.getElementById('dev-tools')?.hasAttribute('data-lock');
+            if (!isLocked) {
+                addExperience(1);
+                createFloatingXP(e);
+
+                // Fancy scale-up on hover
+                skill.style.transform = "scale(1.1) translateY(-2px)";
+                skill.style.transition = "transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)";
+            }
+        });
+
+        skill.addEventListener('mouseleave', () => {
+            skill.style.transform = "scale(1) translateY(0)";
+        });
+    });
+}
+
+// Re-initialize skills after Surprise scroll or any DOM changes
+window.addEventListener('DOMContentLoaded', initSkillXP);