From 4cf74a1f2eb799e7261f1531b0749a7bbfa07327 Mon Sep 17 00:00:00 2001
From: Alex Freska <alex.freska@gmail.com>
Date: Mon, 14 Aug 2023 16:13:54 -0400
Subject: [PATCH] fix: website interactive host map bug

---
 .changeset/yellow-rings-matter.md            |  5 ++
 apps/website/components/HostMap/Globe.tsx    |  4 +-
 apps/website/components/HostMap/GlobeOld.tsx | 90 --------------------
 3 files changed, 7 insertions(+), 92 deletions(-)
 create mode 100644 .changeset/yellow-rings-matter.md
 delete mode 100644 apps/website/components/HostMap/GlobeOld.tsx

diff --git a/.changeset/yellow-rings-matter.md b/.changeset/yellow-rings-matter.md
new file mode 100644
index 000000000..ec9efaff0
--- /dev/null
+++ b/.changeset/yellow-rings-matter.md
@@ -0,0 +1,5 @@
+---
+'website': minor
+---
+
+Fixed a bug where the route arcs would error and stop showing on the interactive host map.
diff --git a/apps/website/components/HostMap/Globe.tsx b/apps/website/components/HostMap/Globe.tsx
index 49bd3b88f..21c26dafc 100644
--- a/apps/website/components/HostMap/Globe.tsx
+++ b/apps/website/components/HostMap/Globe.tsx
@@ -98,9 +98,9 @@ function GlobeComponent({ activeHost, hosts, rates, selectActiveHost }: Props) {
       const addExtra = Math.random() < 0.1
       if (addExtra) {
         const randomDistantIndex = random(
-          // Math.round((hosts.length - 1) / 2),
+          // Math.round((hostRoutes.length - 1) / 2),
           0,
-          hosts.length - 1
+          hostRoutes.length - 1
         )
         const extra = hostRoutes[randomDistantIndex]
         routes.push(extra)
diff --git a/apps/website/components/HostMap/GlobeOld.tsx b/apps/website/components/HostMap/GlobeOld.tsx
deleted file mode 100644
index f7b25f2d2..000000000
--- a/apps/website/components/HostMap/GlobeOld.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import createGlobe, { Marker } from 'cobe'
-import { MutableRefObject, useEffect, useRef } from 'react'
-
-type Props = {
-  markers: Marker[]
-  focus: MutableRefObject<[number, number]>
-  onError: () => void
-}
-
-export function Globe({ focus, markers, onError }: Props) {
-  const canvasRef = useRef<HTMLCanvasElement>()
-  const position = useRef<{
-    phi: number
-    theta: number
-  }>({ phi: 0, theta: 0.3 })
-
-  useEffect(() => {
-    try {
-      let width = 0
-      const doublePi = Math.PI * 2
-      const onResize = () =>
-        canvasRef.current && (width = canvasRef.current.offsetWidth)
-      window.addEventListener('resize', onResize)
-      onResize()
-      const globe = createGlobe(canvasRef.current, {
-        devicePixelRatio: 2,
-        width: width * 2,
-        height: width * 2,
-        phi: position.current.phi,
-        theta: position.current.theta,
-        dark: 1,
-        diffuse: 3,
-        mapSamples: 20_000,
-        mapBrightness: 1.2,
-        baseColor: [0.7, 0.7, 0.7],
-        markerColor: [20 / 255, 205 / 255, 1 / 255],
-        glowColor: [0.1, 0.1, 0.1],
-        markers,
-        // scale: 2.5,
-        offset: [0, width * 2 * 0.4 * 0.6],
-        onRender: (state) => {
-          state.phi = position.current.phi
-          state.theta = position.current.theta
-          const [focusPhi, focusTheta] = focus.current || [0, 0]
-          const distPositive =
-            (focusPhi - position.current.phi + doublePi) % doublePi
-          const distNegative =
-            (position.current.phi - focusPhi + doublePi) % doublePi
-          // Control the speed
-          if (distPositive < distNegative) {
-            position.current.phi += distPositive * 0.08
-          } else {
-            position.current.phi -= distNegative * 0.08
-          }
-          position.current.theta =
-            position.current.theta * 0.92 + focusTheta * 0.08
-          state.width = width * 2
-          state.height = width * 2
-        },
-      })
-      setTimeout(() => {
-        if (canvasRef.current) {
-          canvasRef.current.style.opacity = '1'
-        }
-      }, 100)
-      return () => {
-        window.removeEventListener('resize', onResize)
-        globe.destroy()
-      }
-    } catch (e) {
-      console.log(e)
-      onError()
-    }
-    // remount when markers change so that active marker is updated
-    // animations look ok because the phi and theta are saved
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [markers])
-
-  return (
-    <div className="relative w-full aspect-square">
-      <canvas
-        ref={canvasRef}
-        className="w-full h-full top-0 opacity-0 transition-opacity"
-        style={{
-          contain: 'layout paint size',
-        }}
-      />
-    </div>
-  )
-}