How skeg-16/sandbox-arena works
This is a browser-based 3D medieval battle sandbox with campaign and scenario modes. The player enters the arena, chooses a battleground or preset, selects units and formations, deploys forces, then observes or possesses a unit during combat; HUDs expose objectives, battle statistics, and health. The UI is backed by shared game state and a central engine that coordinates simulation systems. The source index documents additional rendering, terrain, fortification, and effects capabilities; links are shown only where the excerpts or index support them, so some subsystem connections remain unspecified.
Main entry points: SandboxEngine.js Sandbox Engine · App.jsx Arena App · useSandboxStore.js Game State · ScenarioPickerModal.jsx Scenario Picker
Components 28
Arena Interface
- Arena App
src/App.jsx - 3D Canvas
src/components/CanvasContainer.jsx - Battle Navigation
src/components/TopNavHeader.jsx - Unit Selection
src/components/UnitTray.jsx - Scenario Picker
src/components/ScenarioPickerModal.jsx - Preset Battles
src/components/PresetBattlesModal.jsx - Campaign Setup
src/components/CampaignModal.jsx - Environment Picker
src/components/EnvironmentPickerModal.jsx - Objective HUD
src/components/ObjectiveHUD.jsx - Possession HUD
src/components/PossessionHUD.jsx - Battle Statistics
src/components/BattleStatsOverlay.jsx
Battle Runtime
- Game State
src/store/useSandboxStore.js - Sandbox Engine
src/sandbox/SandboxEngine.js
Combat Systems
- Ragdoll Units
src/sandbox/ActiveRagdollUnit.js - Battle AI
src/sandbox/BattleAI.js - Projectiles
src/sandbox/ProjectileSystem.js - Unit Possession
src/sandbox/PossessionController.js
World Systems
- Physics World
src/sandbox/PhysicsWorld.js - 3D Scene
src/sandbox/ThreeScene.js - Terrain
src/sandbox/TerrainSystem.js - Fortifications
src/sandbox/StructureSystem.js - Objective Logic
src/sandbox/ObjectiveSystem.js
Game Content
- Battleground Definitions
src/sandbox/MapConfigs.js - Unit Definitions
src/sandbox/UnitConfig.js - Campaign Definitions
src/sandbox/CampaignConfig.js - Sound Synthesis
src/sandbox/SoundSystem.js - PBR Materials
src/sandbox/PBRMaterialSystem.js
Other components
- Player
Connections 40
- Player → Arena App: enters
src/App.jsx - Arena App → 3D Canvas: renders
src/App.jsx - Arena App → Battle Navigation: renders
src/App.jsx - Arena App → Unit Selection: renders
src/App.jsx - Arena App → Scenario Picker: renders
src/App.jsx - Arena App → Preset Battles: renders
src/App.jsx - Arena App → Campaign Setup: renders
src/App.jsx - Arena App → Environment Picker: renders
src/App.jsx - Arena App → Objective HUD: renders
src/App.jsx - Arena App → Possession HUD: renders
src/App.jsx - Arena App → Battle Statistics: renders
src/App.jsx - 3D Canvas → Sandbox Engine: uses
src/components/CanvasContainer.jsx - Battle Navigation → Sandbox Engine: uses
src/components/TopNavHeader.jsx - Unit Selection → Sandbox Engine: uses
src/components/UnitTray.jsx - Scenario Picker → Sandbox Engine: uses
src/components/ScenarioPickerModal.jsx - Preset Battles → Sandbox Engine: uses
src/components/PresetBattlesModal.jsx - Campaign Setup → Sandbox Engine: uses
src/components/CampaignModal.jsx - Environment Picker → Sandbox Engine: uses
src/components/EnvironmentPickerModal.jsx - Possession HUD → Sandbox Engine: uses
src/components/PossessionHUD.jsx - Battle Statistics → Sandbox Engine: uses
src/components/BattleStatsOverlay.jsx - 3D Canvas → Game State: reads state
src/components/CanvasContainer.jsx - Battle Navigation → Game State: reads state
src/components/TopNavHeader.jsx - Unit Selection → Game State: reads state
src/components/UnitTray.jsx - Scenario Picker → Game State: reads state
src/components/ScenarioPickerModal.jsx - Objective HUD → Game State: reads state
src/components/ObjectiveHUD.jsx - Sandbox Engine → Physics World: uses
src/sandbox/SandboxEngine.js - Sandbox Engine → 3D Scene: creates
src/sandbox/SandboxEngine.js - Sandbox Engine → Ragdoll Units: creates
src/sandbox/SandboxEngine.js - Sandbox Engine → Battle AI: uses
src/sandbox/SandboxEngine.js - Sandbox Engine → Projectiles: uses
src/sandbox/SandboxEngine.js - Sandbox Engine → Unit Possession: uses
src/sandbox/SandboxEngine.js - Sandbox Engine → Game State: reads state
src/sandbox/SandboxEngine.js - Ragdoll Units → Unit Definitions: loads definitions
src/sandbox/ActiveRagdollUnit.js - Ragdoll Units → PBR Materials: uses
src/sandbox/ActiveRagdollUnit.js - Terrain → Battleground Definitions: loads definitions
src/sandbox/TerrainSystem.js - Terrain → PBR Materials: uses
src/sandbox/TerrainSystem.js - 3D Scene → PBR Materials: uses
src/sandbox/ThreeScene.js - Scenario Picker → Battleground Definitions: loads definitions
src/components/ScenarioPickerModal.jsx - Preset Battles → Sound Synthesis: plays audio
src/components/PresetBattlesModal.jsx - Objective Logic → Battleground Definitions: loads definitions
src/sandbox/ObjectiveSystem.js