import React, { useState, useRef, useEffect } from 'react'; import { useTerminal } from 'TerminalContext'; import { generateBaddie } from 'baddieGenerator'; import { getRandomPortrait } from 'asciiPortraits'; const Terminal = () => { const { lines, addLine, currentBaddie, setCurrentBaddie, addToFavorites, showFavorites, clearSquad, favorites, generateImage, isGeneratingImage, currentBaddieImage } = useTerminal(); const [input, setInput] = useState(''); const terminalRef = useRef(null); const [showImageModal, setShowImageModal] = useState(false); // Add this line to import the logo const logoUrl = 'https://play.rosebud.ai/assets/sadf2352352.PNG?SUbW'; const handleCommand = () => { addLine(`$ ${input}`); const command = input.toLowerCase().trim(); if (command === 'generate' || command === 'gen') { generateNewBaddie(); } else if (command === 'add' || command === 'recruit') { addToFavorites(); } else if (command === 'squad' || command === 'roster') { showFavorites(); } else if (command === 'help') { showHelp(); } else if (command === 'clear') { // Clear command would go here in a full implementation } else if (command === 'dismiss' || command === 'reset') { clearSquad(); } else if (command === 'image' || command === 'pic') { generateImage(); } else if (command === 'view' || command === 'show') { showImage(); } else if (command === 'download') { showThemeSelector(); } else if (command.startsWith('theme ')) { const themeNum = command.split(' ')[1]; switch (themeNum) { case '1': downloadBaddie('classic'); break; case '2': downloadBaddie('hacker'); break; case '3': downloadBaddie('alert'); break; case '4': downloadBaddie('neon'); break; case '5': downloadBaddie('amber'); break; default: addLine('>>> INVALID THEME NUMBER. PLEASE SELECT 1-5.'); } } else if (command !== '') { addLine('>>> UNKNOWN COMMAND. TYPE "help" FOR AVAILABLE COMMANDS'); } setInput(''); }; const downloadBaddie = (theme = 'classic') => { if (!currentBaddie) { addLine(">>> NO BADDIE AVAILABLE TO DOWNLOAD!"); return; } addLine(`>>> GENERATING TERMINAL IMAGE WITH ${theme.toUpperCase()} THEME...`); // Color themes const themes = { classic: { bg: '#0c0c0c', text: '#32CD32', border: '#32CD32', accent: 'rgba(255, 0, 0, 0.5)' }, hacker: { bg: '#0a0a15', text: '#00b2ff', border: '#00b2ff', accent: 'rgba(0, 255, 255, 0.5)' }, alert: { bg: '#150505', text: '#ff3232', border: '#ff3232', accent: 'rgba(255, 255, 0, 0.5)' }, neon: { bg: '#000000', text: '#ff00ff', border: '#00ffff', accent: 'rgba(0, 255, 0, 0.5)' }, amber: { bg: '#0c0c00', text: '#ffb000', border: '#ffb000', accent: 'rgba(255, 128, 0, 0.5)' } }; // Get selected theme colors const colors = themes[theme] || themes.classic; // Create a canvas to render our terminal-style image const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // Set dimensions - wide enough for text display canvas.width = 800; canvas.height = 600; // Background color from theme ctx.fillStyle = colors.bg; ctx.fillRect(0, 0, canvas.width, canvas.height); // Add terminal border ctx.strokeStyle = colors.border; ctx.lineWidth = 4; ctx.strokeRect(10, 10, canvas.width - 20, canvas.height - 20); // Terminal header ctx.fillStyle = colors.text; ctx.font = 'bold 24px monospace'; ctx.fillText('ACTION BADDIES TACTICAL DATABASE', 30, 50); ctx.fillText('============================', 30, 70); // Add baddie portrait as ASCII art if (currentBaddie.portrait) { ctx.font = '12px monospace'; ctx.fillStyle = colors.text; const portraitLines = currentBaddie.portrait.split('\n'); let yPos = 110; portraitLines.forEach(line => { if (line.trim()) { ctx.fillText(line, 40, yPos); yPos += 14; } }); } // Add baddie details ctx.font = 'bold 18px monospace'; ctx.fillStyle = colors.text; const startY = 350; const lineHeight = 30; ctx.fillText(`CODENAME: ${currentBaddie.name}`, 40, startY); ctx.fillText(`FACTION: ${currentBaddie.faction}`, 40, startY + lineHeight); ctx.fillText(`WEAPON: ${currentBaddie.weapon}`, 40, startY + lineHeight * 2); ctx.fillText(`POWER: ${currentBaddie.power}`, 40, startY + lineHeight * 3); // Wrap bio text const bioLines = wrapText(ctx, `BIO: ${currentBaddie.bio}`, 720); bioLines.forEach((line, i) => { ctx.fillText(line, 40, startY + lineHeight * 4 + (i * 25)); }); // Add classified stamp ctx.save(); ctx.translate(400, 300); ctx.rotate(-0.2); ctx.font = 'bold 60px monospace'; ctx.fillStyle = colors.accent; ctx.fillText('CLASSIFIED', -150, 0); ctx.restore(); // Add footer ctx.fillStyle = colors.text; ctx.font = '14px monospace'; ctx.fillText('PROPERTY OF ACTION BADDIES SQUAD - UNAUTHORIZED ACCESS PROHIBITED', 40, canvas.height - 30); // Add theme indicator ctx.font = '12px monospace'; ctx.fillText(`THEME: ${theme.toUpperCase()}`, canvas.width - 150, canvas.height - 10); // Convert canvas to image and download canvas.toBlob((blob) => { const url = URL.createObjectURL(blob); const link = document.createElement('a'); // Create filename with baddie name sanitized const filename = `baddie_${currentBaddie.name.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.png`; link.href = url; link.download = filename; document.body.appendChild(link); link.click(); document.body.removeChild(link); addLine(`>>> TACTICAL DOSSIER SAVED AS ${filename}`); addLine(`>>> IMAGE CONTAINS COMPLETE BADDIE PROFILE`); }, 'image/png'); }; // Show theme selection dialog const showThemeSelector = () => { if (!currentBaddie) { addLine(">>> NO BADDIE AVAILABLE TO DOWNLOAD!"); return; } addLine(">>> SELECT COLOR THEME FOR DOWNLOAD:"); addLine(">>> 1. CLASSIC (GREEN)"); addLine(">>> 2. HACKER (BLUE)"); addLine(">>> 3. ALERT (RED)"); addLine(">>> 4. NEON (PINK/CYAN)"); addLine(">>> 5. AMBER (ORANGE)"); addLine(">>> TYPE 'theme 1' TO 'theme 5' TO SELECT"); }; // Helper function to wrap text const wrapText = (ctx, text, maxWidth) => { const words = text.split(' '); const lines = []; let currentLine = words[0]; for (let i = 1; i < words.length; i++) { const word = words[i]; const width = ctx.measureText(currentLine + " " + word).width; if (width < maxWidth) { currentLine += " " + word; } else { lines.push(currentLine); currentLine = word; } } lines.push(currentLine); return lines; }; const showHelp = () => { addLine('>>> AVAILABLE COMMANDS:'); addLine('>>> generate, gen - Generate a new Action Baddie'); addLine('>>> add, recruit - Add current Baddie to your squad'); addLine('>>> squad, roster - Display your elite squad roster'); addLine('>>> dismiss, reset - Dismiss all squad members'); addLine('>>> download - Download current Baddie with theme options'); addLine('>>> theme 1-5 - Select download theme after download command'); addLine('>>> help - Show this help message'); addLine(''); addLine('>>> YOUR SQUAD IS AUTOMATICALLY SAVED BETWEEN SESSIONS'); }; const showImage = () => { if (!currentBaddie || !currentBaddie.imageUrl) { addLine(">>> NO IMAGE AVAILABLE! GENERATE ONE WITH THE 'image' COMMAND FIRST."); return; } // Set the visibility of the image modal setShowImageModal(true); }; const generateNewBaddie = () => { addLine('>>> GENERATING NEW ACTION BADDIE...'); // Simulate processing time setTimeout(() => { const baddie = generateBaddie(); const portrait = getRandomPortrait(); // Store the current baddie in context baddie.portrait = portrait; setCurrentBaddie(baddie); addLine('>>> NEW BADDIE GENERATED!'); addLine(''); addLine(`▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓`); // Add the portrait line by line portrait.split('\n').forEach(line => { if (line.trim()) { addLine(`▓ ${line}`); } }); addLine(`▓`); addLine(`▓ CODENAME: ${baddie.name}`); addLine(`▓ FACTION: ${baddie.faction}`); addLine(`▓ WEAPON: ${baddie.weapon}`); addLine(`▓ POWER: ${baddie.power}`); addLine(`▓ BIO: ${baddie.bio}`); addLine(`▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓`); addLine(''); addLine('>>> TYPE "add" TO RECRUIT THIS BADDIE TO YOUR SQUAD'); addLine('>>> TYPE "baddie" TO GENERATE AN ACTION BADDIE'); }, 500); }; // Auto-scroll to bottom when lines change useEffect(() => { if (terminalRef.current) { terminalRef.current.scrollTop = terminalRef.current.scrollHeight; } }, [lines]); // Show welcome message with squad info on load useEffect(() => { if (lines.length <= 5) { // Only show on initial load setTimeout(() => { if (favorites.length > 0) { addLine(`>>> WELCOME BACK COMMANDER!`); addLine(`>>> ${favorites.length} SQUAD MEMBERS READY FOR DUTY`); addLine(`>>> TYPE "squad" TO VIEW YOUR ROSTER`); } }, 1000); } }, [favorites, lines, addLine]); return (

{showImageModal && currentBaddie?.imageUrl && (

setShowImageModal(false)}>

e.stopPropagation()}>

{currentBaddie.name}

{ console.error('Image failed to load:', currentBaddie.imageUrl); e.target.onerror = null; e.target.style.display = 'none'; const errorDiv = document.createElement('div'); errorDiv.innerText = `Error loading image. URL: ${currentBaddie.imageUrl.substring(0, 50)}...`; errorDiv.style.color = '#ff6b6b'; errorDiv.style.padding = '20px'; errorDiv.style.textAlign = 'center'; e.target.parentNode.appendChild(errorDiv); }} />

{currentBaddie.faction} {currentBaddie.weapon}

)}

{lines.map((line, i) => (

{line}

))}

$ setInput(e.target.value)} onKeyPress={(e) => e.key === 'Enter' && handleCommand()} style={styles.input} autoFocus />

{currentBaddie && ( )} =======

); }; const styles = { container: { width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#111', fontFamily: 'monospace', position: 'relative', }, terminal: { width: '95%', // Increased from 90% for better use of space on mobile height: '95%', // Increased from 90% for better use of space on mobile background: '#0c0c0c', border: '2px solid #32CD32', borderRadius: '5px', boxShadow: '0 0 20px #32CD32', display: 'flex', flexDirection: 'column', overflow: 'hidden', }, logo: { padding: '10px', backgroundColor: '#0a0a0a', display: 'flex', justifyContent: 'center', alignItems: 'center', borderBottom: '1px solid #32CD32', }, logoImage: { maxWidth: '400px', maxHeight: '120px', padding: '10px', }, output: { flex: 1, padding: '15px', overflowY: 'auto', color: '#32CD32', fontSize: '16px', backgroundColor: '#0c0c0c', }, line: { marginBottom: '5px', wordBreak: 'break-word', }, inputContainer: { display: 'flex', padding: '12px 15px', // Increased padding for better touch targets backgroundColor: '#0a0a0a', borderTop: '1px solid #1a1a1a', }, prompt: { color: '#32CD32', marginRight: '10px', fontSize: '18px', // Increased font size for better visibility on mobile }, input: { flex: 1, background: 'transparent', border: 'none', color: '#32CD32', fontSize: '18px', fontFamily: 'monospace', outline: 'none', padding: '12px 0', minHeight: '36px', width: '100%', }, '@media (max-width: 768px)': { input: { fontSize: '20px', padding: '16px 0', minHeight: '60px', }, }, buttons: { display: 'flex', padding: '8px', backgroundColor: '#0a0a0a', borderTop: '1px solid #1a1a1a', flexWrap: 'wrap', gap: '6px', justifyContent: 'center', }, button: { backgroundColor: '#1e3b1e', color: '#32CD32', border: '1px solid #32CD32', padding: '10px 15px', fontSize: '16px', fontFamily: 'monospace', cursor: 'pointer', outline: 'none', borderRadius: '4px', marginRight: '4px', marginBottom: '6px', minWidth: '120px', textAlign: 'center', }, '@media (max-width: 480px)': { input: { fontSize: '18px', padding: '14px 0', minHeight: '50px', }, button: { fontSize: '12px', padding: '6px 8px', minWidth: '80px', marginBottom: '4px', }, }, modalOverlay: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.8)', display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 10, }, modal: { backgroundColor: '#0c0c0c', border: '2px solid #32CD32', borderRadius: '5px', boxShadow: '0 0 20px #32CD32', width: '80%', maxWidth: '600px', maxHeight: '90%', display: 'flex', flexDirection: 'column', overflow: 'hidden', }, modalHeader: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 15px', borderBottom: '1px solid #32CD32', backgroundColor: '#1a1a1a', }, modalTitle: { color: '#32CD32', margin: 0, fontFamily: 'monospace', }, closeButton: { backgroundColor: 'transparent', color: '#32CD32', border: 'none', fontSize: '18px', cursor: 'pointer', fontFamily: 'monospace', }, imageContainer: { display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '20px', backgroundColor: '#0a0a0a', minHeight: '200px', overflow: 'auto', }, baddieImage: { maxWidth: '100%', maxHeight: '500px', border: '2px solid #32CD32', }, modalFooter: { display: 'flex', justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap', gap: '10px', padding: '10px 15px', borderTop: '1px solid #32CD32', backgroundColor: '#1a1a1a', }, imageBadgeLabel: { backgroundColor: '#32CD32', color: '#0a0a0a', padding: '5px 10px', borderRadius: '3px', fontSize: '14px', fontFamily: 'monospace', fontWeight: 'bold', }, loadingDots: { display: 'inline-block', width: '40px', animation: 'loadingDots 1.5s infinite', '@keyframes loadingDots': { '0%': { content: '.' }, '33%': { content: '..' }, '66%': { content: '...' }, '100%': { content: '.' } } } }; // Add keyframes for loading animation and mobile optimizations const styleSheet = document.createElement('style'); styleSheet.type = 'text/css'; styleSheet.innerText = ` @keyframes loadingDots { 0% { content: "."; } 33% { content: ".."; } 66% { content: "..."; } 100% { content: "."; } } .loading-dots:after { content: "."; animation: loadingDots 1.5s infinite; } /* Mobile optimizations */ @media (max-width: 768px) { .terminal-output { font-size: 14px !important; } .terminal-button { flex: 1 0 calc(50% - 16px) !important; margin-right: 0 !important; } .input-container { padding: 10px 15px !important; } .input { font-size: 16px !important; padding: 14px 0 !important; min-height: 44px !important; } } /* Small mobile devices */ @media (max-width: 480px) { .terminal-button { flex: 1 0 100% !important; } } `; document.head.appendChild(styleSheet); export default Terminal;