Repositório do projeto:
DevGirlsMentor / warship
É um jogo de Super trunfo utilizando os veículos de Star Wars.
Warship
O que é?
É um jogo de Super trunfo utilizando os veículos de Star Wars.
Inicialmente, dentro de styles criamos um arquivo chamado themes.js com a estilização de ambos os temas.
Para iniciar com os temas no nosso projeto “warship”, no componente da home onde selecionamos a ordem que queremos seguir vamos passar a ordem selecionada por parâmetro através da url (query params).
Dentro do arquivo da sua página do “board do jogo” importamos o ThemeProvider da biblioteca styled-components, e também o useRouter do next.
Dentro da função do board, vamos criar as seguintes variáveis:
A router é criada para podermos utilizar as funcionalidades fornecidas pelo useRouter.
A segunda variável, side, é desestruturada de router.query, seria o mesmo que utilizar o router.query.side.
Para setar o tema, criaremos outra variável que receberá um objeto de temas, as chaves do objeto serão: play e comp (que identifica um jogador e o computador), a chave “play” recebe como valor Themes[side], onde Themes vem do arquivo de estilização e side vem da query param. A chave “comp” receberá o valor inverso do recebido pela chave “play”, para isso foi feita a validação: se o side for igual a “jedi” então, recebe “sith” senão, recebe “jedi”.
Para passar o tema para os componentes, precisamos utilizar em volta do componente do nosso board o ThemeProvider (importado do styled-components), como se este fosse uma tag HTML.Dentro deste ThemeProvider, coloca-se o componente Board.
O ThemeProvider recebe o parâmetro theme, que receberá como valor a variável criada acima, theme.
Links úteis:
Top comments (0)