${type} Status ${type === 'Enemy' ? `(${data.type})` : ''}

HP: ${data.status.hp}MP: ${data.status.mp}

${Object.entries(data.status.stats).map(([stat, value]) => `${stat.toUpperCase()}: ${value}`).join(' | ')}

${data.status.effects.length ? `

Effects: ${data.status.effects.join(', ')}

` : ''}${type === 'Player' ? `

Equipped: ${data.status.equipment.join(', ')}

` : ''}

${data.abilities.spells.length ? `

Spells: ${data.abilities.spells.join(', ')}

` : ''}${data.abilities.special.length ? `

Special: ${data.abilities.special.join(', ')}

` : ''}${type === 'Player' ? data.abilities.skills.length ? `

Skills: ${data.abilities.skills.join(', ')}

` : '' : data.abilities.traits.length ? `

Traits: ${data.abilities.traits.join(', ')}

` : ''}

`; } constructor(config) { super({ key: 'Terminal', ...config }); this.commands = new Map(); this.commandProcessor = new CommandProcessor(this); this.initializeCommandSystem(); this.initializeConsoleAppearance(); this.initializeFeatureStates(); this.cursorVisible = true; this.cursorBlinkTime = 0; this.cursorBlinkInterval = 530; // Blink interval in milliseconds this.llmInstance = null; // Will be initialized after commands are loaded this.isLoading = false; this.loadingChars = ['\\', '|', '/', '-']; this.loadingIndex = 0; this.lastLoadingTime = 0; this.prompt = 'user@grast:~$'; this.debugOutput = ''; } async handleCommandStart(command) { this.displayCommandOutput('', '' + this.prompt + ' ' + command + ""); this.terminalPrompt.setText(this.prompt + ' '); } setLoading(isLoading) { if (!isLoading && this.isLoading) { const lines = this.consoleOutput.node.innerHTML.split('\n'); const lastLineIndex = lines.length - 1; // Only trim if the last character is a loading indicator if (lines[lastLineIndex] && this.loadingChars.includes(lines[lastLineIndex].slice(-1))) { lines[lastLineIndex] = lines[lastLineIndex].slice(0, -1); this.consoleOutput.node.innerHTML = lines.join('\n'); } } this.isLoading = isLoading; this.lastLoadingTime = isLoading ? performance.now() : 0; this.loadingIndex = 0; } getTerminalContext() { const content = this.consoleOutput?.node?.innerHTML || ''; const tempDiv = document.createElement('div'); tempDiv.innerHTML = content; return tempDiv.textContent || ''; } toggleConsoleVisibility() { this.consoleVisible = !this.consoleVisible; [ this.consoleBackground, this.terminalPrompt, this.terminalInput, this.consoleOutput ].forEach(element => element.setVisible(this.consoleVisible)); } updateLoadingIndicator(time) { if (!this.isLoading || time - this.lastLoadingTime < 100) return; const lines = this.consoleOutput.node.innerHTML.split('\n'); const lastLineIndex = lines.length - 1; if (this.lastLoadingTime !== 0) { // Remove previous loading character if it exists if (lines[lastLineIndex].endsWith(this.loadingChars[(this.loadingIndex - 1 + 4) % 4])) { lines[lastLineIndex] = lines[lastLineIndex].slice(0, -1); } } // Add a space before the loading character if there isn't one if (!lines[lastLineIndex].endsWith(' ')) { lines[lastLineIndex] += ' '; } lines[lastLineIndex] += this.loadingChars[this.loadingIndex]; this.consoleOutput.node.innerHTML = lines.join('\n'); this.loadingIndex = (this.loadingIndex + 1) % 4; this.lastLoadingTime = time; } wrapText(text, availableWidth) { this.measureText.setText(text); const textWidth = this.measureText.width; if (textWidth <= availableWidth) return text; const charsPerLine = Math.floor(availableWidth / (this.measureText.width / text.length)); let wrappedText = ''; let currentLine = ''; let isFirstLine = true; for (let i = 0; i < text.length; i++) { currentLine += text[i]; if (currentLine.length >= charsPerLine) { wrappedText += currentLine + '\n'; currentLine = ''; isFirstLine = false; } } if (currentLine) wrappedText += currentLine; return wrappedText; } handleTextInput(newText) { const availableWidth = this.cameras.main.width - this.terminalPrompt.x - this.terminalPrompt.width - 20; const wrappedText = this.wrapText(newText, availableWidth); // Create a temporary text object to measure the exact width and height this.measureText.setText(wrappedText); this.terminalInput.setText(wrappedText); this.updatePromptPosition(); // Get the height of a single line of text const lineHeight = this.measureText.height; // Calculate the y position based on the input's base position const baseY = this.terminalInput.y; // Count actual line breaks in the text const numLines = (wrappedText.match(/\n/g) || []).length; // Calculate cursor position for the current line const wrappedLines = wrappedText.split('\n'); const currentLineIndex = wrappedLines.length - 1; const currentLine = wrappedLines[currentLineIndex]; // Measure the current line's width for x position this.measureText.setText(currentLine); //const cursorY = screen.availHeight - (lineHeight * currentLineIndex); this.cursor.setPosition( this.terminalInput.x + this.measureText.width, this.scale.height - 20 - (3 * currentLineIndex) ); } updatePromptPosition() { const baseY = this.cameras.main.height - 40; this.terminalPrompt.setY(baseY); this.terminalInput.setY(baseY); } navigateHistory(direction) { if (this.commandHistory.length === 0) return; if (direction === 'up' && this.historyIndex > 0) { this.historyIndex--; const historyText = this.commandHistory[this.historyIndex] || ''; this.terminalInput.setText(historyText); this.handleTextInput(historyText); // Update cursor position } else if (direction === 'down') { if (this.historyIndex < this.commandHistory.length - 1) { this.historyIndex++; const historyText = this.commandHistory[this.historyIndex] || ''; this.terminalInput.setText(historyText); this.handleTextInput(historyText); // Update cursor position } else { this.historyIndex = this.commandHistory.length; this.terminalInput.setText(''); this.handleTextInput(''); // Update cursor position for empty input } } } updateConsolePositions() { if (!this.consoleOutput?.node) return; const screenHeight = this.cameras.main.height; const inputLines = (this.terminalInput?.text.match(/\n/g) || []).length + 1; const inputAreaHeight = Math.max(20, inputLines * 20); const inputY = screenHeight - inputAreaHeight; const y_scale = 1.0; if (this.terminalPrompt && typeof this.terminalPrompt.setPosition === 'function') { this.terminalPrompt.setPosition(10, inputY); this.terminalInput.setPosition(this.terminalPrompt.x + this.terminalPrompt.width, inputY); } this.consoleOutput.node.style.height = `${screenHeight - inputAreaHeight}px`; this.consoleOutput.node.style.overflowY = 'auto'; this.consoleOutput.setY(0); } initializeCommandSystem() { this.commandHistory = []; this.historyIndex = -1; } initializeConsoleAppearance() { this.consoleStyle = { fontSize: '14px', fontFamily: 'monospace', fill: '#ffffff' }; this.consoleVisible = true; } initializeFeatureStates() { this.pendingStateRestore = null; this.saveTimeout = null; } queueStateSave(saveData) { if (this.saveTimeout) { clearTimeout(this.saveTimeout); } this.saveTimeout = setTimeout(() => { localStorage.setItem('terminal_state', JSON.stringify(saveData)); this.saveTimeout = null; }, 1000); // Debounce for 1 second } async init(data) { this.ASSETS = ASSETS; } saveState() { const saveData = { commandHistory: this.commandHistory, consoleOutput: this.consoleOutput?.node?.innerHTML || '', consoleVisible: this.consoleVisible }; localStorage.setItem('terminal_state', JSON.stringify(saveData)); } loadState() { const savedState = localStorage.getItem('terminal_state'); if (!savedState) return; const state = JSON.parse(savedState); // Update terminal state Object.assign(this, { commandHistory: state.commandHistory || [], historyIndex: (state.commandHistory || []).length, consoleVisible: state.consoleVisible }); // Restore battle state if it exists if (state.battleState) { this.commandProcessor.battle = state.battleState; } // Update UI elements if available if (this.consoleOutput?.node) { this.consoleOutput.node.innerHTML = state.consoleOutput || ''; [this.consoleBackground, this.terminalPrompt, this.terminalInput, this.consoleOutput ].forEach( element => element.setVisible(this.consoleVisible) ); } this.pendingStateRestore = null; this.consoleOutput?.setY(0); } async preload() { this.load.text('games', this.ASSETS.find(asset => asset.name === 'games').url); await this.loadCommands(); } async create() { this.cameras.main.setBackgroundColor('#000000'); this.scale.on('resize', this.handleResize, this); const width = this.scale.width; const height = this.scale.height; this.consoleBackground = this.add.rectangle(0, 0, width, height, 0x000000, 0.95) .setOrigin(0, 0) .setDepth(0); const inputY = height - 20; const style = `color: #ffffff; font-family: monospace; font-size: ${this.consoleStyle.fontSize}; white-space: pre-wrap; width: ${width - 20}px; position: absolute; z-index: 1000; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #666 #333; padding-right: 10px; background: transparent;`; this.consoleOutput = this.add.dom(10, 0, 'div', style, '') .setOrigin(0, 0) .setVisible(true) .setDepth(1); this.terminalPrompt = this.add.text(10, inputY, this.prompt + ' ', { ...this.consoleStyle, fill: '#00ff00' }) .setDepth(2); this.terminalInput = this.add.text(this.terminalPrompt.x + this.terminalPrompt.width, inputY, '', this.consoleStyle) .setDepth(2); this.cursor = this.add.text(this.terminalInput.x, inputY, '▋', this.consoleStyle) .setDepth(3); this.loadState(); // Check if terminal is empty and show intro popup if (!this.consoleOutput?.node?.innerHTML || this.consoleOutput.node.innerHTML.trim() === '') { const styleSheet = document.createElement('style'); styleSheet.textContent = ` @keyframes borderPulse { 0% { box-shadow: 0 0 5px #00ff00; border-color: #00ff00; } 50% { box-shadow: 0 0 8px #00ff00; border-color: #00ff00; } 100% { box-shadow: 0 0 5px #00ff00; border-color: #00ff00; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } `; document.head.appendChild(styleSheet); const popupStyle = 'position: fixed; top: 50%; left: 50%; ' + 'transform: translate(-50%, -50%); transform-origin: center; ' + 'z-index: 1000; max-width: 80%; background: #000000; padding: 20px; ' + 'font-family: monospace; color: #00ff00; text-align: center; ' + 'border: 2px solid #00ff00; border-radius: 15px; ' + 'animation: borderPulse 2s ease-in-out infinite;'; const welcomeMessage = '

==== GRAST Terminal v2.0 ====

' + '

Welcome to this experimental terminal system.

' + '

This is not just a regular command line - it contains forgotten software,
' + 'lost games, and experimental features.

' + '

Type "help" for basic commands.
' + 'Type "games" to discover gaming capabilities.

' + '

Remember: Not everything is what it seems. Try unexpected commands...

' + '

Click here to dismiss

'; const popup = document.createElement('div'); popup.style = popupStyle; popup.innerHTML = welcomeMessage; this.sys.game.canvas.parentElement.appendChild(popup); } this.input.keyboard.on('keydown', this.handleTerminalInput, this); this.measureText = this.add.text(0, 0, '', this.consoleStyle).setVisible(false); // Create hidden input for mobile keyboard this.mobileInput = document.createElement('input'); this.mobileInput.style.position = 'absolute'; this.mobileInput.style.opacity = '0'; this.mobileInput.style.height = '0'; this.mobileInput.style.fontSize = '16px'; // iOS requires 16px minimum to prevent zoom this.game.canvas.parentElement.appendChild(this.mobileInput); // Handle mobile input tap const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); if (isMobile) { this.input.on('pointerdown', (pointer) => { const inputBounds = new Phaser.Geom.Rectangle( 0, this.scale.height - 60, this.scale.width, 60 ); if (inputBounds.contains(pointer.x, pointer.y)) { this.mobileInput.focus(); } }); // Handle mobile input changes this.mobileInput.addEventListener('input', (e) => { this.handleTextInput(e.target.value); }); } // Add paste event listener to the game's parent element const gameCanvas = this.game.canvas; gameCanvas.tabIndex = 1; // Make canvas focusable gameCanvas.style.outline = 'none'; // Remove focus outline gameCanvas.addEventListener('paste', (e) => { e.preventDefault(); const pastedText = (e.clipboardData || window.clipboardData).getData('text'); const strippedText = pastedText.replace(/[\r\n]+/g, ' '); const currentText = this.terminalInput.text; const newText = currentText + strippedText; this.handleTextInput(newText); }); } handleTerminalInput(event) { // Handle Ctrl+V if (event.keyCode === 86 && (event.ctrlKey || event.metaKey)) { event.preventDefault(); navigator.clipboard.readText() .then(text => { const strippedText = text.replace(/[\r\n]+/g, ' '); const newText = this.terminalInput.text + strippedText; this.handleTextInput(newText); }) .catch(err => console.warn('Failed to read clipboard:', err)); return; } // Handle toggle visibility if (event.keyCode === 192 && event.ctrlKey) { event.preventDefault(); this.toggleConsoleVisibility(); return; } if (!this.consoleVisible) return; switch (event.keyCode) { case 13: // Enter const command = this.terminalInput.text.trim(); if (command) { this.executeCommand(command); this.commandHistory = [...this.commandHistory, command]; this.historyIndex = this.commandHistory.length; this.terminalInput.setText(''); this.handleTextInput(''); // Update cursor position after clearing input this.consoleOutput.node.scrollTop = this.consoleOutput.node.scrollHeight; } break; case 8: // Backspace const newText = this.terminalInput.text.slice(0, -1); this.handleTextInput(newText); break; case 38: // Up arrow event.preventDefault(); // Prevent scrolling this.navigateHistory('up'); break; case 40: // Down arrow event.preventDefault(); // Prevent scrolling this.navigateHistory('down'); break; default: if (event.key.length === 1) { event.preventDefault(); // Prevent default for all single characters const newText = this.terminalInput.text + event.key; this.handleTextInput(newText); } break; } // Update mobile input value if (this.mobileInput) { this.mobileInput.value = this.terminalInput.text; } this.saveState(); } async executeCommand(command) { this.setLoading(true); await this.handleCommandStart(command); let output; // Check for battle start command if (command.startsWith('battle start')) { this.setLoading(true); if (this.commandProcessor.battle) { output = "Cannot start a new battle while another battle is in progress."; } else { try { // Parse enemy list from command const enemyInput = command.split('battle start')[1].trim(); let enemies = []; // Handle comma-separated list or single enemy if (enemyInput.includes(',')) { enemies = enemyInput.split(',').map(e => e.trim()); } else if (enemyInput) { enemies = [enemyInput]; } else { enemies = ['unknown enemy']; } // Initialize battle state with multiple enemies this.commandProcessor.battle = { enemies: enemies.map(type => ({ type: type, defeated: false })), activeEnemies: enemies.length }; // Process the battle command through the LLM output = await this.commandProcessor.handleEmulatedCommand('battle', ['start', ...enemies]); this.displayCommandOutput(command, output, true); } catch (error) { console.error('Battle initialization error:', error); output = "Failed to start battle. Please try again."; } return; } } else if (command === 'loot' && !this.commandProcessor.battle?.enemyDefeated) { output = "There is nothing to loot. You must defeat an enemy first."; } else { output = await this.commandProcessor.executeCommand(command); // Check if enemy HP is 0 to determine victory if (output && output.includes('battle')) { try { const cleanOutput = output.replace(/^```json\s*|\s*```$/g, '').trim(); const battleData = JSON.parse(cleanOutput); if (battleData.enemy && battleData.enemy.status.hp.includes('0/')) { this.commandProcessor.battle = { ...this.commandProcessor.battle, enemyDefeated: true }; } } catch (error) { console.warn('Failed to parse battle data:', error); } } } // Only store the actual output, not the prompt if (output && !output.startsWith(this.prompt)) { localStorage.setItem('PreviousOutput', output); } this.setLoading(false); } displayCommandOutput(command, output, isBattle = false) { // If this is a battle command, format the JSON into HTML if (isBattle && output) { try { // Clean the output string of any backticks and 'json' markers before parsing let cleanOutput = output; // Split the output by newlines and find the JSON block const lines = cleanOutput.split('\n'); let jsonStart = -1; let jsonEnd = -1; for (let i = 0; i < lines.length; i++) { if (lines[i].includes('```json')) { jsonStart = i; } else if (jsonStart !== -1 && lines[i].includes('```')) { jsonEnd = i; break; } } if (jsonStart !== -1 && jsonEnd !== -1) { // Extract only the JSON content cleanOutput = lines.slice(jsonStart + 1, jsonEnd).join('\n'); } // Remove any remaining whitespace cleanOutput = cleanOutput.trim(); const battleData = JSON.parse(cleanOutput); if (!this.commandProcessor.battle && !command.startsWith('battle start')) { output = 'Not in a battle.'; this.consoleOutput.node.innerHTML = this.consoleOutput.node.innerHTML + '\n' + output; return; } const html = `

=== ${battleData.battleState} ===${battleData.turnNumber ? `\nTurn ${battleData.turnNumber}` : ''}
${battleData.narrative.replace(/^```json\s*|\s*```$/g, '')}
${battleData.battleState !== "VICTORIOUS" ? `${this.formatBattleStatus('Player', battleData.player, '#0f0', '#0f0')}
${battleData.enemies.map((enemy, index) => this.formatBattleStatus('Enemy', enemy, '#f00', '#f66')).join('')}
` : ''}${battleData.loot ? `Looted items:\n${battleData.loot.map(item => `- ${item}`).join('\n')}\n` : ''}${battleData.battleState !== "VICTORIOUS" ? battleData.prompt : ''}

`; output = html; } catch (error) { console.warn('Failed to parse battle JSON:', error, 'Raw output:', output); output = 'Not in a battle.'; this.consoleOutput.node.innerHTML = this.consoleOutput.node.innerHTML + '\n' + output; return; } } // No longer need to store in localStorage since we use previousResult this.saveState(); const maxLines = 1024; let outputLines = this.consoleOutput.node.innerHTML.split('\n'); if (output) { if (isBattle) { outputLines.push(output); } else { const lines = (typeof output === 'string' ? output.split('\n') : [String(output)]) .filter(line => line.trim() !== '```' && line !== '') .map(line => line.replace(/^```(html|javascript)?/, '') .replace(/\r$/, '')); outputLines.push(...lines); } } outputLines = outputLines.filter(line => line.trim() !== ''); outputLines = outputLines.slice(-maxLines); if (outputLines.length > 0) { this.isLoading = false; } // Preserve exact text content when joining lines const joinedOutput = outputLines.join('\n'); this.consoleOutput.node.innerHTML = joinedOutput; this.consoleOutput.node.scrollTop = this.consoleOutput.node.scrollHeight; this.updateConsolePositions(); // Queue state save after output is rendered this.queueStateSave({ commandHistory: this.commandHistory, consoleOutput: this.consoleOutput?.node?.innerHTML || '', consoleVisible: this.consoleVisible, version: '1.0' }); } handleResize(gameSize) { const width = gameSize.width; const height = gameSize.height; this.cameras.main.setViewport(0, 0, width, height); if (this.consoleBackground) { this.consoleBackground.setSize(width, height); } if (this.consoleOutput?.node) { this.consoleOutput.node.style.width = `${width - 20}px`; } // Update input text position and cursor if (this.terminalInput && this.terminalPrompt) { this.handleTextInput(this.terminalInput.text); this.updatePromptPosition(); } } update(time, delta) { // Update cursor blink if (time > this.cursorBlinkTime) { this.cursorVisible = !this.cursorVisible; this.cursor.setVisible(this.cursorVisible); this.cursorBlinkTime = time + this.cursorBlinkInterval; } if (this.commands) { for (const command of this.commands.values()) { if (command?.update && typeof command.update === 'function') { command.update(this, time, delta); } } } this.updateLoadingIndicator(time); this.updateConsolePositions(); if (!this.isLoading && this.consoleOutput?.node) { try { const lines = this.consoleOutput.node.innerHTML.split('\n'); const lastLine = lines[lines.length - 1]; // Check if it's a valid prompt format (user@host:path$ or root@host:path#) const promptRegex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+:[~\w/\s]+[#$]$/; if (lines.length > 1) { const trimmedLastLine = lastLine.trim(); const promptRegex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+:[~\w/\s]+[#$]$/; if (promptRegex.test(trimmedLastLine) && trimmedLastLine !== this.prompt) { this.prompt = trimmedLastLine; this.terminalPrompt?.setText(this.prompt + ' '); if (this.terminalInput && this.terminalPrompt) { this.terminalInput.setX(this.terminalPrompt.x + this.terminalPrompt.width); const inputText = this.terminalInput.text || ''; this.measureText.setText(inputText); this.cursor.setPosition( this.terminalInput.x + this.measureText.width, this.terminalInput.y ); } } } } catch (error) { // Silently handle any errors that might occur during update console.debug('Console output not ready'); } } } } Terminal.prototype.loadCommands = async function(ignoreList = ['games']) { const loadSingleCommand = async (asset) => { const { name, url, content } = asset; try { const response = await fetch(url); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const text = await response.text(); return { name, text }; } catch (error) { return null; } }; // Load LLM first const llmAsset = this.ASSETS.find(asset => asset.name === 'llm'); if (llmAsset) { const result = await loadSingleCommand(llmAsset); if (result) { try { // Define a function to store the LLM class let LLMClass; const registerLLM = (cls) => { LLMClass = cls; }; // Execute the LLM code with the registration function new Function('scene', 'register', ` ${result.text}; if (typeof LLM !== 'undefined') { register(LLM); } `)(this, registerLLM); if (LLMClass) { this.commands.set('llm', () => LLMClass); this.llmInstance = new LLMClass(); if (!this.llmInstance) { return; } } } catch (error) { return; } } } // Load remaining commands const loadCommand = async ({ name, url }) => { // Skip if command is already loaded if (this.commands.has(name)) { return null; } try { const response = await fetch(url); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const text = await response.text(); return { name, text: text }; } catch (error) { return null; } }; // Load all commands that aren't in the ignore list const commandsToLoad = this.ASSETS.filter(asset => !ignoreList.includes(asset.name) && asset.file_type === 'js' ); const results = await Promise.all(commandsToLoad.map(loadCommand)); // Process all valid results once results.filter(Boolean).forEach(({ name, text }) => { try { new Function('scene', text)(this); } catch (error) { console.warn(`Failed to load command: ${name}`, error); } }); if (this.pendingStateRestore) { this.pendingStateRestore = null; } } const config = { type: Phaser.AUTO, parent: 'renderDiv', scale: { mode: Phaser.Scale.RESIZE, parent: 'renderDiv', width: '100%', height: '100%', expandParent: true, autoRound: true, }, backgroundColor: '#000000', dom: { createContainer: true }, scene: Terminal }; const renderDiv = document.getElementById('renderDiv'); if (renderDiv) { renderDiv.style.width = '100%'; renderDiv.style.height = '100%'; renderDiv.style.margin = '0'; renderDiv.style.padding = '0'; const mutationObserver = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'attributes' && (mutation.attributeName === 'style' || mutation.attributeName === 'class')) { const rect = renderDiv.getBoundingClientRect(); if (window.phaserGame && window.phaserGame.scale) { window.phaserGame.scale.resize(rect.width, rect.height); const scene = window.phaserGame.scene.scenes[0]; if (scene) { scene.handleResize({ width: rect.width, height: rect.height }); } } } }); }); mutationObserver.observe(renderDiv, { attributes: true, attributeFilter: ['style', 'class'] }); } window.phaserGame = new Phaser.Game(config);