Exercice - Personnalisation à l’aide de paramètres

Effectué

Le jeu fonctionne, mais nos couleurs par défaut ne vous conviennent peut-être pas. Dans Blazor, nous pouvons définir des paramètres sur nos composants qui nous permettent d’intégrer des valeurs qui ressemblent à des attributs sur une balise HTML.

Dans cet exercice, nous nous concentrons sur la personnalisation et sur l’amélioration de l’apparence du jeu en utilisant des paramètres.

Personnalisation du plateau avec des paramètres

Ajoutons quelques paramètres pour les couleurs de la carte et transmettons certaines couleurs groovy à partir de la page Home.

Les paramètres de Blazor sont des propriétés sur un composant qui ont été décorées avec l’attribut Parameter.

1. Dans Board.razor, nous allons définir trois propriétés pour la couleur du tableau et la couleur de chaque joueur. Avant la méthode OnInitialized, ajoutez ces lignes de code :

   [Parameter]
   public Color BoardColor { get; set; } = ColorTranslator.FromHtml("yellow");
   
   [Parameter]
   public Color Player1Color { get; set; } = ColorTranslator.FromHtml("red");
   
   [Parameter]
   public Color Player2Color { get; set; } = ColorTranslator.FromHtml("blue");
   

   Nous utilisons le type Color pour nous assurer que les valeurs passées à notre composant Board sont bien des couleurs.

2. Ajoutez une directive @using en haut du fichier Board.razor pour indiquer que nous utilisons du contenu à partir de l’espace de noms System.Drawing.

   @using System.Drawing
   

3. Utilisez les paramètres du bloc CSS en haut de Board.razor pour définir les valeurs des variables CSS.

   <HeadContent>
       <style>
           :root {
               --board-bg: @ColorTranslator.ToHtml(BoardColor);
               --player1: @ColorTranslator.ToHtml(Player1Color);
               --player2: @ColorTranslator.ToHtml(Player2Color);
           }
       </style>
   </HeadContent>
   

   Ce changement ne devrait pas changer quoi que ce soit dans l’apparence du plateau de notre jeu.

4. Revenons à Home.razor et ajoutons des paramètres à notre balise Board et voyons comment ils changent le jeu

   <Board @rendermode="InteractiveServer"
        BoardColor="System.Drawing.Color.Black"
        Player1Color="System.Drawing.Color.Green"
        Player2Color="System.Drawing.Color.Purple" />
   

   Le plateau a l’air cool, non ?