@seflless/ghosttown 1.1.3 → 1.2.0

package/bin/ascii.ts

@@ -0,0 +1,158 @@
+import fs from 'fs';
+import { PNG } from 'pngjs';
+
+// Type assertion for sync API (pngjs types may not include sync)
+const PNGSync = (PNG as any).sync;
+
+/**
+ * Converts RGB color to ANSI 256-color code.
+ * Uses the standard 256-color palette mapping.
+ */
+function rgbToAnsi256(r: number, g: number, b: number): number {
+  // Standard 16 colors (0-15) are handled specially
+  // Colors 16-231 are a 6x6x6 color cube
+  // Colors 232-255 are grayscale
+
+  // If color is very close to grayscale, use grayscale palette (232-255)
+  const gray = Math.round((r + g + b) / 3);
+  const grayDiff = Math.abs(r - g) + Math.abs(g - b) + Math.abs(b - r);
+
+  if (grayDiff < 10) {
+    // Use grayscale palette (232-255)
+    const grayIndex = Math.round((gray / 255) * 23);
+    return 232 + Math.max(0, Math.min(23, grayIndex));
+  }
+
+  // Use color cube (16-231)
+  // Each component is mapped to 0-5 (6 levels)
+  const rIndex = Math.round((r / 255) * 5);
+  const gIndex = Math.round((g / 255) * 5);
+  const bIndex = Math.round((b / 255) * 5);
+
+  // Color cube formula: 16 + 36*r + 6*g + b
+  return 16 + 36 * rIndex + 6 * gIndex + bIndex;
+}
+
+/**
+ * Generates ANSI escape code for foreground color using 256-color palette.
+ */
+function ansiColorCode(color256: number): string {
+  return `\x1b[38;5;${color256}m`;
+}
+
+/**
+ * Resets ANSI color formatting.
+ */
+function ansiReset(): string {
+  return '\x1b[0m';
+}
+
+/**
+ * Solid block character for opaque pixels.
+ * Using FULL BLOCK (U+2588) which fills the character cell.
+ */
+const SOLID_CHAR = '█';
+
+/**
+ * Converts an image file to ASCII art with ANSI colors.
+ *
+ * @param imagePath - Path to the image file (PNG supported)
+ * @param options - Optional configuration
+ * @returns ASCII art string with ANSI color codes
+ */
+export async function asciiArt(
+  imagePath: string,
+  options: {
+    maxWidth?: number;
+    maxHeight?: number;
+    transparentThreshold?: number; // Alpha threshold below which pixel is considered transparent
+  } = {}
+): Promise<string> {
+  const {
+    maxWidth = 80,
+    maxHeight = 24,
+    transparentThreshold = 128, // Alpha values below this are considered transparent
+  } = options;
+
+  // Read image file
+  const imageData = fs.readFileSync(imagePath);
+
+  // Parse PNG
+  const png = PNGSync.read(imageData);
+  const { width, height, data } = png;
+
+  // Calculate scaling to fit within max dimensions while preserving aspect ratio
+  const scaleX = maxWidth / width;
+  const scaleY = maxHeight / height;
+  const scale = Math.min(scaleX, scaleY, 1); // Don't upscale
+
+  const outputWidth = Math.max(1, Math.floor(width * scale));
+  const outputHeight = Math.max(1, Math.floor(height * scale));
+
+  const result: string[] = [];
+
+  // Process each output row
+  for (let outY = 0; outY < outputHeight; outY++) {
+    let line = '';
+    let lastColor: number | null = null;
+
+    // Process each output column
+    for (let outX = 0; outX < outputWidth; outX++) {
+      // Map output coordinates back to source image
+      const srcX = Math.floor((outX / outputWidth) * width);
+      const srcY = Math.floor((outY / outputHeight) * height);
+
+      // Get pixel data (RGBA format)
+      const idx = (srcY * width + srcX) * 4;
+      const r = data[idx];
+      const g = data[idx + 1];
+      const b = data[idx + 2];
+      const a = data[idx + 3];
+
+      // Handle transparent pixels - render as space
+      if (a < transparentThreshold) {
+        line += ' ';
+        lastColor = null;
+        continue;
+      }
+
+      // Solid pixels - use block character with color
+      // Convert RGB to ANSI 256-color
+      const color256 = rgbToAnsi256(r, g, b);
+
+      // Only add color code if it changed from previous pixel
+      if (lastColor !== color256) {
+        if (lastColor !== null) {
+          line += ansiReset();
+        }
+        line += ansiColorCode(color256);
+        lastColor = color256;
+      }
+
+      line += SOLID_CHAR;
+    }
+
+    // Reset color at end of line
+    if (lastColor !== null) {
+      line += ansiReset();
+    }
+
+    result.push(line);
+  }
+
+  // Ensure we always end with a reset to clear any color state
+  return result.join('\n') + ansiReset();
+}
+
+// If running directly, execute the function
+if (import.meta.main) {
+  const imagePath = process.argv[2] || 'demo/images/ghosts.png';
+  asciiArt(imagePath)
+    .then((art) => {
+      console.log(art);
+    })
+    .catch((err) => {
+      console.error('Error generating ASCII art:', err);
+      process.exit(1);
+    });
+}

package/bin/ghosttown.js

@@ -29,6 +29,8 @@ import { fileURLToPath } from 'url';
 import pty from '@lydell/node-pty';
 // WebSocket server
 import { WebSocketServer } from 'ws';
+// ASCII art generator
+import { asciiArt } from './ascii.ts';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -643,36 +645,39 @@ function getLocalIPs() {
 
 function printBanner(url) {
   const localIPs = getLocalIPs();
-  // console.log('\n' + '═'.repeat(50));
-  console.log('');
-  // console.log('  👻 ghosttown');
-  // console.log('═'.repeat(50));
-  const labels = [
-    ['     Open:', url],
-    ['  Network:', ''],
-    ['    Shell:', getShell()],
-    ['     Home:', homedir()],
-  ];
+  // ANSI color codes
+  const RESET = '\x1b[0m';
+  const CYAN = '\x1b[36m'; // Labels
+  const BEIGE = '\x1b[38;2;255;220;150m'; // Warm yellow/beige for values (RGB: 255,220,150)
+  const DIM = '\x1b[2m'; // Dimmed text
 
-  console.log(labels[0].join(' '));
+  console.log('');
 
-  const network = [labels[1].join(' ')];
+  // Open: URL
+  console.log(`     ${CYAN}Open:${RESET} ${BEIGE}${url}${RESET}`);
 
+  // Network: URLs
+  const network = [`  ${CYAN}Network: ${RESET}`];
   if (localIPs.length > 0) {
     let networkCount = 0;
     for (const ip of localIPs) {
       networkCount++;
       const spaces = networkCount !== 1 ? '           ' : '';
-      network.push(`${spaces}http://${ip}:${HTTP_PORT}\n`);
+      network.push(`${spaces}${BEIGE}http://${ip}:${HTTP_PORT}${RESET}\n`);
     }
   }
-  console.log(`\n${network.join('')}`);
-  // Shell
-  console.log(labels[2].join(' '));
-  // Home
-  console.log(labels[3].join(' '));
+  console.log(`\n${network.join('')} `);
+
+  // Shell: path
+  console.log(`    ${CYAN}Shell:${RESET} ${BEIGE}${getShell()}${RESET}`);
+
+  console.log('');
+
+  // Home: path
+  console.log(`     ${CYAN}Home:${RESET} ${BEIGE}${homedir()}${RESET}`);
+
   console.log('');
-  console.log('           Press Ctrl+C to stop.\n');
+  console.log(`           ${DIM}Press Ctrl+C to stop.${RESET}\n`);
 }
 
 process.on('SIGINT', () => {
@@ -685,6 +690,21 @@ process.on('SIGINT', () => {
   process.exit(0);
 });
 
-httpServer.listen(HTTP_PORT, '0.0.0.0', () => {
+httpServer.listen(HTTP_PORT, '0.0.0.0', async () => {
+  // Display ASCII art banner
+  try {
+    const imagePath = path.join(__dirname, '..', 'demo', 'images', 'ghosts.png');
+    if (fs.existsSync(imagePath)) {
+      // Welcome text with orange/yellow color (bright yellow, bold)
+      console.log('\n       \x1b[1;93mWelcome to Ghosttown!\x1b[0m\n');
+      const art = await asciiArt(imagePath, { maxWidth: 80, maxHeight: 20 });
+      console.log(art);
+      console.log('');
+    }
+  } catch (err) {
+    // Silently fail if ASCII art can't be displayed
+    // This allows the server to start even if the image is missing
+  }
+
   printBanner(`http://localhost:${HTTP_PORT}`);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seflless/ghosttown",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "Web-based terminal emulator using Ghostty's VT100 parser via WebAssembly",
   "type": "module",
   "main": "./dist/ghostty-web.umd.cjs",