⚡ 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.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
