57 lines
1.6 KiB
Markdown
57 lines
1.6 KiB
Markdown
# OpenSpec Change: enterprise-gaming-r3f-number-plate
|
||
|
||
- **Change ID**: enterprise-gaming-r3f-number-plate
|
||
- **Package**: `@suaveplan/r3f-number-plate`
|
||
- **Category**: gaming/devices
|
||
- **Target path**: `gaming/devices/r3f-number-plate`
|
||
- **Status**: PROPOSED
|
||
- **Date**: 2026-04-24
|
||
|
||
---
|
||
|
||
## Summary
|
||
|
||
Deliver `@suaveplan/r3f-number-plate` on the genesis branch from scratch at enterprise quality. The package renders procedural 3D number plates in React Three Fiber: configurable plate text, regional style presets (UK, EU, US, custom), embossed text via ShapeGeometry extrusion, retro-reflective material with environment map, dirty/worn texture overlays, and bolt meshes. A `NumberPlate` component accepts text + style props and renders directly into a R3F scene without external assets. Genesis adds 100% coverage and Storybook stories.
|
||
|
||
---
|
||
|
||
## Available workspace deps
|
||
|
||
`@suaveplan/error`, `@suaveplan/types`, react, `@react-three/fiber`, `@react-three/drei`, three.
|
||
|
||
---
|
||
|
||
## Public API surface
|
||
|
||
```ts
|
||
type PlateRegion = 'uk' | 'eu' | 'us' | 'custom'
|
||
|
||
interface NumberPlateProps {
|
||
text: string
|
||
region?: PlateRegion
|
||
width?: number
|
||
height?: number
|
||
dirty?: number // 0–1 overlay intensity
|
||
worn?: number // 0–1 wear intensity
|
||
showBolts?: boolean
|
||
}
|
||
|
||
function NumberPlate(props: NumberPlateProps): JSX.Element
|
||
```
|
||
|
||
---
|
||
|
||
## File layout
|
||
|
||
```text
|
||
gaming/devices/r3f-number-plate/
|
||
package.json / tsconfig.json / vitest.config.ts
|
||
src/
|
||
index.ts / error-codes.ts
|
||
types/common.ts + md
|
||
styles/ (uk.ts, eu.ts, us.ts + md)
|
||
components/
|
||
NumberPlate/ (tsx + md + test + stories + index)
|
||
tests/integration.test.ts
|
||
```
|