feat: ASCII art Timmy logo with progressive loading reveal

Replace plain "INITIALIZING..." text with a block-character ASCII art TIMMY logo that fills in character-by-character as each init step completes. Shows a progress bar and percentage counter. - js/loading.js: new module — ASCII art, initLoadingArt(), setLoadingProgress() - js/main.js: import loading module; call setLoadingProgress() at each init stage (world 10%, effects 30%, agents 50%, controls 70%, UI 80%, WebSocket 90%, visitor 95%, done 100%) - index.html: loading screen now uses <pre id="ascii-logo">, progress bar track/fill, percent label, and status message; CSS styles added for lit/unlit characters with green glow Fixes #7 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-23 14:06:41 -04:00
3 changed files with 161 additions and 7 deletions
--- a/index.html
+++ b/index.html
@@ -22,13 +22,56 @@
      position: fixed; inset: 0; z-index: 100;
      display: flex; align-items: center; justify-content: center;
      background: #000;
-      color: #00ff41; font-size: 14px; letter-spacing: 4px;
-      text-shadow: 0 0 12px #00ff41;
      font-family: 'Courier New', monospace;
    }
    #loading-screen.hidden { display: none; }
-    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
-    #loading-screen span { animation: blink 1.2s ease-in-out infinite; }
+
+    .loading-content {
+      display: flex; flex-direction: column; align-items: center; gap: 18px;
+      padding: 24px;
+    }
+
+    /* ASCII logo */
+    #ascii-logo {
+      white-space: pre;
+      font-family: 'Courier New', monospace;
+      font-size: clamp(6px, 1.1vw, 13px);
+      line-height: 1.25;
+      color: #002200;
+      text-shadow: none;
+      user-select: none;
+    }
+    /* Lit characters glow green */
+    #ascii-logo .ac { color: #002200; transition: color 0.15s, text-shadow 0.15s; }
+    #ascii-logo .ac.lit {
+      color: #00ff41;
+      text-shadow: 0 0 8px #00ff41, 0 0 20px #00cc33;
+    }
+
+    /* Progress bar */
+    #loading-bar-track {
+      width: clamp(220px, 50vw, 500px);
+      height: 3px;
+      background: #001800;
+      border: 1px solid #003300;
+      border-radius: 2px;
+      overflow: hidden;
+    }
+    #loading-bar-fill {
+      height: 100%; width: 0%;
+      background: linear-gradient(90deg, #00aa22, #00ff41);
+      box-shadow: 0 0 10px #00ff41;
+      transition: width 0.3s ease-out;
+    }
+
+    /* Percent + status */
+    #loading-percent {
+      color: #00ff41; font-size: 11px; letter-spacing: 3px;
+      text-shadow: 0 0 8px #00ff41;
+    }
+    #loading-msg {
+      color: #007722; font-size: 10px; letter-spacing: 4px;
+    }

    #ui-overlay {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
@@ -162,7 +205,14 @@
  </style>
 </head>
 <body>
-  <div id="loading-screen"><span>INITIALIZING...</span></div>
+  <div id="loading-screen">
+    <div class="loading-content">
+      <pre id="ascii-logo"></pre>
+      <div id="loading-bar-track"><div id="loading-bar-fill"></div></div>
+      <div id="loading-percent">0%</div>
+      <div id="loading-msg">INITIALIZING...</div>
+    </div>
+  </div>
  <!-- WebGL context loss overlay (iPad PWA, GPU resets) -->
  <div id="webgl-recovery-overlay" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.9);color:#00ff41;font-family:monospace;align-items:center;justify-content:center;flex-direction:column">
    <p style="font-size:1.4rem">RECOVERING WebGL CONTEXT…</p>
--- a/js/loading.js
+++ b/js/loading.js
@@ -0,0 +1,86 @@
+/**
+ * Loading screen — ASCII art Timmy logo with progressive character reveal.
+ *
+ * Usage:
+ *   import { initLoadingArt, setLoadingProgress } from './loading.js';
+ *   initLoadingArt();              // call once on page load
+ *   setLoadingProgress(50, 'MSG'); // 0–100, optional status message
+ */
+
+const TIMMY_ASCII = `
+ ████████╗██╗███╗   ███╗███╗   ███╗██╗   ██╗
+ ╚══██╔══╝██║████╗ ████║████╗ ████║╚██╗ ██╔╝
+    ██║   ██║██╔████╔██║██╔████╔██║ ╚████╔╝
+    ██║   ██║██║╚██╔╝██║██║╚██╔╝██║  ╚██╔╝
+    ██║   ██║██║ ╚═╝ ██║██║ ╚═╝ ██║   ██║
+    ╚═╝   ╚═╝╚═╝     ╚═╝╚═╝     ╚═╝   ╚═╝
+
+       ┌───────────────────────────────┐
+       │  SOVEREIGN AI · SOUL ON BTC   │
+       └───────────────────────────────┘
+`.trimStart();
+
+/** All non-whitespace char indices in the ASCII art, randomised for scatter reveal */
+let _charSpans = [];
+let _totalChars = 0;
+
+/**
+ * Initialise the loading screen: build character spans for the ASCII art.
+ * Call once before the first setLoadingProgress().
+ */
+export function initLoadingArt() {
+  const logoEl = document.getElementById('ascii-logo');
+  if (!logoEl) return;
+
+  // Build span-per-char markup — whitespace stays as plain text nodes for layout.
+  const chars = [...TIMMY_ASCII];
+  let html = '';
+  let idx = 0;
+  for (const ch of chars) {
+    if (ch === '\n') {
+      html += '\n';
+    } else if (ch === ' ') {
+      html += ' ';
+    } else {
+      html += `<span class="ac" data-i="${idx}">${ch}</span>`;
+      idx++;
+    }
+  }
+  _totalChars = idx;
+  logoEl.innerHTML = html;
+
+  // Cache span elements for fast access
+  _charSpans = Array.from(logoEl.querySelectorAll('.ac'));
+}
+
+/**
+ * Update loading progress.
+ * @param {number} percent  0–100
+ * @param {string} [msg]    Optional status line text
+ */
+export function setLoadingProgress(percent, msg) {
+  const pct = Math.max(0, Math.min(100, percent));
+
+  // How many chars should be "lit" at this progress level
+  const litCount = Math.round((_totalChars * pct) / 100);
+
+  for (let i = 0; i < _charSpans.length; i++) {
+    if (i < litCount) {
+      _charSpans[i].classList.add('lit');
+    }
+  }
+
+  // Progress bar fill
+  const bar = document.getElementById('loading-bar-fill');
+  if (bar) bar.style.width = `${pct}%`;
+
+  // Percentage label
+  const pctEl = document.getElementById('loading-percent');
+  if (pctEl) pctEl.textContent = `${Math.round(pct)}%`;
+
+  // Status message
+  if (msg) {
+    const msgEl = document.getElementById('loading-msg');
+    if (msgEl) msgEl.textContent = msg;
+  }
+}
--- a/js/main.js
+++ b/js/main.js
@@ -8,6 +8,7 @@ import { initUI, updateUI } from './ui.js';
 import { initInteraction, updateControls, disposeInteraction } from './interaction.js';
 import { initWebSocket, getConnectionState, getJobCount } from './websocket.js';
 import { initVisitor } from './visitor.js';
+import { initLoadingArt, setLoadingProgress } from './loading.js';

 let running = false;
 let canvas  = null;
@@ -22,26 +23,40 @@ let canvas  = null;
 *   Agent state map captured just before teardown; reapplied after initAgents.
 */
 function buildWorld(firstInit, stateSnapshot) {
+  if (firstInit) setLoadingProgress(10, 'RENDERING ENGINE...');
  const { scene, camera, renderer } = initWorld(canvas);
  canvas = renderer.domElement;

+  if (firstInit) setLoadingProgress(30, 'EFFECTS SYSTEM...');
  initEffects(scene);
+
+  if (firstInit) setLoadingProgress(50, 'SPAWNING AGENTS...');
  initAgents(scene);

  if (stateSnapshot) {
    applyAgentStates(stateSnapshot);
  }

+  if (firstInit) setLoadingProgress(70, 'ARMING CONTROLS...');
  initInteraction(camera, renderer);

  if (firstInit) {
+    setLoadingProgress(80, 'LOADING INTERFACE...');
    initUI();
+
+    setLoadingProgress(90, 'CONNECTING TO GRID...');
    initWebSocket(scene);
+
+    setLoadingProgress(95, 'INITIALIZING VISITOR...');
    initVisitor();

-    // Dismiss loading screen
+    setLoadingProgress(100, 'WELCOME TO TOWER WORLD');
+
+    // Dismiss loading screen after a brief moment so 100% is visible
    const loadingScreen = document.getElementById('loading-screen');
-    if (loadingScreen) loadingScreen.classList.add('hidden');
+    if (loadingScreen) {
+      setTimeout(() => loadingScreen.classList.add('hidden'), 400);
+    }
  }

  // Debounce resize to 1 call per frame
@@ -117,6 +132,9 @@ function teardown({ scene, renderer, ac }) {
 function main() {
  const $overlay = document.getElementById('webgl-recovery-overlay');

+  initLoadingArt();
+  setLoadingProgress(0, 'BOOTING MATRIX...');
+
  let handle = buildWorld(true, null);

  // WebGL context loss recovery (iPad PWA, GPU driver reset, etc.)