Tableau de score numérique pour Game of Thrones avec l'extension Mother of Dragons, affiché sur une télé pendant les parties.
On jouait régulièrement au jeu de plateau Game of Thrones après le travail avec des collègues. La 2e édition avec l'extension Mother of Dragons est un jeu complexe et les composants physiques cachent beaucoup d'information au fil de la partie. Suivre qui contrôle quoi, qui doit quoi, et quel est le score réel devient un défi en soi, en plus de jouer.
J'ai construit un tableau de score pour tourner sur un ordinateur portable branché à une télé, afin que l'état complet de la partie soit visible par tout le monde en permanence, sans fouiller dans les composants. L'objectif était de le faire ressembler le plus possible au vrai jeu de plateau. Beaucoup d'efforts ont été consacrés à recréer fidèlement les visuels, et le glisser-déposer rend le déplacement des pièces naturel.
React avec Redux pour la gestion d'état. C'était un choix délibéré puisque j'apprenais Redux à l'époque et qu'un jeu avec un état partagé complexe était un bon cas d'usage concret. Le glisser-déposer passe par react-beautiful-dnd, que j'ai aussi appris sur ce projet. styled-components pour le style. Pas de backend, tout vit côté client.
Ce projet avançait sur plusieurs fronts d'apprentissage en parallèle. React, Redux et react-beautiful-dnd étaient tous nouveaux à l'époque. L'état du jeu était assez complexe pour que Redux soit un vrai cas d'usage : suivre les maisons, les scores, les jetons de pouvoir et les phases de jeu sur le plateau aurait été chaotique avec du state local seul. Faire en sorte que le glisser-déposer soit agréable tout en respectant les règles du jeu sur ce qui peut bouger où a demandé plus d'itérations que prévu.