- L'objectif de ce TP est de modifier le TP 3 afin d'intégrer la gestion d'événements et les différents types de méthodes qu'utilise vuejs
- Au terme de ce TP, il n'y a plus du tout de javascript à l'ancienne pour manipuler le DOM. Il reste uniquement le code qui permet de manipuler le model (dans model.js), le reste étant défini dans l'instance de vue.
Exercice 1 - propriété calculée
Exercice 2 - acheter dans la boutique
Exercice 3 - événements
- Dans le TP 3, le perso courant est défini grâce à idPlayer, ce qui immplique d'utiliser players[idPlayer] dès lors que l'on veut afficher des données de celui-ci.
- Pour écrire du code plus compact, il serait utile de définir directement une propriété référençant un objet Perso qui change dès que idPlayer est modifié. Pour cela, on peut utiliser une propriété calculée.
- Ajoutez une propriété calculée nommée player, qui prend comme valeur players[idPlayer].
- Modifiez le code HTML pour utiliser player chaque fois que c'est possible.
Exercice 2 - acheter dans la boutique
- Faîtes une copie de model.js du TP 3 et modifiez la méthode buy() comme suivant :
1 2 3 4 5 6 7 8 |
/* modified version for TP 4: - called from buy() in vue instance, where checks/confirmation are done. - item parameter is an item object */ buy(item) { this.boughtItems.push(item); this.gold -= item.price; } |
- Supprimez également les lignes qui permettent d'ajouter des items aux personnages, afin qu'ils aient un inventaire vide.
- Dans index.js, ajoutez une méthode "classique" (dans methods, cf. TD) nommée buy. Cette méthode doit vérifier que le joueur a assez d'or pour acheter l'item shop[idToBuy] et si oui, demander confirmation de l'achat. Dans l'affirmative, il faut appeler la méthode buy(item) du perso courant, enlever l'item de shop, et remettre idToBuy à vide.
ATTENTION ! Ne pas oublier que dans les méthodes définies par l'instance vuejs, les propriétés de data DOIVENT être accédées via this.nom_propriété, par exemple this.player. Exception : les proriétés qui observent un objet du modèle de même nom (par ex, shop et players).
- En procédant ainsi, on suit un paradigme type MVC : la fonction buy() de Perso permet de modifier les données (=modèle) du perso, alors que la fonction buy() de l'instace vuejs est un contrôle permettant d'influer sur la vue (messages d'alerte/confirmation) et sur le modèle (appel de Perso.buy() + modification des propriétés de data)
Exercice 3 - événements
- Modifiez shop.html et index.js pour ne garder que la version 2 de la boutique.
- Dans shop.html, remplacez l'attribut onclick du bouton d'achat par un appel vuejs à la méthode buy() de l'instance.
- Modifiez la liste des items achetés pour que chacun apparaisse comme un bouton plutôt qu'avec la balise <span>.
- Ajoutez l'attribut draggable="true" à chacun de ces boutons. Cela permet de rendre drag/drop ces boutons.
- Ajoutez dans data une propriété nommée idDrag, initialisée à -1.
- Ajoutez dans methods les 3 fonctions suivantes :
1 2 3 4 5 6 7 8 9 10 11 12 |
dragStart(index) { console.log("start dragging "+this.player.boughtItems[this.idDragging].name); this.idDrag = index; }, dragEnd() { console.log("stop dragging"); this.idDrag = -1; }, drop(slot) { console.log("item dropped on "+slot); this.player.assign(this.idDrag,slot); } |
- Modifiez la liste des items achetés pour que :
- lors de l'événement dragstart, appeler la fonction dragStart(index), où index est l'indice de l'item de boughtItems actuellement déplacé.
- lors de l'événement dragStop, appeler la fonction dragStop().
- Dans le code <td>{{sl.name}}</td> , modifiez <td> comme suivant :,
- ajouter @dragover.prevent, afin d'empêcher le comportement par défaut quand on passe un élément au-dessus de la balise. En effet, ce comportement par défaut empêche le drop sur la balise.
- lors de l'événement drop, appeler la fonction drop(sl.name), ce qui permet d'assigner l'item à une localisation, si c'est possible.
- En quelques lignes de code simple, on a réussi à gérer un drag/drop. Magique !