suaveplan/openspec/changes/enterprise-gaming-r3f-minimap/proposal.md

OpenSpec Change: enterprise-gaming-r3f-minimap

• Change ID: enterprise-gaming-r3f-minimap
• Package: @suaveplan/r3f-minimap
• Category: gaming/gameplay
• Target path: gaming/gameplay/r3f-minimap
• Status: PROPOSED
• Date: 2026-04-24

---

Summary

Deliver @suaveplan/r3f-minimap on the genesis branch from scratch at enterprise quality. The package renders a real-time minimap inside React Three Fiber using an offscreen orthographic camera rendering to a WebGLRenderTarget: MinimapCamera drives the render target, MinimapRenderer composites the texture onto a <Html> or <Plane> overlay, EntityMarkers places icons/dots for tracked entities, FogOfWarLayer masks unexplored areas with a canvas-painted alpha texture, and useMinimapRegion exposes world-to-map coordinate conversion. Genesis adds 100% coverage and Storybook stories.

---

Available workspace deps

@suaveplan/error, @suaveplan/types, @suaveplan/events, react, @react-three/fiber, @react-three/drei, three.

---

Public API surface

interface MinimapOptions {
  worldSize: number      // world units covered
  resolution: number     // render target px
  rotation?: number      // map rotation offset
  zoom?: number
}

function MinimapProvider(props: MinimapProviderProps): JSX.Element
function MinimapRenderer(props: MinimapRendererProps): JSX.Element
// size (CSS px), border, shape: 'circle' | 'square'

function EntityMarkers(props: EntityMarkersProps): JSX.Element
// entities: TrackedEntity[], iconMap

function FogOfWarLayer(props: FogOfWarLayerProps): JSX.Element
// revealRadius, color, opacity

function useMinimapRegion(): MinimapRegionContext
// worldToMap(v3): Vector2, mapToWorld(v2): Vector3, revealAt(v3, radius)

---

File layout

gaming/gameplay/r3f-minimap/
  package.json / tsconfig.json / vitest.config.ts
  src/
    index.ts / error-codes.ts
    types/common.ts + md
    context/minimap-provider.tsx + md + test
    hooks/use-minimap-region.ts + md + test
    components/
      MinimapRenderer/ (tsx + md + test + stories + index)
      EntityMarkers/ (tsx + md + test + stories + index)
      FogOfWarLayer/ (tsx + md + test + stories + index)
  tests/integration.test.ts