66 lines
2.2 KiB
Markdown
66 lines
2.2 KiB
Markdown
# 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
|
|
|
|
```ts
|
|
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
|
|
|
|
```text
|
|
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
|
|
```
|