matching-game-app
Matching Game
Contatos e Links interessantes
Resumo do Projeto
Todo projeto está baseado no plano de estudos do Marco Bruno voltado para um curso de Javascript para React. A playlist do desafio está disponível no YouTube: Curso de Javascript para React. O jogo da memória se baseia num plano do Figma, para 2 players alternado a partir do erro do outro oponente.
A instalação do projeto é feita via npm e ViteJs.
Sequência de comandos:
> npm crete vite@latest matching-game-app
> npm install
"gera o local host para visualização e testes"
> npm run dev
Todos os commits que fiz do projeto passaram a atender a biblioteca de commit gitmoji para utilizar basta usar o comando
$ npm i -g gitmoji-clino terminal e aguardar o instalador dos pacotes. A documentação do uso dos commits está no site citado acima.
Descrição da Evolução do Projeto
Como o foco do projeto está voltado para o Javascript e como utiliza-lo para fins de programação total do site, a biblioteca Vite.JS foi utilizada para criação do site e todo seu comportamento dinâmico.
Componente Card
Seguindo o projeto do figma e as instruções do Marco Bruno, o card foi criado através de uma função no JS que retornava uma tag HTML que era inserida no D.O.M através da função insertAdjacentHTML("beforeend", $variávelComAFunction); esse comportamento é da própria linguagem, próxima ao que o ReactJS faz com a extensão .jsx.
Já a estilização foi feita via CSS, com uma arquitetura de pasta específica, o documento style.css na pasta src/components/CardGame/ oferece os estilos específicos para os Cards, e as configurações do css, são específicadas em caminhos distintos:
a repetição do componente dos cards foi feita, inicialmente através de uma função como parte de um desafio proposto pelo Marco, nesse estágio inicial não sabia qual seria a maneira que ele faria, e ainda haveria estudos sobre a viabilidade da manutenção desse código. A função usada foi:
function insertCard () {
for (let i = 0; i < 6; i++) {
$root.insertAdjacentHTML("beforeend", $htmlCardGame);
}
}
insertCard();
Prévia do Jogo
