ascii-city 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ogme01
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,82 @@
+# ascii-city
+
+A walkable — and drivable — ASCII cyberpunk city. By default it's an ambient
+stroll: traffic cruises the avenues, pedestrians wander the sidewalks, and you
+can hop into any car (E) just to drive around. Set `engine.game: true` in
+js/config.js for GTA mode: missions, money, wanted stars, and cops. Three
+layers:
+
+- **The base** — `js/citygen.js`, a seeded city generator: spec in, deterministic
+  city model out. Pure data, no rendering, strictly printable ASCII (0x20–0x7E).
+- **The sim** — `js/sim.js`, the shared gameplay core: player (on foot or
+  driving), civilian traffic, pedestrians, police + wanted stars, delivery
+  missions + money, radio stations, and BFS GPS routing.
+- **The renderers** — `js/walker.js` (browser) and `js/tui.js` (terminal),
+  the same first-person raycaster drawing the same sim as glyphs.
+
+`js/config.js` is the single input: `city` goes straight into `generateCity()`,
+`engine` tunes the renderer. City specs land there.
+
+## Run — browser
+
+```
+python3 serve.py 8670
+```
+
+http://localhost:8670 — click to walk. WASD move, mouse look, shift run,
+M minimap, N new seed, 1-4 glyph size, arrows work without pointer lock.
+
+## Run — terminal
+
+```
+npx . # from the repo, or: npm i -g . && ascii-city
+```
+
+Same city, same raycaster, rendered as ANSI truecolor cells. In terminals
+with the kitty keyboard protocol (iTerm2, Ghostty, kitty, WezTerm) you get
+real hold-to-move: hold WASD, shift to run, hold arrows or drag the mouse
+to look. Elsewhere (e.g. Terminal.app, which never reports key releases)
+it falls back to latched movement: `w` walks and keeps going, `s` stops
+then reverses, space stops, `a`/`d`/arrows turn in eased steps, `r`
+toggles run. `n` new city, `q` quits, either way. Flags: `--seed`,
+`--palette neon|terminal|amber|rust|ice`, `--size WxD`, `--fov`, `--dist`,
+and `--frame` to print a single frame and exit. Needs Node 18+ and a
+truecolor terminal. `js/tui.js` mirrors `js/walker.js` — change the
+projection or ramps in one, mirror it in the other.
+
+## The generator
+
+```js
+import { generateCity } from './js/citygen.js';
+const model = generateCity({ seed: 'ghost-harbor-412', size: { width: 200, depth: 160 } });
+```
+
+Any subset of `DEFAULT_CONFIG` (see `js/citygen.js`) can be passed: road
+spacing/widths/jitter, per-district weight/centerBias/heights/parcels/window
+style/wall glyph (custom district types are kept), building tiers and antennas,
+plazas, trees, every glyph. Each stage pulls from its own named RNG stream and
+per-cell effects are coordinate hashes, so changing one parameter never
+reshuffles unrelated parts of the city.
+
+Model output: `cells` (road/sidewalk/building/park/plaza/tree), `roadAxis`
+(lane markings), `heightMap` (per-cell height — what the raycaster marches),
+`bIndex` (cell → building), `buildings` (footprint, tiers, district, window
+style), plus blocks/trees/fountains/stats.
+
+## The walker
+
+Per screen column: DDA front-to-back through the grid. Each cell contributes a
+wall face and a top-surface strip, clipped against `yCur` (lowest unpainted row)
+so occlusion is free. Window lattices are per-building coordinate hashes —
+stable across frames. Distance fog is quantized so the glyph atlas stays small.
+
+## Debug page
+
+http://localhost:8670/debug.html — slider playground over the generator
+(plan view + skyline probe). Diagnostic tool only, not the product.
+
+## Roadmap
+
+- traffic + pedestrians (roads/sidewalks already in the model)
+- interiors, lifts, elevation
+- signs, rain, audio

package/bin/ascii-city.js

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+// npx gta6 — walk around an ASCII cyberpunk city in your terminal.
+// No options. WASD to move, mouse drag to look, E to drive a car, Q to quit.
+// (--frame renders one frame and exits; used for testing.)
+
+import { run } from '../js/tui.js';
+
+run({ oneFrame: process.argv.includes('--frame') });

package/css/style.css

@@ -0,0 +1,174 @@
+:root {
+  --bg: #08090d;
+  --panel: #0e1015;
+  --panel2: #12141b;
+  --line: #1d2230;
+  --text: #c8d0e0;
+  --dim: #6a7488;
+  --accent: #53e9ff;
+  --accent2: #ff5ec8;
+  font-size: 14px;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: ui-monospace, Menlo, Consolas, monospace;
+  min-height: 100vh;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel);
+  position: sticky;
+  top: 0;
+  z-index: 5;
+}
+
+.logo {
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: var(--accent);
+  letter-spacing: 0.02em;
+}
+.logo .cursor { animation: blink 1.1s steps(1) infinite; }
+.logo em {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.75rem;
+  color: var(--dim);
+  margin-left: 10px;
+}
+@keyframes blink { 50% { opacity: 0; } }
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.toolbar label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.75rem;
+  color: var(--dim);
+}
+.toolbar input[type="text"] {
+  background: var(--bg);
+  border: 1px solid var(--line);
+  color: var(--accent);
+  font: inherit;
+  padding: 4px 8px;
+  width: 170px;
+  border-radius: 3px;
+}
+.toolbar select, .toolbar button {
+  background: var(--panel2);
+  border: 1px solid var(--line);
+  color: var(--text);
+  font: inherit;
+  font-size: 0.8rem;
+  padding: 4px 9px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+.toolbar button:hover { border-color: var(--accent); color: var(--accent); }
+
+main {
+  display: grid;
+  grid-template-columns: 250px 1fr;
+  gap: 14px;
+  padding: 14px 16px;
+  align-items: start;
+}
+
+#controls {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: sticky;
+  top: 62px;
+}
+fieldset {
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  padding: 8px 10px 10px;
+  background: var(--panel);
+}
+legend {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--accent2);
+  padding: 0 6px;
+}
+.ctl {
+  display: grid;
+  grid-template-columns: 86px 1fr 34px;
+  align-items: center;
+  gap: 8px;
+  margin-top: 5px;
+}
+.ctl label { font-size: 0.72rem; color: var(--dim); }
+.ctl .val { font-size: 0.7rem; color: var(--text); text-align: right; }
+input[type="range"] {
+  -webkit-appearance: none;
+  height: 3px;
+  background: var(--line);
+  border-radius: 2px;
+}
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 11px; height: 11px;
+  border-radius: 2px;
+  background: var(--accent);
+  cursor: pointer;
+}
+
+#views { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
+
+.panel {
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  background: var(--panel);
+  overflow: hidden;
+}
+.panel h2 {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--dim);
+  padding: 7px 12px;
+  border-bottom: 1px solid var(--line);
+}
+.panel h2 small { color: #3d4557; margin-left: 8px; text-transform: none; letter-spacing: 0; }
+
+.canvasWrap {
+  overflow: auto;
+  background: #000;
+  max-height: 560px;
+}
+.canvasWrap.tall { max-height: 700px; }
+canvas { display: block; }
+canvas.fit { width: 100%; height: auto; image-rendering: pixelated; }
+
+#stats {
+  font-size: 0.72rem;
+  color: var(--dim);
+  padding: 4px 2px 12px;
+  line-height: 1.6;
+}
+
+@media (max-width: 900px) {
+  main { grid-template-columns: 1fr; }
+  #controls { position: static; }
+}

package/css/walker.css

@@ -0,0 +1,61 @@
+html, body {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  background: #000;
+}
+
+#view {
+  display: block;
+  width: 100vw;
+  height: 100vh;
+  image-rendering: pixelated;
+  cursor: crosshair;
+}
+
+#hud {
+  position: fixed;
+  left: 12px;
+  bottom: 10px;
+  color: #9fb0c8;
+  font: 12px ui-monospace, Menlo, Consolas, monospace;
+  text-shadow: 0 1px 3px #000;
+  opacity: 0.85;
+  pointer-events: none;
+  white-space: pre;
+}
+
+#mini {
+  position: fixed;
+  right: 12px;
+  top: 12px;
+  border: 1px solid #2a3142;
+  opacity: 0.9;
+  image-rendering: pixelated;
+  pointer-events: none;
+}
+
+#intro {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  background: rgba(3, 4, 8, 0.72);
+  color: #c8d0e0;
+  font: 14px ui-monospace, Menlo, Consolas, monospace;
+  line-height: 1.9;
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+}
+#intro.hidden { display: none; }
+#intro .title {
+  color: #53e9ff;
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+}
+#intro .dim { color: #6a7488; }

package/debug.html

@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>ascii-city — debug</title>
+<link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+<header>
+  <div class="logo">ascii-city<span class="cursor">_</span><em>seeded city factory</em></div>
+  <div class="toolbar">
+    <label class="seedbox">seed
+      <input id="seed" type="text" spellcheck="false" autocomplete="off">
+    </label>
+    <button id="reroll" title="R">reroll</button>
+    <label>preset
+      <select id="preset"></select>
+    </label>
+    <label>palette
+      <select id="palette"></select>
+    </label>
+    <label>glyphs
+      <select id="zoom">
+        <option value="8">S</option>
+        <option value="10" selected>M</option>
+        <option value="13">L</option>
+      </select>
+    </label>
+    <button id="copyConfig">copy config</button>
+    <button id="exportModel">export model</button>
+  </div>
+</header>
+
+<main>
+  <aside id="controls"></aside>
+  <section id="views">
+    <div class="panel">
+      <h2>skyline probe <small>southern elevation, 3 depth bands</small></h2>
+      <div class="canvasWrap"><canvas id="skyline" class="fit"></canvas></div>
+    </div>
+    <div class="panel">
+      <h2>plan view <small>top-down, glyph brightness = height</small></h2>
+      <div class="canvasWrap tall"><canvas id="map" class="fit"></canvas></div>
+    </div>
+    <footer id="stats"></footer>
+  </section>
+</main>
+
+<script type="module" src="js/main.js"></script>
+</body>
+</html>

package/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>ascii-city</title>
+<link rel="stylesheet" href="css/walker.css">
+</head>
+<body>
+<canvas id="view"></canvas>
+<canvas id="mini"></canvas>
+<div id="hud"></div>
+<div id="intro">
+  <div class="title">ASCII CITY</div>
+  <div>click to walk</div>
+  <div class="dim">WASD move &nbsp;·&nbsp; mouse look &nbsp;·&nbsp; E enter/exit car &nbsp;·&nbsp; shift run<br>space handbrake &nbsp;·&nbsp; R radio &nbsp;·&nbsp; M minimap &nbsp;·&nbsp; N new city &nbsp;·&nbsp; 1-4 glyph size</div>
+</div>
+<script type="module" src="js/walker.js"></script>
+</body>
+</html>