Le Temple du Argh tout puissant

En parlant de javascript... pour l'Aide de jeu en ligne pour le jeu PC Galactic Civilizations, j'ai ajouté la possibilité de changer le visuel et la langue de l'interface entièrement en Javascript.

Cet outil permet de calculer la valeur d'un jeu en se basant sur un système de notation de la qualité des planètes. Chaque élément (comme une planète, un système solaire) est un objet qui peut communiquer avec les autres et peut créer son propre code HTML. Le visuel de l'interface est défini en grande partie dans des feuilles de style, le code HTML étant le plus simple possible. La base de l'outil est l'objet gameManager - celui-ci s'occupe des éléments de navigation, et offre une série de fonctions dont les autres objets peuvent se servir, comme la fonction button() qui crée le code nécessaire pour un bouton.

Le changement de langue n'était pas trop difficile à faire - j'ai d'abord fait une recherche avec Google sur les possibilités d'inclure des fichiers javascript par le javascript, mais la méthode du document.write( '[balise script]' ); faisait que Mozilla rechargeait la page. Finalement j'ai trouvé une méthode plus élégante pour le faire: créer la balise 'script' avec la fonction document.createElement( 'script' ) ; et l'ajouter à la balise 'head' par document.getElementsByTagName('head')[0].appendChild( tag );. Comme mes définitions de langue sont composées d'une longue liste de variables, en chargant un de ces fichiers les variables existantes sont remplacées. Ensuite, une simple demande à chaque objet d'actualiser son contenu HTML suffit pour passer à la nouvelle langue.

Le changement de visuel lui a été un peu plus difficile: le principe est le même qu'avec le changement de langue, sauf qu'ici on insère une balise 'link' au lieu de la balise 'script' pour charger une nouvelle feuille de style. Le hic est que les styles définis dans les deux feuilles de style se complémentent: un padding:8px; peut être défini pour la balise 'h1' dans la première feuille de style, si la deuxième n'en a pas, ce style ne sera pas effaçé... Solution: effacer tous les styles existants avant de charger la nouvelle feuille de style. Cette opération est simple, il suffit de passer dans chaque feuille de style chargée et d'effacer les styles un par un avec la fonction document.styleSheets[x].deleteRule( x );. Peter-Paul Koch a une référence très complète là-dessus.

Pour l'instant, l'Aide de jeu ne fonctionne qu'avec des navigateurs basés sur le Gecko engine, comme Mozilla ou Firefox: j'ai utilisé des fonctions spécialisées comme addEventListener() (pour vérifier quand le fichier javascript est chargé), mais aussi parce-que je n'ai utilisé que la méthode recommandée par le w3c pour accéder aux informations de style.

Le résultat est ce que j'attendais: un outil en ligne très rapide, qui aurait demandé bien plus de travail avec un mélange javascript/PHP, et aurait été bien loin de cette rapidité. La seule chose qui reste à faire maintenant est d'ajouter le bouton 'sauvegarder' et ça marchera du tonnerre Rajouter cette fonctionalité prendrait un petit peu de temps, mais toutes les fonctions nécessaires sont déjà présentes: si vous avec cliqué sur un des boutons 'Vue XML', vous avez déjà remarqué que tous les objects peuvent se sérialiser en XML. De là il suffirait d'ajouter le stockage de cet XML par un script PHP, et de pouvoir le recharger et de créer les structures à partir de ça... mais ça, je vais le garder pour une autre entrée dans mon blog