[V0_FILE]typescriptreact:file="components/diagnosis-panel.tsx" isMerged="true" "use client" import { useState } from "react" import { useGame } from "@/components/game-context" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Progress } from "@/components/ui/progress" import type { Patient } from "@/types/game-types" import { Search, CheckCircle } from "lucide-react" interface DiagnosisPanelProps { patient: Patient } export function DiagnosisPanel({ patient }: DiagnosisPanelProps) { const { dispatch } = useGame() const [selectedTests, setSelectedTests] = useState([]) const [selectedDiagnosis, setSelectedDiagnosis] = useState("") const [testResults, setTestResults] = useState>({}) const [diagnosisSubmitted, setDiagnosisSubmitted] = useState(false) const availableTests = [ { id: "blood-work", name: "Complete Blood Count", cost: 10, time: 30 }, { id: "ecg", name: "Electrocardiogram", cost: 15, time: 10 }, { id: "xray", name: "Chest X-Ray", cost: 20, time: 20 }, { id: "ct-scan", name: "CT Scan", cost: 50, time: 45 }, { id: "mri", name: "MRI", cost: 80, time: 60 }, { id: "ultrasound", name: "Ultrasound", cost: 25, time: 15 }, ] const possibleDiagnoses = [ "Myocardial Infarction", "Pneumonia", "Appendicitis", "Stroke", "Pulmonary Embolism", "Gastroenteritis", "Anxiety Attack", "Dehydration", ] const orderTest = (testId: string) => { if (selectedTests.includes(testId)) return setSelectedTests([...selectedTests, testId]) // Simulate test results setTimeout( () => { const mockResults = { "blood-work": { wbc: "12,000", rbc: "4.5M", platelets: "250K" }, ecg: { rhythm: "Normal Sinus", rate: patient.vitals.heartRate }, xray: { findings: "Clear lung fields, normal heart size" }, "ct-scan": { findings: "No acute abnormalities detected" }, mri: { findings: "Normal brain structure" }, ultrasound: { findings: "Normal organ structure" }, } setTestResults((prev) => ({ ...prev, [testId]: mockResults[testId as keyof typeof mockResults], })) }, availableTests.find((t) => t.id === testId)?.time * 100 || 1000, ) } const submitDiagnosis = () => { const correctDiagnosis = patient.condition.name const accuracy = selectedDiagnosis === correctDiagnosis ? 100 : Math.max( 0, 100 - Math.abs(possibleDiagnoses.indexOf(selectedDiagnosis) - possibleDiagnoses.indexOf(correctDiagnosis)) * 20, ) dispatch({ type: "TREAT_PATIENT", payload: { patientId: patient.id, accuracy, treatment: selectedDiagnosis, }, }) setDiagnosisSubmitted(true) } return (

Diagnostic Tests

{availableTests.map((test) => (

{test.name}

${test.cost}

{test.time} minutes

{selectedTests.includes(test.id) ? ( testResults[test.id] ? (

Complete

{Object.entries(testResults[test.id]).map(([key, value]) => (

{key}: {value}

))}

) : (

Processing...

) ) : ( )} ))}

Differential Diagnosis

{possibleDiagnoses.map((diagnosis) => (

{diagnosis}

))}

) } [V0_FILE]typescriptreact:file="components/treatment-panel.tsx" isMerged="true" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import type { Patient } from "@/types/game-types" import { Pill, Syringe, Zap, Scissors, Heart } from "lucide-react" interface TreatmentPanelProps { patient: Patient } export function TreatmentPanel({ patient }: TreatmentPanelProps) { const [selectedTreatments, setSelectedTreatments] = useState([]) const [procedureInProgress, setProcedureInProgress] = useState(null) const [procedureProgress, setProcedureProgress] = useState(0) const availableTreatments = [ { id: "medication", name: "Administer Medication", icon: Pill, description: "Pain relief and symptom management", duration: 5, effectiveness: 70, }, { id: "iv-fluids", name: "IV Fluids", icon: Syringe, description: "Hydration and medication delivery", duration: 10, effectiveness: 60, }, { id: "oxygen", name: "Oxygen Therapy", icon: Heart, description: "Improve oxygen saturation", duration: 15, effectiveness: 80, }, { id: "defibrillation", name: "Defibrillation", icon: Zap, description: "Emergency cardiac intervention", duration: 2, effectiveness: 95, }, { id: "surgery", name: "Emergency Surgery", icon: Scissors, description: "Surgical intervention required", duration: 60, effectiveness: 90, }, ] const startProcedure = (treatmentId: string) => { const treatment = availableTreatments.find((t) => t.id === treatmentId) if (!treatment) return setProcedureInProgress(treatmentId) setProcedureProgress(0) const interval = setInterval(() => { setProcedureProgress((prev) => { if (prev >= 100) { clearInterval(interval) setProcedureInProgress(null) setSelectedTreatments((prev) => [...prev, treatmentId]) return 100 } return prev + 100 / (treatment.duration * 10) }) }, 100) } const getTreatmentStatus = (treatmentId: string) => { if (procedureInProgress === treatmentId) return "in-progress" if (selectedTreatments.includes(treatmentId)) return "completed" return "available" } return (

Treatment Options

{availableTreatments.map((treatment) => { const Icon = treatment.icon const status = getTreatmentStatus(treatment.id) return (

{treatment.name}

{treatment.description}

Duration: {treatment.duration}min Effectiveness: {treatment.effectiveness}%

{status === "available" && ( )} {status === "in-progress" && (

In Progress

)} {status === "completed" && ( Completed )}

) })}

Treatment Summary

Treatments Applied: {selectedTreatments.length}

Overall Effectiveness: {selectedTreatments.length > 0 ? Math.round( selectedTreatments.reduce((acc, id) => { const treatment = availableTreatments.find((t) => t.id === id) return acc + (treatment?.effectiveness || 0) }, 0) / selectedTreatments.length, ) : 0} %

Patient Status: 0 ? "default" : "secondary"}> {selectedTreatments.length > 0 ? "Stable" : "Awaiting Treatment"}

) } [V0_FILE]typescriptreact:file="components/patient-history.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import type { Patient } from "@/types/game-types" import { FileText, AlertCircle, Pill, Calendar } from "lucide-react" interface PatientHistoryProps { patient: Patient } export function PatientHistory({ patient }: PatientHistoryProps) { return (

Medical History

Allergies

{patient.medicalHistory.allergies.length > 0 ? ( patient.medicalHistory.allergies.map((allergy, index) => ( {allergy} )) ) : ( No known allergies )}

Current Medications

{patient.medicalHistory.medications.length > 0 ? ( patient.medicalHistory.medications.map((medication, index) => ( {medication} )) ) : ( No current medications )}

Previous Conditions

{patient.medicalHistory.previousConditions.length > 0 ? ( patient.medicalHistory.previousConditions.map((condition, index) => (

{condition} Resolved

)) ) : (

No significant medical history

)}

Social History

Smoking: Non-smoker

Alcohol: Occasional

Exercise: Regular

Occupation: Office worker

) } [V0_FILE]typescriptreact:file="components/tutorial-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ChevronLeft, ChevronRight, Play } from "lucide-react" interface TutorialModalProps { isOpen: boolean onClose: () => void } export function TutorialModal({ isOpen, onClose }: TutorialModalProps) { const [currentStep, setCurrentStep] = useState(0) const tutorialSteps = [ { title: "Welcome to ER Simulation", content: "You are an emergency room doctor responsible for treating patients with various medical conditions. Your goal is to diagnose and treat patients efficiently while managing limited resources.", }, { title: "Patient Queue", content: "Patients arrive randomly with different conditions and severity levels. Critical patients need immediate attention, while stable patients can wait longer. Click on a patient to select them for treatment.", }, { title: "Patient Examination", content: "Once you select a patient, you can examine their vital signs, review their medical history, and assess their symptoms. Use this information to make informed decisions.", }, { title: "Diagnostic Tests", content: "Order appropriate diagnostic tests to confirm your diagnosis. Each test costs resources and takes time, so choose wisely. More expensive tests provide more detailed information.", }, { title: "Treatment Options", content: "Based on your diagnosis, select appropriate treatments. Different treatments have varying effectiveness and duration. Monitor patient response and adjust as needed.", }, { title: "Resource Management", content: "Keep track of available beds, nursing staff, equipment, and medications. Running out of resources will impact your ability to treat patients effectively.", }, { title: "Scoring System", content: "Your performance is evaluated based on patient survival rate, diagnostic accuracy, treatment efficiency, and resource management. Strive for the best outcomes!", }, ] const nextStep = () => { if (currentStep < tutorialSteps.length - 1) { setCurrentStep(currentStep + 1) } } const prevStep = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1) } } return ( ) } [V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" isMerged="true" "use client" import * as React from "react" import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" import { cn } from "@/lib/utils" const ScrollArea = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName const ScrollBar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = "vertical", ...props }, ref) => ( )) ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName export { ScrollArea, ScrollBar } [V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isMerged="true" "use client" import * as React from "react" import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" import { Circle } from "lucide-react" import { cn } from "@/lib/utils" const RadioGroup = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { return }) RadioGroup.displayName = RadioGroupPrimitive.Root.displayName const RadioGroupItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { return ( ) }) RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName export { RadioGroup, RadioGroupItem } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="components/audio-manager.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import { useGame } from "@/components/game-context" export function AudioManager() { const { state } = useGame() const audioContextRef = useRef(null) const oscillatorRef = useRef(null) const gainNodeRef = useRef(null) const currentMoodRef = useRef<"calm" | "tense" | "critical">("calm") useEffect(() => { // Initialize Web Audio API const initAudio = async () => { try { audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)() gainNodeRef.current = audioContextRef.current.createGain() gainNodeRef.current.connect(audioContextRef.current.destination) gainNodeRef.current.gain.setValueAtTime(0.1, audioContextRef.current.currentTime) } catch (error) { console.log("Audio not supported") } } initAudio() return () => { if (oscillatorRef.current) { oscillatorRef.current.stop() } if (audioContextRef.current) { audioContextRef.current.close() } } }, []) useEffect(() => { if (!audioContextRef.current || !gainNodeRef.current) return const activePatients = state.patients.filter((p) => p.status !== "treated") const criticalPatients = activePatients.filter((p) => p.condition.severity === "critical").length const totalPatients = activePatients.length let newMood: "calm" | "tense" | "critical" = "calm" if (criticalPatients > 0) { newMood = "critical" } else if (totalPatients >= 4) { newMood = "tense" } else { newMood = "calm" } // Only change music if mood actually changed if (newMood !== currentMoodRef.current) { currentMoodRef.current = newMood playAmbientMusic(newMood) } }, [state.patients]) const playAmbientMusic = (mood: "calm" | "tense" | "critical") => { if (!audioContextRef.current || !gainNodeRef.current) return // Stop current oscillator if (oscillatorRef.current) { oscillatorRef.current.stop() } // Create new oscillator oscillatorRef.current = audioContextRef.current.createOscillator() const filterNode = audioContextRef.current.createBiquadFilter() oscillatorRef.current.connect(filterNode) filterNode.connect(gainNodeRef.current) // Configure based on mood switch (mood) { case "calm": oscillatorRef.current.frequency.setValueAtTime(220, audioContextRef.current.currentTime) // A3 oscillatorRef.current.type = "sine" filterNode.frequency.setValueAtTime(800, audioContextRef.current.currentTime) gainNodeRef.current.gain.setValueAtTime(0.05, audioContextRef.current.currentTime) // Gentle frequency modulation for calm effect const lfo1 = audioContextRef.current.createOscillator() const lfoGain1 = audioContextRef.current.createGain() lfo1.frequency.setValueAtTime(0.5, audioContextRef.current.currentTime) lfoGain1.gain.setValueAtTime(5, audioContextRef.current.currentTime) lfo1.connect(lfoGain1) lfoGain1.connect(oscillatorRef.current.frequency) lfo1.start() break case "tense": oscillatorRef.current.frequency.setValueAtTime(330, audioContextRef.current.currentTime) // E4 oscillatorRef.current.type = "triangle" filterNode.frequency.setValueAtTime(1200, audioContextRef.current.currentTime) gainNodeRef.current.gain.setValueAtTime(0.08, audioContextRef.current.currentTime) // Faster modulation for tension const lfo2 = audioContextRef.current.createOscillator() const lfoGain2 = audioContextRef.current.createGain() lfo2.frequency.setValueAtTime(1.2, audioContextRef.current.currentTime) lfoGain2.gain.setValueAtTime(8, audioContextRef.current.currentTime) lfo2.connect(lfoGain2) lfoGain2.connect(oscillatorRef.current.frequency) lfo2.start() break case "critical": oscillatorRef.current.frequency.setValueAtTime(440, audioContextRef.current.currentTime) // A4 oscillatorRef.current.type = "sawtooth" filterNode.frequency.setValueAtTime(2000, audioContextRef.current.currentTime) gainNodeRef.current.gain.setValueAtTime(0.12, audioContextRef.current.currentTime) // Rapid, irregular modulation for critical situations const lfo3 = audioContextRef.current.createOscillator() const lfoGain3 = audioContextRef.current.createGain() lfo3.frequency.setValueAtTime(2.5, audioContextRef.current.currentTime) lfoGain3.gain.setValueAtTime(15, audioContextRef.current.currentTime) lfo3.connect(lfoGain3) lfoGain3.connect(oscillatorRef.current.frequency) lfo3.start() break } oscillatorRef.current.start() } return null // This component doesn't render anything } [V0_FILE]typescriptreact:file="components/audio-controls.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Slider } from "@/components/ui/slider" import { Volume2, VolumeX } from "lucide-react" export function AudioControls() { const [volume, setVolume] = useState([50]) const [isMuted, setIsMuted] = useState(false) const toggleMute = () => { setIsMuted(!isMuted) } return (

{isMuted ? 0 : volume[0]}%

) } [V0_FILE]typescriptreact:file="components/ui/slider.tsx" isMerged="true" "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" const Slider = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } [V0_FILE]typescriptreact:file="components/resource-panel.tsx" isEdit="true" isMerged="true" "use client" import { useGame } from "@/components/game-context" import { Progress } from "@/components/ui/progress" import { Bed, Users, Stethoscope, Pill } from "lucide-react" import { AudioControls } from "@/components/audio-controls" export function ResourcePanel() { const { state } = useGame() const resources = [ { name: "Beds", current: state.resources.beds.current, max: state.resources.beds.max, icon: Bed, emoji: "🛏️", color: "from-blue-400 to-blue-600", }, { name: "Nurses", current: state.resources.nurses.current, max: state.resources.nurses.max, icon: Users, emoji: "👩‍⚕️", color: "from-green-400 to-green-600", }, { name: "Equipment", current: state.resources.equipment.current, max: state.resources.equipment.max, icon: Stethoscope, emoji: "🩺", color: "from-purple-400 to-purple-600", }, { name: "Meds", current: state.resources.medications.current, max: state.resources.medications.max, icon: Pill, emoji: "💊", color: "from-pink-400 to-pink-600", }, ] return (

Resources 📊

{resources.map((resource, index) => { const percentage = (resource.current / resource.max) * 100 return (

{resource.emoji}

{resource.name}

{resource.current}/{resource.max}

{Math.round(percentage)}% available

) })}

🔊 Audio Controls

) } [V0_FILE]typescriptreact:file="components/patient-queue.tsx" isEdit="true" isMerged="true" "use client" import { useGame } from "@/components/game-context" import { User, AlertTriangle, Heart, Activity } from "lucide-react" import { Progress } from "@/components/ui/progress" export function PatientQueue() { const { state, dispatch } = useGame() const activePatients = state.patients.filter((p) => p.status !== "treated" && p.status !== "deceased") const sortedPatients = activePatients.sort((a, b) => { const severityOrder = { critical: 3, urgent: 2, stable: 1 } return severityOrder[b.condition.severity] - severityOrder[a.condition.severity] }) const getTimerColor = (timeRemaining: number, maxTime: number) => { const percentage = (timeRemaining / maxTime) * 100 if (percentage <= 20) return "timer-critical" if (percentage <= 50) return "timer-warning" return "timer-safe" } const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins}:${secs.toString().padStart(2, "0")}` } const getSeverityColor = (severity: string) => { switch (severity) { case "critical": return "bg-red-500" case "urgent": return "bg-orange-500" case "stable": return "bg-green-500" default: return "bg-gray-500" } } const getSeverityIcon = (severity: string) => { switch (severity) { case "critical": return case "urgent": return case "stable": return default: return } } const getPatientEmoji = (condition: string, gender: string) => { const emojis = { "Heart Attack": "💔", Pneumonia: "🫁", Appendicitis: "🤢", Stroke: "🧠", "Food Poisoning": "🤮", "Panic Attack": "😰", } return emojis[condition as keyof typeof emojis] || "🤒" } return (

Patient Queue ({activePatients.length})

{sortedPatients.map((patient) => (

dispatch({ type: "SELECT_PATIENT", payload: patient })} >

{getPatientEmoji(patient.condition.name, patient.demographics.gender)}

{patient.name}

{patient.demographics.age}y, {patient.demographics.gender}

{getSeverityIcon(patient.condition.severity)} {patient.condition.severity}

{patient.condition.name}

{patient.condition.description}

{/* Timer */}

Time Remaining {formatTime(patient.timeRemaining)}

BP: {patient.vitals.bloodPressure}

HR: {patient.vitals.heartRate}

{patient.vitals.temperature}°F

))} {activePatients.length === 0 && (

😴

All Clear!

No patients waiting. Well done! 🎉

)}

) } [V0_FILE]typescriptreact:file="components/simple-treatment-panel.tsx" isMerged="true" "use client" import { useState } from "react" import { useGame } from "@/components/game-context" import type { Patient } from "@/types/game-types" interface SimpleTreatmentPanelProps { patient: Patient } export function SimpleTreatmentPanel({ patient }: SimpleTreatmentPanelProps) { const { dispatch } = useGame() const [selectedTreatment, setSelectedTreatment] = useState("") const [treated, setTreated] = useState(false) const treatmentOptions = [ { id: "emergency-cardiac-care", name: "Emergency Cardiac Care", description: "For heart attacks and cardiac emergencies", emoji: "❤️‍🩹", color: "from-red-400 to-red-500", }, { id: "antibiotics-oxygen", name: "Antibiotics & Oxygen", description: "For infections and breathing problems", emoji: "💊", color: "from-blue-400 to-blue-500", }, { id: "emergency-surgery", name: "Emergency Surgery", description: "For appendicitis and surgical emergencies", emoji: "🏥", color: "from-purple-400 to-purple-500", }, { id: "clot-busting-medication", name: "Clot-busting Medication", description: "For strokes and blood clots", emoji: "🧠", color: "from-orange-400 to-orange-500", }, { id: "iv-fluids-rest", name: "IV Fluids & Rest", description: "For dehydration and mild conditions", emoji: "💧", color: "from-cyan-400 to-cyan-500", }, { id: "calming-medication", name: "Calming Medication", description: "For anxiety and panic attacks", emoji: "😌", color: "from-green-400 to-green-500", }, ] const handleTreatment = () => { if (!selectedTreatment) return dispatch({ type: "TREAT_PATIENT", payload: { patientId: patient.id, treatment: selectedTreatment, }, }) setTreated(true) } if (treated) { return (

✅

Treatment Complete!

Patient has been treated and moved to recovery.

) } return (

🩺 Choose Treatment for {patient.name}

Patient Condition:

{patient.condition.name}

{patient.condition.description}

{treatmentOptions.map((treatment) => (

setSelectedTreatment(treatment.name)} >

{treatment.emoji}

{treatment.name}

{treatment.description}

{selectedTreatment === treatment.name &&

✓

}

))}

{selectedTreatment && (

💡 Hint: The correct treatment for {patient.condition.name} is "{patient.condition.correctTreatment}"

)}

) } [V0_FILE]typescriptreact:file="components/treatment-room.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { useGame } from "@/components/game-context" import { Progress } from "@/components/ui/progress" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { SimpleTreatmentPanel } from "@/components/simple-treatment-panel" import { PatientHistory } from "@/components/patient-history" import { Activity, Heart, Thermometer, Droplets } from "lucide-react" export function TreatmentRoom() { const { state } = useGame() const [activeTab, setActiveTab] = useState("examination") if (!state.activePatient) { return (

👩‍⚕️

Ready to Help!

Select a patient from the queue to begin treatment

👈

) } const patient = state.activePatient const vitalSigns = [ { label: "Blood Pressure", value: patient.vitals.bloodPressure, icon: Activity, normal: "120/80", color: "from-red-400 to-red-500", }, { label: "Heart Rate", value: `${patient.vitals.heartRate} bpm`, icon: Heart, normal: "60-100", color: "from-pink-400 to-pink-500", }, { label: "Temperature", value: `${patient.vitals.temperature}°F`, icon: Thermometer, normal: "98.6", color: "from-orange-400 to-orange-500", }, { label: "Oxygen Sat", value: `${patient.vitals.oxygenSaturation}%`, icon: Droplets, normal: "95-100", color: "from-blue-400 to-blue-500", }, ] const getPatientEmoji = (condition: string) => { const emojis = { "Heart Attack": "💔", Pneumonia: "🫁", Appendicitis: "🤢", Stroke: "🧠", "Food Poisoning": "🤮", "Panic Attack": "😰", } return emojis[condition as keyof typeof emojis] || "🤒" } const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins}:${secs.toString().padStart(2, "0")}` } return (

{getPatientEmoji(patient.condition.name)}

{patient.name}

{patient.demographics.age} year old {patient.demographics.gender}

{patient.condition.severity.toUpperCase()}

Time: {formatTime(patient.timeRemaining)}

{vitalSigns.map((vital, index) => { const Icon = vital.icon return (

{vital.label}

{vital.value}

Normal: {vital.normal}

) })}

🔍 Examine 📋 History 💉 Treat

🔍 Patient Examination

💬 What's Wrong?

{patient.condition.name}

{patient.condition.description}

🎯 Symptoms

{patient.condition.symptoms.map((symptom, index) => (

{symptom}

))}

😣 Pain Level

{patient.condition.painLevel}/10

) } [V0_FILE]typescriptreact:file="components/triage-actions.tsx" isMerged="true" "use client" import { useState } from "react" import { useGame } from "@/components/game-context" import type { Patient } from "@/types/game-types" import { generateVitalSigns } from "@/lib/patient-generator" interface TriageActionsProps { patient: Patient } export function TriageActions({ patient }: TriageActionsProps) { const { dispatch } = useGame() const [selectedAction, setSelectedAction] = useState("") const triageActions = [ { id: "send-to-nurse", name: "Send to Nurse for Vitals", description: "Get baseline vital signs and basic assessment", emoji: "👩‍⚕️", color: "from-blue-400 to-blue-500", timeRequired: "2-3 minutes", }, { id: "order-ecg", name: "Order ECG", description: "Electrocardiogram to check heart rhythm", emoji: "📈", color: "from-red-400 to-red-500", timeRequired: "5 minutes", }, { id: "order-xray", name: "Order Chest X-Ray", description: "Imaging to check lungs and heart", emoji: "🩻", color: "from-purple-400 to-purple-500", timeRequired: "10 minutes", }, { id: "order-ct", name: "Order CT Scan", description: "Detailed imaging for complex cases", emoji: "🔍", color: "from-orange-400 to-orange-500", timeRequired: "15 minutes", }, { id: "order-bloodwork", name: "Order Blood Work", description: "Laboratory tests for infection, cardiac markers", emoji: "🩸", color: "from-green-400 to-green-500", timeRequired: "20 minutes", }, ] const handleAction = (actionId: string) => { const action = triageActions.find((a) => a.id === actionId) if (!action) return // Check if this is a correct decision const isCorrect = patient.condition.correctInitialActions.some((correctAction) => correctAction.toLowerCase().includes(actionId.replace("order-", "").replace("send-to-", "").replace("-", "")), ) // Play feedback sound if ((window as any).playFeedbackSound) { ;(window as any).playFeedbackSound(isCorrect) } // Update score dispatch({ type: "UPDATE_SCORE", payload: { points: isCorrect ? 50 : -25, correct: isCorrect, }, }) // Perform the action dispatch({ type: "PERFORM_ACTION", payload: { patientId: patient.id, action: action.name, }, }) // If sending to nurse, generate vitals if (actionId === "send-to-nurse") { const vitals = generateVitalSigns(patient.condition) dispatch({ type: "ADD_ASSESSMENT_RESULT", payload: { patientId: patient.id, result: { type: "vitals", results: vitals, timestamp: Date.now(), }, }, }) } } return (

🩺 Initial Assessment - {patient.name}

Patient Reports:

{patient.presentingSymptoms.map((symptom, index) => (

{symptom}

))}

What is your first action?

{triageActions.map((action) => (

setSelectedAction(action.id)} >

{action.emoji}

{action.name}

{action.description}

⏱️ {action.timeRequired}

{selectedAction === action.id &&

✓

}

))}

💡 Think carefully: What would help you gather the most important information first?

) } [V0_FILE]typescriptreact:file="components/patient-details.tsx" isEdit="true" isMerged="true" "use client" import { useGame } from "@/components/game-context" import { DirectActionPanel } from "@/components/direct-action-panel" import { Progress } from "@/components/ui/progress" import { Activity, Heart, Thermometer, Droplets, Clock } from "lucide-react" export function PatientDetails() { const { state } = useGame() if (!state.activePatient) { return (

👩‍⚕️

Select a Patient

Choose a patient from the queue above to begin assessment

☝️

) } const patient = state.activePatient const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins}:${secs.toString().padStart(2, "0")}` } const getTimerColor = (timeRemaining: number, maxTime: number) => { const percentage = (timeRemaining / maxTime) * 100 if (percentage <= 20) return "bg-red-500" if (percentage <= 50) return "bg-orange-500" return "bg-green-500" } return (

{/* Patient Header */}

🤒

{patient.name}

{patient.demographics.age} year old {patient.demographics.gender}

{formatTime(patient.timeRemaining)}

{/* Vital Signs (if available) */} {patient.vitals && (

📊 Vital Signs

{patient.vitals.bloodPressure}

{patient.vitals.heartRate} bpm

Temp

{patient.vitals.temperature}°F

O2 Sat

{patient.vitals.oxygenSaturation}%

)} {/* Direct Action Panel */} {patient.status === "waiting" && }

) } [V0_FILE]typescriptreact:file="components/game-stats.tsx" isEdit="true" isMerged="true" "use client" import { useGame } from "@/components/game-context" import { CheckCircle, XCircle } from "lucide-react" export function GameStats() { const { state } = useGame() const accuracy = state.score.correctDecisions + state.score.incorrectDecisions > 0 ? Math.round( (state.score.correctDecisions / (state.score.correctDecisions + state.score.incorrectDecisions)) * 100, ) : 0 return (

Correct

{state.score.correctDecisions}

Incorrect

{state.score.incorrectDecisions}

Accuracy

{accuracy}%

Total Score

{state.score.points} pts

) } [V0_FILE]typescriptreact:file="components/patient-header-queue.tsx" isEdit="true" isMerged="true" "use client" import { useGame } from "@/components/game-context" import { Progress } from "@/components/ui/progress" import { ChevronLeft, ChevronRight } from "lucide-react" import { useRef, useEffect } from "react" export function PatientHeaderQueue() { const { state, dispatch } = useGame() const scrollRef = useRef(null) const activePatients = state.patients.filter((p) => p.status !== "treated" && p.status !== "deceased") const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins}:${secs.toString().padStart(2, "0")}` } const getTimerColor = (timeRemaining: number, maxTime: number) => { const percentage = (timeRemaining / maxTime) * 100 if (percentage <= 20) return "bg-red-500" if (percentage <= 50) return "bg-orange-500" return "bg-green-500" } const getPatientEmoji = (symptoms: string[]) => { if (symptoms.some((s) => s.includes("chest") || s.includes("heart"))) return "💔" if (symptoms.some((s) => s.includes("cough") || s.includes("breathing"))) return "🫁" if (symptoms.some((s) => s.includes("abdominal") || s.includes("stomach"))) return "🤢" if (symptoms.some((s) => s.includes("weakness") || s.includes("speech"))) return "🧠" if (symptoms.some((s) => s.includes("nausea") || s.includes("vomiting"))) return "🤮" return "🤒" } const getGenderIcon = (gender: string) => { return gender === "Male" ? "👨" : "👩" } const scroll = (direction: "left" | "right") => { if (scrollRef.current) { const scrollAmount = 200 scrollRef.current.scrollBy({ left: direction === "left" ? -scrollAmount : scrollAmount, behavior: "smooth", }) } } const handlePatientClick = (patient: any) => { dispatch({ type: "SELECT_PATIENT", payload: patient }) } // Handle patient removal animations useEffect(() => { Object.entries(state.patientAnimations).forEach(([patientId, animation]) => { if (animation.isRemoving) { // After animation completes, actually remove the patient setTimeout(() => { dispatch({ type: "PATIENT_REMOVED", payload: patientId }) }, 500) // Animation duration } }) }, [state.patientAnimations, dispatch]) if (activePatients.length === 0) { return (

😴 No patients waiting

) } return (

Patients: {activePatients.length}

{activePatients.map((patient) => { const animation = state.patientAnimations[patient.id] const isRemoving = animation?.isRemoving || false const isCorrect = animation?.isCorrect const isDead = animation?.isDead let animationClass = "" if (isRemoving) { if (isDead) { animationClass = "animate-patient-death" } else if (isCorrect) { animationClass = "animate-patient-correct" } else { animationClass = "animate-patient-incorrect" } } return (

handlePatientClick(patient)} >

{getPatientEmoji(patient.presentingSymptoms)}

{getGenderIcon(patient.demographics.gender)}

{patient.demographics.age}y

{patient.presentingSymptoms[0]}

{formatTime(patient.timeRemaining)}

) })}

) } [V0_FILE]typescriptreact:file="components/enhanced-audio-manager.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" import { useGame } from "@/components/game-context" export function EnhancedAudioManager() { const { state } = useGame() const audioContextRef = useRef(null) const heartbeatGainRef = useRef(null) const feedbackGainRef = useRef(null) const currentHeartRateRef = useRef(60) const heartbeatIntervalRef = useRef(null) useEffect(() => { const initAudio = async () => { try { audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)() heartbeatGainRef.current = audioContextRef.current.createGain() feedbackGainRef.current = audioContextRef.current.createGain() heartbeatGainRef.current.connect(audioContextRef.current.destination) feedbackGainRef.current.connect(audioContextRef.current.destination) heartbeatGainRef.current.gain.setValueAtTime(0.1, audioContextRef.current.currentTime) feedbackGainRef.current.gain.setValueAtTime(0.3, audioContextRef.current.currentTime) startHeartbeat() } catch (error) { console.log("Audio not supported") } } initAudio() return () => { if (heartbeatIntervalRef.current) { clearInterval(heartbeatIntervalRef.current) } if (audioContextRef.current) { audioContextRef.current.close() } } }, []) useEffect(() => { if (!audioContextRef.current) return const activePatients = state.patients.filter((p) => p.status !== "treated" && p.status !== "deceased") const totalPatients = activePatients.length // Calculate target heart rate based on queue size let targetHeartRate = 45 // Very slow when empty if (totalPatients === 0) { targetHeartRate = 45 // Very slow heartbeat when no patients } else if (totalPatients <= 2) { targetHeartRate = 60 // Normal when few patients } else if (totalPatients <= 4) { targetHeartRate = 80 // Elevated when busy } else { targetHeartRate = 100 + totalPatients * 5 // Fast when overwhelmed } adjustHeartRate(targetHeartRate) }, [state.patients]) // Pause/resume audio based on game state useEffect(() => { if (!audioContextRef.current) return if (state.isPlaying) { if (audioContextRef.current.state === "suspended") { audioContextRef.current.resume() } if (!heartbeatIntervalRef.current) { startHeartbeat() } } else { if (heartbeatIntervalRef.current) { clearInterval(heartbeatIntervalRef.current) heartbeatIntervalRef.current = null } if (audioContextRef.current.state === "running") { audioContextRef.current.suspend() } } }, [state.isPlaying]) const startHeartbeat = () => { if (!audioContextRef.current || !heartbeatGainRef.current) return const playHeartbeatSound = () => { if (!audioContextRef.current || !heartbeatGainRef.current || !state.isPlaying) return // Create heartbeat sound (lub-dub) const beat1 = audioContextRef.current.createOscillator() const beat2 = audioContextRef.current.createOscillator() const gain1 = audioContextRef.current.createGain() const gain2 = audioContextRef.current.createGain() beat1.connect(gain1) beat2.connect(gain2) gain1.connect(heartbeatGainRef.current) gain2.connect(heartbeatGainRef.current) // First beat (lub) beat1.frequency.setValueAtTime(80, audioContextRef.current.currentTime) beat1.type = "sine" gain1.gain.setValueAtTime(0, audioContextRef.current.currentTime) gain1.gain.linearRampToValueAtTime(0.3, audioContextRef.current.currentTime + 0.05) gain1.gain.linearRampToValueAtTime(0, audioContextRef.current.currentTime + 0.15) // Second beat (dub) beat2.frequency.setValueAtTime(60, audioContextRef.current.currentTime + 0.2) beat2.type = "sine" gain2.gain.setValueAtTime(0, audioContextRef.current.currentTime + 0.2) gain2.gain.linearRampToValueAtTime(0.2, audioContextRef.current.currentTime + 0.25) gain2.gain.linearRampToValueAtTime(0, audioContextRef.current.currentTime + 0.35) beat1.start() beat2.start() beat1.stop(audioContextRef.current.currentTime + 0.15) beat2.stop(audioContextRef.current.currentTime + 0.35) } const scheduleNextBeat = () => { if (!state.isPlaying) return playHeartbeatSound() const interval = 60000 / currentHeartRateRef.current heartbeatIntervalRef.current = setTimeout(scheduleNextBeat, interval) } scheduleNextBeat() } const adjustHeartRate = (targetRate: number) => { const currentRate = currentHeartRateRef.current const difference = targetRate - currentRate if (Math.abs(difference) > 1) { currentHeartRateRef.current += difference > 0 ? 2 : -2 } } // Expose function to play feedback sounds useEffect(() => { ;(window as any).playFeedbackSound = (correct: boolean) => { if (!audioContextRef.current || !feedbackGainRef.current || !state.isPlaying) return const osc = audioContextRef.current.createOscillator() const gain = audioContextRef.current.createGain() osc.connect(gain) gain.connect(feedbackGainRef.current) if (correct) { // Success sound - ascending notes osc.frequency.setValueAtTime(523, audioContextRef.current.currentTime) // C5 osc.frequency.setValueAtTime(659, audioContextRef.current.currentTime + 0.1) // E5 osc.frequency.setValueAtTime(784, audioContextRef.current.currentTime + 0.2) // G5 } else { // Error sound - descending notes osc.frequency.setValueAtTime(400, audioContextRef.current.currentTime) // G4 osc.frequency.setValueAtTime(300, audioContextRef.current.currentTime + 0.15) // D4 osc.frequency.setValueAtTime(200, audioContextRef.current.currentTime + 0.3) // G3 } osc.type = "sine" gain.gain.setValueAtTime(0, audioContextRef.current.currentTime) gain.gain.linearRampToValueAtTime(0.3, audioContextRef.current.currentTime + 0.05) gain.gain.linearRampToValueAtTime(0, audioContextRef.current.currentTime + 0.4) osc.start() osc.stop(audioContextRef.current.currentTime + 0.4) } }, [state.isPlaying]) return null } [V0_FILE]typescriptreact:file="components/game-dashboard.tsx" isEdit="true" isMerged="true" "use client" import { useGame } from "@/components/game-context" import { Play, Pause, RotateCcw, Trophy, CheckCircle, XCircle, Star, AlertTriangle } from "lucide-react" import { getRequiredAccuracy } from "@/lib/patient-generator" interface GameDashboardProps { onRestart: () => void } export function GameDashboard({ onRestart }: GameDashboardProps) { const { state, dispatch } = useGame() const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}` } const accuracy = state.score.correctDecisions + state.score.incorrectDecisions > 0 ? Math.round( (state.score.correctDecisions / (state.score.correctDecisions + state.score.incorrectDecisions)) * 100, ) : 0 const levelAccuracy = state.levelCorrectDecisions + state.levelIncorrectDecisions > 0 ? Math.round((state.levelCorrectDecisions / (state.levelCorrectDecisions + state.levelIncorrectDecisions)) * 100) : 100 const requiredAccuracy = getRequiredAccuracy(state.level) const levelProgress = (state.patientsInLevel / 5) * 100 return (

🏥

ER Training

Level {state.level}

{formatTime(state.gameTime)}

{state.score.points} pts

{state.score.correctDecisions}

{state.score.incorrectDecisions}

({accuracy}%)

{/* Level Accuracy Indicator */}

= requiredAccuracy ? "bg-green-500/30" : "bg-red-500/30" }`} >

{levelAccuracy >= requiredAccuracy ? ( ) : ( )} {levelAccuracy}%/{requiredAccuracy}%

) } [V0_FILE]typescriptreact:file="components/game-over-modal.tsx" isMerged="true" "use client" import { useGame } from "@/components/game-context" import { Dialog, DialogContent } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { XCircle, RotateCcw, Trophy, Target } from "lucide-react" export function GameOverModal() { const { state, dispatch } = useGame() const handleRestart = () => { dispatch({ type: "RESTART_GAME" }) } const accuracy = state.score.correctDecisions + state.score.incorrectDecisions > 0 ? Math.round( (state.score.correctDecisions / (state.score.correctDecisions + state.score.incorrectDecisions)) * 100, ) : 0 return ( ) } [V0_FILE]typescriptreact:file="lib/patient-generator.ts" isEdit="true" isMerged="true" import type { Patient, MedicalCondition, VitalSigns, MedicalHistory } from "@/types/game-types" const firstNames = ["John", "Jane", "Michael", "Sarah", "David", "Emily", "Robert", "Lisa", "James", "Maria"] const lastNames = [ "Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Rodriguez", "Martinez", ] const medicalConditions: MedicalCondition[] = [ { name: "Myocardial Infarction", severity: "critical", symptoms: ["Chest pain", "Shortness of breath", "Nausea", "Sweating", "Left arm pain"], painLevel: 9, deteriorationRate: 0.8, correctInitialActions: ["Order ECG", "Send to nurse for vitals", "Order blood work"], description: "Heart attack - blocked coronary artery", hiddenFromPlayer: true, }, { name: "Pneumonia", severity: "urgent", symptoms: ["Cough with phlegm", "Fever", "Difficulty breathing", "Fatigue", "Chest pain when breathing"], painLevel: 6, deteriorationRate: 0.4, correctInitialActions: ["Order chest X-ray", "Send to nurse for vitals", "Check oxygen saturation"], description: "Lung infection", hiddenFromPlayer: true, }, { name: "Appendicitis", severity: "urgent", symptoms: ["Right lower abdominal pain", "Nausea", "Vomiting", "Fever", "Loss of appetite"], painLevel: 8, deteriorationRate: 0.6, correctInitialActions: ["Order CT scan", "Send to nurse for vitals", "Pain assessment"], description: "Inflamed appendix", hiddenFromPlayer: true, }, { name: "Stroke", severity: "critical", symptoms: ["Sudden weakness on one side", "Speech difficulty", "Confusion", "Severe headache", "Vision problems"], painLevel: 7, deteriorationRate: 0.9, correctInitialActions: ["Order CT scan", "Neurological assessment", "Send to nurse for vitals"], description: "Brain blood flow disruption", hiddenFromPlayer: true, }, { name: "Gastroenteritis", severity: "stable", symptoms: ["Nausea", "Vomiting", "Diarrhea", "Abdominal cramps", "Dehydration"], painLevel: 5, deteriorationRate: 0.2, correctInitialActions: ["Send to nurse for vitals", "Assess hydration", "Order blood work"], description: "Stomach flu", hiddenFromPlayer: true, }, { name: "Panic Attack", severity: "stable", symptoms: ["Rapid heartbeat", "Sweating", "Trembling", "Shortness of breath", "Feeling of doom"], painLevel: 4, deteriorationRate: 0.1, correctInitialActions: ["Send to nurse for vitals", "Calm patient", "Rule out cardiac causes"], description: "Anxiety disorder episode", hiddenFromPlayer: true, }, ] const commonAllergies = ["Penicillin", "Peanuts", "Shellfish", "Latex", "Aspirin"] const commonMedications = ["Lisinopril", "Metformin", "Atorvastatin", "Levothyroxine", "Amlodipine"] const commonConditions = ["Hypertension", "Diabetes", "Asthma", "Depression", "Arthritis"] export function generateRandomPatient(level = 1): Patient { const firstName = firstNames[Math.floor(Math.random() * firstNames.length)] const lastName = lastNames[Math.floor(Math.random() * lastNames.length)] const condition = medicalConditions[Math.floor(Math.random() * medicalConditions.length)] const age = Math.floor(Math.random() * 80) + 18 const gender = Math.random() > 0.5 ? "Male" : "Female" // Much more aggressive time reduction based on level // Start with very short times and reduce further with each level const levelMultiplier = Math.max(0.3, 1 - (level - 1) * 0.15) // Reduces by 15% each level, minimum 30% // Significantly reduced base times let baseTime: number switch (condition.severity) { case "critical": baseTime = 60 // 1 minute for critical patients break case "urgent": baseTime = 120 // 2 minutes for urgent patients break case "stable": baseTime = 180 // 3 minutes for stable patients break default: baseTime = 120 } const maxTime = Math.floor(baseTime * levelMultiplier) // Select 3-4 presenting symptoms (what patient actually reports) const presentingSymptoms = condition.symptoms .sort(() => 0.5 - Math.random()) .slice(0, Math.floor(Math.random() * 2) + 3) // Create a stable seed for this patient to ensure consistent action order const patientSeed = firstName + lastName + condition.name const seededRandom = (seed: string) => { let hash = 0 for (let i = 0; i < seed.length; i++) { const char = seed.charCodeAt(i) hash = (hash << 5) - hash + char hash = hash & hash // Convert to 32-bit integer } return Math.abs(hash) / 2147483647 } // Use seeded random to shuffle actions consistently const shuffledActions = [...condition.correctInitialActions].sort(() => seededRandom(patientSeed + "actions") - 0.5) return { id: Math.random().toString(36).substr(2, 9), name: `${firstName} ${lastName}`, demographics: { age, gender, weight: Math.floor(Math.random() * 100) + 120, height: Math.floor(Math.random() * 12) + 60, }, condition: { ...condition, correctInitialActions: shuffledActions, }, vitals: null, medicalHistory: generateMedicalHistory(), status: "waiting", arrivalTime: Date.now(), timeRemaining: maxTime, maxTime, presentingSymptoms, assessmentResults: [], correctNextAction: shuffledActions[0], lastActionCorrect: null, patientSeed, // Store seed for consistent UI ordering } } function generateMedicalHistory(): MedicalHistory { const numAllergies = Math.floor(Math.random() * 3) const numMedications = Math.floor(Math.random() * 4) const numConditions = Math.floor(Math.random() * 3) return { allergies: Array.from( { length: numAllergies }, () => commonAllergies[Math.floor(Math.random() * commonAllergies.length)], ), medications: Array.from( { length: numMedications }, () => commonMedications[Math.floor(Math.random() * commonMedications.length)], ), previousConditions: Array.from( { length: numConditions }, () => commonConditions[Math.floor(Math.random() * commonConditions.length)], ), } } export function generateVitalSigns(condition: MedicalCondition): VitalSigns { let bloodPressure = "120/80" let heartRate = 70 + Math.floor(Math.random() * 30) let temperature = 98.6 let oxygenSaturation = 98 + Math.floor(Math.random() * 3) let respiratoryRate = 16 + Math.floor(Math.random() * 8) switch (condition.name) { case "Myocardial Infarction": bloodPressure = "90/60" heartRate = 110 + Math.floor(Math.random() * 20) oxygenSaturation = 92 + Math.floor(Math.random() * 5) break case "Pneumonia": temperature = 101 + Math.random() * 3 heartRate = 90 + Math.floor(Math.random() * 20) oxygenSaturation = 88 + Math.floor(Math.random() * 8) respiratoryRate = 20 + Math.floor(Math.random() * 10) break case "Stroke": bloodPressure = "160/100" heartRate = 60 + Math.floor(Math.random() * 40) break case "Panic Attack": heartRate = 100 + Math.floor(Math.random() * 30) respiratoryRate = 20 + Math.floor(Math.random() * 15) break } return { bloodPressure, heartRate, temperature: Math.round(temperature * 10) / 10, oxygenSaturation, respiratoryRate, } } // Calculate patient generation interval based on level - even faster now export function getPatientGenerationInterval(level: number): number { // Start at 1500ms (1.5 seconds) and decrease by 150ms per level, minimum 500ms return Math.max(500, 1500 - (level - 1) * 150) } // Calculate patient generation chance based on level export function getPatientGenerationChance(level: number): number { // Start at 0.9 (90%) and increase by 2% per level, maximum 0.98 (98%) return Math.min(0.98, 0.9 + (level - 1) * 0.02) } // Get required accuracy for each level export function getRequiredAccuracy(level: number): number { // Start at 20% required accuracy (80% mistakes allowed) and increase by 10% per level // Level 1: 20%, Level 2: 30%, Level 3: 40%, etc. return Math.min(90, 20 + (level - 1) * 10) } // Generate initial patients for game start export function generateInitialPatients(level: number): Patient[] { const patients: Patient[] = [] const numPatients = Math.min(4, level + 2) // Start with 3-6 patients based on level for (let i = 0; i < numPatients; i++) { patients.push(generateRandomPatient(level)) } return patients } // Check if we need to force patient generation (when queue is too small) export function shouldForcePatientGeneration(currentPatients: number, level: number): boolean { const minPatients = Math.max(1, Math.min(3, level)) // Minimum 1-3 patients based on level return currentPatients < minPatients } [V0_FILE]typescriptreact:file="components/direct-action-panel.tsx" isEdit="true" "use client" import { useGame } from "@/components/game-context" import type { Patient } from "@/types/game-types" import { generateVitalSigns, getRequiredAccuracy } from "@/lib/patient-generator" import { useState, useEffect } from "react" import { CheckCircle, XCircle, AlertTriangle } from "lucide-react" interface DirectActionPanelProps { patient: Patient } export function DirectActionPanel({ patient }: DirectActionPanelProps) { const { state, dispatch } = useGame() const [feedback, setFeedback] = useState<{ correct: boolean message: string points: number correctAction?: string } | null>(null) const [actionStartTime, setActionStartTime] = useState(null) const [selectedAction, setSelectedAction] = useState(null) const [patientRemovalScheduled, setPatientRemovalScheduled] = useState(false) useEffect(() => { // Reset feedback when patient changes and set action start time setFeedback(null) setSelectedAction(null) setPatientRemovalScheduled(false) setActionStartTime(Date.now()) }, [patient.id]) const triageActions = [ { id: "send-to-nurse", name: "Send to Nurse for Vitals", description: "Get baseline vital signs", emoji: "👩‍⚕️", color: "bg-blue-500", }, { id: "order-ecg", name: "Order ECG", description: "Check heart rhythm", emoji: "📈", color: "bg-red-500", }, { id: "order-xray", name: "Order Chest X-Ray", description: "Lung and heart imaging", emoji: "🩻", color: "bg-purple-500", }, { id: "order-ct", name: "Order CT Scan", description: "Detailed imaging", emoji: "🔍", color: "bg-orange-500", }, { id: "order-bloodwork", name: "Order Blood Work", description: "Lab tests", emoji: "🩸", color: "bg-green-500", }, ] // Use patient seed to create consistent ordering const seededRandom = (seed: string) => { let hash = 0 for (let i = 0; i < seed.length; i++) { const char = seed.charCodeAt(i) hash = (hash << 5) - hash + char hash = hash & hash } return Math.abs(hash) / 2147483647 } // Create consistent shuffled actions based on patient seed const shuffledActions = [...triageActions].sort(() => seededRandom(patient.patientSeed + "ui") - 0.5) // Find the correct action for this patient - FIXED BUG const findCorrectAction = () => { const correctActionName = patient.condition.correctInitialActions[0] let correctActionId = "" // Map the correct action name to the corresponding action ID if (correctActionName.toLowerCase().includes("ecg")) { correctActionId = "order-ecg" } else if (correctActionName.toLowerCase().includes("x-ray") || correctActionName.toLowerCase().includes("xray")) { correctActionId = "order-xray" } else if (correctActionName.toLowerCase().includes("ct")) { correctActionId = "order-ct" } else if (correctActionName.toLowerCase().includes("blood")) { correctActionId = "order-bloodwork" } else if ( correctActionName.toLowerCase().includes("nurse") || correctActionName.toLowerCase().includes("vital") || correctActionName.toLowerCase().includes("assessment") ) { correctActionId = "send-to-nurse" } // Find the action object and return its name, or fallback to the original correct action name const correctAction = triageActions.find((a) => a.id === correctActionId) return correctAction ? correctAction.name : correctActionName } const handleAction = (actionId: string) => { const action = triageActions.find((a) => a.id === actionId) if (!action || patientRemovalScheduled) return setSelectedAction(actionId) // Calculate reaction time bonus const reactionTime = actionStartTime ? Date.now() - actionStartTime : 0 const speedBonus = Math.max(0, Math.floor((10000 - reactionTime) / 1000) * 5) // 5 points per second under 10 seconds // Check if this is a correct decision const isCorrect = patient.condition.correctInitialActions.some((correctAction) => correctAction.toLowerCase().includes(actionId.replace("order-", "").replace("send-to-", "").replace("-", "")), ) const basePoints = isCorrect ? 50 : -25 const totalPoints = isCorrect ? basePoints + speedBonus : basePoints // Play feedback sound if ((window as any).playFeedbackSound) { ;(window as any).playFeedbackSound(isCorrect) } // Show visual feedback with animation setFeedback({ correct: isCorrect, message: isCorrect ? `Excellent! ${action.name} is the right choice.` : `Not optimal. ${action.name} is not the best approach.`, points: totalPoints, correctAction: isCorrect ? undefined : findCorrectAction(), // This now returns the actual correct action }) // Dispatch score change for animation dispatch({ type: "SHOW_SCORE_CHANGE", payload: { points: totalPoints, isPositive: isCorrect, }, }) // Update score dispatch({ type: "UPDATE_SCORE", payload: { points: totalPoints, correct: isCorrect, }, }) // Check if accuracy requirement is met BEFORE checking for game over const newCorrectDecisions = isCorrect ? state.levelCorrectDecisions + 1 : state.levelCorrectDecisions const newIncorrectDecisions = !isCorrect ? state.levelIncorrectDecisions + 1 : state.levelIncorrectDecisions const totalDecisions = newCorrectDecisions + newIncorrectDecisions const currentLevelAccuracy = totalDecisions > 0 ? (newCorrectDecisions / totalDecisions) * 100 : 100 const requiredAccuracy = getRequiredAccuracy(state.level) // Check if we have enough decisions to evaluate (at least 3) and accuracy is too low if (totalDecisions >= 3 && currentLevelAccuracy < requiredAccuracy) { dispatch({ type: "GAME_OVER", payload: `Level ${state.level} requires ${requiredAccuracy}% accuracy. You achieved ${Math.round(currentLevelAccuracy)}%.`, }) return } // If wrong answer and level <= 5, pause the game and show feedback if (!isCorrect && state.level <= 5) { dispatch({ type: "SHOW_WRONG_ANSWER_FEEDBACK" }) // Don't schedule patient removal yet - wait for user to dismiss return } // Perform the action dispatch({ type: "PERFORM_ACTION", payload: { patientId: patient.id, action: action.name, isCorrect: isCorrect, }, }) // If sending to nurse, generate vitals if (actionId === "send-to-nurse") { const vitals = generateVitalSigns(patient.condition) dispatch({ type: "ADD_ASSESSMENT_RESULT", payload: { patientId: patient.id, result: { type: "vitals", results: vitals, timestamp: Date.now(), }, }, }) } // Schedule patient removal for correct answers or higher levels setPatientRemovalScheduled(true) setTimeout(() => { dispatch({ type: "REMOVE_PATIENT_FROM_QUEUE", payload: { patientId: patient.id, isCorrect: isCorrect, }, }) }, 800) } const dismissFeedback = () => { if (patientRemovalScheduled) return dispatch({ type: "DISMISS_WRONG_ANSWER_FEEDBACK" }) // Perform the action after dismissing feedback dispatch({ type: "PERFORM_ACTION", payload: { patientId: patient.id, action: selectedAction || "unknown", isCorrect: false, }, }) // Remove patient after dismissing feedback setPatientRemovalScheduled(true) setTimeout(() => { dispatch({ type: "REMOVE_PATIENT_FROM_QUEUE", payload: { patientId: patient.id, isCorrect: false, }, }) }, 100) } return (

🩺 Initial Assessment

{/* Compact Symptoms Display */}

Patient Reports:

{patient.presentingSymptoms.map((symptom, index) => (

{symptom}

))}

{feedback ? (

{feedback.correct ? ( ) : ( )}

{feedback.message}

{feedback.correct ? `+${feedback.points} points` : `${feedback.points} points`} {feedback.correct && feedback.points > 50 && " (Speed bonus!)"}

{!feedback.correct && feedback.correctAction && (

Learning Opportunity:

For these symptoms, the correct action would be: {feedback.correctAction}

)} {/* Show dismiss button for wrong answers in easy levels */} {!feedback.correct && state.level <= 5 && state.showingWrongAnswerFeedback && !patientRemovalScheduled && ( )}

) : (

What is your first action?

{/* Grid Layout for Actions - Using consistently shuffled actions */}

{shuffledActions.map((action) => ( ))}

)}

) } [V0_FILE]typescriptreact:file="types/game-types.ts" isEdit="true" export interface Patient { id: string name: string demographics: { age: number gender: "Male" | "Female" weight: number height: number } condition: MedicalCondition vitals: VitalSigns | null // Initially null until nurse assessment medicalHistory: MedicalHistory status: "waiting" | "in-assessment" | "diagnosed" | "treated" | "deceased" arrivalTime: number timeRemaining: number maxTime: number presentingSymptoms: string[] // What the patient reports assessmentResults: AssessmentResult[] correctNextAction?: string lastActionCorrect: boolean | null patientSeed: string // For consistent UI ordering } export interface AssessmentResult { type: "vitals" | "xray" | "bloodwork" | "ct" | "mri" | "ecg" results: any timestamp: number } export interface MedicalCondition { name: string severity: "stable" | "urgent" | "critical" symptoms: string[] painLevel: number deteriorationRate: number correctInitialActions: string[] description: string hiddenFromPlayer: boolean // Don't show condition name to player } export interface VitalSigns { bloodPressure: string heartRate: number temperature: number oxygenSaturation: number respiratoryRate: number } export interface MedicalHistory { allergies: string[] medications: string[] previousConditions: string[] } export interface PatientAnimation { isRemoving: boolean isCorrect: boolean isDead?: boolean } export interface ScoreChange { id: string points: number isPositive: boolean timestamp: number } export interface GameState { patients: Patient[] activePatient: Patient | null score: { patientsSaved: number patientsLost: number totalTreated: number correctDecisions: number incorrectDecisions: number points: number } gameTime: number isPlaying: boolean difficulty: number patientAnimations: Record level: number patientsInLevel: number showLevelComplete: boolean levelCorrectDecisions: number levelIncorrectDecisions: number showingWrongAnswerFeedback: boolean gameOver: boolean gameOverReason?: string scoreChanges: ScoreChange[] } export type GameAction = | { type: "ADD_PATIENT"; payload: Patient } | { type: "ADD_INITIAL_PATIENTS"; payload: Patient[] } | { type: "SELECT_PATIENT"; payload: Patient } | { type: "PERFORM_ACTION"; payload: { patientId: string; action: string; isCorrect: boolean } } | { type: "REMOVE_PATIENT_FROM_QUEUE"; payload: { patientId: string; isCorrect: boolean } } | { type: "PATIENT_REMOVED"; payload: string } | { type: "UPDATE_PATIENT_TIMER"; payload: { patientId: string; timeRemaining: number } } | { type: "PATIENT_DIED"; payload: string } | { type: "ADD_ASSESSMENT_RESULT"; payload: { patientId: string; result: AssessmentResult } } | { type: "UPDATE_SCORE"; payload: { points: number; correct: boolean } } | { type: "SHOW_SCORE_CHANGE"; payload: { points: number; isPositive: boolean } } | { type: "REMOVE_SCORE_CHANGE"; payload: string } | { type: "UPDATE_TIME" } | { type: "PAUSE_GAME" } | { type: "RESUME_GAME" } | { type: "DISMISS_LEVEL_COMPLETE" } | { type: "SHOW_WRONG_ANSWER_FEEDBACK" } | { type: "DISMISS_WRONG_ANSWER_FEEDBACK" } | { type: "GAME_OVER"; payload: string } | { type: "RESTART_GAME" } [V0_FILE]typescriptreact:file="components/game-context.tsx" isEdit="true" "use client" import type React from "react" import { createContext, useContext, useReducer, useEffect } from "react" import type { GameState, GameAction, ScoreChange } from "@/types/game-types" import { generateRandomPatient, getPatientGenerationInterval, getPatientGenerationChance, generateInitialPatients, shouldForcePatientGeneration, } from "@/lib/patient-generator" const initialState: GameState = { patients: [], activePatient: null, score: { patientsSaved: 0, patientsLost: 0, totalTreated: 0, correctDecisions: 0, incorrectDecisions: 0, points: 0, }, gameTime: 0, isPlaying: true, difficulty: 1, patientAnimations: {}, level: 1, patientsInLevel: 0, showLevelComplete: false, levelCorrectDecisions: 0, levelIncorrectDecisions: 0, showingWrongAnswerFeedback: false, gameOver: false, gameOverReason: undefined, scoreChanges: [], } function gameReducer(state: GameState, action: GameAction): GameState { switch (action.type) { case "ADD_PATIENT": return { ...state, patients: [...state.patients, action.payload], } case "ADD_INITIAL_PATIENTS": return { ...state, patients: [...state.patients, ...action.payload], } case "SELECT_PATIENT": return { ...state, activePatient: action.payload, } case "PERFORM_ACTION": return { ...state, patients: state.patients.map((p) => p.id === action.payload.patientId ? { ...p, status: "in-assessment" as const, lastActionCorrect: action.payload.isCorrect, } : p, ), patientAnimations: { ...state.patientAnimations, [action.payload.patientId]: { isRemoving: false, isCorrect: action.payload.isCorrect, }, }, } case "REMOVE_PATIENT_FROM_QUEUE": const newPatientsInLevel = state.patientsInLevel + 1 const shouldLevelUp = newPatientsInLevel >= 5 // Level up every 5 patients return { ...state, patientAnimations: { ...state.patientAnimations, [action.payload.patientId]: { isRemoving: true, isCorrect: action.payload.isCorrect, }, }, patientsInLevel: shouldLevelUp ? 0 : newPatientsInLevel, level: shouldLevelUp ? state.level + 1 : state.level, showLevelComplete: shouldLevelUp, levelCorrectDecisions: shouldLevelUp ? 0 : state.levelCorrectDecisions, levelIncorrectDecisions: shouldLevelUp ? 0 : state.levelIncorrectDecisions, score: { ...state.score, patientsSaved: action.payload.isCorrect ? state.score.patientsSaved + 1 : state.score.patientsSaved, totalTreated: state.score.totalTreated + 1, }, } case "PATIENT_REMOVED": const updatedPatients = state.patients.filter((p) => p.id !== action.payload) const updatedAnimations = { ...state.patientAnimations } delete updatedAnimations[action.payload] return { ...state, patients: updatedPatients, activePatient: state.activePatient?.id === action.payload ? null : state.activePatient, patientAnimations: updatedAnimations, } case "DISMISS_LEVEL_COMPLETE": return { ...state, showLevelComplete: false, } case "ADD_ASSESSMENT_RESULT": return { ...state, patients: state.patients.map((p) => p.id === action.payload.patientId ? { ...p, assessmentResults: [...p.assessmentResults, action.payload.result], vitals: action.payload.result.type === "vitals" ? action.payload.result.results : p.vitals, } : p, ), } case "UPDATE_SCORE": return { ...state, score: { ...state.score, points: state.score.points + action.payload.points, correctDecisions: action.payload.correct ? state.score.correctDecisions + 1 : state.score.correctDecisions, incorrectDecisions: !action.payload.correct ? state.score.incorrectDecisions + 1 : state.score.incorrectDecisions, }, levelCorrectDecisions: action.payload.correct ? state.levelCorrectDecisions + 1 : state.levelCorrectDecisions, levelIncorrectDecisions: !action.payload.correct ? state.levelIncorrectDecisions + 1 : state.levelIncorrectDecisions, } case "SHOW_SCORE_CHANGE": const newScoreChange: ScoreChange = { id: Math.random().toString(36).substr(2, 9), points: action.payload.points, isPositive: action.payload.isPositive, timestamp: Date.now(), } return { ...state, scoreChanges: [...state.scoreChanges, newScoreChange], } case "REMOVE_SCORE_CHANGE": return { ...state, scoreChanges: state.scoreChanges.filter((sc) => sc.id !== action.payload), } case "UPDATE_PATIENT_TIMER": return { ...state, patients: state.patients.map((p) => p.id === action.payload.patientId ? { ...p, timeRemaining: action.payload.timeRemaining } : p, ), } case "PATIENT_DIED": return { ...state, patientAnimations: { ...state.patientAnimations, [action.payload]: { isRemoving: true, isCorrect: false, isDead: true, }, }, score: { ...state.score, patientsLost: state.score.patientsLost + 1, totalTreated: state.score.totalTreated + 1, points: Math.max(0, state.score.points - 100), }, patientsInLevel: state.patientsInLevel + 1, levelIncorrectDecisions: state.levelIncorrectDecisions + 1, } case "UPDATE_TIME": return { ...state, gameTime: state.gameTime + 1, } case "PAUSE_GAME": return { ...state, isPlaying: false, } case "RESUME_GAME": return { ...state, isPlaying: true, } case "SHOW_WRONG_ANSWER_FEEDBACK": return { ...state, showingWrongAnswerFeedback: true, isPlaying: false, } case "DISMISS_WRONG_ANSWER_FEEDBACK": return { ...state, showingWrongAnswerFeedback: false, isPlaying: true, } case "GAME_OVER": return { ...state, gameOver: true, gameOverReason: action.payload, isPlaying: false, } case "RESTART_GAME": return { ...initialState, patients: generateInitialPatients(1), } default: return state } } const GameContext = createContext<{ state: GameState dispatch: React.Dispatch } | null>(null) export function GameProvider({ children }: { children: React.ReactNode }) { const [state, dispatch] = useReducer(gameReducer, initialState) // Generate initial patients when game starts useEffect(() => { const initialPatients = generateInitialPatients(state.level) dispatch({ type: "ADD_INITIAL_PATIENTS", payload: initialPatients }) }, []) // Only run once on mount // Auto-remove score changes after animation useEffect(() => { state.scoreChanges.forEach((scoreChange) => { setTimeout(() => { dispatch({ type: "REMOVE_SCORE_CHANGE", payload: scoreChange.id }) }, 2000) // Remove after 2 seconds }) }, [state.scoreChanges]) // Game timer useEffect(() => { if (!state.isPlaying || state.showingWrongAnswerFeedback || state.gameOver) return const timer = setInterval(() => { dispatch({ type: "UPDATE_TIME" }) }, 1000) return () => clearInterval(timer) }, [state.isPlaying, state.showingWrongAnswerFeedback, state.gameOver]) // Patient generation - now with dynamic interval and chance based on level useEffect(() => { if (!state.isPlaying || state.showingWrongAnswerFeedback || state.gameOver) return // Get dynamic interval and chance based on current level const interval = getPatientGenerationInterval(state.level) const chance = getPatientGenerationChance(state.level) const patientTimer = setInterval(() => { const activePatients = state.patients.filter((p) => p.status !== "treated" && p.status !== "deceased").length // Force generation if queue is too small or normal chance if (shouldForcePatientGeneration(activePatients, state.level) || Math.random() < chance) { const newPatient = generateRandomPatient(state.level) dispatch({ type: "ADD_PATIENT", payload: newPatient }) } }, interval) return () => clearInterval(patientTimer) }, [state.isPlaying, state.level, state.showingWrongAnswerFeedback, state.gameOver, state.patients]) // Additional frequent check for empty queue useEffect(() => { if (!state.isPlaying || state.showingWrongAnswerFeedback || state.gameOver) return const emptyQueueCheck = setInterval(() => { const activePatients = state.patients.filter((p) => p.status !== "treated" && p.status !== "deceased").length // If queue is completely empty, immediately generate 1-2 patients if (activePatients === 0) { const patientsToGenerate = Math.random() > 0.5 ? 2 : 1 for (let i = 0; i < patientsToGenerate; i++) { const newPatient = generateRandomPatient(state.level) dispatch({ type: "ADD_PATIENT", payload: newPatient }) } } }, 2000) // Check every 2 seconds return () => clearInterval(emptyQueueCheck) }, [state.isPlaying, state.level, state.showingWrongAnswerFeedback, state.gameOver, state.patients]) // Patient timer updates useEffect(() => { if (!state.isPlaying || state.showingWrongAnswerFeedback || state.gameOver) return const timerUpdate = setInterval(() => { state.patients.forEach((patient) => { if (patient.status === "waiting" || patient.status === "in-assessment") { const newTimeRemaining = Math.max(0, patient.timeRemaining - 1) if (newTimeRemaining === 0) { dispatch({ type: "PATIENT_DIED", payload: patient.id }) // Remove patient after animation setTimeout(() => { dispatch({ type: "PATIENT_REMOVED", payload: patient.id }) }, 1000) } else { dispatch({ type: "UPDATE_PATIENT_TIMER", payload: { patientId: patient.id, timeRemaining: newTimeRemaining }, }) } } }) }, 1000) return () => clearInterval(timerUpdate) }, [state.isPlaying, state.patients, state.showingWrongAnswerFeedback, state.gameOver]) return {children} } export function useGame() { const context = useContext(GameContext) if (!context) { throw new Error("useGame must be used within a GameProvider") } return context } [V0_FILE]typescriptreact:file="components/score-change-indicator.tsx" "use client" import { useGame } from "@/components/game-context" export function ScoreChangeIndicator() { const { state } = useGame() return (

{state.scoreChanges.map((scoreChange) => (

{scoreChange.isPositive ? "+" : ""} {scoreChange.points}

))}

) } [V0_FILE]typescriptreact:file="components/level-complete-modal.tsx" isEdit="true" "use client" import { useGame } from "@/components/game-context" import { Dialog, DialogContent } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Trophy, Star, Clock, Target, AlertTriangle } from "lucide-react" import { getPatientGenerationInterval } from "@/lib/patient-generator" export function LevelCompleteModal() { const { state, dispatch } = useGame() const handleContinue = () => { dispatch({ type: "DISMISS_LEVEL_COMPLETE" }) } const getLevelReward = (level: number) => { return level * 100 // 100 points per level } const getDifficultyDescription = (level: number) => { if (level <= 3) return "Getting warmed up! 🔥" if (level <= 6) return "Things are heating up! ⚡" if (level <= 10) return "Expert level pressure! 💪" return "Master of emergency medicine! 🏆" } // Calculate time reduction percentage for display const getTimeReductionPercent = (level: number) => { return Math.round((1 - Math.max(0.3, 1 - (level - 1) * 0.15)) * 100) } // Calculate patient generation speed increase const getGenerationSpeedIncrease = (level: number) => { const baseInterval = 1500 const currentInterval = getPatientGenerationInterval(level) return Math.round(((baseInterval - currentInterval) / baseInterval) * 100) } return ( ) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 142 76% 36%; --primary-foreground: 355.7 100% 97.3%; --secondary: 210 40% 98%; --secondary-foreground: 222.2 84% 4.9%; --muted: 210 40% 98%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 98%; --accent-foreground: 222.2 84% 4.9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 142 76% 36%; --radius: 1rem; } } @layer base { * { @apply border-border; } body { @apply bg-gray-50 font-sans; } } @layer components { .duolingo-card { @apply bg-white rounded-2xl shadow-lg border-2 border-gray-200 hover:shadow-xl transition-all duration-300; } .duolingo-button { @apply bg-gradient-to-b from-green-400 to-green-500 text-white font-bold py-4 px-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-200 hover:scale-105 border-b-4 border-green-600; } .duolingo-button:active { @apply transform translate-y-1 border-b-2; } .duolingo-button-blue { @apply bg-gradient-to-b from-blue-400 to-blue-500 text-white font-bold py-4 px-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-200 hover:scale-105 border-b-4 border-blue-600; } .duolingo-button-orange { @apply bg-gradient-to-b from-orange-400 to-orange-500 text-white font-bold py-4 px-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-200 hover:scale-105 border-b-4 border-orange-600; } .patient-avatar { @apply w-16 h-16 rounded-full border-4 border-white shadow-lg flex items-center justify-center text-2xl font-bold; } .timer-critical { @apply animate-pulse bg-red-500 text-white; } .timer-warning { @apply bg-orange-500 text-white; } .timer-safe { @apply bg-green-500 text-white; } } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } @keyframes pulse-success { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); } 50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } } @keyframes scorePopup { 0% { transform: translateY(0) scale(1); opacity: 1; } 20% { transform: translateY(-20px) scale(1.5); opacity: 1; } 100% { transform: translateY(-60px) scale(1); opacity: 0; } } /* Patient removal animations */ @keyframes patient-correct { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(34, 197, 94, 0.7); background-color: rgba(220, 252, 231, 1); border-color: rgba(34, 197, 94, 1); } 100% { transform: scale(0); opacity: 0; } } @keyframes patient-incorrect { 0% { transform: scale(1); opacity: 1; } 25% { transform: translateX(-10px) rotate(-3deg); } 50% { transform: translateX(10px) rotate(3deg); background-color: rgba(254, 226, 226, 1); border-color: rgba(239, 68, 68, 1); } 75% { transform: translateX(-10px) rotate(-3deg); } 100% { transform: scale(0); opacity: 0; } } @keyframes patient-death { 0% { transform: scale(1); opacity: 1; } 20% { transform: scale(1.05); background-color: rgba(254, 202, 202, 1); border-color: rgba(220, 38, 38, 1); } 40% { transform: scale(0.95) rotate(2deg); } 60% { transform: scale(1.02) rotate(-2deg); filter: grayscale(0.5); } 80% { transform: scale(0.98) rotate(1deg); filter: grayscale(0.8); } 100% { transform: scale(0); opacity: 0; filter: grayscale(1); } } .animate-shake { animation: shake 0.5s ease-in-out 2 alternate; } .animate-pulse-success { animation: pulse-success 1s ease-in-out 3; } .animate-score-popup { animation: scorePopup 2s ease-out forwards; } .animate-patient-correct { animation: patient-correct 0.5s ease-in-out forwards; pointer-events: none; } .animate-patient-incorrect { animation: patient-incorrect 0.5s ease-in-out forwards; pointer-events: none; } .animate-patient-death { animation: patient-death 0.8s ease-in-out forwards; pointer-events: none; } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState } from "react" import { GameProvider } from "@/components/game-context" import { GameDashboard } from "@/components/game-dashboard" import { PatientHeaderQueue } from "@/components/patient-header-queue" import { PatientDetails } from "@/components/patient-details" import { TutorialModal } from "@/components/tutorial-modal" import { LevelCompleteModal } from "@/components/level-complete-modal" import { GameOverModal } from "@/components/game-over-modal" import { ScoreChangeIndicator } from "@/components/score-change-indicator" import { Play, BookOpen } from "lucide-react" import { EnhancedAudioManager } from "@/components/enhanced-audio-manager" export default function ERSimulationGame() { const [gameStarted, setGameStarted] = useState(false) const [showTutorial, setShowTutorial] = useState(false) const handleRestart = () => { setGameStarted(false) // Small delay to ensure clean restart setTimeout(() => { setGameStarted(true) }, 100) } return (

{!gameStarted ? (

🏥

ER Training

Practice medical decision-making under pressure! 🩺⚡

) : (

)} setShowTutorial(false)} />

) }