tokengolf 0.4.1 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokengolf",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Gamify your Claude Code sessions. Flow mode tracks you. Roguelike mode trains you.",
   "type": "module",
   "bin": {

package/scripts/demo-to-html.js

@@ -0,0 +1,104 @@
+#!/usr/bin/env node
+// Captures demo output and converts ANSI escape codes to HTML spans
+// Usage: node scripts/demo-to-html.js [scorecard|active|stats|hud] [index]
+
+import { execSync } from 'child_process';
+
+const component = process.argv[2] || 'scorecard';
+const index = process.argv[3] != null ? `-i ${process.argv[3]}` : '';
+
+const raw = execSync(`node dist/cli.js demo ${component} ${index}`, {
+  encoding: 'utf8',
+  env: { ...process.env, FORCE_COLOR: '1' },
+});
+
+// ANSI color code → CSS class mapping
+const ANSI_MAP = {
+  '1': 'b',       // bold
+  '2': 'dim',     // dim
+  '3': 'i',       // italic
+  '31': 'red',
+  '32': 'green',
+  '33': 'yellow',
+  '34': 'blue',
+  '35': 'magenta',
+  '36': 'cyan',
+  '37': 'white',
+  '39': '',        // default fg
+  '90': 'dim',    // bright black = dim
+};
+
+function ansiToHtml(str) {
+  // Remove the demo header lines (first 2 lines) and separator/title lines
+  const lines = str.split('\n');
+
+  // Find where actual content starts (skip "TokenGolf — X Demo" + "N variants" + separator + title)
+  let startIdx = 0;
+  for (let i = 0; i < lines.length; i++) {
+    if (lines[i].includes('TokenGolf —') || lines[i].includes('variant')) {
+      startIdx = i + 1;
+    }
+  }
+
+  // Also skip the leading separator + title line
+  while (startIdx < lines.length && lines[startIdx].trim() === '') startIdx++;
+  // Skip "──────" separator
+  const stripped = lines[startIdx]?.replace(/\x1b\[[0-9;]*m/g, '').trim();
+  if (stripped && stripped.match(/^─+$/)) startIdx++;
+  // Skip title line
+  if (lines[startIdx]) startIdx++;
+
+  let content = lines.slice(startIdx).join('\n');
+
+  // Remove trailing empty lines
+  content = content.replace(/\n+$/, '');
+
+  // Also remove Ink's cleanup sequences ([2K[1A patterns)
+  content = content.replace(/(\x1b\[2K\x1b\[1A)+\x1b\[2K\x1b\[G/g, '');
+  content = content.replace(/\x1b\[2K/g, '');
+  content = content.replace(/\x1b\[1A/g, '');
+  content = content.replace(/\x1b\[\d*G/g, '');
+
+  // Remove trailing cleanup
+  content = content.replace(/\n+$/, '');
+
+  // Convert ANSI to HTML spans
+  let html = '';
+  let openTags = [];
+
+  const parts = content.split(/(\x1b\[[0-9;]*m)/);
+
+  for (const part of parts) {
+    const match = part.match(/^\x1b\[([0-9;]*)m$/);
+    if (match) {
+      const codes = match[1].split(';');
+      for (const code of codes) {
+        if (code === '0' || code === '') {
+          // Reset — close all open tags
+          html += openTags.map(() => '</span>').join('');
+          openTags = [];
+        } else {
+          const cls = ANSI_MAP[code];
+          if (cls) {
+            html += `<span class="t-${cls}">`;
+            openTags.push(cls);
+          }
+        }
+      }
+    } else {
+      // Escape HTML entities
+      html += part
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+    }
+  }
+
+  // Close remaining tags
+  html += openTags.map(() => '</span>').join('');
+
+  return html;
+}
+
+const html = ansiToHtml(raw);
+console.log(html);

package/src/cli.js

@@ -114,11 +114,51 @@ program
   });
 
 program
-  .command('demo')
-  .description('Show HUD examples for all game states (great for screenshots)')
-  .action(async () => {
-    const { runDemo } = await import('./lib/demo.js');
-    runDemo();
+  .command('demo [component]')
+  .description('Show UI demos — all, hud, scorecard, active, stats')
+  .option('-i, --index <n>', 'Show only the Nth variant (0-based)')
+  .action(async (component, opts) => {
+    const idx = opts.index != null ? parseInt(opts.index) : undefined;
+    const c = (component || 'all').toLowerCase();
+
+    if (c === 'all') {
+      const { runDemo } = await import('./lib/demo.js');
+      runDemo();
+      const { runScoreCardDemo } = await import('./lib/demo-scorecard.js');
+      await runScoreCardDemo(idx);
+      const { runActiveDemo } = await import('./lib/demo-active.js');
+      await runActiveDemo(idx);
+      const { runStatsDemo } = await import('./lib/demo-stats.js');
+      await runStatsDemo(idx);
+      process.exit(0);
+    }
+
+    if (c === 'hud') {
+      const { runDemo } = await import('./lib/demo.js');
+      runDemo();
+      return;
+    }
+
+    if (c === 'scorecard') {
+      const { runScoreCardDemo } = await import('./lib/demo-scorecard.js');
+      await runScoreCardDemo(idx);
+      process.exit(0);
+    }
+
+    if (c === 'active') {
+      const { runActiveDemo } = await import('./lib/demo-active.js');
+      await runActiveDemo(idx);
+      process.exit(0);
+    }
+
+    if (c === 'stats') {
+      const { runStatsDemo } = await import('./lib/demo-stats.js');
+      await runStatsDemo(idx);
+      process.exit(0);
+    }
+
+    console.log('Unknown demo component. Choose: all, hud, scorecard, active, stats');
+    process.exit(1);
   });
 
 program

package/src/lib/demo-active.js

@@ -0,0 +1,56 @@
+// Demo: ActiveRun variants (Ink)
+import React from 'react';
+import { Box, Text } from 'ink';
+import { demoRender } from './demo-render.js';
+import { ActiveRun } from '../components/ActiveRun.js';
+import { ACTIVERUN_FIXTURES } from './demo-fixtures.js';
+
+function DemoActiveRun({ fixture }) {
+  return (
+    <Box flexDirection="column">
+      <Box paddingX={1}>
+        <Text color="gray" dimColor>
+          {'─'.repeat(50)}
+        </Text>
+      </Box>
+      <Box paddingX={1}>
+        <Text color="gray" dimColor italic>
+          {fixture.title}
+        </Text>
+      </Box>
+      <ActiveRun run={fixture.run} />
+    </Box>
+  );
+}
+
+export function runActiveDemo(index) {
+  const fixtures = index != null ? [ACTIVERUN_FIXTURES[index]] : ACTIVERUN_FIXTURES;
+  if (!fixtures[0]) {
+    console.log(
+      `Invalid index. ${ACTIVERUN_FIXTURES.length} variants available (0-${ACTIVERUN_FIXTURES.length - 1}).`
+    );
+    process.exit(1);
+  }
+
+  console.log('');
+  console.log('\x1b[1m\x1b[36m⛳ TokenGolf — ActiveRun Demo\x1b[0m');
+  console.log(`\x1b[2m${fixtures.length} variant${fixtures.length > 1 ? 's' : ''}\x1b[0m`);
+
+  return new Promise((resolve) => {
+    let i = 0;
+    function renderNext() {
+      if (i >= fixtures.length) {
+        resolve();
+        return;
+      }
+      const fixture = fixtures[i];
+      const inst = demoRender(React.createElement(DemoActiveRun, { fixture }));
+      setTimeout(() => {
+        inst.unmount();
+        i++;
+        renderNext();
+      }, 100);
+    }
+    renderNext();
+  });
+}