Infant Resuscitation Simulator

A state-based neonatal resuscitation simulator utilizing Next.js (App Router), React Three Fiber (WebGL), Zustand for global state management, and Framer Motion for coordinate-based layout animations.

Overview

A WebGL-accelerated application modeling the sequence of interventions in neonatal resuscitation. The application simulates a delivery room scenario where a neonate exhibits respiratory distress and a patent ductus arteriosus (PDA). The simulator implements a deterministic finite state machine (FSM) to map user inputs to physiological state changes, enforcing procedural compliance with resuscitation protocols.

System Capabilities

• WebGL Rendering Engine
  Utilizes React Three Fiber and Three.js to render a spatial environment. Camera configurations rely on predefined Cartesian coordinates and target vectors (e.g., [-3.398, 3.634, 4.576]) animated via spherical linear interpolation (slerp) for phase-specific viewpoints.
  

• Global State Management
  Employs a unified Zustand store (gameStore.ts) to manage simulation variables including the GamePhase enum, real-time vital metrics, countdown timers, and chat dialogue histories.
  

• Physiological Parameter Tracking
  Vitals (SpO2, Heart Rate, Systemic Pressure, Pulmonary Pressure) are mapped directly to the current game phase and tweened asynchronously between states to reflect the physiological response to interventions.
  

• Diagrammatic Visualization System
  Implements a 2D interactive circulatory schematic utilizing framer-motion's AnimatePresence. Diagram states transition dynamically with masked layers, scaling, and precise panning transformations corresponding to anatomical regions of interest.
  

• Simulated LLM Dialogue Interface
  A structured chat module orchestrates scenario progression and user hinting, utilizing programmatic latency injection to emulate inference delays of language models.
  

• Metric-Based Evaluation
  Enforces time-bound constraints on user actions, dynamically adjusting score variables and computing a final performance rank against predefined thresholds.
  

System Architecture

The simulation operates via a centralized execution loop governed by GameFlowEngine.tsx, which subscribes to the Zustand state and dispatches phase transitions based on user validation.

graph TD
    Start[START_SCREEN] --> Info[PATIENT_INFO_MODAL]
    Info --> ClampQ[QUESTION_CLAMP_CORD]
    ClampQ --> ClampA[ACTION_CLAMP_CORD]
    ClampA --> Trans1[STATE_TRANSITION_1]
    Trans1 --> VentQ[QUESTION_VENTILATION]
    VentQ --> VentA[VENTILATION_ACTIVE]
    VentA --> PostVent[POST_VENTILATION]
    PostVent --> SPO2[SPO2_WARNING]
    SPO2 --> PDAQ[QUESTION_PDA_DRUG]
    PDAQ --> DrugSel[DRUG_SELECTION]
    DrugSel --> Dose[DOSAGE_INPUT]
    Dose --> Trans2[STATE_TRANSITION_2]
    Trans2 --> Success[SUCCESS]
    Success --> Score[SCORECARD]
    
    ClampQ -.->|Timeout Exceeded| Fail[FAILURE]
    VentQ -.->|Timeout Exceeded| Fail
    PDAQ -.->|Timeout Exceeded| Fail

Loading

Core Modules

• GameFlowEngine.tsx
  The primary controller component. Subscribes to gameStore state changes, orchestrating asynchronous dialogue dispatch, timer initialization, and threshold validations.
  

• gameStore.ts
  The unified state container. Encapsulates mutable state branches: Phase, Timing, Scoring, Vitals, Diagram State, Camera Coordinates, and Chat payload.
  

• GameScene.tsx
  The declarative Three.js component tree. Mounts GLTF/GLB models with specified transform configurations (position, rotation, scale) and handles camera tweens via useFrame.
  

• DiagramPanel.tsx
  Controls the 2D SVG/PNG composite layers of the circulatory system. Modulates scale and transformOrigin via Framer Motion to visualize localized physiological state changes.
  

• ChatPanel.tsx
  Renders the dialogue interface. Parses rich-text markdown variants and manages internal state for typing indicators to prevent asynchronous race conditions during rapid state changes.
  

• VentilationUI.tsx & Modals
  Provide specific parameter inputs (e.g., dosage calculation mg/kg, PPV rhythm timing) and pass validation events back to the gameStore.
  

Setup and Execution

Requirements

• Node.js (v18+)
• Package manager (npm, yarn, pnpm, or bun)

Initialization

1. Clone repository:

   git clone <repository-url>
   cd baby-resuscitation-sim

2. Install dependencies:

   npm install

3. Start local development server:

   npm run dev

4. Verify deployment: Navigate to http://localhost:3000 to interact with the application.

Production Build

Generate and execute the optimized Next.js build:

npm run build
npm run start

Tech Stack

• Core: Next.js 15+ (App Router), React 19, TypeScript
• State & Data Flow: Zustand
• Graphics & Rendering: React Three Fiber, Drei, Three.js
• Animation & Transitions: Framer Motion
• Styling: Tailwind CSS v4, PostCSS
• Tooling: ESLint