Exercice - Blazor

5 minutes

Dans cet exercice, nous créons un projet Blazor et nous commençons à créer une application qui va devenir un jeu « Puissance 4 » au fil du module.

Créer un projet Blazor

Tout d’abord, nous allons créer un projet pour notre jeu à l’aide de Visual Studio 2022.

Créez une application Blazor dans Visual Studio 2022 en choisissant le menu Nouveau > projet de fichier>.
Choisissez « Blazor Web App » dans la liste des modèles et nommez-le ConnectFour. Sélectionnez Suivant.
Choisissez .NET 8 pour la version du framework. Le type d’authentification doit être défini sur None, le mode de rendu interactif doit être défini sur Serveur et l’emplacement d’interactivité doit être défini sur Par page/composant. Laissez les valeurs par défaut pour toutes les autres options.

Cette action devrait créer un répertoire Puissance4 contenant notre application.
Exécutez l’application en appuyant sur F5 dans Visual Studio 2022.

Maintenant, vous devriez voir l’application Blazor s’exécutant dans votre navigateur :

Félicitations ! Vous avez créé votre première application Blazor !

Créer un composant de plateau

Ensuite, nous allons créer un composant de plateau de jeu que les joueurs utiliseront dans notre jeu. Le composant est défini à l’aide de la syntaxe Razor, qui est un mélange de code HTML et C#.

Cliquez avec le bouton droit sur le dossier Composants dans l’Explorateur de solutions de Visual Studio. Choisissez Ajouter > un composant Razor dans le menu contextuel et nommez le fichier Board.razor.

Nous utilisons ce composant pour y mettre tout ce qui est nécessaire à la présentation du plateau de jeu et à la gestion des interactions avec celui-ci. Le contenu initial de ce nouveau composant est une balise h3 et un bloc @code indiquant où le code C# doit être écrit :
```
<h3>Board</h3>

@code {

}
```
Préparez la Home page en ouvrant le fichier Components/Pages/Home.razor et en supprimant tout après la troisième ligne avec la balise « PageTitle ».
```
@page "/"

<PageTitle>Home</PageTitle>
```
Ajoutez notre composant Board à la page Home en ajoutant une balise <Board />, qui correspond au nom de fichier de notre nouveau composant.
```
@page "/"

<PageTitle>Index</PageTitle>
<Board />
```
Pour afficher les modifications, exécutez l’application au moyen de la touche F5. Si l’application est déjà en cours d’exécution, appuyez sur le bouton Rechargement à chaud à côté du bouton Exécuter/Continuer pour appliquer les changements à l’application en cours d’exécution.

Conseil

Sélectionnez l’option Rechargement à chaud sur sauvegarde de fichier dans le menu Rechargement à chaud pour appliquer des modifications à l’application en cours d’exécution dès que vous modifiez un fichier.

Félicitations ! Vous avez créé votre premier composant et l’avez utilisé sur une page Blazor.

Ajout d’un contenu et d’un style au plateau de jeu

Commençons par définir un plateau de jeu avec les sept colonnes et les six lignes. Ajoutez ensuite un peu de style pour donner vie à notre panneau.

Dans le fichier Board.razor , supprimez le code HTML en haut et ajoutez le contenu suivant pour définir un tableau avec 42 emplacements pour les éléments de jeu.

Nous pouvons utiliser une boucle for C# pour générer les 42 emplacements de plateau. La balise span de conteneur est récupérée et répétée avec son contenu 42 fois pour représenter notre plateau.
```
<div>
   <div class="board">
      @for (var i = 0; i < 42; i++)
      {
         <span class="container">
            <span></span>
         </span>
      }
   </div>
</div>
```

Lorsque nous enregistrons le composant de plateau, notre application s’actualise et apparaît sous la forme d’une page vide grâce à la fonctionnalité Rechargement à chaud qui regénère et lance l’application mise à jour.

Remarque

Visual Studio peut vous demander de redémarrer votre application à mesure que les fichiers changent. Vérifiez que l’application doit être regénérée lorsque le code est modifié et qu’elle redémarre et actualise automatiquement le navigateur à mesure que vous ajoutez des fonctionnalités.

Style du composant

Ajoutons un style au Board composant en définissant des couleurs pour le cadre du tableau et les joueurs au-dessus de la première div balise dans le fichier Board.razor :

<HeadContent>
    <style>
        :root {
            --board-bg: yellow;  /** the color of the board **/
            --player1: red;      /** Player 1's piece color **/
            --player2: blue;     /** Player 2's piece color **/
        }
    </style>
</HeadContent>

Ces variables CSS --board-bg, --player1: red, --player2: blue sont récupérées et utilisées dans le reste de notre feuille de style pour ce composant.

Ensuite, nous ajoutons une feuille de style complétée pour le jeu au composant Board.

Cliquez avec le bouton droit dans l’Explorateur de solutions dans le dossier Composants et créez un fichier CSS appelé Board.razor.css.

Copiez le contenu suivant dans le nouveau fichier Board.razor.css :

div{position:relative}nav{top:4em;width:30em;display:inline-flex;flex-direction:row;margin-left:10px}nav span{width:4em;text-align:center;cursor:pointer;font-size:1em}div.board{margin-top:1em;flex-wrap:wrap;width:30em;height:24em;overflow:hidden;display:inline-flex;flex-direction:row;flex-wrap:wrap;z-index:-5;row-gap:0;pointer-events:none;border-left:10px solid var(--board-bg)}span.container{width:4em;height:4em;margin:0;padding:4px;overflow:hidden;background-color:transparent;position:relative;z-index:-2;pointer-events:none}.container span{width:3.5em;height:3.5em;border-radius:50%;box-shadow:0 0 0 3em var(--board-bg);left:0;position:absolute;display:block;z-index:5;pointer-events:none}.player1,.player2{width:3.5em;height:3.5em;border-radius:50%;left:0;top:0;position:absolute;display:block;z-index:-8}.player1{background-color:var(--player1);animation-timing-function:cubic-bezier(.5,.05,1,.5);animation-iteration-count:1;animation-fill-mode:forwards;box-shadow:0 0 0 4px var(--player1)}.player2{background-color:var(--player2);animation-timing-function:cubic-bezier(.5,.05,1,.5);animation-iteration-count:1;animation-fill-mode:forwards;box-shadow:0 0 0 4px var(--player2)}.col0{left:calc(0em + 9px)}.col1{left:calc(4em + 9px)}.col2{left:calc(8em + 9px)}.col3{left:calc(12em + 9px)}.col4{left:calc(16em + 9px)}.col5{left:calc(20em + 9px)}.col6{left:calc(24em + 9px)}.drop1{animation-duration:1s;animation-name:drop1}.drop2{animation-duration:1.5s;animation-name:drop2}.drop3{animation-duration:1.6s;animation-name:drop3}.drop4{animation-duration:1.7s;animation-name:drop4}.drop5{animation-duration:1.8s;animation-name:drop5}.drop6{animation-duration:1.9s;animation-name:drop6}@keyframes drop1{100%,75%,90%,97%{transform:translateY(1.27em)}80%{transform:translateY(.4em)}95%{transform:translateY(.8em)}99%{transform:translateY(1em)}}@keyframes drop2{100%,75%,90%,97%{transform:translateY(5.27em)}80%{transform:translateY(3.8em)}95%{transform:translateY(4.6em)}99%{transform:translateY(4.9em)}}@keyframes drop3{100%,75%,90%,97%{transform:translateY(9.27em)}80%{transform:translateY(7.2em)}95%{transform:translateY(8.3em)}99%{transform:translateY(8.8em)}}@keyframes drop4{100%,75%,90%,97%{transform:translateY(13.27em)}80%{transform:translateY(10.6em)}95%{transform:translateY(12em)}99%{transform:translateY(12.7em)}}@keyframes drop5{100%,75%,90%,97%{transform:translateY(17.27em)}80%{transform:translateY(14em)}95%{transform:translateY(15.7em)}99%{transform:translateY(16.5em)}}@keyframes drop6{100%,75%,90%,97%{transform:translateY(21.27em)}80%{transform:translateY(17.4em)}95%{transform:translateY(19.4em)}99%{transform:translateY(20.4em)}}

Voici une sélection de fichiers CSS utilisés pour mettre en forme le panneau et de « trous à remplir » pour chacun des espaces. Il y a plus de contenu disponible dans le fichier CSS pour les pièces de jeu et leurs animations à l’écran.

div.board {
    margin-top: 1em;
    flex-wrap: wrap;
    width: 30em;
    height: 24em;
    overflow: hidden;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    z-index: -5;
    row-gap: 0;
    pointer-events: none;
    border-left: 10px solid var(--board-bg);
}

span.container {
    width: 4em;
    height: 4em;
    margin: 0;
    padding: 4px;
    overflow: hidden;
    background-color: transparent;
    position: relative;
    z-index: -2;
    pointer-events: none;
}

.container span {
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    box-shadow: 0 0 0 3em var(--board-bg);
    left: 0px;
    position: absolute;
    display: block;
    z-index: 5;
    pointer-events: none;
}

Le navigateur devrait se mettre à jour pour vous (si ce n’est pas le cas, vous pouvez actualiser manuellement le navigateur avec F5), et vous devriez voir un beau plateau Puissance 4 jaune :

Capture d’écran de Yellow Connect 4 board.

Félicitations, vous avez maintenant la base du jeu. Dans les unités ultérieures, nous lui ajoutons une logique de jeu.

Exercice - Blazor

Créer un projet Blazor

Créer un composant de plateau

Ajout d’un contenu et d’un style au plateau de jeu

Style du composant

Commentaires