<!-- SOLIDABILITY-WORLD · part 181 -->
<body>
<div id="app">
  <div id="scene-container"></div>

  <!-- Public welcome: explains what this is -->
  <div id="welcome-overlay">
    <div class="welcome-card">
      <h1>✦ SOLIDABILITY WORLD</h1>
      <div class="tagline">Your Website. Your AI. Your Authority.</div>
      <p>
        This is <strong style="color:#00ffcc;">Epistles.xyz</strong> turned into
        a world you can walk through. Every building is a real part of the website.
      </p>
      <p>
        Walk up to any building to learn what it does — in plain language,
        no programming needed.
      </p>
      <p>
        Tap <strong>👋</strong> for a guided tour. Tap <strong>📖</strong> for
        our shared vocabulary.
      </p>
      <button class="enter-btn" id="enter-btn" disabled style="opacity:0.5;">Loading world…</button>
      <div class="hint">WASD or arrow keys to walk · Tap buildings to explore</div>
    </div>
  </div>

  <!-- HUD (simplified for public) -->
  <div id="hud">
    <div id="hud-top">
      <h1>✦ SOLIDABILITY WORLD</h1>
      <span class="phase-tag">PUBLIC PREVIEW</span>
    </div>
    <div id="hud-help">
      <span>Walk near a building to learn what it does</span>
    </div>
  </div>

  <!-- Mobile joystick -->
  <div id="joystick">
    <div id="joystick-knob"></div>
  </div>
</div>

<script src="/solidability/js/three.min.js?v=20261009n"></script>
<script src="/solidability/js/sw-layout.js?v=20261009n"></script>
<script src="/solidability/js/sw-geometry.js?v=20261009n"></script>
<script src="/solidability/js/sw-engine.js?v=20261009n"></script>
<script src="/solidability/js/sw-world.js?v=20261009n"></script>
<script src="/solidability/js/sw-glass.js?v=20261009n"></script>
<script src="/solidability/js/sw-hyper.js?v=20261009n"></script>
<script src="/solidability/js/sw-intervene.js?v=20261009n"></script>
<script src="/solidability/js/sw-guide.js?v=20261009n"></script>
<script>
// Public boot: load sanitized map, no auth, no source code
// 3D engine starts ONLY when user clicks Enter (not before)
let worldReady = false;
let publicMapData = null;

// Hide diagnostic buttons on public world (Layer 3 tools, owner-only)
function hideDiagnosticButtons() {
  ['hc-diag', 'hc-investigate', 'hc-heat', 'hc-find'].forEach(id => {
    const btn = document.getElementById(id);
    if (btn) btn.style.display = 'none';
  });
}

fetch('/api/solidability/public/map')
  .then(r => {
    if (!r.ok) throw new Error('Map unavailable');
    return r.json();
  })
  .then(publicMap => {
    publicMapData = publicMap;
    // Enable the Enter button (world data ready, engine not yet started)
    const btn = document.getElementById('enter-btn');
    btn.textContent = 'Enter the World →';
    btn.disabled = false;
    console.log('✦ Public map loaded, ready to enter');
  })
  .catch(err => {
    document.getElementById('scene-container').innerHTML =
      '<div style="color:#ff6666;padding:40px;font-family:monospace">Failed to load world: ' + err.message + '</div>';
  });

// Enter button: start 3D engine, build world, hide overlay
document.getElementById('enter-btn').onclick = () => {
  if (!publicMapData || worldReady) return;

  try {
    SWEngine.init('scene-container');
    const layout = publicMapToLayout(publicMapData);
    SWWorld.buildPublic(layout);
    SWHyper.init();
    hideDiagnosticButtons();
    worldReady = true;

    document.getElementById('welcome-overlay').classList.add('hidden');

    setTimeout(() => {
      if (typeof SWGuide !== 'undefined') {
        SWHyper.narrate(
          `Welcome. This is Epistles.xyz as a world you can walk through. ` +
          `Tap <b>👋</b> anytime for a guided tour, or just walk up to any building.`
        );
      }
    }, 1000);

    console.log('✦ Solidability World (public) loaded');
  } catch (err) {
    document.getElementById('scene-container').innerHTML =
      '<div style="color:#ff6666;padding:40px;font-family:monospace">3D unavailable: ' + err.message +
      '<br><br>Your device may not support WebGL.</div>';
  }
};

// Convert public map format to world layout
function publicMapToLayout(publicMap) {
  const rooms = [];
  let roomIndex = 0;
  for (const [dirName, dirInfo] of Object.entries(publicMap.directories || {})) {
    for (const file of (dirInfo.files || [])) {
      rooms.push({
        key: `public-${roomIndex++}`,
        label: `${file.icon} ${file.name}`,
        filePath: null, // no file path for public
        publicInfo: {
          what: file.what,
          does: file.does,
          matters: file.matters,
          connections: file.connections,
        },
        // Minimal geometry data (no complexity, no source)
        complexity: 10 + (file.connections || 0),
        routes: [],
        functions: [],
        // District from directory name
        district: dirName,
      });
    }
  }
  return { rooms, public: true };
}
</script>
</body>
</html>


