Aller au contenu
Mathis Beauville

Tous les travaux-

Salon

Les jeux de société sur la télé, les téléphones comme manettes

Contexte
Projet personnel
Rôle
Conception, pilotage du développement avec Claude Code, déploiement
Période
Septembre 2026
Stack
TypeScript, React, WebSocket, Effect, three.js, Docker, Kubernetes
En ligne
salon.obstinate.fr
Accueil de Salon : rejoindre une salle avec un code, ou ouvrir Codename, Las Vegas ou Undercover sur l’écran.

Le besoin

Nos soirées jeux entre amis avaient deux ennemis : le jeu oublié à la maison, et l’ami qui l’a mais qui n’est pas venu.

Salon met les jeux sur la télé, et chaque téléphone devient une manette. On scanne un QR code, on joue. Il n’y a rien à installer.

Ce qui rendait le sujet délicat

  • Des informations cachées : les rôles de Loup-Garou ou d’Avalon, la grille de l’espion à Codename, les cartes au Texas Hold’em. Chaque téléphone doit voir exactement ce qu’il a le droit de voir, et rien de plus.
  • Des coupures en pleine partie : un téléphone se verrouille, perd le wifi, recharge la page.
  • Quatorze jeux, avec des minuteurs et des actions simultanées, comme la nuit de Loup-Garou.

Décisions

D’une page pair-à-pair à un serveur qui fait autorité

La première version tenait dans une page HTML : Codename seul, en pair-à-pair, avec l’état de la partie gardé sur l’ordinateur branché à la télé.

Pour la fiabilité et pour ajouter des jeux, j’ai tout déplacé sur un serveur. Il garde l’état de la partie et envoie à chaque appareil uniquement la vue qui le concerne. Lire le trafic réseau de son téléphone ne révèle rien.

Appareils
  • La télé
  • Les téléphones
    une action par clic
Serveur
  • La salle
    traite les actions une par une
  • L’état de la partie
    complet, jamais envoyé tel quel
Ce que chacun reçoit
  • Télé
    le plateau public
  • Espion
    la grille des couleurs
  • Agent
    les mots seulement
À Codename, le serveur envoie la grille des couleurs aux espions, et à eux seuls.

Un leurre pour ceux qui n’ont rien à faire

La nuit, à Loup-Garou, les joueurs sans action voient quand même un écran à manipuler. Personne ne peut deviner les rôles en regardant qui touche son téléphone.

Une salle, une file d’attente

Chaque salle traite ses actions une par une, dans l’ordre. Deux joueurs qui cliquent au même moment ne peuvent pas corrompre la partie. Un clic arrivé trop tard pour le tour en cours est refusé, et un minuteur périmé est ignoré.

J’ai écrit le serveur avec Effect : c’est une stack moderne, la composition rend ce genre de logique lisible, et ses types cadrent bien le développement assisté par IA.

Retrouver sa place

Un téléphone qui se reconnecte, même après avoir été verrouillé ou rechargé, reprend sa place dans la partie. L’écran reste allumé pendant qu’on joue.

Des dés lancés par le serveur

À Las Vegas, on secoue son téléphone pour lancer. Le serveur simule le lancer physiquement, à partir de la force du geste, et envoie la trajectoire, une dizaine de kilo-octets. La télé et les téléphones la rejouent en 3D, au même moment.

Conçu par moi, écrit avec Claude Code

J’ai conçu l’architecture et piloté l’écriture avec Claude Code, en un week-end.

Ce qui a permis d’aller vite sans casser :

  • des jeux écrits comme de la logique pure, testée jeu par jeu ;
  • un test qui lance le vrai serveur et joue par WebSocket ;
  • des règles interactives qui font tourner la vraie logique du jeu.

Résultat

jeux jouables, de Codename à Avalon
14
jeux jouables, de Codename à Avalon
de la première page à la version actuelle
1 week-end
de la première page à la version actuelle
  • Quatorze jeux jouables en ligne, dont Codename, Loup-Garou, Avalon, Texas Hold’em et 6 qui prend.
  • Déployé sur mon cluster : image Docker, intégration continue, mise à jour automatique par Flux.
  • On y joue vraiment en soirée, et c’est Codename qui revient le plus souvent.
  • Limite assumée : les parties sont gardées en mémoire, sur une seule instance. Un redémarrage coupe les parties en cours.
Accueilg h
E.Leclerc (SIPLEC)
EssilorLuxottica
Fitex
Salon
Contactg c
Voir le CV
Copier l’adresse e-mail[email protected]y
Réserver un appel de 30 minutes
Changer de thèmet
Read this page in English
Afficher les raccourcis?
GitHubObstinateM
LinkedIn
Vesper++VS Code Marketplace

Raccourcis clavier

Se déplacer

jk
Élément suivant, précédent
Entrée
Ouvrir l’élément sélectionné
hl
Projet précédent, suivant
-
Remonter d’un niveau
g gG
Haut, bas de la page
g h
Accueil
g c
Contact

Agir

⌘ K/
Palette de commandes
y
Copier l’adresse e-mail
t
Changer de thème
?
Afficher cette aide