J'ai crée une appli de VTT, et maintenant ? 13

Salut tous le monde.
Depuis la fin 2025, je suis sur un projet de création d'une VTT.

La génèse :

Pourquoi ?
Ma problématique était simple, je jouais à Dragons, des studios Agate, et j'utilisais FoundryVTT.
Je pouvais :

• Passer par le module D&D, mais tout était design D&D, il y avait des compendiums D&D... Ca ne m'allais pas.
• Passer par "systemless" et "pdfPager" et avoir les PDF éditable. Ce que j'ai fais, mais l'ergonomie n'est pas terrible sur un PDF. Quand on veut des détails pour les sorts, ou autres, on est vite limité par l'espace des champs des PDF.

Et puis, il n'y a pas de version mobile de Foundry.

J'ai donc ouvert mon VS code et commencé à mettre en place une VTT "Lite".

Pour se faire, je suis parti sur une technologie Nest JS pour le Back et Angular 21 pour le Front, étant les stacks que je connais. De plus, j'ai utilisé Gemini pro comme assistant IA. (On parlera technique plus bas).

Cette application a eu 3 versions. Dans la première, que j'avais appelé "FateforgeCharacterSheet" j'ai voulu faire une application "dédié" à Dragons. Il y avait les feuilles de personnages de Dragons. Il y avait les données des livres. Et c'était "pas mal".

Mais j'ai eu 3 problématiques :

• Je voulais une VTT qui laissait vraiment un coté "table IRL". Et là, je commençais à avoir des automatismes pour créer les personnages. Les objets et sorts étaient déja tout fait. Etc. Celà ne me convenait pas. On perdais le coté "papier" où les joueurs doivent "apprendre / comprendre" pourquoi il y a écrit cette valeur dans ce champs.
• Les données n'étaient pas "ouverte". Si un jour je voulais partager ma VTT, je ne pouvais pas car des termes comme Eana ou autre sont propres à Dragons. Et je n'avais pas envie de m'embêter avec tout ces trucs juridiques.
• On est passé sur RNP... Mais du coup, tous ce que j'ai fais n'allais plus... Le design un peu grimoire, les données.

J'ai repris mon VS Code, et je suis repartit de 0. Et me voici avec la version "RNP / 5E" de mon application.

C'est pas mal, mais nous, on joue à RNP, COC2 et bientôt Daggerheart... Avoir une VTT qui ne fait que de la 5e, ca ne me va pas.

Donc VS Code, et une version 3, une VTT avec des éléments "génériques" qui m'ont permis de mettre en place les 3 systèmes.

Mais du coup, à quoi ça ressemble ? Qu'est ce qu'on peut faire ?

Codex VTT :

Le nom n'est pas définitif. On a juste avec un ami, toujours appelé nos projet au sein d'un groupe "codex". C'est quelque chose qui est resté.

Ce que l'on peut faire :

• S'incrire rapidement, pas de mail. Juste un username et un pin.
  • A terme, je doit trouver une solution pour le reset des pins si jamais on le perd.
• Se logger, tout aussi rapidement
• Créer une room, avec un nom, et un système (RNP, COF2, Daggerheart)
• Partager le code de la room pour que les utilisateurs la rejoigne.
• Créer des feuilles de personnages pour les joueurs (PJ) et des PNJ pour le MJ.
• Exporter et importer les feuilles en JSON
• Exporter les feuilles en PNG
  • L'export PDF est possible mais plus compliqué. Il faut que je gère les tailles de pages. C'est pour dans le futur.
• Prendre des notes :
  • Globales (accessible à toute la room)
  • Personnelle (accessible au joueur qui l'a prise)
  • Personnage (lié à la feuille de personnage)
• Partager des images en tant que MJ.
• Une aide mémoire, permettant d'avoir un accès rapide aux règles.
• Un turn tracker nous permettant de suivre les actions faites pendant ce tour
• Un combat tracker, permettant de suivre l'ordre du combat
• Une battlemap permettant de représenter le combat rapidement
• Lancer les dés avec quelques règles lié aux systèmes.
• Changer de langue entre l'Anglais et le Français.
• Changer de thèmes (Clair / Sombre + Différentes variations)
• Utiliser l'application sur Mobile et Tablette.

La philosophie, comme je l'ai dit, est le sentiment "autour d'une table". On a notre feuille de personnage. Et le reste gravite autour.

C'est pourquoi, la feuille de personnage est l'élément principal de l'application.

Il n'y a pas d'automatisation des lancer (on ne peux pas cliquer sur FOR et avoir un test deja lancer). Il faut selectionner ses dés, voir si on a avantage ou pas, pour RNP par exemple. Tous les joueurs voient une animation de lancer de dés, pour avoir la même tension qu'on a quand on est ensemble. Il n'y a pas de chat, la battlemap est très basique (des cases, des tokens) et la possibilité de dessiner dessus.

La suite ?

Et bien, je ne sais pas.

Nous avons des parties RNP de prévu dès le 1er avril afin de tester l'efficacité de l'application conrètement. Donc j'ai mis en place les éléments de notre campagne RNP.

Notre MJ COC2 va aussi copier les données de notre campagne COC.

Et au printemps, Daggerheart sort en VF donc on verra.

J'aimerais partager l'application avec d'autres groupes à l'avenir. Mais je ne sais pas encore trop comment m'y prendre.

En effet, je ne suis pas des plus à l'aise pour faire des vidéos Tutos.

Je n'ai pas les capacités de communications necessaire pour faire un site montrant l'application.

Bref, la comm, c'est pas pour moi. Et je ne pense pas "vendre" cette application, parce qu'il y a déjà beaucoup de VTT et que celle-ci n'est que "mon besoin".

Du coup, est ce que je partage le dépot Git ? Pour permettre au gens de récupérer le code ?

Est ce que je fais un EXE ?

Pleins de choix stratégiques auxquels je n'ai pas répondu. Et c'est pourquoi je suis ici

Les évolutions :

• Avoir une version stable déjà
• Export PDF
• D'autres systèmes ?
• Ergonomie et Design ?

La technique et l'utilisation de l'IA :

Je suis tech lead Angular dans une société de service depuis plusieurs années. Je suis donc partie sur le front Angular car c'est ce que je maitrise.

Pour le back, j'ai voulus rester sur du TS, du coup, j'ai pris nestJs qui me permet de rester sur un language que je connais.

Ce n'est peut être pas le plus optimal, mais comme c'est un projet qui n'est pas censé être commercialisé, autant que je me fasse plaisir sur la techno et que je gagne du temps.

Et pour gagner du temps, j'ai utilisé l'IA.

J'ai utilisé la BMAD Method pour ceux que ça interesse.

Je sais que l'IA est un sujet brulant, donc par transparence voici à quoi elle a servie :

• Brainstorming
• Reflexion sur l'architecture
• Génération des projets (en tapant les CMD quoi)
• VibeCode

Je n'ai pas utilisé l'IA pour générer des icones, ou tout autre choses du genre. Elle ne m'a servie que d'assistant.

Elle a donc tapé pas mal de code pour me faire gagner du temps. J'ai de mon coté j'ai tout supervisé, vérifié et amélioré.

En effet, cette application reste un hobbie et un besoin personnel. Je n'ai pas le besoin de taper du code pendant mes heures personnelles pour le plaisir. Et pas le temps. Donc, un peu d'IA, ça aide.

Quelques images ?

Les images sont visible sur le Drive.

Il y a des captures et une WEBP animé qui montre un tour rapide de l'application.

Depuis, des améliorations (sur les synchro, la battlemap etc) ont été faites.

Je ne suis pas designer, ni ergonome, ni graphiste... Donc c'est peut être pas le plus beau, mais c'est fonctionnel ^^'

EDIT : Le serveur de démo

Demo VTT
Voici le serveur de démo. Il vient tout juste de démarrer. J'ai juste crée une room, une feuille de perso, vérifier l'upload d'image et le socket.
Je suis preneur de retour / bug si il y en a

--------------

Merci d'avoir lu

Je suis disponible pour des infos, et avoir les retours et avis bien entendu !

Très belle initiative, il semblerait qu'il y ait un nid dans notre beau département du Tarn.
J'ai un ami qui a à son actif plusieurs initiatives notamment sur Foundry VTT et lui aussi s'est lancé il y a peu dans une VTT maison.

Si tu le souhaites, tu peux prendre contact avec moi, nous avons plusieurs tables de jeu à distance et pas mal de technophile dans le groupe.

Ça à l'air vraiment pas mal, bravo. Comment faire si on souhaite essayer la VTT ?

C'est là toute la question... xD
Je suis en train de voir pour déployer une version "Démo" sur mon VPS pro.
Je test ça

Demo VTT
Voici le serveur de démo. Il vient tout juste de démarrer. J'ai juste crée une room, une feuille de perso, vérifier l'upload d'image et le socket.
Je suis preneur de retour / bug si il y en a

Salut

J'ai eu un premier problème : le nom de joueur n'accepte pas les majuscules j'ai donc créé "alaric" plutôt qu'Alaric.

Sinon je me demande comment créer un personnage. Je vais fouiller.

J'ai dl l'appli mais seulement testé sur browser. Ça fonctionne pas mal sur téléphone et c'est déjà nettement mieux que Roll 20 ...

L'appli ne fonctionne pas pour créer un PNJ, tous les input sont effacés après saisie

Pour le browser j'ai pu créer un PNJ le doter d'une image (même si le cadre reste vierge, l'image apparaît bien quand on choisit son voyageur).

Je ne sais pas trop ce que ton appli produit comme automatisation dans le cadre de cette démo mais je n'ai pas trouvé le moyen de lancer un dé depuis la feuille. Le lanceur fonctionne même si c'est un poil long.

Dis moi s'il y a d'autres choses que tu aimerais voir tester et merci pour ton boulot.

Salut, alors :

• je n'ai pas trouvé le moyen de lancer un dé depuis la feuille : c'est normal, on ne peut pas. Pour le moment on ne peux que depuis le diceRoller.
• le nom de joueur n'accepte pas les majuscules : Ah ? Je viens de créer "Patatest" et ça a marché
• j'ai aussi pu créer des rooms, feuilles, et tout et tout.
• tu es sur quel navigateur pour information ? que je vois d'où cela peut venir
• voici un compte avec une feuille "complete" : demo - 1111

- Je trouve que les placeholders (les textes qui sont déjà dans les champs) devraient être un peu plus "discret / transparent". C'est une des futures évolution.

- Aujourd'hui j'ai rajouté le codex/encyclopédie. (c'est en beta encore). Comme j'ai tapé 3X le même sort, j'en ai eu marre. Donc maintenant on peut sauvegarder un sort, un don, une arme etc dans ce codex. Cela permet de la réimporter rapidement à un joueur. On peut aussi rendre ces données "globale a un systeme". Par exemple "épée longue" est un item que l'on crée, on l'utilise sur toute nos room RNP, alors en le rendant globale on devrait le voir dans toutes les rooms qui ont le même systeme RNP.

- Il y a un patchnotes dans l'application permettant de voir les évolutions, et de temps en temps, un petit ctrl+f5 pour recharger sans cache (des fois, les clées de traductions en ont besoin).

Alors en fait ce sont les espaces qui posent problème : Alaric Le Couard n'a pas été accepté.

Navigateur : chrome.

Je vais tester les autres fonctionnalités (en restant sur browser).

Ah oui le username !

En effet les espaces ne sont pas autorisés. Il est vrai que le placeholder d'exemple n'est pas terrible.

Je vais faire une passe sur les placeholders aujourd'hui.

De plus j'ajoute que sur Mobile, il est possible d'installer l'application depuis le navigateur. Cela permet d'avoir un plein écran sans barre de navigation

J'ai vu qu'il y a une fiche COF2, une pour DH et une pour RNP. C'est possible d'en créer une customiser ?

Non, j'ai développé les système "en dur".
J'ai mis en place un format "JSON" pour créer une config. Mais ca ne créer pas encore la structure de la feuille automatiquement. Il faut quand même créer les composants manuellement.

Peut être à terme je mettrais un builder. Mais ce n'est pas en projet sous peu.
Par contre, je peux tenter à la demande de mettre un nouveau système
Si je pars sur le fait d'ouvrir le code au public, alors peut être qu'on pourra avoir plusieurs systèmes mis en place rapidement. Mais je n'ai pas de doc de développement.

Salut !
J'ai fais quelques modification suite à notre première session hier :

• Le panneau liste des joueurs est maintenant flottant. Il ne décalle plus la fiche de personnage
• Un systeme de "dossier" est disponible pour les notes et les images
• Le systeme d'ajout d'images à des notes est modifié, maintenant en cliquand sur "ajouter cette image à une note" créer un lien markdown qu'il est possible de coller dans une note. Ca affiche une miniature de l'image qui est cliquable et qui affiche l'image.
• On peut choisir à qui on affiche une image, par défaut "tous les joueurs" et il est possible de choisir un ou plusieurs joueurs.
• Quelques correctifs et optimisations de code.