Garder les données en mémoire

Ayant multiplié les scripts comme d'autres les pains, je me suis retrouvé face à un autre problème : Comme on garde les variables, en fait ?

La solution que j'ai trouvée, est toute simple : Je les mets en attribut des images présentes sur l'écran.

En effet, on peut donner n'importe quel attribut à un élément HTML (au moins les images). Il faut juste éviter de donner un nom "réservé" (c'est à dire qui à un sens pour le navigateur lorsqu'il le trouve comme attribut).

Un navigateur qui ne reconnaît pas un attribut se contente de l'ignorer.
J'ai donc placé comme attribut aux villes des choses comme leur nom, le joueur auxquelles elles appartiennent, leur population, etc.

Sur le bouton de passage de tour, j'ai mis des données plus générales (comme le tour en cours, bien sûr).

Ensuite, comme je sais évidemment où je place quoi, il suffit à un script en ayant besoin d'aller chercher l'attribut voulu.

Par exemple :

    document.getElementById('case8[2]').setAttribute('bloquer','1');

Au début du script se chargeant d'afficher la "fenêtre" de ville, cette commande change l'attribut "bloquer" du bouton de passage de tours ('case8[2]', c'est son nom, pour le moment).

Quand le joueur clique sur le bouton de sortie de cette fenêtre, le script commence par :

    document.getElementById('case8[2]').setAttribute('bloquer','0');

En clair, il remet l'attribut "bloquer" du bouton de passage de tour à 0.

À quoi ça sert ?

Eh bien quand le joueur clique sur le bouton de passage de tour, son script fait ça :

    var bloquer = document.getElementById('case8[2]').getAttribute('bloquer');
    if (bloquer =='0')
    { reste du script }

Il lit la valeur de l'attribut "bloquer", toujours au même endroit, et la place dans une variable, simplement appelée "bloquer" aussi.

Puis il vérifie si "bloquer" vaut 0. Si tel est le cas, il exécute le reste du script, sinon ben il va tout de suite à la fin du "if", et là il n'y a plus rien, donc le script s'arrête.

En pratique, du point de vue du joueur tout au moins, celà désactive le bouton de passage de tour lorsque la fenêtre des villes est affichée.

Gloire à la Nuée !

Quand j'ai voulu écrire le code pour le passage des tours, j'ai naturellement écrit ça à la suite du code précédent, dans le même script.

Au début, ça marchait bien : Les tours passaient, une "alert box" suffisant à arrêter le jeu entre chaque tour.

Et puis j'ai ajouté du code pour remplacer l' "alert box" par une pause automatique entre les tours, le jeu passant au tour suivant par clic sur une image directement sur la page.

Et c'est là que ça s'est compliqué : Javascript n'a pas de système de pause intégré.
J'ai donc mis un pause "infinie" (un while avec une condition fausse par défaut).

Une interception d'évènement étant sensée changer la condition en "vrai" si le joueur appuyait sur le bouton de passage de tour.

Ah ouais mais non... Ça ne marche pas comme ça, finalement : Non seulement, apparemment, un script en cours ne lit pas les évènements, ce qui veut dire qu'on ne peut pas lui faire prendre en compte un clic, mais en plus les navigateurs ne supportent pas les scripts qui durent trop longtemps, à commencer par les boucles "infinies".

Moi y'en a être bien embêté.

Alors j'ai fini par me résoudre à ne pas faire un seul script monolitique, mais un par action désirée.
Finalement, ça marche aussi bien : Le script originel (et non "original", bande d'anglomanes !) se charge de créer la carte et de mettre en place tous les éléments du jeu, un autre script intercepte les clics sur le bouton de passage de tour et... fait passer le tour, un troisième script ouvre une "fenêtre" spéciale lorsqu'on clique sur une ville, et voilà.

Finalement, c'est même probablement plus simple.

Tours et fenêtre de ville

Ratsodie a bien avancé. C'était dur. En particulier, j'ai eu des surprises avec les CSS.

Figurez-vous que le positionnement des éléments (via CSS, donc) dépend de l'élément dans lequel ils se trouvent. Par exemple, une image placée dans un "div" dépend du positionnement du div.

Jusqu'ici, rien d'incompréhensible.

Ouais... Sauf que ça veut dire que si l'élément parent (ici le "div") ne possède pas de position déclarée comme telle, il y a des chances qu'un ou plusieurs éléments "enfants" (ici l'image) ne se positionne pas correctement.
Par exemple, dans mon cas, alors que toute la carte s'était correctement installée, les deux derniers éléments affichés par le script (une image et un texte) ne s'empilaient pas correctement : Le texte apparaissait en dessous de l'image, alors que leur z-index spécifiait clairement le contraire.

Et le plus drôle : Quelque soit le z-index spécifié, les deux éléments en question s'empilaient correctement avec les autres éléments.
En clair, je pouvais avoir la carte par dessus l'image, elle-même par dessus le texte, et ce dernier par dessus la carte (ce qu'on pouvait constater en les faisant déborder les uns des autres)...

J'ai eu la réponse sur le même forum que la dernière fois (merci Rtrethewey et Eye for Video) : Il me fallait préciser dans le DIV qui contenait mes deux derniers éléments (bref, leur parent) un posisitionnement, z-index compris.

Tu parles d'une chierie...



Enfin, quoi qu'il en soit, voilà l'évolution du moment :

Passage des tours
- En appuyant sur le gros bouton vert (piqué sur OpenCliparts, pour le moment), on fait avancer le tour, qui est lui indiqué en haut à droite.
- On peut spécifier le premier tour.
- Ainsi que le dernier.
- L'incrément.
- S'il y a un tour 0 (sinon, le jeu ajoute l'incrément).
- S'il y a un numéro d'ère (avant et après le "point zéro" du "calendrier"), et ce que c'est (genre "av. JC" et "ap. JC").
- Le bouton de tour peut se placer où le veut le moddeur.

Population
- En dessous du numéro de tour, est indiquée la population totale de l'empire du joueur. Ce nombre n'est pas recalculé à chaque tour, mais seulement lorsque quelque chose change (ce qui signifie que, pour le moment, il ne change pas du tout...)

Villes
- En cliquant sur une ville, on ouvre une fenêtre : Celles des villes.
- Pour le moment, cette fenêtre n'indique que le nom de la ville.
- En bas à droite (également plaçable ou le souhaite le moddeur), un bouton de sortie (tout aussi également piqué sur Openclipart, avant que je crée les miens). En cliquant dessus, on ferme la fenêtre (en fait, on appelle une fonction qui détruit le DIV de la fenêtre de ville).



La prochaine fois, j'espère avoir ajouté les premiers aménagements de ville (les constructions, quoi).

Villes, population et civilisation

Voici les mises à jour du moment :

- Les villes ont à présent un nom.

Ce nom s'affiche au dessus de l'image de la ville, dans un cadre coloré.

À côté, certaines villes ont une étoile. C'est le symbole de capitale.

En dessous de la ville, un autre cadre, qui indique la quantité de population présente.

Je n'ai pas réellement cherché à centrer ces cadres ; on verra plus tard.


Pendant que j'y étais, j'ai introduit le principe des races (des camps, des civilisations, etc.).

En clair, j'ai ajouté une section "civilisations" à la partie "mod" du script. Pour le moment, cette section n'indique que la couleur de chaque civilisation, comme ça :

// Civ1
civ_couleur[1] = "00FFFF";

// Civ2
civ_couleur[2] = "FFFF00";

Ensuite, chaque joueur (humain ou machine) possède une civilisation :

joueur_civ[1] = 1;
joueur_civ[2] = 2;

Celà signifie, ici, que le joueur 1 joue une civilisation de numéro 1, et le joueur 2 une civilisation numéro 2.
Comme vous vous en doutez, plusieurs joueurs peuvent jouer la même civilisation, mais je ne me suis pas encore penché sur le moyen de les différencier sur la carte.

Ensuite, pour les villes :

ville_position[1] = "5*3";
ville_nom[1] = "Ville 1";
ville_joueur[1] = 1;
ville_capitale[1] = 1;
ville_population[1] = 10000;

Pour le moment, donc, une ville est définie par sa position sur la carte, son nom, le joueur à qui elle appartient, si elle est une capitale (1 = oui), et sa population.



Je tiens à remercier Padonak (et Trethewey), du forum "webdeveloper", pour leur aide au sujet de l'affichage de texte via javascript : innerHTML permet d'ajouter du text dans un "createElement".