babellery/gallery.html at main · paciox/babellery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Infinite Gallery of Babel</title>
    <link rel="stylesheet" href="assets/css/main.css">
  </head>
  <body>
    <div id="canvas-container"></div>

    <div id="compass-hud">
      <canvas id="compass-canvas" width="560" height="62"></canvas>
    </div>

    <div id="crosshair"></div>
    <div id="app-cursor"></div>
    <div id="startup-hint">Click anywhere to capture the cursor. TAB opens the navigator.</div>

    <div id="hud">
      <div class="hud-location" id="loc-display">
        Room X: 0<br>
        Room Z: 0
      </div>
      <div class="hud-minimap">
        <canvas id="minimap-canvas" width="132" height="132"></canvas>
        <div class="hud-minimap-label">Full Universe</div>
        <button class="hud-map-btn" id="btn-open-map">Open Map (M)</button>
      </div>
      <div class="hud-controls">
        TAB to open navigator.
      </div>
    </div>

    <div id="navigator">
      <div class="nav-header">Navigator</div>

      <div class="nav-section">
        <label>Mathematical Location</label>
        <button class="nav-btn" id="btn-copy-current">Copy Coordinates</button>
        <button class="nav-btn" id="btn-paste">Teleport via Clipboard</button>
        <p class="nav-description">
          Default copy is compact (C1|token). Hold Shift while copying for raw.
        </p>
      </div>

      <div class="nav-section">
        <label>Archive Insertion</label>
        <button class="nav-btn" id="btn-upload">Map Uploaded Image</button>
        <p class="nav-description">
          Locates the canonical one-world coordinate where your 64x64 image exists.
        </p>
      </div>

      <div class="nav-section">
        <label>Exploration</label>
        <button class="nav-btn" id="btn-random">Jump to Random Sector</button>
      </div>

      <div class="nav-section">
        <label>Atmosphere</label>
        <button class="nav-btn" id="btn-audio-toggle">Ambient Audio: Full</button>
      </div>

      <div class="nav-section">
        <label>Render Scale</label>
        <div class="nav-range-wrap">
          <input class="nav-range" id="render-scale-slider" type="range" min="0" max="2" step="1" value="1" aria-label="Render Scale">
          <div class="nav-range-labels">
            <span>50%</span>
            <span>75%</span>
            <span>100%</span>
          </div>
        </div>
        <p class="nav-description">Current: <span id="render-scale-value">75%</span></p>
      </div>
    </div>

    <div id="inspect-modal">
      <canvas id="inspect-canvas" width="64" height="64"></canvas>
      <div class="inspect-details">
        <div class="inspect-coord" id="inspect-coord-text">...</div>
        <div class="btn-group">
          <button id="btn-copy-full">Copy Coordinates</button>
          <button id="btn-close-inspect">Return</button>
        </div>
      </div>
    </div>

    <div id="map-modal">
      <div class="map-shell">
        <div class="map-toolbar">
          <div class="map-toolbar-left">
            <div id="map-hover">Target: +0 | +0</div>
            <div class="map-zoom-wrap">
              <button id="btn-map-zoom-out" class="map-zoom-btn" aria-label="Zoom Out">-</button>
              <div id="map-zoom-label">Zoom: 100.0000%</div>
              <button id="btn-map-zoom-in" class="map-zoom-btn" aria-label="Zoom In">+</button>
            </div>
          </div>
          <button id="btn-map-close">Close Map (M)</button>
        </div>
        <canvas id="map-canvas" width="1024" height="1024"></canvas>
        <div class="map-hint">Wheel or hold +/- to zoom. Drag pan. Click teleport.</div>
      </div>
    </div>

    <div id="toast">Notification</div>
    <input type="file" id="file-input" accept="image/*">

    <script>
      window.onBundleLoadError = function onBundleLoadError() {
        document.body.innerHTML = `
          <main style="font-family: monospace; background:#050505; color:#e0e0e0; min-height:100vh; margin:0; display:grid; place-items:center; padding:2rem;">
            <div style="max-width: 720px; line-height:1.6;">
              <h1 style="margin:0 0 1rem 0; font-size:1.25rem;">Build Required</h1>
              <p style="margin:0 0 0.75rem 0;">Could not load <code>dist/app.bundle.js</code>.</p>
              <p style="margin:0;">Run <code>npm run build</code> in the project folder, then refresh this page.</p>
            </div>
          </main>
        `;
      };
    </script>
    <script defer src="dist/app.bundle.js" onerror="window.onBundleLoadError()"></script>
  </body>
</html>