.

Author: arkin0x

src/components/ConstructViewer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { Canvas } from '@react-three/fiber'
 import { OrbitControls } from "@react-three/drei"
 import { Cyberspace } from './ThreeCyberspace'
@@ -19,6 +19,7 @@ const ConstructViewer = ({constructSize = 1, hexLocation = CENTERCOORD, style =
   const [scale] = useState(UNIVERSE_SIZE)
   const [size, setSize] = useState(constructSize)
   const [coord, setCoord] = useState<BigCoords>(decodeHexToCoordinates(hexLocation))
+  const viewerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     // const urlParams = new URLSearchParams(window.location.search)
@@ -32,14 +33,14 @@ const ConstructViewer = ({constructSize = 1, hexLocation = CENTERCOORD, style =
   const orbitTarget = new THREE.Vector3(downscaled.x, downscaled.y, downscaled.z)
 
   return (
-    <div className="cyberspace-viewer">
+    <div className="cyberspace-viewer" ref={viewerRef}>
       <Canvas style={style} camera={{
         near: 0.001, 
         far: scale*2*2*2*2*2*2*2*2,
         position: [0, 0, scale]
       }}>
         <ambientLight intensity={0.8} />
-        <Cyberspace targetCoord={coord} targetSize={size}>
+        <Cyberspace targetCoord={coord} targetSize={size} parentRef={viewerRef}>
           <Construct coord={coord} size={size}/>
         </Cyberspace>
         <OrbitControls target={orbitTarget} zoomSpeed={5}/>

src/components/MinerController.tsx

@@ -177,6 +177,7 @@ export const Miner = ({targetHex, targetWork}: MinerProps) => {
       created_at: createdAt,
       tags: [["nonce",nonceBytes,targetHex]],
       content: '',
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       pubkey: identity!.pubkey,
     }
     const serializedEvent = serializeEvent(event)

src/components/ThreeCyberspace.tsx

@@ -27,14 +27,16 @@ const SunMaterial = new THREE.MeshBasicMaterial({
 })
 
 interface CyberspaceProps {
+  // assert parentRef.current is not null
+  parentRef: React.RefObject<HTMLDivElement>,
   targetSize: number, // size of construct to determine camera orbit radius
   targetCoord: BigCoords, // for camera orbit
   children: React.ReactNode,
 }
 
 const centerVec = new THREE.Vector3(UNIVERSE_SIZE_HALF, UNIVERSE_SIZE_HALF, UNIVERSE_SIZE_HALF) // The center of cyberspace
 
-export const Cyberspace: React.FC<CyberspaceProps> = ({ targetSize, targetCoord, children }) => {
+export const Cyberspace: React.FC<CyberspaceProps> = ({ parentRef, targetSize, targetCoord, children }) => {
   const groupRef = useRef<THREE.Group>(null)
   // const [interactionActive, setInteractionActive] = useState(false)
   const [defaultView, setDefaultView] = useState(true)
@@ -44,18 +46,21 @@ export const Cyberspace: React.FC<CyberspaceProps> = ({ targetSize, targetCoord,
   const [interactionResetDelay, setInteractionResetDelay] = useState(INTERACTION_RESET_DELAY)
   const { camera } = useThree()
 
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const parent = parentRef.current!
+
   const targetPosition = centerVec
   const downscaledTargetCoord = downscaleCoords(targetCoord, UNIVERSE_DOWNSCALE)
   // const radius = targetSize * 10 // The radius of the circular path the camera will follow
 
-const minSize = 1
-const maxSize = 2**50/256/256
+  const minSize = 1
+  const maxSize = 2**50/256/256
 
-// const ratio = ( targetSize + (maxSize * 0.1)) / maxSize
-const ratio = targetSize / maxSize
+  // const ratio = ( targetSize + (maxSize * 0.1)) / maxSize
+  const ratio = targetSize / maxSize
 
-// const radius = 100 * Math.pow(targetSize, ratio) + targetSize
-// const radius = 100 + targetSize * (1 + ratio)
+  // const radius = 100 * Math.pow(targetSize, ratio) + targetSize
+  // const radius = 100 + targetSize * (1 + ratio)
   const invertRatioLimit = Math.max(1-ratio, minSize/maxSize)
 
   const radius = Math.max(100, targetSize + targetSize * invertRatioLimit)
@@ -80,16 +85,17 @@ const ratio = targetSize / maxSize
         }, interactionResetDelay)
     }
 
-    window.addEventListener('pointerdown', handleInteractionStart)
-    window.addEventListener('pointerup', handleInteractionEnd)
-    window.addEventListener('wheel', handleInteractionStart)
+    parent.addEventListener('pointerdown', handleInteractionStart)
+    parent.addEventListener('pointerup', handleInteractionEnd)
+    parent.addEventListener('wheel', handleInteractionStart)
 
     // Cleanup event listeners on unmount
     return () => {
-      window.removeEventListener('pointerdown', handleInteractionStart)
-      window.removeEventListener('pointerup', handleInteractionEnd)
-      window.addEventListener('wheel', handleInteractionStart)
+      parent.removeEventListener('pointerdown', handleInteractionStart)
+      parent.removeEventListener('pointerup', handleInteractionEnd)
+      parent.addEventListener('wheel', handleInteractionStart)
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [targetSize, targetCoord])
 
   // Compute the lines and grids only once