Exercício – Blazor

5 minutos

Neste exercício, criamos um projeto Blazor e começamos a criar um aplicativo que se torna um jogo "Conectar Quatro" ao longo do módulo.

Criar um projeto do Blazor

Primeiro, criaremos um novo projeto para o nosso jogo usando o Visual Studio 2022.

Crie um novo aplicativo Blazor no Visual Studio 2022 escolhendo o menu Arquivo > Novo > Projeto.
Escolha "Aplicativo Web Blazor" na lista de modelos e nomeie-o como ConnectFour. Selecione Avançar.
Escolha .NET 8 para a versão do framework. O Tipo de autenticação deve ser definido como Nenhum, o Modo de renderização interativa deve ser definido como Servidor e o Local de interatividade deve ser definido como Por página/componente. Deixe todas as outras opções como padrão.

Essa ação deve criar um diretório ConnectFour que contém nosso aplicativo.
Execute o aplicativo pressionando F5 no Visual Studio 2022.

Agora você deve ver o aplicativo Blazor em execução no navegador:

Parabéns! Você criou seu primeiro aplicativo Blazor!

Criar um componente de tabuleiro

Em seguida, criaremos um componente de tabuleiro de jogo a ser usado pelos jogadores em nosso jogo. O componente é definido usando a sintaxe Razor, que é uma combinação de HTML e C#.

Clique com o botão direito do mouse na pasta Componentes no Gerenciador de Soluções do Visual Studio. Escolha Adicionar > Componente Razor no menu de contexto e nomeie o arquivo Board.razor.

Usamos esse componente para manter tudo o que é necessário para o layout do tabuleiro de jogo e gerenciar interações com ele. O conteúdo inicial desse novo componente é uma tag h3 e um bloco @code que indica onde o código C# deve ser escrito:
```
<h3>Board</h3>

@code {

}
```
Prepare a página Home abrindo o arquivo Components/Pages/Home.razor e limpando tudo após a terceira linha com a tag `PageTitle`.
```
@page "/"

<PageTitle>Home</PageTitle>
```
Adicione nosso componente Board à página Home adicionando uma tag <Board />, que corresponde ao nome do arquivo do nosso novo componente.
```
@page "/"

<PageTitle>Index</PageTitle>
<Board />
```
Para ver as alterações, execute o aplicativo com F5. Se o aplicativo já estiver em execução, toque no botão Recarga Dinâmica ao lado do botão Executar/Continuar para aplicar as alterações ao aplicativo em execução.

Dica

Selecione a opção Recarga Dinâmica no Salvamento de Arquivos no menu Recarga Dinâmica para aplicar alterações ao aplicativo em execução sempre que você alterar um arquivo.

Parabéns! Você criou seu primeiro componente e o usou em uma página do Blazor.

Adicionar conteúdo e estilo ao tabuleiro de jogo

Vamos começar a definir um tabuleiro de jogo com as sete colunas e seis linhas. Então, adicionamos um pouco de estilo para dar vida ao nosso tabuleiro.

No arquivo Board.razor, removeremos o HTML na parte superior e adicionaremos o conteúdo a seguir para definir um tabuleiro com 42 lugares para as peças do jogo.

Podemos usar um loop for C# para gerar as 42 posições do tabuleiro. A tag span do contêiner é selecionada e repetida com seu conteúdo 42 vezes para representar nosso tabuleiro.
```
<div>
   <div class="board">
      @for (var i = 0; i < 42; i++)
      {
         <span class="container">
            <span></span>
         </span>
      }
   </div>
</div>
```

Quando salvamos o componente do tabuleiro, nosso aplicativo é atualizado e aparece como uma página vazia, graças à funcionalidade da Recarga Dinâmica que recompila e inicia o aplicativo atualizado.

Observação

Talvez você seja solicitado pelo Visual Studio a reiniciar seu aplicativo à medida que os arquivos forem alterados. Confirme se o aplicativo deve ser recompilado nas edições de código, e o aplicativo reiniciará e atualizará automaticamente o navegador à medida que você adicionar recursos.

Estilizar o componente

Adicionaremos um pouco de estilo ao componente Board, definindo algumas cores para a moldura do tabuleiro e para os jogadores acima da primeira tag div no arquivo 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>

Essas variáveis CSS --board-bg, --player1: red e --player2: blue são selecionadas e usadas no restante de nossa folha de estilo para esse componente.

Em seguida, adicionamos uma folha de estilo completa para o jogo ao componente Board.

Clique com o botão direito do mouse no Gerenciador de Soluções na pasta Componentes e crie um novo arquivo CSS chamado Board.razor.css.

Copie o seguinte conteúdo para o novo arquivo 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)}}

Veja uma seleção dos CSS usados para formatar o tabuleiro e "perfurar" cada um dos espaços. Há mais conteúdo disponível no arquivo CSS para as peças do jogo e suas animações na tela.

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

O navegador deve se atualizar automaticamente (caso contrário, você pode atualizá-lo manualmente pressionando F5). Em seguida, você verá um tabuleiro amarelo do Connect Four:

Captura de tela do Yellow connect four board.

Parabéns, agora você tem o início do jogo. Em unidades anteriores, adicionamos lógica de jogo a ele.

Exercício – Blazor

Criar um projeto do Blazor

Criar um componente de tabuleiro

Adicionar conteúdo e estilo ao tabuleiro de jogo

Estilizar o componente

Comentários