keyvoid 1.0.0

package/src/ui/skins/cat.js

@@ -0,0 +1,223 @@
+// ─── Cat Skin ────────────────────────────────────────────────────────
+// Cat defense mode: ASCII cat art that reacts to keystrokes,
+// warm amber/orange palette, paw swipe animations.
+
+import { renderCounter, renderSmallCounter } from '../components/counter.js';
+import { renderUnvoidButton } from '../components/unvoid-button.js';
+import { renderStatusBar, getStatusBarHeight } from '../components/status-bar.js';
+import { palettes, RESET, BOLD, DIM } from '../../utils/colors.js';
+import { centerText } from '../../utils/terminal.js';
+import { formatCount } from '../../utils/big-digits.js';
+
+const P = palettes.cat;
+
+// ASCII cat art — different expressions
+const CAT_IDLE = [
+  '    /\\_____/\\    ',
+  '   /  o   o  \\   ',
+  '  ( ==  ^  == )  ',
+  '   )         (   ',
+  '  (           )  ',
+  ' ( (  )   (  ) ) ',
+  '(__(__)___(__)__)',
+];
+
+const CAT_ALERT = [
+  '    /\\_____/\\    ',
+  '   /  ◉   ◉  \\   ',
+  '  ( ==  ^  == )  ',
+  '   )  \\_____/  (   ',
+  '  (    \\   /    )  ',
+  ' ( (  )   (  ) ) ',
+  '(__(__)___(__)__)',
+];
+
+const CAT_SWIPE = [
+  '    /\\_____/\\    ',
+  '   /  ◉   ◉  \\   ',
+  '  ( ==  ^  == )  ',
+  '   )  \\_____/  ( ',
+  '  (  )=======|   ',
+  ' ( (  )   (  ) ) ',
+  '(__(__)___(__)__)',
+];
+
+const CAT_ANGRY = [
+  '    /\\_____/\\    ',
+  '   / \\◉   ◉/  \\   ',
+  '  ( ==  ^  == )  ',
+  '   )  HISSSS  (  ',
+  '  ( \\|||||||/ )  ',
+  ' ( (  )   (  ) ) ',
+  '(__(__)___(__)__)',
+];
+
+const PAW_FRAMES = [
+  '   ╲  ',
+  '  ╲╲  ',
+  ' ╲╲╲  ',
+  '╲╲╲╲  ',
+  ' 🐾   ',
+];
+
+const REACTIONS = [
+  'BLOCKED!', 'NOPE!', 'PAW DENIED!', 'NOT TODAY!',
+  '*hiss*', '*swipe*', 'MY KEYBOARD!', 'NICE TRY!',
+];
+
+let catState = 'idle';
+let catTimer = 0;
+let lastCatKeyCount = 0;
+let currentReaction = 'BLOCKED!';
+let pawFrame = -1;
+let streak = 0;
+let maxStreak = 0;
+
+export function renderCat(cols, rows, state, tick) {
+  const lines = [];
+  const { keyCount = 0 } = state;
+
+  // Background
+  const bgLine = `${P.bg}${' '.repeat(cols)}${RESET}`;
+  for (let i = 0; i < rows; i++) lines.push(bgLine);
+
+  // Update cat state on new key
+  if (keyCount > lastCatKeyCount) {
+    const diff = keyCount - lastCatKeyCount;
+    streak += diff;
+    if (streak > maxStreak) maxStreak = streak;
+
+    if (streak > 20) {
+      catState = 'angry';
+    } else if (streak > 5) {
+      catState = 'swipe';
+      pawFrame = 0;
+    } else {
+      catState = 'alert';
+    }
+    catTimer = tick;
+    currentReaction = REACTIONS[Math.floor(Math.random() * REACTIONS.length)];
+    lastCatKeyCount = keyCount;
+  }
+
+  // Reset cat state after a delay
+  if (tick - catTimer > 15 && catState !== 'idle') {
+    catState = 'idle';
+    if (tick - catTimer > 30) streak = 0;
+  }
+
+  // Advance paw animation
+  if (pawFrame >= 0) {
+    pawFrame = Math.min(pawFrame + 1, PAW_FRAMES.length - 1);
+    if (tick - catTimer > 10) pawFrame = -1;
+  }
+
+  // ── Banner ──
+  const bannerText = '🐱  CAT DEFENSE ACTIVE  🐱';
+  const bannerFlash = tick % 10 < 5 ? P.primary : P.secondary;
+  lines[1] = `${P.bg}${centerText(`${bannerFlash}${BOLD}${bannerText}`, cols)}${RESET}`;
+
+  // Animated banner border
+  const borderChar = tick % 6 < 3 ? '═' : '━';
+  const bannerWidth = Math.min(40, cols - 10);
+  lines[2] = `${P.bg}${centerText(`${P.dim}${borderChar.repeat(bannerWidth)}`, cols)}${RESET}`;
+
+  // ── Cat ASCII Art ──
+  let catArt;
+  switch (catState) {
+    case 'alert': catArt = CAT_ALERT; break;
+    case 'swipe': catArt = CAT_SWIPE; break;
+    case 'angry': catArt = CAT_ANGRY; break;
+    default: catArt = CAT_IDLE;
+  }
+
+  const catColor = catState === 'angry' ? P.accent : P.fur;
+  const catStartRow = 4;
+
+  for (let i = 0; i < catArt.length; i++) {
+    if (catStartRow + i < rows - 10) {
+      // Color the eyes green
+      let artLine = catArt[i];
+      let colored = `${catColor}${artLine}`;
+      lines[catStartRow + i] = `${P.bg}${centerText(colored, cols)}${RESET}`;
+    }
+  }
+
+  // ── Paw Animation ──
+  if (pawFrame >= 0 && pawFrame < PAW_FRAMES.length) {
+    const pawRow = catStartRow + 3;
+    const pawOffset = Math.floor(cols / 2) + 12;
+    if (pawRow < rows) {
+      const paw = `${P.primary}${BOLD}${PAW_FRAMES[pawFrame]}`;
+      lines[pawRow] = `${P.bg}${centerText(catArt[3] + '  ' + paw, cols)}${RESET}`;
+    }
+  }
+
+  // ── Reaction Text ──
+  const reactionRow = catStartRow + catArt.length + 1;
+  if (reactionRow < rows - 8) {
+    if (catState !== 'idle') {
+      const reactionColor = catState === 'angry' ? P.accent : P.primary;
+      lines[reactionRow] = `${P.bg}${centerText(
+        `${reactionColor}${BOLD}✦  ${currentReaction}  ✦`, cols
+      )}${RESET}`;
+    } else {
+      lines[reactionRow] = `${P.bg}${centerText(
+        `${P.dim}Watching for intruders...`, cols
+      )}${RESET}`;
+    }
+  }
+
+  // ── Bottom Elements ──
+  const statusHeight = getStatusBarHeight(state);
+  const buttonRow = Math.max(25, rows - statusHeight - 7);
+  const button = renderUnvoidButton(cols, buttonRow, tick);
+
+  const streakRow = buttonRow - 3;
+
+  const counterLines = renderCounter(keyCount, cols, tick, {
+    r1: 255, g1: 140, b1: 0,      // Orange
+    r2: 255, g2: 60, b2: 60,     // Red
+  });
+  const counterRow = streakRow - counterLines.length - 1;
+
+  // ── Counter ──
+  for (let i = 0; i < counterLines.length; i++) {
+    if (counterRow + i < rows - 8 && counterRow + i >= reactionRow + 1) {
+      lines[counterRow + i] = `${P.bg}${counterLines[i]}${RESET}`;
+    }
+  }
+
+  // ── Streak indicator ──
+  if (streakRow < rows - 6 && streakRow >= reactionRow + 2) {
+    const streakBar = '🐾'.repeat(Math.min(streak, 15));
+    const streakText = `${P.secondary}Streak: ${streakBar} ${streak > 0 ? `(${streak})` : ''}  Best: ${maxStreak}`;
+    lines[streakRow] = `${P.bg}${centerText(streakText, cols)}${RESET}`;
+  }
+
+  // ── UNVOID Button ──
+  for (let i = 0; i < button.lines.length; i++) {
+    if (buttonRow + i >= 0 && 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: 'cat' }, 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,
+    },
+  };
+}

package/src/ui/skins/clean.js

@@ -0,0 +1,155 @@
+// ─── Clean Skin ──────────────────────────────────────────────────────
+// Default minimalist mode: high-contrast, big keystroke counter,
+// subtle animations, and a premium dark aesthetic.
+
+import { renderHeader } from '../components/header.js';
+import { renderCounter, renderCounterLabel } from '../components/counter.js';
+import { renderUnvoidButton } from '../components/unvoid-button.js';
+import { renderStatusBar, getStatusBarHeight } from '../components/status-bar.js';
+import { palettes, RESET, BOLD, DIM } from '../../utils/colors.js';
+import { centerText, horizontalLine } from '../../utils/terminal.js';
+
+const P = palettes.clean;
+
+const particles = [];
+let lastKeyCount = 0;
+const ASCII_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()';
+
+export function renderClean(cols, rows, state, tick) {
+  const lines = [];
+  const { keyCount = 0 } = state;
+
+  // ── Physics & Particles ──
+  if (keyCount > lastKeyCount) {
+    const diff = Math.min(keyCount - lastKeyCount, 15); // Cap simultaneous spawns
+    lastKeyCount = keyCount;
+    for (let i = 0; i < diff; i++) {
+      particles.push({
+        x: Math.floor(Math.random() * (cols - 10)) + 5,
+        y: rows - 12, // Start rising from above the counter
+        char: ASCII_CHARS[Math.floor(Math.random() * ASCII_CHARS.length)],
+        speed: 0.15 + Math.random() * 0.4,
+        opacity: 1.0,
+        r: Math.floor(Math.random() * 80) + 120, // Cyan/Purpleish colors
+        g: Math.floor(Math.random() * 150) + 50,
+        b: Math.floor(Math.random() * 100) + 155
+      });
+    }
+  }
+
+  const particleMap = {};
+  for (let i = particles.length - 1; i >= 0; i--) {
+    const p = particles[i];
+    p.y -= p.speed;
+    p.opacity -= 0.015;
+    
+    if (p.y <= 9 || p.opacity <= 0) {
+      particles.splice(i, 1);
+      continue;
+    }
+    const yi = Math.floor(p.y);
+    const xi = Math.floor(p.x);
+    if (yi >= 0 && yi < rows && xi >= 0 && xi < cols) {
+      if (!particleMap[yi]) particleMap[yi] = [];
+      particleMap[yi].push(p);
+    }
+  }
+
+  // ── Background ──
+  for (let i = 0; i < rows; i++) {
+    if (particleMap[i]) {
+      particleMap[i].sort((a, b) => a.x - b.x);
+      let lineStr = P.bg;
+      let currX = 0;
+      for (const p of particleMap[i]) {
+         if (p.x < currX) continue;
+         lineStr += ' '.repeat(p.x - currX);
+         const r = Math.floor(p.r * p.opacity);
+         const g = Math.floor(p.g * p.opacity);
+         const b = Math.floor(p.b * p.opacity);
+         lineStr += `\x1b[38;2;${r};${g};${b}m${p.char}${P.bg}`;
+         currX = p.x + 1;
+      }
+      lineStr += ' '.repeat(Math.max(0, cols - currX)) + RESET;
+      lines.push(lineStr);
+    } else {
+      lines.push(`${P.bg}${' '.repeat(cols)}${RESET}`);
+    }
+  }
+
+  // ── Header (ASCII art title) ──
+  const headerLines = renderHeader(cols, tick);
+  let currentRow = 2; // Start with 2 rows padding
+  for (let i = 0; i < headerLines.length; i++) {
+    if (currentRow + i < rows) {
+      lines[currentRow + i] = `${P.bg}${headerLines[i]}${RESET}`;
+    }
+  }
+  currentRow += headerLines.length + 1;
+
+  // ── Separator ──
+  if (currentRow < rows) {
+    const sepLine = centerText(
+      `${P.dim}${'┈'.repeat(Math.min(50, cols - 10))}`,
+      cols
+    ) + RESET;
+    lines[currentRow] = `${P.bg}${sepLine}`;
+    currentRow += 2;
+  }
+
+  // ── Bottom UI Elements ──
+  const statusHeight = getStatusBarHeight(state);
+  
+  // UNVOID Button
+  const buttonRow = Math.max(currentRow + 8, rows - statusHeight - 7);
+  const button = renderUnvoidButton(cols, buttonRow, tick);
+  
+  // Counter Label
+  const labelRow = buttonRow - 3;
+  
+  // Big Counter
+  const counterLines = renderCounter(keyCount, cols, tick, {
+    r1: 0, g1: 255, b1: 224,     // Cyan
+    r2: 191, g2: 64, b2: 255,    // Purple
+  });
+  const counterRow = labelRow - counterLines.length - 1;
+
+  // Render Counter
+  for (let i = 0; i < counterLines.length; i++) {
+    if (counterRow + i < rows && counterRow + i >= currentRow) {
+      lines[counterRow + i] = `${P.bg}${counterLines[i]}${RESET}`;
+    }
+  }
+
+  // Render Label
+  if (labelRow < rows && labelRow >= currentRow) {
+    lines[labelRow] = `${P.bg}${renderCounterLabel(cols, tick, P.dim)}${RESET}`;
+  }
+
+  // Render Button
+  for (let i = 0; i < button.lines.length; i++) {
+    if (buttonRow + i < rows - statusHeight && buttonRow + i >= currentRow) {
+      lines[buttonRow + i] = `${P.bg}${button.lines[i]}${RESET}`;
+    }
+  }
+
+  // ── Status Bar ──
+  const statusLines = renderStatusBar(cols, { ...state, skinName: 'clean' }, 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]}${RESET}`;
+    }
+  }
+
+  // Return button position for mouse region
+  return {
+    lines,
+    buttonRegion: {
+      x: button.x,
+      y: buttonRow + 1, // 1-indexed for terminal
+      width: button.width,
+      height: button.height,
+    },
+  };
+}

package/src/ui/skins/hacker.js

@@ -0,0 +1,194 @@
+// ─── Hacker Skin ──────────────────────────────────────────────────────
+// Intense cyberpunk matrix digital rain. 
+// Uses a highly optimized vertical rain engine and fake system errors.
+
+import { renderUnvoidButton } from '../components/unvoid-button.js';
+import { renderStatusBar, getStatusBarHeight } from '../components/status-bar.js';
+import { palettes, RESET, BOLD, DIM } from '../../utils/colors.js';
+import { centerText, horizontalLine } from '../../utils/terminal.js';
+
+const P = palettes.hacker;
+const ASCII_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()<>{}[]|=+_~';
+
+// Persistent rain engine state
+const rainColumns = [];
+let initialized = false;
+let lastKeyCount = 0;
+let errors = [];
+
+function initRain(cols, rows) {
+  rainColumns.length = 0;
+  for (let c = 0; c < cols; c++) {
+    rainColumns.push({
+      head: Math.random() * rows - Math.random() * rows,
+      length: Math.floor(Math.random() * 20) + 10,
+      speed: 0.15 + Math.random() * 0.4,
+      chars: Array.from({ length: rows }, () => ASCII_CHARS[Math.floor(Math.random() * ASCII_CHARS.length)])
+    });
+  }
+  initialized = true;
+}
+
+export function renderHacker(cols, rows, state, tick) {
+  const lines = [];
+  const { keyCount = 0 } = state;
+
+  // Handle terminal resizes naturally
+  if (!initialized || rainColumns.length !== cols) {
+    initRain(cols, rows);
+  }
+
+  // ── Engine Updates ──
+  if (keyCount > lastKeyCount) {
+    const diff = keyCount - lastKeyCount;
+    // Rapidly boost rain speeds on keystrokes
+    for (let i = 0; i < Math.min(diff * 5, cols); i++) {
+       const colIdx = Math.floor(Math.random() * cols);
+       rainColumns[colIdx].speed += 0.5 + Math.random() * 1.5;
+    }
+    
+    // Add fake error
+    const ERROR_MSGS = [
+      'FATAL: KEYBOARD INPUT BLOCKED',
+      'WARNING: BRUTE FORCE DETECTED',
+      'SYSTEM: UNAUTHORIZED OVERRIDE',
+      'ACCESS DENIED: PROTOCOL 94',
+      'ERROR: IO_EXCEPTION_0x8F',
+      'SECURITY: INTRUDER LOCKDOWN'
+    ];
+    errors.push(ERROR_MSGS[Math.floor(Math.random() * ERROR_MSGS.length)]);
+    if (errors.length > 6) errors.shift();
+    
+    lastKeyCount = keyCount;
+  }
+
+  // Update rain positions
+  for (let c = 0; c < cols; c++) {
+    const col = rainColumns[c];
+    col.head += col.speed;
+    
+    // Slow down burst speeds gradually
+    if (col.speed > 0.6) {
+      col.speed *= 0.95;
+    }
+    
+    if (col.head - col.length > rows) {
+      col.head = -Math.floor(Math.random() * 15);
+      col.speed = 0.15 + Math.random() * 0.4;
+    }
+    
+    if (Math.random() < 0.05) {
+      col.chars[Math.floor(Math.random() * rows)] = ASCII_CHARS[Math.floor(Math.random() * ASCII_CHARS.length)];
+    }
+  }
+
+  // ── Render Rain Buffer ──
+  for (let r = 0; r < rows; r++) {
+    let rowStr = '';
+    let currColor = P.bg;
+    let currRun = '';
+    
+    for (let c = 0; c < cols; c++) {
+      const col = rainColumns[c];
+      const headDist = Math.floor(col.head) - r;
+      
+      let char = ' ';
+      let color = P.bg;
+      
+      if (headDist === 0) {
+        char = col.chars[r];
+        color = `\x1b[38;2;200;255;200m`; // White/green flash at the head
+      } else if (headDist > 0 && headDist < col.length) {
+        char = col.chars[r];
+        const g = Math.max(20, 255 - (headDist * 16));
+        color = `\x1b[38;2;0;${g};0m`;
+      }
+      
+      // Paint bg using the P.bg block string so gaps inherit the global terminal black
+      if (char === ' ') {
+        char = ' ';
+        color = P.bg;
+      } else {
+        color = P.bg + color; 
+      }
+      
+      if (color !== currColor) {
+        rowStr += currColor + currRun;
+        currRun = char;
+        currColor = color;
+      } else {
+        currRun += char;
+      }
+    }
+    
+    rowStr += currColor + currRun + RESET;
+    lines.push(rowStr);
+  }
+
+  // ── Central Error Console ──
+  const consoleW = Math.min(46, cols - 4);
+  const consoleH = 10;
+  const consoleY = Math.floor(rows / 2) - Math.floor(consoleH / 2) - 3;
+  
+  if (consoleY > 2 && consoleW >= 30) {
+    const topBorder    = `${P.terminalBg}${P.dim}┌${'─'.repeat(consoleW - 2)}┐`;
+    const bottomBorder = `${P.terminalBg}${P.dim}└${'─'.repeat(consoleW - 2)}┘`;
+    const emptyLine    = `${P.terminalBg}${' '.repeat(consoleW)}`;
+    
+    // Draw rigid background shadow for console box overwriting the rain
+    lines[consoleY] = `${P.bg}${centerText(topBorder, cols)}${RESET}`;
+    
+    for (let i = 1; i < consoleH - 1; i++) {
+        let content = '';
+        if (i === 1) content = `${P.terminalBg}${P.error}${BOLD} SYSTEM LOCK PROTOCOL ACTIVE `;
+        else if (i === 2) content = `${P.terminalBg}${P.dim} ${'━'.repeat(consoleW - 4)} `;
+        else if (i - 3 < errors.length && i >= 3) {
+           content = `${P.terminalBg}\x1b[38;2;180;0;0m  > ${errors[i - 3]} `;
+        }
+        
+        let cText = content;
+        if (!cText) cText = emptyLine;
+        else {
+           // Pad the content with the background color to match width perfectly
+           // (Since centerText relies on ANSI stripping)
+           cText = cText.padEnd(consoleW + (cText.length - cText.replace(/\x1b\[[0-9;]*m/g, '').length), ' ');
+        }
+        
+        // Wrap with walls
+        const rowContent = `${P.terminalBg}${P.dim}│${RESET}${cText}${P.terminalBg}${P.dim}│`;
+        lines[consoleY + i] = `${P.bg}${centerText(rowContent, cols)}${RESET}`;
+    }
+    
+    lines[consoleY + consoleH - 1] = `${P.bg}${centerText(bottomBorder, cols)}${RESET}`;
+  }
+
+  // ── UNVOID Button ──
+  const statusHeight = getStatusBarHeight(state);
+  const buttonRow = Math.max(consoleY + consoleH + 2, rows - statusHeight - 7);
+  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: 'hacker' }, 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,
+    },
+  };
+}