@shaisrc/ttyKISS ASCII Renderer

🚧 Release Status ​

Current builds are beta. A stable 0.1.0 release is blocked by:

• DOMTarget (browser DOM render target for accessibility)

Quick Example ​

import {
  Renderer,
  CanvasTarget,
  GameLoop,
  KeyboardManager,
} from "@shaisrc/tty";

// Set up canvas rendering
const canvas = document.getElementById("game");
const target = new CanvasTarget(canvas, { width: 80, height: 24 });
const renderer = new Renderer(target);

// Create player
const player = { x: 40, y: 12, char: "@", color: "yellow" };

// Handle input
const keyboard = new KeyboardManager();
keyboard.onKeyDown("ArrowUp", () => player.y--);
keyboard.onKeyDown("ArrowDown", () => player.y++);
keyboard.onKeyDown("ArrowLeft", () => player.x--);
keyboard.onKeyDown("ArrowRight", () => player.x++);
// Key aliases (normalized): "Space"/"Spacebar" -> " ", "Esc" -> "Escape"
keyboard.onKeyDown("Space", () => player.attack());

// Game loop
const game = new GameLoop(
  (dt) => {
    // Game logic here
  },
  () => {
    renderer
      .clear()
      .box(0, 0, 80, 24, { style: "double", fg: "cyan" })
      .centerText(1, "KISS ASCII Game", { fg: "yellow" })
      .setChar(player.x, player.y, player.char, player.color)
      .render();
  },
});

game.start();

Why KISS ASCII? ​

• KISS Philosophy: Simple functions, not complex frameworks
• DX First: Chainable API, smart defaults, excellent TypeScript support
• Performance: Double-buffering, dirty rectangles, minimal overhead
• Output Agnostic: Works in Browser (Canvas/DOM), Electron

Installation ​

npm install @shaisrc/tty

Features Overview ​

Drawing Primitives ​

• setChar() - Set individual characters
• drawText() - Draw text strings
• fill() - Fill rectangular areas

Shapes & Borders ​

• box() - Bordered boxes with fill options
• border() - Border-only frames
• rect() - Solid rectangles
• Multiple styles: single, double, rounded, heavy, ASCII

High-Level Helpers ​

• menu() - Interactive menus with selection
• progressBar() - Horizontal/vertical progress indicators
• panel() - Titled panels with scrollable content

Text Alignment ​

• centerText() - Center text horizontally
• rightAlign() - Right-align text
• leftAlign() - Left-align text
• alignText() - Generic alignment with options

Layer Management ​

• layer() - Create and switch layers
• layerOrder() - Control rendering order
• hideLayer() / showLayer() - Toggle layer visibility
• Perfect for separating background, game, and UI

Camera System ​

• setCamera() - Position viewport in world
• follow() - Follow an entity smoothly
• moveCamera() - Pan the camera
• worldToScreen() / screenToWorld() - Coordinate transforms

Input Handling ​

• KeyboardManager: Key press/release events
• PointerManager: Unified mouse/touch/pen input with grid coords
• MouseManager (deprecated): Use PointerManager instead
• Works seamlessly with the renderer

Game Loop ​

• Configurable FPS
• Separate update and render callbacks
• Delta time for smooth movement
• Start/stop/pause controls

Next Steps ​