Jeu Uno avec @function

Pour cet exercice, vous devez styler plusieurs cartes Uno.

Il vous est interdit de modifier le HTML. Puisque vous n’avez guère envie d’écrire le style des 48 cartes à la main, une-à-une, vous devrez tirer profit vos connaissances Scss.

Aperçu du résultat 👇

Matériel Pen de départ

Couleurs 🎨

red	#F55556
yellow	#F8AA03
green	#55AA55
blue	#3AA6FF

Requis Créez-vous un placeholder contenant les styles de bases d'une carte générique. Ces styles doivent faire en sorte que les cartes s'affichent une à côté de l'autre, aillent une dimension de 132x200px, aillent des coins ronds de 8px, une bordure blanche de 8px sur tous les côtés et un espace vide de 8px entre elles.

Pour valider cette étape, vous pouvez appliquez ce placeholder à l'élément avec la classe .uno-0, vous devriez alors voir le contour d'une carte apparaitre. Créez une boucle de 0 à 11 inclusivement. À l'intérieur de celle-ci, créez un sélecteur css visant les éléments qui contiennent la classe .uno-X ou X correspond à l'index de la boucle. Appliquez-lui votre placeholder et ajoutez en arrière-plan l'image correspondant à l'index de la boucle afin d'obtenir des URLs similaires à ceci:
https://ex.smnarnold.com/scss/uno/0.png, https://ex.smnarnold.com/scss/uno/1.png, etc.

Vous devriez alors voir plusieurs cartes apparaître, mais sans couleur de fond (ce n'est pas grave si vous ne voyez pas 11 cartes à cette étape). Entourez votre plus récente boucle d'une autre boucle, mais cette fois celle-ci devra être capable de supporter une map afin de passer le nom et le code des quatre couleurs présentées en haut de cette page. Ainsi plutôt que de ne cibler que les cartes rouges (red), vous pourrez maintenant cibler toutes les cartes existantes.

Le nombre de cartes avec un fond transparent devrait maintenant avoir quadruplé. Ajoutez la couleur de fond appropriée pour chaque carte à l'intérieur de votre boucle. Les cartes 10 et 11 n'affichent pas comme souhaité, car elles sont appelées via un numéro alors que leur nom est skip.png et reverse.png. Afin de remédier à ce problème, créez une condition dans votre boucle. Lorsque l'index correspond à 11, afficher l'image https://ex.smnarnold.com/scss/uno/skip.png. Lorsque l'index correspond à 10, afficher l'image https://ex.smnarnold.com/scss/uno/reverse.png. Dans tous les autres cas, afficher l'image correspondant à l'index de la boucle. Afin d'améliorer la lisibilité de votre code, créez-vous une fonction Scss acceptant un paramètre. Déplacez ensuite votre condition à l'intérieur de cette fonction et à partir du paramètre passé (nombre entre 0 et 11), déterminez quelle image d'arrière-plan doit être retournée.

Ensuite dans votre boucle, déclarer la propriété CSS background-image et donner lui comme valeur le résultat de votre fonction.

Notes de cours 📚