// Dr. Brain — HUD + Puzzle UIs var XYLO_COLORS = ['#ef4444','#f97316','#eab308','#22c55e','#14b8a6','#3b82f6','#6366f1','#a855f7']; var XYLO_NAMES = ['C','D','E','F','G','A','B','C2']; var STATIONS = { logic: { name: 'Logic Circuit', accent: '#60a5fa' }, music: { name: 'Musical Xylophone', accent: '#22c55e' }, words: { name: 'Word Scramble', accent: '#eab308' }, sorting: { name: 'Sorting Tube', accent: '#ef4444' }, }; var ROW_LABELS = ['A','B','C','D','E']; function brainPowerBar(pct) { var w = 200; var filled = Math.round((pct / 100) * w); var c = pct < 30 ? '#ef4444' : pct < 70 ? '#f59e0b' : '#4ade80'; return '

' +
    '' +
    'BRAIN POWER' +
    '' +
    '' +
    (filled > 0 ? '' : '') +
    '' + pct + '%

'; } function stationNav(active, completed) { if (active) return ''; var btns = ''; var keys = Object.keys(STATIONS); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var info = STATIONS[key]; var done = completed && completed[key]; var check = done ? ' ✓' : ''; btns += ''; } return '

' + '

' + btns + '

'; } // ========== PIPE SVG HELPERS ========== function pipeSvg(type, rot, size) { var s = size || 40; var h = s / 2; var thick = s * 0.28; var ht = thick / 2; var svg = ''; return svg; } function pipeGridUI(state) { var grid = state.pipeGrid || []; var phase = state.pipePhase || 'playing'; var solved = phase === 'solved'; var statusText = solved ? 'CIRCUIT CONNECTED!' : 'Rotate pipes to connect Source → Bulb'; var statusColor = solved ? '#4ade80' : '#60a5fa'; var gridSize = grid.length || 3; var cells = ''; for (var r = 0; r < gridSize; r++) { cells += '

'; cells += '' + ROW_LABELS[r] + ''; for (var c = 0; c < gridSize; c++) { var tile = grid[r] && grid[r][c] ? grid[r][c] : { type: 'straight', rotation: 0 }; var isSource = r === 0 && c === 0; var isBulb = r === (gridSize-1) && c === (gridSize-1); var border = isSource ? 'border:2px solid #22c55e;' : isBulb ? 'border:2px solid #f59e0b;' : 'border:1px solid rgba(255,255,255,0.1);'; var bg = solved ? 'background:rgba(74,222,128,0.1);' : 'background:rgba(255,255,255,0.02);'; var cursor = solved ? '' : 'cursor:pointer'; var click = solved ? '' : 'onclick="sendAction(\'rotatePipe\',{row:' + r + ',col:' + c + '})"'; cells += '

'; if (isSource) { cells += '

'; } if (isBulb) { cells += '

'; } cells += pipeSvg(tile.type, tile.rotation, 40); cells += '

'; } cells += '

'; } // Column headers var colHeaders = '

'; for (var ci = 0; ci < gridSize; ci++) { colHeaders += '' + (ci+1) + ''; } colHeaders += '

'; return '

' + '

Logic Circuit

' + 'Connect power source to brain bulb

' + '

' + statusText + '

' + '

Source (A1)

' + '

Bulb (' + ROW_LABELS[gridSize-1] + gridSize + ')

' + '

' + colHeaders + '

' + cells + '

' + '

Click any pipe to rotate it 90°

' + '

'; } // ========== XYLO UI ========== function xyloUI(state) { var phase = state.xyloPhase || 'watching'; var seq = state.xyloSequence || []; var showIdx = typeof state.xyloShowIndex === 'number' ? state.xyloShowIndex : -1; var playerInput = state.xyloPlayerInput || []; var round = state.xyloRound || 1; var totalRounds = 3; var roundLengths = [3,4,5]; var noteCount = roundLengths[Math.min(round, 3) - 1] || 3; var statusText = '', statusColor = '#22c55e'; if (phase === 'complete') { statusText = 'PUZZLE COMPLETE! +25% Brain Power'; statusColor = '#4ade80'; } else if (phase === 'watching') { statusText = 'Round ' + round + '/' + totalRounds + ' — Watch...'; statusColor = '#60a5fa'; } else if (phase === 'playing') { statusText = 'Round ' + round + '/' + totalRounds + ' — Your turn! (' + playerInput.length + '/' + seq.length + ')'; statusColor = '#22c55e'; } else if (phase === 'correct') { statusText = 'Round clear!'; statusColor = '#4ade80'; } else if (phase === 'wrong') { statusText = 'Wrong! Restarting round...'; statusColor = '#ef4444'; } var keys = ''; for (var i = 0; i < 8; i++) { var color = XYLO_COLORS[i]; var isSeqNote = phase === 'watching' && seq[showIdx] === i; var glow = isSeqNote ? 'box-shadow:0 0 20px ' + color + ';transform:scale(1.1);' : ''; var inter = phase === 'playing' ? 'pointer-events-auto cursor-pointer hover:brightness-125' : 'pointer-events-none opacity-60'; keys += ''; } var dots = ''; for (var j = 0; j < seq.length; j++) { var rev = phase === 'watching' && j <= showIdx; var mat = phase === 'playing' && j < playerInput.length; var bg = (rev || mat) ? XYLO_COLORS[seq[j]] : 'rgba(255,255,255,0.1)'; dots += '

'; } return '

' + '

Musical Xylophone

' + 'Round ' + round + ' of ' + totalRounds + ' (' + noteCount + ' notes)

' + '

' + statusText + '

' + '

' + keys + '

' + '

' + dots + '

'; } function wordScrambleUI(state) { var phase = state.wordPhase || 'playing'; var scrambled = state.wordScrambled || []; var wrong = state.wordWrong || false; var solved = phase === 'correct'; var answer = state.wordAnswer || ''; var statusText = solved ? 'SOLVED! The word was ' + answer : 'Unscramble the letters to form a word'; var statusColor = solved ? '#4ade80' : wrong ? '#ef4444' : '#eab308'; var letters = ''; var displayLetters = solved ? answer.split('') : scrambled; for (var i = 0; i < displayLetters.length; i++) { var letter = displayLetters[i]; var glow = solved ? 'box-shadow:0 0 16px #eab30888;border-color:#eab308;color:#eab308;' : ''; var shake = wrong ? 'animation:shake 0.3s ease;' : ''; letters += '

' + letter + '

'; } var inputArea = ''; if (!solved) { inputArea = '

' + '' + '' + '

'; } return '

' + '

Word Scramble

' + 'Unscramble the scientific term

' + '

' + statusText + '

' + '

' + letters + '

' + inputArea + '

Type the correct 5-letter word and hit Submit

' + '

'; } function sortingTubeUI(state) { var phase = state.sortPhase || 'playing'; var spheres = state.sortSpheres || []; var current = state.sortCurrent || 0; var results = state.sortResults || []; var complete = phase === 'complete'; var failed = phase === 'failed'; var COLOR_HEX = { red: '#ef4444', green: '#22c55e', blue: '#3b82f6' }; var TUBE_LABELS = ['Left (Red)', 'Middle (Green)', 'Right (Blue)']; var TUBE_COLORS = ['#ef4444', '#22c55e', '#3b82f6']; // Build tubes visualization var tubes = ''; for (var t = 0; t < 3; t++) { var tubeColor = TUBE_COLORS[t]; // Count spheres sorted into this tube var sorted = []; for (var r = 0; r < results.length; r++) { if (results[r].tube === t) sorted.push(results[r]); } var sphereStack = ''; for (var si = 0; si < sorted.length; si++) { var sc = COLOR_HEX[sorted[si].color]; var correct = sorted[si].correct; sphereStack += '

'; } tubes += '

' + '

' + sphereStack + '

' + '' + TUBE_LABELS[t] + '

'; } // Current sphere dropping var dropArea = ''; if (!complete && !failed && current < spheres.length) { var cc = COLOR_HEX[spheres[current]] || '#fff'; dropArea = '

' + 'Sphere ' + (current+1) + ' of ' + spheres.length + '' + '

' + '' + spheres[current] + ' sphere

'; } // Sort buttons var btns = ''; if (!complete && !failed && current < spheres.length) { for (var b = 0; b < 3; b++) { btns += ''; } } var statusText = complete ? 'ALL SPHERES SORTED!' : failed ? 'Mistakes made — restarting...' : 'Sort each sphere into the matching tube'; var statusColor = complete ? '#4ade80' : failed ? '#ef4444' : '#ef4444'; return '

' + '

Sorting Tube

' + 'Match spheres to their colored tube

' + '

' + statusText + '

' + dropArea + '

' + tubes + '

' + '

' + btns + '

' + '

Red→Left Green→Middle Blue→Right

' + '

'; } function victoryUI() { return '

' + '

COGNITIVE RESTORATION COMPLETE

' + '

WELL DONE, DOCTOR.

' + '

SYSTEM SECURE

' + '

Music

' + '

Logic

' + '

Words

' + '

Sorting

' + '

All neural pathways reconnected. The mind is whole.

' + '

'; } function stationOverlay(state) { var active = state.activeStation; if (!active) return ''; if (active === 'music') return xyloUI(state); if (active === 'logic') return pipeGridUI(state); if (active === 'words') return wordScrambleUI(state); if (active === 'sorting') return sortingTubeUI(state); var info = STATIONS[active]; if (!info) return ''; return '

' + '

' + info.name + '

' + '

' + '[ Coming soon... ]

'; } function introOverlay(phase) { if (phase === 'done' || !phase || phase === 'pending') return ''; var opacity = phase === 'text' ? '1' : '0.5'; var textBlock = phase === 'text' ? ( '

' + '

THE LOST MIND

' + '

COGNITIVE RESTORATION

' + '

' + 'Repair Dr. Brain\'s fractured synapses by completing the 4 logic trials located around the floating core.

' + 'Achieve 100% Restoration to bring the mind back online.

' + '

Click anywhere to continue

' ) : ''; return '

' + textBlock + '

'; } var HELP_TEXTS = { logic: 'Rotate the pipe tiles until a path connects from the Source (top-left) to the Bulb (bottom-right). Click any tile to rotate it 90 degrees.', music: 'Watch the sequence of colored keys light up, then replay them in the same order. You must pass 3 rounds of increasing difficulty.', words: 'The scrambled letters form a neuroscience term. Type your guess and press Submit. You can try as many times as needed.', sorting: 'Sort 6 colored spheres into matching tubes: Red on left, Green in middle, Blue on right. One mistake resets the round.', hub: 'Select a terminal to begin a cognitive challenge. Complete all four to restore Dr. Brain\'s mind to 100%.', }; function helpButton(showHelp) { return ''; } function helpPanel(showHelp, active) { if (!showHelp) return ''; var key = active || 'hub'; var text = HELP_TEXTS[key] || HELP_TEXTS.hub; var accent = active && STATIONS[active] ? STATIONS[active].accent : '#eab308'; return '

' + '

' + text + '

'; } export default function(localPlayer, world) { var bp = localPlayer.state.brainPower || 0; var active = localPlayer.state.activeStation || null; var completed = localPlayer.state.completedStations || {}; var intro = localPlayer.state.introPhase || 'done'; var showH = localPlayer.state.showHelp || false; // Title card / intro if (intro !== 'done') return introOverlay(intro); // Victory if (localPlayer.state.victory) return brainPowerBar(bp) + victoryUI(); // Main game return brainPowerBar(bp) + stationOverlay(localPlayer.state) + stationNav(active, completed) + helpButton(showH) + helpPanel(showH, active); }

Spawn