keyvoid 1.0.0

package/src/ui/skins/arcade.js

@@ -0,0 +1,530 @@
+// ─── Arcade Skin ──────────────────────────────────────────────────────
+// An interactive retro 8-bit alien shooter. 
+// Blocked keys shoot lasers at scrolling alien sprites.
+
+import { renderUnvoidButton } from '../components/unvoid-button.js';
+import { renderStatusBar, getStatusBarHeight } from '../components/status-bar.js';
+import { palettes, RESET, BOLD } from '../../utils/colors.js';
+import { centerText } from '../../utils/terminal.js';
+import { renderBigNumber } from '../../utils/big-digits.js';
+
+const P = palettes.arcade;
+
+let initialized = false;
+let lastKeyCount = 0;
+let score = 0;
+let playerHearts = 3;
+let dangerFlash = 0;
+let isGameOver = false;
+let spaceHeldTicks = 0;
+
+// Game state
+const aliens = [];
+const lasers = [];
+const particles = [];
+const turretFlashes = [0, 0, 0, 0];
+
+const ALIEN_SPRITES = [
+  [
+    ' ▄▄████▄▄ ',
+    '██████████',
+    '██▄████▄██',
+    ' ▀      ▀ '
+  ],
+  [
+    '  ▄████▄  ',
+    '▄████████▄',
+    '▀████████▀',
+    ' ▄      ▄ '
+  ]
+];
+const ALIEN_W = 10;
+const ALIEN_H = 4;
+
+function spawnAliens(cols, rows) {
+  aliens.length = 0;
+  const maxAliens = 2; // Always start easy
+  for (let i = 0; i < maxAliens; i++) {
+    aliens.push({
+      x: 5 + i * 18,
+      y: 1 + (i % 3) * 6, // Push Y down so they have room
+      dir: (i % 2 === 0) ? 1 : -1,
+      type: i % 2,
+      hp: 5,           // Require 5 hits
+      flashTicks: 0,   // Flash white when hit
+      active: true
+    });
+  }
+}
+
+export function renderArcade(cols, rows, state, tick) {
+  const lines = Array(rows).fill(`${P.bg}${' '.repeat(cols)}${RESET}`);
+  const statusHeight = getStatusBarHeight(state);
+  const playAreaH = rows - statusHeight - 4; // leave room for unvoid button
+  
+  if (!initialized) {
+    spawnAliens(cols, rows);
+    initialized = true;
+  }
+
+  const { keyCount = 0, lastKeyCode = -1 } = state;
+
+  // ── GAME OVER STATE ──
+  if (isGameOver) {
+      if (state.isSpaceDown) {
+          spaceHeldTicks++;
+          if (spaceHeldTicks >= 180) { // 3 seconds at 60fps
+              // Restart Game
+              isGameOver = false;
+              score = 0;
+              playerHearts = 3;
+              aliens.length = 0;
+              lasers.length = 0;
+              particles.length = 0;
+              spawnAliens(cols, rows);
+              spaceHeldTicks = 0;
+              lastKeyCount = keyCount;
+          }
+      } else {
+          spaceHeldTicks = Math.max(0, spaceHeldTicks - 5); // Decay quickly when released
+      }
+      lastKeyCount = keyCount;
+  } else {
+      // ── GAMEPLAY MECHANICS ──
+
+      // Continuous Spawning Mechanics (Scales with Score)
+      // Base: start with 2. Every 400 pts (killing ~8 aliens), add 1 to the max concurrent limit.
+      const maxAliens = Math.min(Math.floor(cols / 12), 2 + Math.floor(score / 400));
+      const activeAliens = aliens.filter(a => a.active).length;
+      if (activeAliens < maxAliens && tick % 30 === 0) {
+          aliens.push({
+              x: Math.floor(Math.random() * (cols - ALIEN_W - 4)) + 2,
+              y: 2,
+              dir: Math.random() > 0.5 ? 1.5 : -1.5,
+              type: Math.floor(Math.random() * 2),
+              hp: 5,
+              flashTicks: 0,
+              active: true
+          });
+      }
+
+      // 1. Shoot lasers on keypress
+      if (keyCount > lastKeyCount) {
+        const diff = keyCount - lastKeyCount;
+    
+    // Determine horizontal spawn position based on keycode
+    let targetPct = 0.5;
+    if (lastKeyCode !== -1) {
+        // macOS QWERTY layout estimation map
+        const leftKeys = new Set([0,1,2,6,7,8,12,13,14,18,19,20,53,48,50]);
+        const midLeftKeys = new Set([3,4,5,9,11,15,17,21,22,23]);
+        const midRightKeys = new Set([32,34,45,46,16,38,40,43,28,26,49]);
+        const rightKeys = new Set([31,35,37,33,30,42,41,39,44,47,25,29,27,24,36,51,123,124,125,126,56,60]);
+        
+        if (leftKeys.has(lastKeyCode)) targetPct = 0.2;
+        else if (midLeftKeys.has(lastKeyCode)) targetPct = 0.4;
+        else if (midRightKeys.has(lastKeyCode)) targetPct = 0.6;
+        else if (rightKeys.has(lastKeyCode)) targetPct = 0.8;
+        else {
+            // Deterministic hash so unknown keys aim consistently
+            targetPct = 0.1 + ((lastKeyCode * 37) % 100) / 100.0 * 0.8;
+        }
+    }
+    
+    // Cap laser spam to prevent lag
+    let activeTurret = 0;
+    if (targetPct === 0.2) activeTurret = 0;
+    else if (targetPct === 0.4) activeTurret = 1;
+    else if (targetPct === 0.6) activeTurret = 2;
+    else activeTurret = 3; // Right or fallback
+    
+    turretFlashes[activeTurret] = 4; // 4 ticks of bright flash
+    
+    for(let i = 0; i < Math.min(diff, 5); i++) {
+        // slight jitter +/- 3 chars around the key's central column target
+        const jitter = (Math.random() - 0.5) * 6;
+        const spawnX = Math.floor(cols * targetPct + jitter);
+        
+        lasers.push({
+            x: Math.max(2, Math.min(cols - 4, spawnX)),
+            y: playAreaH - 3, // Spawn directly above the tank UI
+            speed: 0.8 + Math.random() * 0.5
+        });
+    }
+    lastKeyCount = keyCount;
+  }
+
+  // 2. Update Aliens
+  // Difficulty Scaling: Fall speed increases as you score points!
+  const currentFallSpeed = 0.15 + Math.min(0.25, (score * 0.00005));
+
+  aliens.forEach(a => {
+    if (!a.active) return;
+    a.x += 0.3 * a.dir;
+    a.y += currentFallSpeed;
+    
+    // Bounds check
+    if (a.x >= cols - ALIEN_W) {
+        a.x = cols - ALIEN_W;
+        a.dir = -1;
+        a.y += 1;
+    } else if (a.x <= 0) {
+        a.x = 0;
+        a.dir = 1;
+        a.y += 1;
+    }
+    
+    // Reached the bottom (Tank Base line) = Player takes damage!
+    if (a.y > playAreaH - 6) {
+        a.active = false;
+        playerHearts -= 1;
+        dangerFlash = 15; // flash screen red
+        
+        if (playerHearts <= 0) {
+            playerHearts = 0; // clamp
+            isGameOver = true;
+        } else {
+            // Penalize score if not game over yet
+            score = Math.max(0, score - 500); 
+            aliens.forEach(al => al.active = false); // Board wipe for breather
+        }
+    }
+  });
+
+  // 3. Update Lasers & Collisions
+  for (let i = lasers.length - 1; i >= 0; i--) {
+    let l = lasers[i];
+    l.y -= l.speed;
+    
+    // Remove if off-screen
+    if (l.y < 0) {
+        lasers.splice(i, 1);
+        continue;
+    }
+    
+    // Check collision
+    let hit = false;
+    for (let j = 0; j < aliens.length; j++) {
+        let a = aliens[j];
+        if (!a.active) continue;
+        
+        if (l.x >= Math.floor(a.x) && l.x < Math.floor(a.x) + ALIEN_W) {
+            if (Math.floor(l.y) >= a.y && Math.floor(l.y) <= a.y + ALIEN_H) {
+                // IT'S A HIT!
+                hit = true;
+                a.hp -= 1;
+                
+                if (a.hp <= 0) {
+                    a.active = false;
+                    score += 100;
+                    
+                    // Big explosion
+                    for (let p = 0; p < 12; p++) {
+                        particles.push({
+                            x: l.x,
+                            y: l.y,
+                            vx: (Math.random() - 0.5) * 2.0,
+                            vy: (Math.random() - 0.5) * 2.0,
+                            life: 15 + Math.random() * 15
+                        });
+                    }
+                } else {
+                    // Small explosion + flash
+                    a.flashTicks = 3; 
+                    for (let p = 0; p < 3; p++) {
+                        particles.push({
+                            x: l.x,
+                            y: l.y + ALIEN_H,
+                            vx: (Math.random() - 0.5) * 1.0,
+                            vy: Math.random() * 1.0,
+                            life: 5 + Math.random() * 5
+                        });
+                    }
+                }
+                break;
+            }
+        }
+    }
+    if (hit) lasers.splice(i, 1);
+  }
+
+  // Flash ticks countdown
+  aliens.forEach(a => {
+      if (a.flashTicks > 0) a.flashTicks--;
+  });
+
+  // 4. Update Particles
+  for (let i = particles.length - 1; i >= 0; i--) {
+      let p = particles[i];
+      p.x += p.vx;
+      p.y += p.vy;
+      p.vy += 0.05; // gravity
+      p.life--;
+      if (p.life <= 0) particles.splice(i, 1);
+  }
+  
+  } // <--- End of GAMEPLAY MECHANICS `if (!isGameOver)` block
+
+
+  // ── Rendering Engine ──
+  if (dangerFlash > 0) dangerFlash--;
+  
+  // Create a red-tinted background if we took damage
+  const currentBg = dangerFlash > 0 
+      ? `\x1b[48;2;${Math.min(150, dangerFlash * 10)};0;0m` 
+      : P.bg;
+
+  const buffer = [];
+  for (let r = 0; r < playAreaH; r++) {
+      buffer.push(Array(cols).fill(' '));
+  }
+  const colorBuffer = [];
+  for (let r = 0; r < playAreaH; r++) {
+      colorBuffer.push(Array(cols).fill(currentBg));
+  }
+
+  // Draw Background Score Big Numbers (Rendered first so it acts as background)
+  const scoreDigits = renderBigNumber(score);
+  if (scoreDigits && scoreDigits.length > 0) {
+      const scoreW = scoreDigits[0].length;
+      const scoreX = Math.floor(cols / 2) - Math.floor(scoreW / 2);
+      const scoreY = 1;
+      
+      for (let r = 0; r < scoreDigits.length; r++) {
+          if (scoreY + r >= playAreaH) continue;
+          for (let c = 0; c < scoreW; c++) {
+              if (scoreX + c >= 0 && scoreX + c < cols) {
+                  const char = scoreDigits[r][c];
+                  // Dim the score string so it looks like background
+                  buffer[scoreY + r][scoreX + c] = char;
+                  colorBuffer[scoreY + r][scoreX + c] = P.bg + P.accent + BOLD;
+              }
+          }
+      }
+  }
+
+  // Draw Aliens and HP bars
+  aliens.forEach(a => {
+      if (!a.active) return;
+      const sprite = ALIEN_SPRITES[a.type];
+      const cx = Math.floor(a.x);
+      const cy = Math.floor(a.y);
+      // If flashed, turn white, otherwise normal color
+      const color = a.flashTicks > 0 ? '\x1b[38;2;255;255;255m' : ((a.type === 0) ? P.alien : P.primary);
+      
+      // Draw HP Bar
+      const hpColor = a.hp > 2 ? '\x1b[38;2;0;255;0m' : '\x1b[38;2;255;0;0m';
+      const hpBar = '[' + '■'.repeat(Math.max(0, a.hp)) + ' '.repeat(Math.max(0, 5 - a.hp)) + ']';
+      const hpX = cx + 1;
+      const hpY = cy - 1;
+      if (hpY >= 0 && hpY < playAreaH) {
+          for (let c = 0; c < hpBar.length; c++) {
+              if (hpX + c >= 0 && hpX + c < cols) {
+                  buffer[hpY][hpX + c] = hpBar[c];
+                  colorBuffer[hpY][hpX + c] = P.bg + hpColor;
+              }
+          }
+      }
+
+      for (let r = 0; r < ALIEN_H; r++) {
+          if (cy + r >= playAreaH) continue;
+          if (cy + r < 0) continue;
+          for (let c = 0; c < ALIEN_W; c++) {
+              if (cx + c >= 0 && cx + c < cols) {
+                  const char = sprite[r][c];
+                  if (char !== ' ') {
+                      buffer[cy + r][cx + c] = char;
+                      colorBuffer[cy + r][cx + c] = currentBg + color;
+                  }
+              }
+          }
+      }
+  });
+
+  // Draw Explicit Top-Left Score
+  const scoreText = ` 🎯 SCORE: ${score} `;
+  for (let c = 0; c < scoreText.length; c++) {
+      if (c < cols) {
+          buffer[0][c] = scoreText[c];
+          colorBuffer[0][c] = currentBg + '\x1b[38;2;255;255;0m' + BOLD;
+      }
+  }
+
+  // Draw Health Bar Top-Right
+  const hText = `HEALTH: ${'♥'.repeat(playerHearts)}${'♡'.repeat(3 - playerHearts)}`;
+  const hPad = cols - hText.length - 1;
+  for (let c = 0; c < hText.length; c++) {
+      if (hPad + c < cols && hPad + c >= 0) {
+          buffer[0][hPad + c] = hText[c];
+          colorBuffer[0][hPad + c] = currentBg + '\x1b[38;2;255;50;50m' + BOLD;
+      }
+  }
+
+  // Draw Lasers
+  lasers.forEach(l => {
+      const cx = Math.floor(l.x);
+      const cy = Math.floor(l.y);
+      if (cy >= 0 && cy < playAreaH && cx >= 0 && cx < cols) {
+          buffer[cy][cx] = '┃';
+          colorBuffer[cy][cx] = currentBg + P.laser + BOLD;
+      }
+  });
+
+  // Draw Particles
+  const pChars = ['*', '#', '+', '·'];
+  particles.forEach((p, idx) => {
+      const cx = Math.floor(p.x);
+      const cy = Math.floor(p.y);
+      if (cy >= 0 && cy < playAreaH && cx >= 0 && cx < cols) {
+          buffer[cy][cx] = pChars[idx % pChars.length];
+          colorBuffer[cy][cx] = currentBg + P.explosion;
+      }
+  });
+
+  // Draw Tank UI Base at Bottom
+  // 4 Turrets dividing spacing equally
+  for (let i = 0; i < 4; i++) {
+      if (turretFlashes[i] > 0) turretFlashes[i]--;
+  }
+
+  const baseRow1 = playAreaH - 2;
+  const baseRow2 = playAreaH - 1;
+  const positions = [0.2, 0.4, 0.6, 0.8];
+  const keysLabel = ['LEFT KEYS', 'MID-LEFT', 'MID-RIGHT', 'RIGHT KEYS'];
+  
+  // Draw solid base connection line
+  for (let c = 0; c < cols; c++) {
+      if (baseRow2 >= 0 && baseRow2 < playAreaH) {
+          buffer[baseRow2][c] = '▄';
+          colorBuffer[baseRow2][c] = currentBg + '\x1b[38;2;80;90;100m';
+      }
+  }
+
+  // Draw each of the 4 turrets
+  positions.forEach((pct, idx) => {
+      const isFlashing = turretFlashes[idx] > 0;
+      const tColor = isFlashing ? '\x1b[38;2;255;255;0m' : '\x1b[38;2;120;150;180m'; // Yellow if shooting, blue-grey otherwise
+      const txtColor = isFlashing ? '\x1b[38;2;255;255;255m' : '\x1b[38;2;80;100;120m'; // High contrast text if flashing
+      
+      const cx = Math.floor(cols * pct);
+      
+      // Cannon tip
+      if (baseRow1 >= 0 && cx >= 0 && cx < cols) {
+          buffer[baseRow1][cx] = '▲';
+          colorBuffer[baseRow1][cx] = currentBg + tColor;
+      }
+      
+      // Treads & labels
+      const label = `[====${keysLabel[idx]}====]`;
+      const startX = cx - Math.floor(label.length / 2);
+      
+      for (let i = 0; i < label.length; i++) {
+          const drawX = startX + i;
+          if (baseRow2 >= 0 && drawX >= 0 && drawX < cols) {
+              buffer[baseRow2][drawX] = label[i];
+              colorBuffer[baseRow2][drawX] = currentBg + (label[i] === '=' || label[i] === '[' || label[i] === ']' ? tColor : txtColor);
+          }
+      }
+  });
+
+  // Compile buffer to ANSI strings
+  for (let r = 0; r < playAreaH; r++) {
+      let rowStr = '';
+      let currCol = currentBg;
+      let currRun = '';
+      
+      for (let c = 0; c < cols; c++) {
+          const char = buffer[r][c];
+          const colorCode = colorBuffer[r][c];
+          
+          if (colorCode !== currCol) {
+              rowStr += currCol + currRun;
+              currCol = colorCode;
+              currRun = char;
+          } else {
+              currRun += char;
+          }
+      }
+      rowStr += currCol + currRun + RESET;
+      lines[r] = rowStr;
+  }
+
+  // Draw Game Over Overlay
+  if (isGameOver) {
+      const goLines = [
+          '   ▄██████▄   ▄▀▀▀▄   █▄ ▄█  ▄██████▄   ',
+          '  ▐█▀    ▀█  █  ▄  █  ██▀██ ▐█▀    ▀█   ',
+          '  ▐█   ▄▄▄▄ ▐█▄▄▄▄▄█▌ █ ▀ █ ▐█▄▄▄▄▄▄▌   ',
+          '  ▐█▌    ██  █     █  █   █ ▐█     █▌   ',
+          '   ▀██████▀  █     █  █   █  ▀██████▀   ',
+          '                                        ',
+          '   ▄██████▄ ▀█      █▀ ▄██████▄   ██▀▀▀▀',
+          '  ██▀    ▀██ ▀▄    ▄▀ ██▀    ▀██  ██    ',
+          '  ██      ██  ▀█  █▀  ██▄▄▄▄▄▄██  █████ ',
+          '  ██▄    ▄██   ▀▄▄▀   ██▀▀▀▀▀▀▀▀  ██    ',
+          '   ▀██████▀     ▀▀     ▀██████▀   ██████',
+          '',
+          `           FINAL SCORE: ${score}          `,
+          '',
+          `    HOLD SPACE TO RESTART    `
+      ];
+      
+      const goH = goLines.length;
+      const overlayY = Math.floor((playAreaH - goH) / 2) - 1;
+      
+      for (let r = 0; r < goH; r++) {
+          const screenY = overlayY + r;
+          if (screenY < 0 || screenY >= playAreaH) continue;
+          
+          let color = r >= 12 ? P.laser : P.alien; // Fixed undefined color reference
+          if (r === 12) color = '\x1b[38;2;255;255;255m';
+          
+          let text = goLines[r];
+          
+          if (r === 14) {
+              const heldPct = Math.min(1.0, spaceHeldTicks / 180);
+              const barLen = Math.floor(heldPct * 22);
+              const bar = '█'.repeat(barLen) + '·'.repeat(22 - barLen);
+              text = `  HOLD SPACE: [${bar}]  `;
+              color = (tick % 40 < 20 || heldPct > 0) ? '\x1b[38;2;255;255;0m' : '\x1b[38;2;100;100;0m'; 
+          }
+          
+          lines[screenY] = centerText(
+            text === '' ? '' : `${color}${BOLD}${text}${RESET}`, 
+            cols, 
+            `${currentBg} `
+          );
+      }
+  }
+
+  // ── UI Overlays ──
+  // (Score rendering moved into the buffer so it renders deeply behind aliens)
+
+  // UNVOID Button
+  const buttonRow = playAreaH + 1;
+  const button = renderUnvoidButton(cols, buttonRow, tick);
+  for (let i = 0; i < button.lines.length; i++) {
+    if (buttonRow + i < rows - statusHeight) {
+      lines[buttonRow + i] = `${P.bg}${button.lines[i].replace(/\x1b\[0m/g, RESET + P.bg)}${RESET}`;
+    }
+  }
+
+  // Status Bar
+  const statusLines = renderStatusBar(cols, { ...state, skinName: 'arcade' }, tick);
+  const statusStartRow = rows - statusLines.length;
+  for (let i = 0; i < statusLines.length; i++) {
+    if (statusStartRow + i < rows) {
+      lines[statusStartRow + i] = `${P.bg}${statusLines[i].replace(/\x1b\[0m/g, RESET + P.bg)}${RESET}`;
+    }
+  }
+
+  return {
+    lines,
+    buttonRegion: {
+      x: button.x,
+      y: buttonRow + 1,
+      width: button.width,
+      height: button.height,
+    },
+  };
+}