@jkwd/inbase 0.1.0

package/apps/explorer/src/scene/MapSelectBorder.tsx

@@ -0,0 +1,57 @@
+import { useMemo } from 'react'
+import * as THREE from 'three'
+import { MAP_SELECTION } from '../theme'
+
+type MapSelectBorderProps = {
+  width: number
+  depth: number
+  y?: number
+  stroke?: number
+  userData?: Record<string, unknown>
+}
+
+export function MapSelectBorder({
+  width,
+  depth,
+  y = 0.04,
+  stroke = MAP_SELECTION.blockPad,
+  userData,
+}: MapSelectBorderProps) {
+  const geometry = useMemo(() => {
+    const innerW = width
+    const innerD = depth
+    const outerW = width + stroke * 2
+    const outerD = depth + stroke * 2
+    const shape = new THREE.Shape()
+    shape.moveTo(-outerW / 2, -outerD / 2)
+    shape.lineTo(outerW / 2, -outerD / 2)
+    shape.lineTo(outerW / 2, outerD / 2)
+    shape.lineTo(-outerW / 2, outerD / 2)
+    shape.closePath()
+    const hole = new THREE.Path()
+    hole.moveTo(-innerW / 2, -innerD / 2)
+    hole.lineTo(-innerW / 2, innerD / 2)
+    hole.lineTo(innerW / 2, innerD / 2)
+    hole.lineTo(innerW / 2, -innerD / 2)
+    hole.closePath()
+    shape.holes.push(hole)
+    return new THREE.ShapeGeometry(shape)
+  }, [depth, stroke, width])
+
+  return (
+    <mesh
+      geometry={geometry}
+      position={[0, y, 0]}
+      rotation={[-Math.PI / 2, 0, 0]}
+      renderOrder={2}
+      userData={userData}
+    >
+      <meshBasicMaterial
+        color={MAP_SELECTION.color}
+        toneMapped={false}
+        side={THREE.DoubleSide}
+        depthWrite={false}
+      />
+    </mesh>
+  )
+}

package/apps/explorer/src/scene/MapView.tsx

@@ -0,0 +1,247 @@
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react'
+import { useThree } from '@react-three/fiber'
+import { Html, MapControls, OrthographicCamera } from '@react-three/drei'
+import * as THREE from 'three'
+import { folderAt, worldBounds } from '../layout'
+import type { ChangeKind } from '../theme'
+import type { WorldLayout } from '../types'
+
+type MapViewProps = {
+  layout: WorldLayout
+  enabled: boolean
+  marker: [number, number] | null
+  highlightedFolders?: Partial<Record<string, ChangeKind>>
+  selectedFolder?: string | null
+  onLand: (x: number, z: number) => void
+  onSelect: (fileId: string | null) => void
+  onSelectFolder: (folderPath: string | null) => void
+  onTravelTo: (fromId: string, toId: string) => void
+}
+
+export function MapView({
+  layout,
+  enabled,
+  marker,
+  highlightedFolders,
+  selectedFolder = null,
+  onLand,
+  onSelect,
+  onSelectFolder,
+  onTravelTo,
+}: MapViewProps) {
+  const size = useThree((state) => state.size)
+  const { camera, gl, scene } = useThree()
+  const bounds = useMemo(() => worldBounds(layout), [layout])
+  const drag = useRef({ x: 0, y: 0, moved: false, active: false })
+  const sized = size.width > 16 && size.height > 16
+
+  const fitZoom = sized
+    ? Math.min(
+        size.width / Math.max(bounds.width + 24, 1),
+        size.height / Math.max(bounds.depth + 24, 1),
+      )
+    : 8
+  const zoom = Math.max(fitZoom * 0.92, 1)
+
+  useLayoutEffect(() => {
+    if (!enabled || !(camera instanceof THREE.OrthographicCamera)) return
+    camera.up.set(0, 0, -1)
+    camera.position.set(bounds.cx, 120, bounds.cz)
+    camera.lookAt(bounds.cx, 0, bounds.cz)
+    camera.near = 1
+    camera.far = 2000
+    camera.zoom = zoom
+    camera.updateProjectionMatrix()
+  }, [bounds.cx, bounds.cz, camera, enabled, zoom])
+
+  useEffect(() => {
+    if (!enabled) return
+    const element = gl.domElement
+    element.style.cursor = 'grab'
+
+    const onDown = (event: PointerEvent) => {
+      if (event.button !== 0) return
+      drag.current = { x: event.clientX, y: event.clientY, moved: false, active: true }
+      element.style.cursor = 'grabbing'
+    }
+
+    const onMove = (event: PointerEvent) => {
+      if (Math.hypot(event.clientX - drag.current.x, event.clientY - drag.current.y) > 5) {
+        drag.current.moved = true
+      }
+    }
+
+    const pickAt = (clientX: number, clientY: number) => {
+      const rect = element.getBoundingClientRect()
+      if (rect.width < 2 || rect.height < 2) return null
+      const ndc = new THREE.Vector2(
+        ((clientX - rect.left) / rect.width) * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1,
+      )
+      const raycaster = new THREE.Raycaster()
+      raycaster.setFromCamera(ndc, camera)
+      const hits = raycaster.intersectObjects(scene.children, true)
+      const relationHit = hits.find((hit) => hit.object.userData.relationTo)
+      const fileHit = hits.find((hit) => hit.object.userData.fileId)
+      return { raycaster, relationHit, fileHit }
+    }
+
+    const onUp = (event: PointerEvent) => {
+      element.style.cursor = 'grab'
+      const startedOnCanvas = drag.current.active
+      drag.current.active = false
+      if (!startedOnCanvas || event.button !== 0 || drag.current.moved) return
+
+      const pick = pickAt(event.clientX, event.clientY)
+      if (!pick) return
+      const { relationHit, fileHit } = pick
+      if (
+        relationHit &&
+        (!fileHit || relationHit.distance <= fileHit.distance + 0.4)
+      ) {
+        onTravelTo(
+          relationHit.object.userData.relationFrom as string,
+          relationHit.object.userData.relationTo as string,
+        )
+        return
+      }
+      if (fileHit) {
+        onSelect(fileHit.object.userData.fileId as string)
+        return
+      }
+
+      const hit = new THREE.Vector3()
+      const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
+      if (pick.raycaster.ray.intersectPlane(plane, hit)) {
+        const folder = folderAt(hit.x, hit.z, layout)
+        if (folder) {
+          onSelectFolder(folder.path)
+          return
+        }
+      }
+      onSelect(null)
+      onSelectFolder(null)
+    }
+
+    const onDblClick = (event: MouseEvent) => {
+      if (event.button !== 0 || drag.current.moved) return
+      const pick = pickAt(event.clientX, event.clientY)
+      if (!pick) return
+      const { raycaster, relationHit, fileHit } = pick
+      if (relationHit || fileHit) return
+
+      const hit = new THREE.Vector3()
+      const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
+      if (raycaster.ray.intersectPlane(plane, hit)) {
+        const lock = element.requestPointerLock()
+        if (lock && typeof lock.catch === 'function') {
+          void lock.catch(() => {})
+        }
+        onLand(hit.x, hit.z)
+      }
+    }
+
+    element.addEventListener('pointerdown', onDown)
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    element.addEventListener('dblclick', onDblClick)
+    return () => {
+      element.style.cursor = ''
+      element.removeEventListener('pointerdown', onDown)
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      element.removeEventListener('dblclick', onDblClick)
+    }
+  }, [
+    camera,
+    enabled,
+    gl.domElement,
+    layout,
+    onLand,
+    onSelect,
+    onSelectFolder,
+    onTravelTo,
+    scene,
+  ])
+
+  return (
+    <>
+      {enabled && (
+        <OrthographicCamera
+          makeDefault
+          position={[bounds.cx, 120, bounds.cz]}
+          zoom={zoom}
+          near={1}
+          far={2000}
+          up={[0, 0, -1]}
+        />
+      )}
+      {enabled && sized && (
+        <MapControls
+          enableRotate={false}
+          enableDamping
+          dampingFactor={0.12}
+          screenSpacePanning
+          zoomSpeed={1.15}
+          minZoom={Math.max(fitZoom * 0.45, 1)}
+          maxZoom={Math.max(fitZoom * 10, 20)}
+          target={[bounds.cx, 0, bounds.cz]}
+        />
+      )}
+      {enabled &&
+        Object.values(layout.folders).map((folder) => (
+          <Html
+            key={folder.path}
+            position={[folder.x, 14, folder.z + 1.35]}
+            center
+            style={{ pointerEvents: 'none' }}
+          >
+            <div
+              className={[
+                'map-folder-label',
+                highlightedFolders?.[folder.path]
+                  ? `map-folder-label-${highlightedFolders[folder.path]}`
+                  : folder.added
+                    ? 'map-folder-label-added'
+                    : selectedFolder === folder.path
+                      ? 'map-folder-label-selected'
+                      : '',
+              ]
+                .filter(Boolean)
+                .join(' ')}
+            >
+              <span className="map-folder-name">
+                {folderKindLabel(
+                  folder.name,
+                  highlightedFolders?.[folder.path] ?? null,
+                  folder.added ?? false,
+                )}
+              </span>
+            </div>
+          </Html>
+        ))}
+      {marker && <LandMarker marker={marker} />}
+    </>
+  )
+}
+
+function folderKindLabel(
+  name: string,
+  kind: ChangeKind | null | undefined,
+  added: boolean,
+) {
+  if (kind === 'remove') return `- ${name}`
+  if (kind === 'add' || added) return `+ ${name}`
+  return name
+}
+
+function LandMarker({ marker }: { marker: [number, number] }) {
+  return (
+    <group position={[marker[0], 0.2, marker[1]]}>
+      <mesh rotation={[-Math.PI / 2, 0, 0]}>
+        <ringGeometry args={[0.55, 0.85, 24]} />
+        <meshBasicMaterial color="#e8c36a" side={THREE.DoubleSide} />
+      </mesh>
+    </group>
+  )
+}

package/apps/explorer/src/scene/Player.tsx

@@ -0,0 +1,245 @@
+import { useEffect, useRef, useState } from 'react'
+import { useFrame, useThree } from '@react-three/fiber'
+import { PerspectiveCamera, PointerLockControls } from '@react-three/drei'
+import type { PointerLockControls as PointerLockControlsImpl } from 'three-stdlib'
+import * as THREE from 'three'
+import { CONFIG } from '../theme'
+import { locationLabel } from '../layout'
+import type { FlyTo, ViewMode, WorldLayout } from '../types'
+
+type PlayerProps = {
+  layout: WorldLayout
+  mode: ViewMode
+  landAt: [number, number]
+  locked: boolean
+  lockEnabled?: boolean
+  onLockedChange: (locked: boolean) => void
+  onFolderChange: (label: string) => void
+  onWalkPosition: (x: number, z: number) => void
+  flyTo: FlyTo | null
+}
+
+export function Player({
+  layout,
+  mode,
+  landAt,
+  locked,
+  lockEnabled = true,
+  onLockedChange,
+  onFolderChange,
+  onWalkPosition,
+  flyTo,
+}: PlayerProps) {
+  const { camera } = useThree()
+  const walking = mode === 'walk'
+  const keys = useRef({
+    forward: false,
+    back: false,
+    left: false,
+    right: false,
+    sprint: false,
+  })
+  const lastFolder = useRef<string | null>(null)
+  const front = useRef(new THREE.Vector3())
+  const right = useRef(new THREE.Vector3())
+  const up = useRef(new THREE.Vector3(0, 1, 0))
+  const move = useRef(new THREE.Vector3())
+  const lastFly = useRef(0)
+  const lookAt = useRef(new THREE.Vector3())
+  const [steering, setSteering] = useState(true)
+  const controlsRef = useRef<PointerLockControlsImpl>(null)
+  const capturedLook = useRef(false)
+  const flying = useRef<{
+    startPos: THREE.Vector3
+    endPos: THREE.Vector3
+    lookAt: THREE.Vector3
+    duration: number
+    t: number
+  } | null>(null)
+
+  useEffect(() => {
+    if (!walking) {
+      flying.current = null
+      capturedLook.current = false
+      setSteering(true)
+      return
+    }
+    if (flyTo && flyTo.nonce !== lastFly.current) {
+      lastFly.current = flyTo.nonce
+      const end = new THREE.Vector3(landAt[0], CONFIG.eyeHeight, landAt[1])
+      lookAt.current.set(flyTo.lookAt[0], flyTo.lookAt[1], flyTo.lookAt[2])
+      const dist = camera.position.distanceTo(end)
+      flying.current = {
+        startPos: camera.position.clone(),
+        endPos: end,
+        lookAt: lookAt.current.clone(),
+        duration: Math.min(1.35, Math.max(0.55, dist * 0.025)),
+        t: 0,
+      }
+      setSteering(false)
+      return
+    }
+    if (flying.current) return
+    camera.up.set(0, 1, 0)
+    camera.position.set(landAt[0], CONFIG.eyeHeight, landAt[1])
+    camera.lookAt(landAt[0], CONFIG.eyeHeight, landAt[1] + 10)
+    camera.updateProjectionMatrix()
+  }, [camera, flyTo, landAt, walking])
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent, down: boolean) => {
+      if (
+        event.target instanceof HTMLElement &&
+        (event.target.tagName === 'TEXTAREA' ||
+          event.target.tagName === 'INPUT' ||
+          event.target.tagName === 'SELECT' ||
+          event.target.isContentEditable)
+      ) {
+        return
+      }
+      if (event.code === 'KeyW' || event.code === 'ArrowUp') keys.current.forward = down
+      if (event.code === 'KeyS' || event.code === 'ArrowDown') keys.current.back = down
+      if (event.code === 'KeyA' || event.code === 'ArrowLeft') keys.current.left = down
+      if (event.code === 'KeyD' || event.code === 'ArrowRight') keys.current.right = down
+      if (event.code === 'ShiftLeft' || event.code === 'ShiftRight') keys.current.sprint = down
+    }
+
+    const down = (event: KeyboardEvent) => onKey(event, true)
+    const up = (event: KeyboardEvent) => onKey(event, false)
+    window.addEventListener('keydown', down)
+    window.addEventListener('keyup', up)
+    return () => {
+      window.removeEventListener('keydown', down)
+      window.removeEventListener('keyup', up)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!walking || !lockEnabled) {
+      controlsRef.current?.unlock()
+      document.exitPointerLock()
+      return
+    }
+    if (!steering || capturedLook.current) return
+    const controls = controlsRef.current
+    const element = controls?.domElement
+    if (!controls || !element) return
+    capturedLook.current = true
+    if (element.ownerDocument.pointerLockElement === element) {
+      controls.isLocked = true
+      onLockedChange(true)
+      return
+    }
+    controls.lock()
+  }, [lockEnabled, onLockedChange, steering, walking])
+
+  useFrame((_, delta) => {
+    try {
+      if (walking && flying.current) {
+        const flight = flying.current
+        flight.t += delta / flight.duration
+        const t = Math.min(1, flight.t)
+        const ease = t * t * (3 - 2 * t)
+        camera.position.lerpVectors(flight.startPos, flight.endPos, ease)
+        const dist = flight.startPos.distanceTo(flight.endPos)
+        camera.position.y =
+          CONFIG.eyeHeight + Math.sin(t * Math.PI) * Math.min(14, 3.5 + dist * 0.1)
+        camera.up.set(0, 1, 0)
+        camera.lookAt(flight.lookAt)
+        if (t >= 1) {
+          camera.position.copy(flight.endPos)
+          camera.up.set(0, 1, 0)
+          camera.lookAt(flight.lookAt)
+          flying.current = null
+          setSteering(true)
+        }
+      } else if (walking && locked) {
+        camera.getWorldDirection(front.current)
+        front.current.y = 0
+        front.current.normalize()
+        right.current.crossVectors(front.current, up.current).normalize()
+        move.current.set(0, 0, 0)
+        if (keys.current.forward) move.current.add(front.current)
+        if (keys.current.back) move.current.sub(front.current)
+        if (keys.current.right) move.current.add(right.current)
+        if (keys.current.left) move.current.sub(right.current)
+        if (move.current.lengthSq() > 0) {
+          const speed = keys.current.sprint ? CONFIG.sprintSpeed : CONFIG.walkSpeed
+          move.current.normalize().multiplyScalar(speed * delta)
+          camera.position.add(move.current)
+        }
+        camera.position.y = CONFIG.eyeHeight
+      }
+
+      if (!walking) return
+      onWalkPosition(camera.position.x, camera.position.z)
+      const nextPath = locationLabel(camera.position.x, camera.position.z, layout)
+      if (nextPath !== lastFolder.current) {
+        lastFolder.current = nextPath
+        onFolderChange(nextPath)
+      }
+    } catch {
+      // Movement must never stop the render loop.
+    }
+  })
+
+  if (!walking) return null
+
+  return (
+    <>
+      <PerspectiveCamera
+        makeDefault
+        fov={70}
+        near={0.1}
+        far={400}
+        position={[landAt[0], CONFIG.eyeHeight, landAt[1]]}
+      />
+      <PlayerLight />
+      <PointerLockControls
+        ref={controlsRef}
+        makeDefault
+        enabled={steering && lockEnabled}
+        onLock={() => onLockedChange(true)}
+        onUnlock={() => onLockedChange(false)}
+      />
+    </>
+  )
+}
+
+function PlayerLight() {
+  const { camera } = useThree()
+  const overhead = useRef<THREE.PointLight>(null)
+  const look = useRef<THREE.PointLight>(null)
+  const direction = useRef(new THREE.Vector3())
+
+  useFrame(() => {
+    if (!overhead.current || !look.current) return
+
+    overhead.current.position.copy(camera.position)
+    overhead.current.position.y += 2.6
+
+    camera.getWorldDirection(direction.current)
+    look.current.position.copy(camera.position)
+    look.current.position.addScaledVector(direction.current, 5)
+    look.current.position.y = camera.position.y + 1.4
+  })
+
+  return (
+    <>
+      <pointLight
+        ref={overhead}
+        color="#f4f1e8"
+        intensity={7.5}
+        distance={26}
+        decay={1.4}
+      />
+      <pointLight
+        ref={look}
+        color="#e4eef8"
+        intensity={3.4}
+        distance={18}
+        decay={1.6}
+      />
+    </>
+  )
+}