SciFi-XZBT/README.md

SciFi-XZBT Modular Architecture & Repackaging

Directory Overview

SciFi-XZBT/
├── index.html                  # Clean entry point (368 lines)
├── css/
│   └── style.css               # LCARS styling, CRT effects, theme colors (2,317 lines)
├── js/
│   ├── audio.js                # Web Audio synthesis, oscillators, sound engines (2,258 lines)
│   ├── config.js               # Starship presets, Universe registry & palettes (1,039 lines)
│   ├── visualizer.js           # Audio spectrum & Warp Core canvas rendering (643 lines)
│   ├── observation-bezels.js   # Procedural SVG Viewport bezels (TOS, Voyager, TNG, etc.) (271 lines)
│   ├── observation-engine.js   # Full observation mode canvas and simulation engine (2,784 lines)
│   └── app.js                  # DOM bindings, hotkeys, UI controllers & loop (3,962 lines)
├── dist/
│   └── SciFiAmbientDisplay_v4.html  # Standalone, single-file offline build
└── tools/
    ├── package.ps1             # 1-click script to build the standalone single-file HTML
    └── extract.ps1             # Original extraction script for reference

---

Development Workflow

1. Developing Modularly:

   • Edit the specific CSS or JS files directly.
   • For audio or synthesizer logic, focus exclusively on js/audio.js.
   • For viewscreen bezels and framing, edit js/observation-bezels.js.
   • For observation celestial mechanics and canvases, edit js/observation-engine.js.
   • For presets and sound matrix tables, edit js/config.js.

2. Repackaging to Single-File: Run the packaging script from PowerShell:

   powershell -ExecutionPolicy Bypass -File .\tools\package.ps1
   

   This immediately produces dist\SciFiAmbientDisplay_v4.html, combining all CSS and JS back into a self-contained, double-clickable offline file.