Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Découvrir Vue.js 2

Ajouter du style de manière dynamique

Testez gratuitement nos 1344 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous pouvez rendre votre application encore plus dynamique. Pour cela, ajoutez ou supprimez des styles en fonction de l'usage de l'interface par l'utilisateur.
04:46

Transcription

On pourrait aller plus loin, maintenant qu'on a compris un petit peu comment ça fonctionne, pour faire fonctionner le bonus. Comment ça va marcher ? De temps en temps, le bonus va s'activer. Ce bonus va changer la couleur de notre rond. Et c'est à ce moment-là qu'on pourra utiliser le alt-clic. Si je me trompe, je mettrai un message dans l'interface. Je mettrai un message dans la console pour le moment. Et si c'est bon, on continue. Ce qu'on va faire c'est que on va attribuer d'abord une couleur. Alors, cette couleur, ça va être la couleur bonus, et on va simplement faire un background, et on va le mettre à rouge. OK, ça passera en rouge quand ce sera en mode bonus. Maintenant, on va aussi lui dire, ici, que on veut activer une classe. Donc, la classe, ce sera la classe bonus, si le bonus est activé. bonusActivated. OK. Donc si on fait ça, ça veut dire qu'il faut aussi qu'on se prévoit, regardez, une petite propriété ici, bonusActivated, d'abord, dans un premier temps, toujours à false. Pour le moment, il se passera rien. Par contre, quand on va avoir l'activation du bonus, ça va passer à rouge. Bon, on va déjà la travailler, cette activation. Comment on va rendre dynamique ce bonus ? Simplement, on va modifier cette propriété, qui viendra du coup ajouter une propriété sur notre objet, et ce qui fait qu'on va avoir la couleur rouge qui va s'afficher. Ce sera déjà une bonne chose de faite. Alors, ici, on a actuellement une size. On pourrait se baser là-dessus, et dire simplement que this.bonusActivated est égal à quelque chose qui retourne un Boolean. La size est supérieure à 80. Si la size, elle est supérieure à 80, on va demander de renvoyer la couleur rouge. Donc là on va voir que, pour le moment, ça ne marche pas. Il y a pas de couleur rouge. Par contre, au fur et à mesure que je clique, voilà. Là on y est. Ça, c'est le bonus. On sait que quand il est plus gros, c'est le bonus. Donc ça veut dire que, pour le coup, on va pouvoir, à ce moment-là, intercepter le alt-clic. Si il ne fait pas alt-clic à ce moment-là, tan pis pour lui, il a pas le bonus. Par contre, si il fait un alt-clic, il a le bonus. Comment on fait ? C'est cette partie-là qui va nous permettre de le savoir. La partie bonus qu'on a là. Puisque c'est l'événement qu'on avait créé sur notre élément qui nous permet de vérifier que c'est le bonus qui a été activé. Donc, pour vérifier ça, on va simplement lui dire this point bonus activated. Donc on sait que ça, ici, c'est un boolean, true ou false. Donc on va faire un if. If bonus activated. Et à ce moment-là, on va pouvoir marquer en console, console.log, et on va lui mettre un petit « perfect ». Comme dans les jeux vidéo. Sinon, si il a fait un alt-clic alors que il y avait pas du tout de bonus activé, on va lui mettre des points d'interrogation, pour lui dire attends, qu'est-ce que t'es en train de faire, c'est pas du tout ce que tu dois faire, c'est pas bon. Et pourquoi pas, ici on pourrait même carrément, après, lui dire qu'il a perdu des points. Ou décrémenter ses points, pour que, pour le coup, il soit simplement obligé de cliquer quand c'est le bonus. On va recharger cette interface. Alors, on fera attention, parce que vous voyez qu'ici, là, il reste quelque chose dans notre interface qu'on a pas supprimé, qui était dans player, c'était le border. Alors, il nous dit qu'on l'a pas supprimé. On va le chercher, border. Et, effectivement, regardez, on l'avait ajouté ici. Donc, il faut vraiment que vous le supprimiez. Il vaut mieux ne pas avoir de message de warning, c'est quand-même plus propre. Bon, maintenant on peut le tester. Donc là, je vais cliquer sur le blanc, le blanc. Je suis sur un rouge. Je vais appuyer sur alt et je vais cliquer. Là j'ai eu un « perfect ». Si je recommence, et que du coup je clique avec alt sur un blanc, là je vais avoir, « ben non, t'es pas sur un perfect ». Et ici, là j'ai rien du tout, parce que il fallait que j'appuie sur alt. Donc voyez que là, on commence à avoir un jeu qui fonctionne. qui est un petit peu énervant en plus, donc c'est bien, ça veut dire que c'est un bon jeu. Et vous allez pouvoir commencer à coder de la logique. Vous commencez à vous rendre compte qu'avec très peu de lignes de code, et quelques petits tours de passe-passe parce que pour le coup, voilà, ce n'est que de la logique à appliquer, c'est vraiment de la programmation, ici, qui est de la programmation événementielle, où on va décider de ce qui se passe dans l'interface en fonction de règles métier, on peut avoir quelque chose de très propre et rapidement puissant. Et, finalement, on a pas beaucoup de lignes. Pour le moment, on a vraiment pas grand chose. Alors, si vous voulez améliorer un petit peu le design, ce serait bien de prendre un red un petit peu plus sympa, par exemple un dark red ou un indian red, qui est quand-même un petit peu plus propre pour ce genre d'interface. Voilà, ça c'est plus joli, quand-même, et puis on pourrait après même se dire que, de façon aléatoire, il y a un moment où on va prendre une couleur qui se rapproche vraiment de celle-là, pour mettre encore un petit peu de piment dans l'interface. Vous voyez qu'il y a plein, plein de choses à faire, il y a plein d'idées possibles, c'est un jeu que vous pouvez améliorer à l'infini en ajoutant plein, plein de règles. Je pense que vous allez vous amuser, après.

Découvrir Vue.js 2

Animez et rendez réactive la vue d’une application web avec le framework Vue.js. Mettez en place les interfaces web de demain​ ​et utilisez les librairies externes de votre choix.

2h25 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Vue.js Vue.js 2.1
Spécial abonnés
Date de parution :14 févr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !