Le Livre Dont Vous Êtes Le Héros
À quel livre dont vous êtes le héros aimiez-vous jouer dans votre jeunesse ?
J’aimais bien la série «Sorcellerie», et j’avais eu la mauvaise idée de commencer par le dernier tome, «La Couronne des Rois». Autant dire mission impossible.
Les années 80 étant loin derrière nous, je m’étais mis en tête d’y jouer avec une version plus moderne, en ligne ou sur tablette. C’était au début de cette année 2013. Il y avait bien quelques versions artisanales jouables par exemple dans la série Loup Solitaire, mais je n’ai rien trouvé qui me convenait pour sorcellerie.
Voilà une chouette idée de projet à réaliser durant mon temps libre, me suis-je dit.
Entre-temps, une réalisation professionnelle a été rendue disponible sur iPad. Mais je n’allais pas pour autant laisser tomber. C’est en tout cas bon signe : cela veut dire que des nostalgiques s’intéressent encore à cette série. Voici, pour votre plus grand plaisir, le premier livre de la collection entièrement jouable en ligne :
Ce premier tome est certainement le moins palpitant de la série. Il a pour but de permettre au héros d’accumuler des indices et des objets qui lui seront fortement utiles dans la suite de sa quête. N’oubliez pas de mémoriser toutes les formules avant de commencer votre aventure. C’est la règle!
Développement
Il s’est avéré que la quantité de travail nécessaire était bien plus importante que ce que j’avais pensé. L’auteur avait une imagination débordante. Si les règles de base sont relativement simples, le nombre d’exceptions et de cas particuliers est énorme. Chacune de ces exceptions demande un traitement ad hoc, ce qui m’a pris un temps exorbitant.
Quelques exemples :
- Un marchand vous propose une arme mais vous pouvez en marchander le prix en lançant un dé.
- Si vous portez le Brassard d’Escrime de Ragnar, vous aurez le droit d’ajouter 2 points à votre Force d’Attaque, lors des combats, si l’arme dont vous vous servez est une épée.
- La malédiction de Malanka vous fait perdre un point d’endurance supplémentaire à chaque fois que vous perdez des points d’endurance, sauf lorsque vous utilisez la magie.
- Vous tentez de briser une serrure à l’aide de votre épée. Pour cela vous lancez à chaque fois des dés. À chaque essai, la lame s’émousse un peu et vous perdez un point d’habileté si vous utilisez cette arme lors d’un combat.
Ou encore celle-ci : “Chaque fois que la Manticore vous infligera une blessure, lancez un dé. Si vous obtenez un 5 ou un 6, elle vous aura piqué avec sa queue de scorpion et vous perdrez alors 6 points d’endurance à moins que vous ne Tentiez votre Chance avec succès. Si vous êtes Chanceux, la blessure sera normale et vous n’aurez perdu que 2 points d’endurance ; si le chiffre obtenu au dé est de 1 à 4, le coup porté par votre adversaire vous fera simplement perdre les 2 points habituels d’endurance”.
Jamais rien de bien compliqué pour un développeur mais l’accumulation de ce genre de traitement sur plus de 400 chapitres m’a fortement ralenti dans ma progression !
Technos
Je n’allais pas laisser les geeks sur leur faim :-)
- AngularJS
- (twitter) bootstrap
- LESS CSS
- HTML5 local storage
- bower
- Gradle
- Pas de backend
- Serveur “HTML statique” (nginx)
AngularJS est un framework JavaScript open-source offrant une architecture MVC aux applications web. Les manipulations du DOM sont découplées de la logique métier. Des directives interprètent des tags HTML pour obtenir les comportements voulus. Une emphase particulière est mise sur les tests unitaires et e2e, facilités par la dependency injection.
Dans LDVELH, il n’y a que très peu de two-way data-binding, mais il reste néanmoins de nombreux avantages à utiliser AngularJS. Sa mise en oeuvre est tellement simple que cela en vaut la peine, même pour une application triviale.
Le design n’étant pas ma tasse de thé, je me suis reposé sur LESS, que j’ai customisé. Pour ce faire, j’évite de modifier directement les fichiers bootstrap, ou même de les customiser sur leur site avant téléchargement. C’est chercher les ennuis lors des mises à jour. Je préfère inclure les fichiers LESS de bootstrap et faire un override dans ma propre feuille de style, en LESS aussi bien entendu.
@import "lib/bootstrap/less/variables.less";
@import "lib/bootstrap/less/mixins.less";
@highlight: #B7521E;
@linkColor: @highlight;
@linkColorHover: darken(@linkColor, 15%);
Il faut juste penser à inclure `bootstrap.less avant votre propre feuille de style.
Le tout est compilé par le navigateur à l’aide de Gradle pour le déploiement.
Sur ce point, cela veut dire que mon environnement de développement diverge de la production, mais Gradle n’est pas un foudre de guerre et attendre quelques secondes pour recompiler après chaque modification n’est jamais agréable. Un middleware LESS sur node.js aurait l’avantage d’unifier les environnements en offrant une compilation quasi-instantanée.
Gradle compile donc les feuilles de style LESS mais nettoie aussi les fichiers (p.e. less.js ne doit plus être inclus) et il inclut/exclut les fichiers sources qui vont bien. Une tâche `scp me permet de pousser un .zip vers mon serveur AmazonEC2. Là-bas, un petit script en python déploie ce zip en test et se charge de cloner test vers production.
Pas de backend autre que le serveur statique, en l’occurence nginx. Bien plus léger que httpd, cela compte sur une instance EC2 micro. Un backend (middleware, db, identification du joueur…), c’est de la maintenance et je voulais éviter. Local storage pour se souvenir de la progression du joueur.
Bower n’est là que pour éviter de télécharger des libraires à la main mais il est clair que le workflow n’est pas le même que quand bower est utilisé avec grunt et node.js.