Update index.html

index.html

@@ -54,15 +54,13 @@
 
   <noscript style="color:#fff; position:fixed; left:12px; bottom:48px;">Enable JavaScript.</noscript>
 
-  <!-- Load UMD build that bundles dependencies; avoids ESM/CSP pitfalls on Static Spaces -->
-  <!-- three.js must be loaded globally for globe.gl UMD -->
+  <!-- Required scripts (UMD) -->
   <script src="https://unpkg.com/[email protected]/build/three.min.js" defer></script>
   <script src="https://unpkg.com/globe.gl" defer></script>
 
   <script>
   (function(){
     const showErr = (msg) => { const el = document.getElementById('err'); el.textContent = msg; el.style.display = 'block'; };
-    function safe(fn){ try { return fn(); } catch(e){ showErr((e && e.message) ? e.message : String(e)); throw e; } }
 
     const toRad = (deg) => deg * Math.PI / 180;
     const R_EARTH = 6371008.8; // meters
@@ -110,36 +108,37 @@
     const normLng  = (lng) => ((lng + 180) % 360 + 360) % 360 - 180;
     const parseParamCoord = (s) => { if (!s) return null; const [a,b] = s.split(','); const lat=Number(a), lng=Number(b); return (Number.isFinite(lat)&&Number.isFinite(lng))?{lat:clampLat(lat),lng:normLng(lng)}:null; };
 
-    // State
-    const url = new URL(location.href);
-    let pointA = parseParamCoord(url.searchParams.get('a')) ?? { lat: 48.8566, lng: 2.3522 };
-    let pointB = parseParamCoord(url.searchParams.get('b')) ?? { lat: 40.7128, lng: -74.0060 };
-    let active = 'A';
-    let unit = url.searchParams.get('unit') || 'km';
-
-    // UI wiring
-    const dotA = document.getElementById('dotA');
-    const dotB = document.getElementById('dotB');
-    const setA = document.getElementById('setA');
-    const setB = document.getElementById('setB');
-    const coordsEl = document.getElementById('coords');
-    const distEl = document.getElementById('distance');
-    const swapBtn = document.getElementById('swapBtn');
-    const randBtn = document.getElementById('randBtn');
-    const copyBtn = document.getElementById('copyBtn');
-    document.querySelectorAll('[data-unit]').forEach(btn => btn.addEventListener('click', () => { unit = btn.dataset.unit; document.querySelectorAll('[data-unit]').forEach(b=>b.classList.toggle('active', b===btn)); updateScene(); }));
-    setA.onclick = () => { active='A'; setA.classList.add('active'); setB.classList.remove('active'); dotA.style.background='#60a5fa'; dotB.style.background='#334155'; };
-    setB.onclick = () => { active='B'; setB.classList.add('active'); setA.classList.remove('active'); dotB.style.background='#a78bfa'; dotA.style.background='#334155'; };
-    swapBtn.onclick = () => { const t = pointA; pointA = pointB; pointB = t; updateScene(); };
-    randBtn.onclick = () => { const rnd = () => ({ lat: Math.random()*180-90, lng: Math.random()*360-180 }); pointA=rnd(); pointB=rnd(); updateScene(); };
-    copyBtn.onclick = async () => { try { await navigator.clipboard.writeText(location.href); } catch(e){} };
-
     function boot() {
       if (!window.THREE) { showErr('three.js failed to load.'); return; }
-      if (!window.Globe || typeof window.Globe !== 'function') { showErr('globe.gl failed to load. Check network/CSP.'); return; }
-      const globe = safe(() => window.Globe()
-        .width(window.innerWidth)
-        .height(window.innerHeight)
+      if (!window.Globe || typeof window.Globe !== 'function') { showErr('globe.gl failed to load.'); return; }
+
+      // State
+      const url = new URL(location.href);
+      let pointA = parseParamCoord(url.searchParams.get('a')) ?? { lat: 48.8566, lng: 2.3522 };
+      let pointB = parseParamCoord(url.searchParams.get('b')) ?? { lat: 40.7128, lng: -74.0060 };
+      let active = 'A';
+      let unit = url.searchParams.get('unit') || 'km';
+
+      // UI wiring
+      const dotA = document.getElementById('dotA');
+      const dotB = document.getElementById('dotB');
+      const setA = document.getElementById('setA');
+      const setB = document.getElementById('setB');
+      const coordsEl = document.getElementById('coords');
+      const distEl = document.getElementById('distance');
+      const swapBtn = document.getElementById('swapBtn');
+      const randBtn = document.getElementById('randBtn');
+      const copyBtn = document.getElementById('copyBtn');
+      document.querySelectorAll('[data-unit]').forEach(btn => btn.addEventListener('click', () => { unit = btn.dataset.unit; document.querySelectorAll('[data-unit]').forEach(b=>b.classList.toggle('active', b===btn)); updateScene(); }));
+      setA.onclick = () => { active='A'; setA.classList.add('active'); setB.classList.remove('active'); dotA.style.background='#60a5fa'; dotB.style.background='#334155'; };
+      setB.onclick = () => { active='B'; setB.classList.add('active'); setA.classList.remove('active'); dotB.style.background='#a78bfa'; dotA.style.background='#334155'; };
+      swapBtn.onclick = () => { const t = pointA; pointA = pointB; pointB = t; updateScene(); };
+      randBtn.onclick = () => { const rnd = () => ({ lat: Math.random()*180-90, lng: Math.random()*360-180 }); pointA=rnd(); pointB=rnd(); updateScene(); };
+      copyBtn.onclick = async () => { try { await navigator.clipboard.writeText(location.href); } catch(e){} };
+
+      // Globe mount: UMD signature is Globe()(container)
+      const container = document.getElementById('globe-container');
+      const globe = window.Globe()(container)
         .backgroundColor('rgba(5,7,12,1)')
         .showAtmosphere(true)
         .globeImageUrl('https://unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
@@ -153,11 +152,7 @@
         .arcStroke(() => 0.6)
         .arcDashLength(() => 0.6)
         .arcDashGap(() => 0.2)
-        .arcDashAnimateTime(() => 2000)
-      );
-
-      const container = document.getElementById('globe-container');
-      container.appendChild(globe());
+        .arcDashAnimateTime(() => 2000);
 
       // Interaction: drag markers or click to set active point
       const canvas = globe.renderer().domElement;
@@ -210,14 +205,11 @@
         if (!light) updateURL();
       }
 
-      // Initialize unit buttons and first render
       document.querySelectorAll('[data-unit]').forEach(b => b.classList.toggle('active', b.dataset.unit===unit));
       updateScene();
     }
 
-    window.addEventListener('load', () => {
-      try { boot(); } catch(e){ showErr((e && e.message) ? e.message : String(e)); }
-    });
+    window.addEventListener('load', boot);
   })();
   </script>
 </body>