Reins

Contexte

Ce projet a été réalisé dans le cadre de mon Travail de Fin d'Études en 3e année de bachelier au sein de la Haute École Albert Jacquard.

Depuis quelques temps, je joue à World of Warcraft. Et sur ce jeu, j'ai découvert une manière de jouer qui me passionne : la chasse aux montures. Déjà utilisateur de divers outils permettant de faciliter cette chasse aux montures, j’ai voulu proposer ma version de ce genre d’outils en y incluant des fonctionnalités absentes dans ceux que j’utilisais déjà.

Direction artistique

Pour la direction artistique, j'ai voulu proposer quelque chose se rapprochant de la direction artistique déjà établie par Blizzard pour World of Warcraft, en reprenant des codes visuels de l’interface du jeu afin de les inclure dans cet outil. L'important pour moi était de garder un aspect fantasy et de donner l’impression que l’outil est une extension du jeu, afin de préserver l’immersion.

Les codes visuels repris passaient principalement par :

• l’utilisation des couleurs et textures sombres présentes en jeu rehaussées d'accents dorés ;
• l’utilisation de la Tiller — une typographie à léger empattement — comme police principale, accompagnée de la Sentient Variable pour les textes en italique ;
• l'intégration de propriétés CSS modernes telles que corner-shape: bevel pour reproduire fidèlement les coins biseautés des fenêtres de World of Warcraft ;
• l’utilisation de menus accordéons directement inspirés de ceux du journal de quêtes de World of Warcraft.

Développement

Pour le développement du site, s'agissant de mon Travail de Fin d'Études, j'ai choisi de m'orienter vers l'apprentissage d'un framework moderne afin de créer une application web réactive et performante. Mon choix s'est porté sur Vue.js pour sa prise en main intuitive, concrétisé par l'utilisation de Nuxt 4 en TypeScript. L'écosystème Nuxt m'a permis de concevoir une architecture robuste, tirant parti du rendu côté serveur (SSR) et d'un backend intégré avec le moteur Nitro pour gérer les routes API internes et l'authentification.

Une grande partie des données affichées sur le site provient de l'API officielle de World of Warcraft (Game Data et Profile APIs). La liste des montures classée par catégorie s'appuie quant à elle sur un catalogue communautaire régulièrement mis à jour. Pour enrichir l'expérience, j'ai également intégré le script officiel de Wowhead, permettant d'afficher des infobulles interactives fidèles à l'interface du jeu au survol des montures et objets.

Certaines données de l’API de WoW n'étant pas accessibles publiquement, l’utilisateur doit se connecter à son propre compte Battle.net pour afficher sa collection personnelle. Pour orchestrer cette authentification, j'utilise Better Auth couplé au protocole OAuth 2.0 / OpenID Connect de Blizzard (avec les permissions openid et wow.profile).

Ce système offre également la possibilité de personnaliser l'expérience : les utilisateurs peuvent épingler des montures afin de construire leur propre route de farm ou « tableau de chasse » hebdomadaire.

Pour assurer la persistance de ces données et des sessions, j'ai mis en place une base de données relationnelle PostgreSQL hébergée sur Neon (Serverless Postgres). Lorsqu'un joueur épingle une monture, celle-ci est enregistrée dans une table dédiée (pinned_mounts) avec son nom, son identifiant, son icône, son identifiant d'objet et la référence de l'utilisateur. Ces opérations sont traitées côté serveur via le client @neondatabase/serverless au sein d'endpoints API dédiés (/api/pin-mount, /api/unpin-mount, /api/pinned-mounts). De plus, une logique de synchronisation automatique compare les montures possédées avec la liste épinglée : dès qu'une monture ciblée est obtenue en jeu, elle est automatiquement retirée du tableau de chasse sans nécessiter d'action manuelle.

Pour guider les joueurs hésitants sur leur prochaine session de chasse, Reins intègre une fonctionnalité de suggestion aléatoire (« Random mount »). L'algorithme filtre en temps réel l'ensemble du catalogue pour exclure les montures déjà possédées par le joueur connecté et ne proposer que des montures manquantes. D'un simple clic, le joueur peut relancer un tirage aléatoire, consulter le guide d'obtention de la monture suggérée ou l'ajouter directement à ses montures épinglées.

Les utilisateurs peuvent également visiter les profils d'autres joueurs afin de voir leurs collections ou simplement consulter leur propre écurie en tant qu'invité, sans devoir se connecter, en effectuant une recherche par région, royaume et nom de personnage.

En plus de pouvoir visualiser une collection, les utilisateurs ont la possibilité de la comparer avec celle d'autres joueurs. Lors de cette comparaison, l'application met en évidence les écarts dans chaque catégorie et affiche les montures manquantes respectives. Les joueurs ont également la possibilité de partager le résultat facilement en copiant le lien paramétré de la page.

Chaque monture dispose de sa page dédiée, où sont présentées les manières de l'obtenir dans le jeu (quêtes, réputations, butins de boss, hauts faits). Ces informations qualitatives ne pouvant pas être récupérées automatiquement via les API du jeu, les pages de guides sont rédigées en Markdown et gérées grâce à Nuxt Content (v3). Afin d'encourager la contribution communautaire, j'ai également configuré Nuxt Studio (via GitHub OAuth) : les passionnés peuvent ainsi proposer de nouveaux guides ou apporter des corrections directement depuis l'interface web pour enrichir la base de connaissances.