Esercizio - Blazor

5 minuti

In questo esercizio si crea un progetto Blazor e si inizia a creare un'app che diventerà un gioco "Forza quattro" nel corso del modulo.

Creare un nuovo progetto Blazor

Creare prima di tutto un nuovo progetto per il gioco usando Visual Studio 2022.

Creare una nuova applicazione Blazor in Visual Studio 2022 scegliendo il menu File > Nuovo > Progetto.
Scegliere "App Web Blazor" dall'elenco dei modelli e denominarla ConnectFour. Selezionare Avanti.
Scegliere .NET 8 per la versione del framework. Il tipo di autenticazione deve essere impostato su Nessuna, la modalità di rendering interattivo deve essere impostata su Server e la posizione di interattività deve essere impostata su Per pagina/componente. Lasciare invariate le altre opzioni predefinite.

Questa azione creerà una directory ConnectFour contenente l'app.
Eseguire l'app premendo F5 in Visual Studio 2022.

L'app Blazor è ora in esecuzione nel browser:

Complimenti. È stata creata la prima app Blazor.

Creare un componente tabellone

A questo punto, verrà creato un componente tabellone di gioco che verrà usato dai giocatori. Il componente viene definito usando la sintassi Razor, che è una combinazione di HTML e C#.

Fare clic con il pulsante destro del mouse sulla cartella Components in Esplora soluzioni di Visual Studio. Scegliere Aggiungi > Componente Razor dal menu di scelta rapida e assegnare al file il nome Board.razor.

Questo componente viene usato per contenere tutti gli elementi necessari per il layout del tabellone del gioco e per gestire le interazioni con esso. Il contenuto iniziale di questo nuovo componente è costituito da un tag h3 e da un blocco @code che indica dove scrivere il codice C#:
```
<h3>Board</h3>

@code {

}
```
Preparare la pagina Home aprendo il file Components/Pages/Home.razor e cancellando tutto il codice dopo la terza riga con il tag "PageTitle".
```
@page "/"

<PageTitle>Home</PageTitle>
```
Aggiungere il componente Board alla pagina Home aggiungendo un tag <Board />, che corrisponde al nome file del nuovo componente.
```
@page "/"

<PageTitle>Index</PageTitle>
<Board />
```
Eseguire l'app con F5 per visualizzare le modifiche. Se l'app è già in esecuzione, toccare il pulsante Ricaricamento rapido accanto al pulsante Esegui/Continua per applicare le modifiche all'app in esecuzione.

Suggerimento

Selezionare l'opzione Ricaricamento rapido al salvataggio del file dal menu Ricaricamento rapido per applicare le modifiche all'app in esecuzione ogni volta che si modifica un file.

Complimenti. È stato creato il primo componente, che è stato usato in una pagina Blazor.

Aggiunta di contenuto e stile al tabellone del gioco

Prima di tutto, verrà definito un tabellone del gioco con sette colonne e sei righe. Quindi, vengono aggiunti alcuni elementi di stile per dare vita al tabellone.

Nel file Board.razor rimuovere il codice HTML nella parte superiore e aggiungere il contenuto seguente per definire un tabellone con 42 caselle per le pedine del gioco.

È possibile usare un ciclo for di C# per generare le 42 posizioni del tabellone. Il tag span del contenitore viene selezionato e ripetuto con il suo contenuto 42 volte per rappresentare il tabellone.
```
<div>
   <div class="board">
      @for (var i = 0; i < 42; i++)
      {
         <span class="container">
            <span></span>
         </span>
      }
   </div>
</div>
```

Quando si salva il componente Board, l'app viene aggiornata e viene visualizzata come una pagina vuota, grazie alla funzionalità Ricaricamento rapido che ricompila e avvia l'app aggiornata.

Nota

Visual Studio potrebbe richiedere di riavviare l'app man mano che i file vengono modificati. Confermare che l'app deve essere ricompilata in caso di modifica del codice e l'app verrà riavviata e aggiornata automaticamente durante l'aggiunta di funzionalità.

Applicazione di stili al componente

A questo punto verranno applicati gli stili al componente Board tramite la definizione di alcuni colori per la cornice del tabellone e i giocatori sopra il primo tag div del file 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>

Queste variabili CSS --board-bg, --player1: red, --player2: blue vengono prelevate e usate nel resto del foglio di stile per questo componente.

Viene quindi aggiunto al componente Board un foglio di stile completo per il gioco.

Fare clic con il pulsante destro del mouse sulla cartella Components in Esplora soluzioni e creare un nuovo file CSS denominato Board.razor.css.

Copiare il contenuto seguente nel nuovo file 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)}}

Ecco una selezione di alcuni dei fogli CSS usati per formattare il tabellone e i "fori" per ognuna delle caselle. Nel file CSS sono disponibili più contenuti per le pedine del gioco e le relative animazioni sullo schermo.

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;
}

Il browser verrà aggiornato automaticamente (in caso contrario, aggiornarlo manualmente premendo F5) e verrà mostrato un tabellone Forza quattro giallo appropriato:

Screenshot del tabellone giallo del gioco Forza quattro.

Congratulazioni, la parte iniziale del gioco è stata completata. Nelle unità successive verrà aggiunta la logica del gioco.

Continua

Esercizio - Blazor

Creare un nuovo progetto Blazor

Creare un componente tabellone

Aggiunta di contenuto e stile al tabellone del gioco

Applicazione di stili al componente

Commenti e suggerimenti