R3.01 - dev. web - côté client (vuejs)

• Dans un terminal, créez un projet vuejs nommé rpg : vue create rpg.
• Télécharger les canevas de code [ ici ] et décompacter l'archive.
• Cette archive contient 2 fichiers :
  • App.vue : copier ce fichier par-dessus celui qui a été généré par vue-cli (src/App.vue). Vous n'avez pas à modifier ce fichier.
  • Town.vue : copier ce fichier dans src/components. Vous devez compléter ce fichier.
• Prendre votre fichier model.js du TP2 (ou bien celui proposé en solution) et :
  • copier le fichier dans src/
  • ajouter à la fin du fichier copié une instruction permettant d'exporter la ville et les personnage. Par exemple, si votre ville est dans la variable town et les perso dans la variable players, ajouter  : export { town, players } (NB : dans la solution proposée du TP 2, la ville est dans la variable town1 mais vous pouvez sans problème la renommer town)
• Effacer le fichier src/components/HelloWorld.vue.
• Editer Town.vue et dans la partie script :
  • vérifier que le import importe les mêmes noms de variables que ceux qui sont exportés dans model.js
  • vérifier que la variable currentTown observe la variable représentant la ville (par ex. town si town est le nom qui a été exporté/importé)

Remarques :

• App.vue se contente d'importer le composant Town et de l'utiliser dans la partie <template>.
• Dans Town.vue, le champ data est déjà rempli avec toutes les variables nécessaires à l'application. Il est fortement conseillé de la laisser telle quelle (sauf si le nom de la variable ville n'est pas correct)
• Ces variables correspondent à toutes les informations qu'il va falloir afficher dynamiquement dans la page, et éventuellement récupérer leur valeur quand elles sont utilisées dans des champs de saisie.
• Dans Town.vue, les emplacements où il faut compléter le code sont numérotés comme les exercices.
• Dans certains exercices, il faudra utiliser une syntaxe vuejs qui n'a pas été abordée lors du TD 3. Dans ce cas, des conseils permettront de répondre à ce qui est demandé.

Exercice 1 : l'entête de la page.

1.1 - créer la liste déroulante pour sélectionner le personnage courant.

• Le principe est le même que dans le TP 2, en utilisant <select> et <option>.
• La différence est que l'on doit utiliser la directive v-for sur <option> pour éviter d'écrire une liste "en dur" et que l'on doit appeler la méthode selectPlayer() qui se trouve dans methods (cf. exo 1.3)

CONSEILS :

• En HTML+JS, on peut appeler une fonction lorsque la sélection est modifiée et que l'événement change est émis, grâce à l'attribut onchange.
• Par exemple : onchange="selectPlayer(event.target.value)" va permettre d'appeler la fonction selectPlayer avec comme paramètre la valeur de l'attribut value de l'item sélectionné.
• En vuejs, il est possible de faire la même chose pour appeler une fonction définie dans methods.
• Dans le cas présent, on écrit : @change="selectPlayer($event.target.value)"
• La syntaxe est quasi identique à part :
  • pour capturer l'événement change, on écrit @change (ou bien v-on:change)
  • pour accéder à l'événement, on écrit $event (au lieu simplement event)

1.2 - afficher le nom de la ville

• La ville courante est accessible grâce à la variable currentTown.
• Utiliser les moustaches pour afficher en très gros titre le nom de la ville courante.

1.3 - affichage du titre de la partie personnage

• Utiliser les moustaches pour afficher le nom du personnage courant, son niveau et ses points de vie.

1.4 - changement de personnage

• écrire la fonction selectPlayer(id) qui met à jour currentPlayer avec players[id].

A ce stade, vous pouvez tester votre page, notamment si le changement de personnage dans la liste provoque bien un changement dans l'affichage du titre de la partie personnage.

Exercice 2 - la sélection de la rue et de la boutique courantes

2.1 - la liste des rues.

• Problème : pour chaque ligne de la liste à puce, il faut utiliser 2 balises : <input> et <label>
• Or, v-for ne fonctionne que sur 1 balise.
• Comme indiqué dans le TD, il est possible d'appliquer v-for sur <div> et mettre plusieurs balises dans <div> pour les répéter X fois.
• Dans le cas présent, il faut appliquer le v-for sur currentTown.streets et pour chaque rue, afficher un bouton radio et un label.

CONSEIL :

• Chaque bouton radio créé avec <input> doit avoir la même valeur d'attribut name si on veut qu'un seul bouton soit sélectionnable à la fois.
• En revanche, on doit donner une valeur différente à l'attribut value. La solution la plus simple est de donner des valeurs 0, 1, 2, ... à chaque bouton. Lors d'un clic sur un bouton, il suffit de récupérer sa valeur (avec $event.target.value) pour avoir le numéro du cliqué.
• La différence avec la liste des personnage est qu'il faut capturer l'événement click (et non pas change) et appeler la fonction selectStreet() avec la valeur du bouton en paramètre.

2.2 - la liste des boutiques

Remarque : la liste des boutique ne doit apparaître que s'il y a une rue sélectionnée. C'est pourquoi cette partie est dans un <div> qui utilise v-if pour tester si currentStreet est différent de null.

•  Mêmes principes que pour la listes des rues mais en itérant sur currentStreet.shops et en appelant selectShop().

4.9 - commande d'item

•  Même principe que dans le TP 2, excepté que la valeur des champs de saisie provient des variables idxItemOrder
• Lors de l'appui sur le bouton "Order", il faut appeler la fonction order().

4.10 - fonction order()

• Code quasi identique à celui du TP 2, excepté que la valeur des champs de saisie provient des variables idxItemOrder.

4.11 - vente des items assignés à un slot

•  Même principe que dans le TP 2, excepté que la valeur des champs de saisie provient des variables idxItemSell et idxSlotSell.
• Lors de l'appui sur le bouton "Sell", il faut appeler la fonction sell().

• Code quasi identique à celui du TP 2, excepté que la valeur des champs de saisie provient des variables idxItemSell et idxSlotSell.