EDSim Frontend Redesign: Professional Bird's-Eye Simulation View

[stedrew]

EDSim Frontend Redesign: Professional 3D Floor Plan Viewer

Overview

Replace the current Phaser/Tiled game-style renderer with a React + Three.js professional 3D simulation frontend while keeping the Django backend unchanged.

Phase 1: Map Parser and 3D Floor Plan ✅

Objective: Transform existing Tiled JSON maps into an accurate, interactive 3D floor plan rendered in Three.js with proper positioning of all beds, equipment, zone boundaries, and walls.

Components

1.1 Tiled JSON Parser (parseTiledJSON.ts)
Parses Tiled JSON and extracts:

• Zone regions via flood-fill on the Arena Layer → polygon + centroid per zone
• Equipment positions from the Object Interaction Layer
• Spawning locations mapped to zones via spawning_location_blocks.csv
• Wall segments (perimeter-only extraction) and collision masks

1.2 Three.js 3D Scene (ThreeFloorPlan.tsx)
Full 3D renderer using @react-three/fiber + @react-three/drei:

• Zone floors: PlaneGeometry per zone, textured with raster PNGs (wood for waiting room, polished concrete for clinical areas), tinted per zone category
• Walls: BoxGeometry extruded along every wall segment with real height (2.5 units), shadow casting
• Furniture: Kenney Furniture Kit 2.0 (CC0) GLTF models — beds, chairs, lounges, monitors, desks, tables — loaded via useGLTF and placed at each equipment tile
• Lighting: DirectionalLight with 2048px shadow map + warm AmbientLight
• Camera: OrbitControls — drag to orbit, scroll to zoom, right-drag to pan
• Navigation: Google Maps-style HTML overlay buttons (zoom in/out, rotate left/right, reset camera)
• Ground plane: dark surface surrounding the building

1.3 Map Viewer Page (MapViewer.tsx)

• Sidebar with map catalogue (Small ED Layout, Foothills ED Layout)
• Display toggles (zone labels, spawning slots)
• Live parsed-count stats (zones, equipment, spawning, walls, dimensions)
• URL query-string persistence

Assets

• 7 Kenney GLTF furniture models (CC0, ~110 KB total)
• 2 floor texture PNGs (wood + polished concrete)
• Pre-baked raster asset pipeline via scripts/generate-assets.mjs

Testing

• 42 vitest unit tests (parser, CSV decoders, loadMapLayout)
• 6 Playwright e2e tests (3D view rendering, map switching, URL persistence, toggles, navigation controls)

Validation

• Equipment counts match legacy Phaser view (42 small, 219 foothills)
• Zone boundaries match Arena Layer exactly
• Both seed maps render correctly in 3D
• Camera can be freely orbited, zoomed, and panned

---

Future Phases

• Phase 2: Agent rendering and replay scrubbing
• Phase 3: Real-time backend integration
• Phase 4: Metrics overlays and dashboards
• Phase 5: Production polish and optimization