gamify it

index.html

@@ -61,7 +61,6 @@
                 }
             }
         }
-
         // Configuration
         const CONFIG = {
             HF_API_URL: "https://api-inference.huggingface.co/models/",
@@ -71,6 +70,21 @@
             HISTORY_SIZE: 20
         };
 
+        // Game Configuration
+        const GAME_CONFIG = {
+            XP_PER_TOKEN: 0.1,
+            XP_PER_QUERY: 5,
+            BONUS_XP_CREATIVE: 10,
+            BONUS_XP_TECHNICAL: 15,
+            LEVEL_UP_MULTIPLIER: 1.5,
+            ACHIEVEMENTS: {
+                FIRST_QUERY: { name: "First Query", xp: 25 },
+                CREATIVE_THINKER: { name: "Creative Thinker", xp: 50 },
+                TECHNICAL_EXPERT: { name: "Technical Expert", xp: 75 },
+                POWER_USER: { name: "Power User", xp: 100 },
+                MASTER_PROMPTER: { name: "Master Prompter", xp: 150 }
+            }
+        };
         const PROMPT_TEMPLATES = {
             "standard": `[INST] You are NeuroCognitive Terminal v9.24.6. Provide detailed technical analysis with references. 
 Break response into clear sections with markdown formatting. Current date: ${new Date().toISOString()}
@@ -81,14 +95,154 @@ Query: {query} Consider these unexpected angles:[/INST]`,
 Query: {query} Include: 1) Technical requirements 2) Implementation steps 3) Sample code[/INST]`
         };
 
-        // State management
+        // Game Mechanics
+        class GameManager {
+            static calculateXP(tokens, mode) {
+                let xp = GAME_CONFIG.XP_PER_QUERY + (tokens * GAME_CONFIG.XP_PER_TOKEN);
+                
+                if (mode === 'creative') {
+                    xp += GAME_CONFIG.BONUS_XP_CREATIVE;
+                } else if (mode === 'technical') {
+                    xp += GAME_CONFIG.BONUS_XP_TECHNICAL;
+                }
+                
+                return Math.round(xp);
+            }
+
+            static levelUp(currentLevel) {
+                return Math.floor(100 * Math.pow(GAME_CONFIG.LEVEL_UP_MULTIPLIER, currentLevel - 1));
+            }
+
+            static addXP(xp) {
+                const stats = AppState.playerStats;
+                stats.xp += xp;
+                stats.totalTokens += tokens;
+                stats.totalQueries += 1;
+                
+                const nextLevelXP = this.levelUp(stats.level);
+                if (stats.xp >= nextLevelXP) {
+                    stats.level += 1;
+                    stats.xp -= nextLevelXP;
+                    this.showLevelUp(stats.level);
+                }
+                
+                this.updateUI();
+                localStorage.setItem('playerStats', JSON.stringify(AppState.playerStats));
+            }
+
+            static updateUI() {
+                const stats = AppState.playerStats;
+                const nextLevelXP = this.levelUp(stats.level);
+                
+                document.getElementById('playerLevel').textContent = stats.level;
+                document.getElementById('currentXP').textContent = stats.xp;
+                document.getElementById('nextLevelXP').textContent = nextLevelXP;
+                document.getElementById('xpProgress').style.width = `${(stats.xp / nextLevelXP) * 100}%`;
+                document.getElementById('aiScore').textContent = `+${stats.totalQueries * 10}`;
+                
+                const progressPercent = (stats.xp / nextLevelXP) * 100;
+                const progressBar = document.getElementById('xpProgress');
+                progressBar.style.width = `${progressPercent}%`;
+                
+                // Color change based on level
+                if (stats.level >= 10) {
+                    progressBar.className = 'h-full bg-gradient-to-r from-yellow-500 to-red-500 transition-all duration-500';
+                } else if (stats.level >= 5) {
+                    progressBar.className = 'h-full bg-gradient-to-r from-purple-500 to-pink-500 transition-all duration-500';
+                } else {
+                    progressBar.className = 'h-full bg-gradient-to-r from-blue-500 to-purple-500 transition-all duration-500';
+                }
+            }
+
+            static showLevelUp(newLevel) {
+                const terminalOutput = document.querySelector('.terminal-scrollbar');
+                const levelUpDiv = document.createElement('div');
+                levelUpDiv.className = 'mb-4 text-center';
+                levelUpDiv.innerHTML = `
+                    <div class="border-2 border-yellow-500 bg-yellow-900/20 p-4 rounded-lg animate-pulse';
+                    <div class="text-yellow-400 text-xl font-bold mb-1">LEVEL UP!</div>
+                    <div class="text-green-300 text-lg">Reached Level ${newLevel}</div>
+                    <div class="text-cyan-300 text-sm mt-1">New capabilities unlocked!</div>
+                `;
+                terminalOutput.appendChild(levelUpDiv);
+                terminalOutput.scrollTop = terminalOutput.scrollHeight;
+                
+                // Show celebration effect
+                const particles = document.createElement('div');
+                particles.className = 'fixed inset-0 pointer-events-none z-20';
+                particles.innerHTML = `
+                    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2';
+                    ${Array.from({length: 20}, (_, i) => `
+                        <div class="absolute w-2 h-2 bg-yellow-400 rounded-full animate-bounce" 
+                         style="animation-delay: ${i * 0.1}s">
+                    </div>
+                `;
+                document.body.appendChild(particles);
+                setTimeout(() => particles.remove(), 3000);
+            }
+
+            static checkAchievements() {
+                const stats = AppState.playerStats;
+                const achievements = [];
+                
+                if (stats.totalQueries >= 1 && !stats.achievements.includes('FIRST_QUERY')) {
+                    achievements.push('FIRST_QUERY');
+                }
+                if (stats.totalQueries >= 10 && !stats.achievements.includes('CREATIVE_THINKER')) {
+                    achievements.push('CREATIVE_THINKER');
+                }
+                if (stats.totalQueries >= 25 && !stats.achievements.includes('TECHNICAL_EXPERT')) {
+                    achievements.push('TECHNICAL_EXPERT');
+                }
+                if (stats.totalTokens >= 10000 && !stats.achievements.includes('POWER_USER')) {
+                    achievements.push('POWER_USER');
+                }
+                if (stats.level >= 10 && !stats.achievements.includes('MASTER_PROMPTER')) {
+                    achievements.push('MASTER_PROMPTER');
+                }
+                
+                achievements.forEach(achievement => {
+                    this.unlockAchievement(achievement);
+                });
+            }
+
+            static unlockAchievement(key) {
+                const achievement = GAME_CONFIG.ACHIEVEMENTS[key];
+                if (achievement && !AppState.playerStats.achievements.includes(key)) {
+                        AppState.playerStats.achievements.push(key);
+                        this.showAchievement(achievement);
+                        this.addXP(achievement.xp);
+                    }
+                }
+
+            static showAchievement(achievement) {
+                const terminalOutput = document.querySelector('.terminal-scrollbar');
+                const achievementDiv = document.createElement('div');
+                achievementDiv.className = 'mb-4 text-center bg-gradient-to-r from-purple-900/50 to-blue-900/50 border border-purple-500 p-4 rounded-lg';
+                achievementDiv.innerHTML = `
+                    <div class="text-purple-400 text-lg font-bold mb-1">ACHIEVEMENT UNLOCKED!</div>
+                    <div class="text-yellow-300 text-xl">${achievement.name}</div>
+                    <div class="text-green-400 text-sm mt-1">+${achievement.xp} XP</div>
+                `;
+                terminalOutput.appendChild(achievementDiv);
+                terminalOutput.scrollTop = terminalOutput.scrollHeight;
+            }
+        }
+// State management
         const AppState = {
             history: JSON.parse(localStorage.getItem('terminalHistory')) || [],
             lastRequestTime: 0,
             currentModel: CONFIG.DEFAULT_MODEL,
-            apiKey: localStorage.getItem('hfApiKey') || ''
+            apiKey: localStorage.getItem('hfApiKey') || '',
+            playerStats: JSON.parse(localStorage.getItem('playerStats')) || {
+                level: 1,
+                xp: 0,
+                totalQueries: 0,
+                totalTokens: 0,
+                achievements: []
+            }
         };
-    </script>
+</script>
 </head>
 <body class="bg-gray-900 overflow-hidden font-terminal min-h-screen">
     <div class="crt h-screen relative flex flex-col bg-gradient-to-br from-black to-gray-900">
@@ -203,43 +357,52 @@ Query: {query} Include: 1) Technical requirements 2) Implementation steps 3) Sam
                 </div>
             </div>
         </div>
-        
-        <div class="absolute bottom-0 left-0 right-0 bg-black/60 border-t border-green-900 p-4">
+    <div class="absolute bottom-0 left-0 right-0 bg-black/60 border-t border-green-900 p-4">
             <div class="flex items-center">
                 <div class="text-green-500 mr-3 font-bold">user@terminal:~$</div>
                 <div class="flex-grow flex items-center border border-green-700 bg-black/30">
                     <select class="bg-black text-green-400 px-2 h-full border-r border-green-800">
-                        <option value="standard">Standard</option>
-                        <option value="creative">Creative</option>
-                        <option value="technical">Technical</option>
-                    </select>
-                    <input id="promptInput" type="text" class="flex-grow bg-transparent outline-none px-2 py-1 text-green-300" placeholder="Enter cognitive query...">
-                    <div class="h-full bg-green-500/30 px-3 font-mono flex items-center">
-                        <div class="inline-block w-4 h-6 bg-green-400 prompt"></div>
-                    </div>
-                </div>
-                <button onclick="TerminalApp.executePrompt()" class="ml-3 px-4 py-1 bg-green-700 hover:bg-green-600 text-cyan-100 font-bold rounded-sm">Execute</button>
-            </div>
-            
-            <div class="mt-3 flex justify-between text-xs text-cyan-400">
-                <div class="flex items-center">
-                    <i class="fas fa-brain mr-1"></i>
-                    <span>LLM: <span id="llmStatus" class="text-green-400">${CONFIG.DEFAULT_MODEL.split('/').pop()}</span></span>
-                </div>
-                <div class="flex items-center">
-                    <i class="fas fa-bolt mr-1"></i>
-                    <span>Tokens: <span id="tokenCounter">0</span>/2048</span>
-                </div>
-                <div class="flex items-center">
-                    <i class="fas fa-database mr-1"></i>
-                    <span>Context: <span id="contextStatus">Ready</span></span>
-                </div>
-                <div class="text-yellow-400 font-bold flex items-center">
-                    <i class="fas fa-star mr-1"></i>
-                    <span>Score: <span id="aiScore">+30</span></span>
-                </div>
+                <option value="standard">Standard</option>
+                <option value="creative">Creative</option>
+                <option value="technical">Technical</option>
+            </select>
+            <input id="promptInput" type="text" class="flex-grow bg-transparent outline-none px-2 py-1 text-green-300" placeholder="Enter cognitive query...">
+            <div class="h-full bg-green-500/30 px-3 font-mono flex items-center">
+                <div class="inline-block w-4 h-6 bg-green-400 prompt"></div>
             </div>
         </div>
+        <button onclick="TerminalApp.executePrompt()" class="ml-3 px-4 py-1 bg-green-700 hover:bg-green-600 text-cyan-100 font-bold rounded-sm">Execute</button>
+    </div>
+    
+    <!-- XP Progress Bar -->
+    <div class="mt-3 mb-2">
+        <div class="flex justify-between text-xs text-cyan-400 mb-1">
+            <span>Level <span id="playerLevel">1</span></span>
+            <span><span id="currentXP">0</span>/<span id="nextLevelXP">100</span> XP</span>
+        </div>
+        <div class="w-full bg-black/50 h-2 rounded-full overflow-hidden">
+            <div id="xpProgress" class="h-full bg-gradient-to-r from-blue-500 to-purple-500 transition-all duration-500" style="width: 0%"></div>
+    </div>
+    
+    <div class="flex justify-between text-xs text-cyan-400">
+        <div class="flex items-center">
+            <i class="fas fa-brain mr-1"></i>
+            <span>LLM: <span id="llmStatus" class="text-green-400">${CONFIG.DEFAULT_MODEL.split('/').pop()}</span></span>
+        </div>
+        <div class="flex items-center">
+            <i class="fas fa-bolt mr-1"></i>
+            <span>Tokens: <span id="tokenCounter">0</span>/2048</span>
+        </div>
+        <div class="flex items-center">
+            <i class="fas fa-database mr-1"></i>
+            <span>Context: <span id="contextStatus">Ready</span></span>
+        </div>
+        <div class="text-yellow-400 font-bold flex items-center">
+            <i class="fas fa-star mr-1"></i>
+            <span>Score: <span id="aiScore">+30</span></span>
+        </div>
+    </div>
+</div>
     </div>
     
     <!-- Settings Modal -->
@@ -408,7 +571,13 @@ Query: {query} Include: 1) Technical requirements 2) Implementation steps 3) Sam
                 } else {
                     responseText = JSON.stringify(response, null, 2);
                 }
-                const terminalOutput = document.querySelector('.terminal-scrollbar');
+                
+                // Award XP for this response
+                const mode = document.querySelector('select').value;
+                const xp = GameManager.calculateXP(responseText.length, mode);
+                GameManager.addXP(xp);
+                GameManager.checkAchievements();
+const terminalOutput = document.querySelector('.terminal-scrollbar');
                 const responseDiv = document.createElement('div');
                 responseDiv.className = 'mb-4';
                 terminalOutput.appendChild(responseDiv);
@@ -511,7 +680,6 @@ Query: {query} Include: 1) Technical requirements 2) Implementation steps 3) Sam
                     TerminalUI.toggleLoading(false);
                 }
             }
-
             static init() {
                 // Load settings
                 const settingsButton = document.createElement('div');
@@ -523,14 +691,16 @@ Query: {query} Include: 1) Technical requirements 2) Implementation steps 3) Sam
                 `;
                 document.body.appendChild(settingsButton);
                 
+                // Initialize game UI
+                GameManager.updateUI();
+                
                 // Display initial history if any
                 if (AppState.history.length > 0) {
                     const lastEntry = AppState.history[0];
                     TerminalUI.streamResponse(lastEntry.response, lastEntry.prompt);
                 }
             }
-
-            static showSettings() {
+static showSettings() {
                 const modal = document.getElementById('settingsModal');
                 document.getElementById('hfApiKeyInput').value = AppState.apiKey;
                 modal.classList.remove('hidden');
@@ -624,11 +794,10 @@ Query: {query} Include: 1) Technical requirements 2) Implementation steps 3) Sam
                 }
             }
         }
-
         // Initialize app
         document.addEventListener('DOMContentLoaded', () => {
             TerminalApp.init();
         });
-    </script>
+</script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=5dimension/terminal" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>