Right-clicking any inspectable 3D mesh or sprite now shows a holographic tooltip with the object's name and description. Tagged objects: glass platform, platform rim, sovereignty meter, sovereignty score sprite, agent panels, and commit banners. The contextmenu handler uses THREE.Raycaster against all scene children and surfaces the first hit with userData.inspectName. Tooltip dismisses on click or Escape. Fixes #141
63 lines
2.5 KiB
HTML
63 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Timmy's Nexus</title>
|
|
<meta name="description" content="A sovereign 3D world">
|
|
<meta property="og:title" content="Timmy's Nexus">
|
|
<meta property="og:description" content="A sovereign 3D world">
|
|
<meta property="og:image" content="https://example.com/og-image.png">
|
|
<meta property="og:type" content="website">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Timmy's Nexus">
|
|
<meta name="twitter:description" content="A sovereign 3D world">
|
|
<meta name="twitter:image" content="https://example.com/og-image.png">
|
|
<link rel="manifest" href="/manifest.json">
|
|
<link rel="stylesheet" href="style.css">
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "https://unpkg.com/three@0.183.0/build/three.module.js",
|
|
"three/addons/": "https://unpkg.com/three@0.183.0/examples/jsm/"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<!-- Top Right: Audio Toggle -->
|
|
<div id="audio-control" class="hud-controls" style="position: absolute; top: 8px; right: 8px;">
|
|
<button id="audio-toggle" class="chat-toggle-btn" aria-label="Toggle ambient sound" style="background-color: var(--color-primary); color: var(--color-bg); padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
🔊
|
|
</button>
|
|
<button id="debug-toggle" class="chat-toggle-btn" aria-label="Toggle debug mode" style="background-color: var(--color-secondary); color: var(--color-bg); padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
🔍
|
|
</button>
|
|
<audio id="ambient-sound" src="ambient.mp3" loop></audio>
|
|
</div>
|
|
|
|
<div id="overview-indicator">
|
|
<span>MAP VIEW</span>
|
|
<span class="overview-hint">[Tab] to exit</span>
|
|
</div>
|
|
|
|
<div id="photo-indicator">
|
|
<span>PHOTO MODE</span>
|
|
<span class="photo-hint">[P] exit | [[] focus- []] focus+ focus: <span id="photo-focus">5.0</span></span>
|
|
</div>
|
|
|
|
<div id="sovereignty-msg">⚡ SOVEREIGNTY ⚡</div>
|
|
|
|
<div id="inspect-tooltip">
|
|
<div id="inspect-name"></div>
|
|
<div id="inspect-desc"></div>
|
|
</div>
|
|
|
|
<script type="module" src="app.js"></script>
|
|
<div id="loading" style="position: fixed; top: 0; left: 0; right: 0; height: 4px; background: #222; z-index: 1000;">
|
|
<div id="loading-bar" style="height: 100%; background: var(--color-accent); width: 0;"></div>
|
|
</div>
|
|
<div class="crt-overlay"></div>
|
|
</body>
|
|
</html>
|