Architecture

Architecture · Arquitetura

🇧🇷 Português · 🇬🇧 English

---

English

Source layout

src/
  App.jsx                  theme/scenario state, GM mode, CSS vars, URL params, idle
  audio/sfx.js             Web Audio synthesis (keystroke/beep/whoosh/hum)
  styles/{base,crt}.css    @font-face fonts + CRT effect
  engine/
    commands.js            parser + built-in commands
    filesystem.js          path resolver + listDir
    complete.js            Tab autocomplete
    markdown.js            line-level markdown renderer
  components/
    Terminal.jsx           history, typewriter queue, command ctx
    Prompt.jsx             input with inline cursor
    OutputLine.jsx         line (typewriter / banner / progress / countdown)
    ProgressModal.jsx      popup with the animated bar (crack/decrypt)
    SelfDestructModal.jsx  big self-destruct popup + OVERRIDE
    Tracer.jsx             top-right tracer countdown popup
    CountdownLine.jsx      self-destruct / event countdown
    InputModal.jsx         password / roll dialog
    Screensaver.jsx        idle animation
    ThemeSwitcher.jsx · AudioToggle.jsx
  themes/
    index.js                       registry + loader (glob + front-matter) + composeTheme
    <id>.json                      skins
    scenarios/<theme>/<id>/
      scenario.json                motd + commands + login + events + selfDestruct + tracer
      files/**                     terminal files (text / front-matter)
public/fonts/              self-hosted fonts (.ttf/.otf)

How it fits together

• composeTheme(themeId, scenarioId) merges a theme skin with a scenario, returning the runtime theme object that Terminal.jsx reads.
• Files under files/ are loaded via import.meta.glob and parsed for front-matter at build time; directories are inferred from the path tree.
• No backend, no client-side router — the theme/scenario are chosen via URL query params (?theme=…&scenario=…).

Offline / PWA

The app installs and runs offline. A service worker (public/sw.js, cache-first with a background refresh) caches the shell, code, fonts and scenarios after one online visit; the web manifest (public/manifest.webmanifest, relative paths) makes it installable under both the Pages subpath and the domain root. Registered in production only, scoped to import.meta.env.BASE_URL. Handy for running the prop at a table with no/flaky wifi.

Fonts

Self-hosted in public/fonts/ — no external calls.

• 3270 Nerd Font — BSD-2-Clause (3270) + MIT (Nerd Font).
• Terminal Grotesque (Raphaël Bastide) — SIL Open Font License.

---

Português

Layout do código-fonte

src/
  App.jsx                  estado de tema/cenário, GM mode, CSS vars, URL params, idle
  audio/sfx.js             síntese Web Audio (keystroke/beep/whoosh/hum)
  styles/{base,crt}.css    fontes @font-face + efeito CRT
  engine/
    commands.js            parser + comandos built-in
    filesystem.js          resolver de path + listDir
    complete.js            autocomplete do Tab
    markdown.js            renderizador de markdown por linha
  components/
    Terminal.jsx           histórico, fila de typewriter, ctx dos comandos
    Prompt.jsx             input com cursor inline
    OutputLine.jsx         linha (typewriter / banner / progress / countdown)
    ProgressModal.jsx      popup com a barra animada (crack/decrypt)
    SelfDestructModal.jsx  popup grande de autodestruição + OVERRIDE
    Tracer.jsx             popup do rastreador no canto superior direito
    CountdownLine.jsx      contagem de autodestruição / evento
    InputModal.jsx         diálogo de senha / rolagem
    Screensaver.jsx        animação ociosa
    ThemeSwitcher.jsx · AudioToggle.jsx
  themes/
    index.js                       registry + loader (glob + front-matter) + composeTheme
    <id>.json                      skins
    scenarios/<tema>/<id>/
      scenario.json                motd + commands + login + events + selfDestruct + tracer
      files/**                     arquivos do terminal (texto / front-matter)
public/fonts/              fontes self-hosted (.ttf/.otf)

Como se encaixa

• composeTheme(themeId, scenarioId) mescla a skin do tema com um cenário, retornando o objeto de tema em runtime que o Terminal.jsx lê.
• Arquivos em files/ são carregados via import.meta.glob e têm o front-matter parseado em build time; diretórios são inferidos da árvore de paths.
• Sem backend, sem router no cliente — tema/cenário são escolhidos por query params na URL (?theme=…&scenario=…).

Offline / PWA

O app instala e roda offline. Um service worker (public/sw.js, cache-first com refresh em background) guarda o shell, código, fontes e cenários após uma visita online; o web manifest (public/manifest.webmanifest, paths relativos) o torna instalável tanto no subpath do Pages quanto na raiz do domínio. Registrado só em produção, com escopo em import.meta.env.BASE_URL. Útil pra rodar o prop numa mesa com wifi ruim ou sem internet.

Fontes

Self-hosted em public/fonts/ — sem chamadas externas.

• 3270 Nerd Font — BSD-2-Clause (3270) + MIT (Nerd Font).
• Terminal Grotesque (Raphaël Bastide) — SIL Open Font License.