Tic-Tac-Toe Realtime (Parte 1 - Clone do Projeto) | Express.js - Socket.io
Tags: javascript, node, tictactoe, game
Published: 2019-10-28 18:30:35

Neste tutorial pretendo guiar você leitor por algumas das tecnologias mais impressionantes do universo **JavaScript** de uma forma intuitiva. 
Desenvolveremos um **Jogo da Velha** em tempo real, com salas para linkar dois jogadores e online na web. 

**Obs:** É importante que você, caro leitor, já tenha uma prévia bagagem de JavaScript e que entenda minimamente como a linguagem se comporta, como os elementos na página são selecionados, como javascript trata funções e eventos e como funções com callback se comportam. Alguns conceitos do ECMAScript 6 também serão utilizados, mas isto não será impeditivo ao entendimento. 
Já ter utilizado o framework Express.js também auxiliará no entendimento. Ao longo do tutorial o foco será no desenvolvimento da **lógica** do game com javaScript padrão e no desenvolvimento **realtime** com **socket.io**, o servidor como um todo está previamente configurado para que o leitor não precise se preocupar com isto. 

### Clonando a base do projeto
Utilizaremos um projeto base para que você não perca tempo precisando configurar coisas simples e nem desenvolver a interface do jogo, mas caso você sinta vontade de modificar sinta-se a vontade. 

Antes de clonar, é importante saber que você precisa conter instalado em seu computador o [NodeJs](https://nodejs.org/en/). No projeto utilizei o gerenciador de pacotes **yarn**, que pode ser instalado com tutoriais através deste [link](https://yarnpkg.com/pt-BR/docs/install#debian-stable)

#### Clonando
1. `$ git clone https://github.com/fparol4/tic-tac-toe-realtime.git`
2. `$ cd tic-tac-toe-realtime`
3. `$ git checkout initial-structure`
4. `$ yarn install` ou `$ npm install` caso você não tenha o **yarn** instalado

Após realizar estas operações, você poderá rodar o comando `$ yarn start:dev` ou `$ npm run start:dev` para inicializar o servidor. 
Agora você já pode entrar em seu navegador e navegar até o link `localhost:3333` e visualizar a tela inicial. 

#### Estrutura de pastas

```
tic-tac-toe-realtime
├── src /* raiz do projeto */
│   └── public /* armazenar arquivos estaticos */
│       └── client-game.js /* logica do game para o cliente */
│       └── main.css /* css default */
│   └── views /* armazenar o html do projeto */
│       └── index.ejs
│   └── app.js /* servidor do projeto */
│   └── game.js /* logica do game */
│   └── routes.js /* arquivo para configuracao de rotas */

```

### Configurando váriaveis do game

Para colocarmos a mão no código já neste tutorial, setaremos em váriaveis os field's do nosso game. Para isto, abra o seu editor de código preferido, no meu caso utilizarei o [vscode](https://code.visualstudio.com/) e navegue até `src > public > client-game.js`. Este é o arquivo **JS** que o cliente irá visualizar, todo o código javascript nele portanto refletirá em nossa página principal. 

Adicionemos algumas váriaveis ao nosso arquivo: 
```javascript
/** Exibe o modal assim que a página abre */
MicroModal.show('modal')

/** Constants */

/** Se refere ao span que contem o jogador no momento (X's ou Y's) */
const turnNow = document.getElementById('turn_now')

/** Se refere ao input em que o usuário pode digitar o ID da room */
const roomId = document.getElementById('room_id')

/** Se refere ao botão para criar uma room */
const createRoomButton = document.getElementById('create_room')

/** Se refere a todos os quadrados do jogo. Retorna uma lista com todos eles */
const fieldsSquares = document.querySelectorAll('.field__square')

/** Variables */
let playingNow = 'X'
```

Agora você pode navegar até a página principal, clicar com o **botão direito** e depois em inspencionar, navegar até a aba **'Console'** e digitar o nome de algumas váriaveis, o retorno refletirá nos elementos que instanciamos. 

### Próximo POST

No próximo post, desenvolveremos toda a lógica do jogo para o cliente, concluindo portanto o jogo da velha para uma pessoa (yeesx, você desenvolverá e concluirá o game já no próximo capitulo). Eu te espero lá! **:)**