MedGame

---

⚡ En Bref

Simulation Clinique Immersive : Simulation d'urgence et d'anamnèse en environnement 3D WebGL fluide à 60 FPS, moniteurs de constantes vitables réactifs (ECG, SpO2, PA) et moteur de sémiologique interactive avec système de verrous (gating).

---

📊 Section Métriques & Performance

📑 Cas Cliniques	🎮 Performance 3D	⚡ Framework Overhead	📱 Accessibilité
92 Clinical Cases	60 FPS WebGL Engine	0 External Overhead	Manifest + Installable
Banque sémiologique complète (Cardio, Neuro, Pneumo...)	Moteur 3D Three.js sans lag ni saccade	Code 100% Vanilla JS ultra-léger et rapide	Manifest PWA : l'application est installable (pas de service worker, pas d'offline)

---

🏗️ Architecture System & Interaction

Le schéma ci-dessous illustre le flux complet d'interaction entre l'interface utilisateur Frontend Vanilla, le moteur 3D Three.js, l'engine Sémiologique et le backend Supabase Security/RLS.

graph TD
    subgraph Frontend ["🎨 Frontend Vanilla JS (ES6+) & Glassmorphism Engine"]
        UI["🖥️ UI Components & Interactive Dialogues"]
        VM["📈 Vital Signs Monitor (ECG, SpO2, BP Engine)"]
    end

    subgraph Engine3D ["🧊 Engine 3D Three.js (60 FPS)"]
        Loader["📦 Async GLTF/GLB Loader & Patient Selector"]
        Scene["🎬 WebGL Scene, Lighting & Rendering Loop"]
        Animator["💃 PatientAnimator & Smooth Mixer (0.1x Speed)"]
    end

    subgraph SemioEngine ["🩺 Engine Sémiologique & Core Logic"]
        Gating["🔐 Semiological Gating & Prerequisite Trees"]
        CaseData["📄 JSON Case Resolver (data/*.json)"]
        Scoring["💯 Diagnostic Scoring Engine (0-100%)"]
    end

    subgraph Backend ["⚡ Supabase Backend (Security & Persistence)"]
        Auth["🔑 Supabase Auth (JWT & Active Sessions)"]
        RLS["🛡️ Row Level Security (RLS Policies)"]
        DB[("🗄️ PostgreSQL Database (Cases, XP, Profiles)")]
    end

    UI -->|Déclenche Examens & Anamnèse| SemioEngine
    UI -->|Contrôle Caméra & Interactivité| Engine3D
    Engine3D --> Loader --> Scene --> Animator
    SemioEngine -->|Charge le Scénario Actif| CaseData
    SemioEngine -->|Vérifie les Conditions de Déblocage| Gating
    SemioEngine -->|Calcule le Résultat & Gagnant XP| Scoring
    Scoring -->|Synchronise la Progression| RLS --> DB
    Auth -->|Valide la Session Utilisateur| RLS

---

🌟 Fonctionnalités Clés

• 🏥 Consultation & Examen Physique 3D : Exploration interactive de la chambre d'examen avec visualisation dynamique du patient selon l'âge, le sexe et la pathologie.
• 🫀 ECG Academy 12 Dérivations (ecg-trainer.html) : Simulateur d'électrocardiogramme haute fidélité 12 dérivations (DI-DIII, aVR-aVF, V1-V6) avec bibliothèque de tracés pathologiques (STEMI, FA, BAV, TV...), checklist méthodique d'interprétation et mode évaluation clinique.
• 🎧 Stéthoscope Virtuel & Phonocardiogramme (auscultation.html) : Torse anatomique interactif avec foyers cardiaques (Aortique, Pulmonaire, Tricuspide, Mitral) et pulmonaires bilatéraux, synthèse audio Web Audio API temps réel (B1/B2, souffles, crépitants, sibilants) et tracé phonocardiographique synchronisé.
• 🧠 Atlas Anatomique 3D Interactif (atlas.html) : Visualiseur 3D multi-systèmes (squelette, muscles, viscères, cœur, cerveau) avec sélection d'organes, mode transparence, vue éclatée (explode) et fiches sémiologiques traduites.
• 🎯 Skill Lab & Badges de Compétence (skills.html) : Centre d'entraînement modulaire permettant aux étudiants de s'exercer et de débloquer des badges certifiants (ECG, Auscultation, Sémiologie).
• 💓 Moniteur de Constantes en Temps Réel : Tracé ECG dynamique, saturation SpO2 et pression artérielle générés avec effets visuels fluides.
• 🔐 Engine Sémiologique & Système de Gating : Progression conditionnée par la logique clinique (impossible d'ordonner un examen sans justification prioritaire).
• ✏️ Éditeur de Cas Intégré : Interface auteur permettant de créer, tester et publier de nouveaux cas cliniques en communauté.
• 🏆 Gamification & Niveaux de Progression :
  • Niveau 1 (Externe) : Résolution des cas cliniques validés.
  • Niveau 2 (Interne - 1500 XP) : Déblocage de l'Éditeur pour soumettre ses propres scénarios.
  • Niveau 5 (Professeur) : Droit de validation et peer-review sur la banque de cas.
• ⏱️ Mode Urgence & Évaluation Clinique : Mises en situation et tests diagnostiques sans chrono stressant, favorisant le raisonnement médical structuré.

---

🛠️ Tech Stack & Choix d'Ingénierie

Composant	Technologie	Description
Frontend UI	HTML5 / Vanilla CSS3 / ES6+	Zero bundler overhead, chargement instantané, styles glassmorphism.
3D Engine	Three.js (0.163.0, modules ES via importmap) + GLTFLoader	Modèles 3D patients Kenney optimisés GLB à faible empreinte mémoire.
Visual Effects	GSAP (GreenSock)	Animations fluides des courbes vitales et fenêtres modales.
Backend & Auth	Supabase (PostgreSQL + RLS)	Sécurité fine par règles RLS sur les cas published vs pending.
Conteneurisation	Docker / Nginx Alpine	Image ultra-légère multi-architecture (x86_64, ARM64 / Orange Pi / Raspberry Pi).

---

🚀 Installation & Démarrage Rapide

1. Développement Local (Sans étape de Build)

# 1. Cloner le dépôt GitHub
git clone https://github.com/DocteurWu/medgame.git
cd medgame

# 2. Lancer un serveur Web local
# Via Node.js:
npx serve .

# Ou via Python:
python -m http.server 8888

Ouvrez ensuite votre navigateur sur http://localhost:8888.

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗