GA GA-Création
Jeu pédagogique Jouable

Affaire Licorne

Une enquête policière à résoudre en SQL

Jeu d'enquête dans l'esprit du SQL Murder Mystery, en français : un CTO retrouvé mort la veille d'une levée de fonds, 11 suspects, et une seule arme : vos requêtes SQL. 100 % dans le navigateur.

  • JavaScript
  • sql.js (WebAssembly)
  • SQLite
  • CodeMirror
Aperçu du projet Affaire Licorne

Le but

Apprendre le SQL sans en avoir l'air : chaque indice se gagne à coups de requêtes, jusqu'à identifier l'exécutant… et le commanditaire.

Compétences travaillées

  • SQLite compilé en WebAssembly (sql.js) : une vraie base de données, zéro serveur
  • Game design narratif : 14 indices, aides progressives à 3 niveaux, accusation en deux temps
  • Conception d'un jeu de données cohérent : 11 tables, 11 personnages, alibis et mobiles croisés
  • UI complète en JavaScript vanilla : console SQL (CodeMirror), carte interactive, carnet de détective
  • Portraits SVG paramétriques générés par code

Le contexte

Le SQL Murder Mystery de Knight Lab est un classique pour apprendre le SQL en s’amusant, mais il est en anglais, visuellement daté, et son intrigue tient sur deux tables. J’ai voulu une version française, contemporaine et plus ambitieuse : Maxime Ferrand, CTO de la startup Datalyze, est retrouvé mort dans la salle serveur la veille de la signature d’une série B.

Le défi

Faire tourner une vraie base de données dans le navigateur, sans serveur ni installation : c’est SQLite compilé en WebAssembly (sql.js) qui exécute les requêtes du joueur. Et côté jeu, construire un dataset cohérent (11 tables, 11 personnages avec alibis, mobiles et incohérences volontaires) où chaque découverte est détectée automatiquement pour faire avancer l’enquête.

Comment c’est construit

Une seule page, en JavaScript vanilla : une console SQL (CodeMirror) avec coloration et historique, une carte interactive du campus dont les lieux s’allument au fil des découvertes, un trombinoscope dont les fiches se remplissent d’indices, un carnet de détective qui tient la timeline des 14 indices, et un schéma interactif des tables (un clic insère une requête d’exemple). Trois niveaux d’aide par étape, de la piste vague à la requête complète, et une accusation en deux temps : l’exécutant, puis le commanditaire. La progression est sauvegardée en localStorage.

Ce que j’en retire

C’est le projet qui m’a le plus appris sur la pédagogie par la pratique : doser la difficulté, récompenser chaque requête réussie, ne jamais bloquer le joueur. Et une conviction : WebAssembly ouvre la porte à des outils riches livrés comme de simples fichiers statiques, sans backend à héberger ni maintenir.

En images

La console SQL : chaque requête réussie débloque indices, lieux et suspects
La console SQL : chaque requête réussie débloque indices, lieux et suspects
Le trombinoscope : les suspects se révèlent au fil des requêtes
Le trombinoscope : les suspects se révèlent au fil des requêtes

À découvrir aussi

D'autres projets du Labs

Tout le Labs →
Aperçu du projet Certif Trainer
Outil de formation
Utilisable

Réviser la certification PrestaShop Expert

Certif Trainer

Application web pour préparer les 3 certifications PrestaShop Expert : 316 questions officielles corrigées, examen blanc chronométré aux conditions réelles, statistiques par section. Un seul fichier HTML.

  • JavaScript
  • HTML / CSS
  • JSON
  • IA générative
Module PrestaShop
En développement

Alerting temps réel multi-canal pour PrestaShop

Cockpit Alerts

Module qui capte les événements clés d'une boutique (commande, stock bas, retour, message client…) et les route vers Slack, Discord ou email selon des règles conditionnelles, sans jamais ralentir la boutique.

  • PHP
  • PrestaShop 1.7.7 → 9
  • Vue 3
  • API Slack / Discord
Aperçu du projet Cockpit Analytics
Module PrestaShop
En vente

Tableau de bord décisionnel pour PrestaShop

Cockpit Analytics

Module PrestaShop (1.7 → 9) qui transforme les données brutes d'une boutique en tableau de bord pour dirigeant : CA, clients (RFM, cohortes), stock, promos… avec comparaison N-1 et recommandations actionnables.

  • PHP
  • PrestaShop 1.7 → 9
  • Vue 3
  • Vite

Curieux comme moi ?

Retrouvez mon code et mes expérimentations, ou explorez le reste du Labs.