DoubleD31/binary-whisperer-code-matrix
0
1// Main Application Logic2class TheManApp {3 constructor() {4 this.currentPathway = null;5 this.chatHistory = [];6 this.isDarkTheme = false;7 this.init();8 }9 10 init() {11 this.setupEventListeners();12 this.loadThemePreference();13 this.initTypewriter();14 this.setupQuickQuestions();15 }16 17 setupEventListeners() {18 // Pathway cards19 document.querySelectorAll('.pathway-card').forEach(card => {20 card.addEventListener('click', (e) => {21 this.selectPathway(e.currentTarget.dataset.path);22 });23 });24 25 // Chat input26 const chatInput = document.getElementById('chatInput');27 const sendButton = document.getElementById('sendMessage');28 29 chatInput.addEventListener('keypress', (e) => {30 if (e.key === 'Enter') {31 this.sendMessage();32 }33 });34 35 sendButton.addEventListener('click', () => {36 this.sendMessage();37 });38 39 // Copy code button40 document.getElementById('copyCode').addEventListener('click', () => {41 this.copyCodeToClipboard();42 });43 44 // Theme toggle (listen for custom event from header)45 window.addEventListener('themeChanged', (e) => {46 this.isDarkTheme = e.detail.isDark;47 this.updateMatrixTheme();48 });49 }50 51 selectPathway(pathway) {52 this.currentPathway = pathway;53 const pathwayName = pathway.charAt(0).toUpperCase() + pathway.slice(1);54 55 this.addMessage('ai', `Awesome choice! 🎉 Let's dive into ${pathwayName} development. What specific topic are you interested in?`);56 57 // Show relevant quick questions58 this.showPathwayQuickQuestions(pathway);59 }60 61 sendMessage() {62 const input = document.getElementById('chatInput');63 const message = input.value.trim();64 65 if (!message) return;66 67 this.addMessage('user', message);68 input.value = '';69 70 // Simulate AI response71 setTimeout(() => {72 this.generateAIResponse(message);73 }, 1000);74 }75 76 addMessage(sender, content) {77 const messagesContainer = document.getElementById('chatMessages');78 const messageDiv = document.createElement('div');79 messageDiv.className = `message ${sender}-message`;80 81 const avatar = sender === 'user' ? '👤' : '👨💻';82 const avatarClass = sender === 'user' ? 'user-message' : 'ai-message';83 84 messageDiv.innerHTML = `85 <div class="message-avatar">${avatar}</div>86 <div class="message-content">87 <p>${content}</p>88 </div>89 `;90 91 messagesContainer.appendChild(messageDiv);92 messagesContainer.scrollTop = messagesContainer.scrollHeight;93 94 // Store in history95 this.chatHistory.push({ sender, content, timestamp: new Date() });96 }97 98 generateAIResponse(userMessage) {99 let response = '';100 101 if (userMessage.toLowerCase().includes('hello') || userMessage.toLowerCase().includes('hi')) {102 response = "Hey there! 👋 Ready to code? What can I help you with today?";103 } else if (userMessage.toLowerCase().includes('react')) {104 response = "Great choice! React is awesome for building modern web apps. Here's a quick component example:";105 this.showCodeSnippet(`import React, { useState } from 'react';\n\nfunction Counter() {\n const [count, setCount] = useState(0);\n \n return (\n <div>\n <p>Count: {count}</p>\n <button onClick={() => setCount(count + 1)}>\n Increment\n </button>\n </div>\n );\n}\n\nexport default Counter;`);106 } else if (userMessage.toLowerCase().includes('javascript') || userMessage.toLowerCase().includes('js')) {107 response = "JavaScript is the language of the web! 🕸️ Here's a modern ES6+ example:";108 this.showCodeSnippet(`// Modern JavaScript with arrow functions and destructuring\nconst getUserInfo = async (userId) => {\n try {\n const response = await fetch(\`/api/users/\${userId}\`);\n const { data: user } = await response.json();\n \n return {\n name: user.name,\n email: user.email,\n role: user.role || 'user'\n };\n } catch (error) {\n console.error('Error fetching user:', error);\n throw new Error('User not found');\n }\n};\n\n// Usage with array methods\nconst activeUsers = users.filter(user => user.isActive)\n .map(user => ({\n ...user,\n status: 'active'\n }));`);109 } else {110 response = "Interesting question! 🤔 As your AI coding mentor, I'd recommend breaking this down into smaller steps. Want to start with the basics or dive deep into implementation?";111 }112 113 this.addMessage('ai', response);114 }115 116 showCodeSnippet(code) {117 const codeSection = document.getElementById('codeSection');118 const codeDisplay = document.getElementById('codeDisplay');119 120 codeDisplay.textContent = code;121 codeSection.style.display = 'block';122 123 // Scroll to code section124 codeSection.scrollIntoView({ behavior: 'smooth' });125 }126 127 copyCodeToClipboard() {128 const codeDisplay = document.getElementById('codeDisplay');129 navigator.clipboard.writeText(codeDisplay.textContent).then(() => {130 const copyBtn = document.getElementById('copyCode');131 const originalText = copyBtn.textContent;132 copyBtn.textContent = '✅ Copied!';133 134 setTimeout(() => {135 copyBtn.textContent = originalText;136 }, 2000);137 });138 }139 140 setupQuickQuestions() {141 document.querySelectorAll('.quick-btn').forEach(btn => {142 btn.addEventListener('click', (e) => {143 const question = e.currentTarget.dataset.question;144 document.getElementById('chatInput').value = question;145 this.sendMessage();146 });147 });148 }149 150 showPathwayQuickQuestions(pathway) {151 // This would show pathway-specific quick questions152 console.log(`Showing quick questions for ${pathway} pathway`);153 }154 155 initTypewriter() {156 const greetings = [157 "Hey coder! 👋",158 "Ready to learn? 🚀",159 "Let's build something! 💻",160 "Code time! ⚡"161 ];162 163 const greetingElement = document.getElementById('greeting');164 let currentGreeting = 0;165 let charIndex = 0;166 let isDeleting = false;167 168 const type = () => {169 const currentText = greetings[currentGreeting];170 171 if (isDeleting) {172 greetingElement.textContent = currentText.substring(0, charIndex - 1);173 charIndex--;174 } else {175 greetingElement.textContent = currentText.substring(0, charIndex + 1);176 charIndex++;177 }178 179 if (!isDeleting && charIndex === currentText.length) {180 isDeleting = true;181 setTimeout(type, 2000);182 } else if (isDeleting && charIndex === 0) {183 isDeleting = false;184 currentGreeting = (currentGreeting + 1) % greetings.length;185 setTimeout(type, 500);186 } else {187 setTimeout(type, isDeleting ? 50 : 100);188 }189 };190 191 type();192 }193 194 loadThemePreference() {195 const savedTheme = localStorage.getItem('theme') || 'light';196 this.isDarkTheme = savedTheme === 'dark';197 198 if (this.isDarkTheme) {199 document.body.classList.add('theme-dark');200 document.body.classList.remove('theme-light');201 } else {202 document.body.classList.add('theme-light');203 document.body.classList.remove('theme-dark');204 }205 }206 207 updateMatrixTheme() {208 // Matrix theme updates handled in matrix.js via CSS variables209 }210}211 212// Initialize app when DOM is loaded213document.addEventListener('DOMContentLoaded', () => {214 window.theManApp = new TheManApp();215});