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 Fichier > Nouveau> Projet.
Choisissez « Application Web Blazor » dans la liste des modèles et appelez-la ConnectFour. Cliquez sur Suivant.
Choisissez .NET 8 pour la version du framework. Le type d’authentification doit être défini sur Aucun, 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 > Composant Razor dans le menu contextuel et appelez 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 page Home 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 Appliquer un rechargement à chaud lors de l’enregistrement d’un fichier dans le menu Rechargement à chaud pour appliquer des changements à l’application en cours d’exécution chaque fois 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, supprimons le code HTML en haut et ajoutons le contenu suivant pour définir un plateau avec 42 emplacements pour les pièces 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 composant Board en définissant des couleurs pour le cadre du plateau et les joueurs, au-dessus de la première balise div du 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 sur 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 d’un plateau Puissance 4 jaune.

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