Para realizar o projeto, atente-se a cada passo descrito a seguir e, se tiver qualquer dúvida, nos envie por Slack! #vqv 🚀
Aqui você vai encontrar os detalhes de como estruturar o desenvolvimento do seu projeto a partir deste repositório, utilizando uma branch específica e um Pull Request (PR) para colocar seus códigos.
Ao iniciar este projeto, você concorda com as diretrizes do Código de Conduta e do Manual da Pessoa Estudante da Trybe.
🤷🏽♀️ Como entregar
Para entregar o seu projeto você deverá criar um Pull Request neste repositório.
Lembre-se que você pode consultar nosso conteúdo sobre Git & GitHub e nosso Blog - Git & GitHub sempre que precisar!
👨💻 O que deverá ser desenvolvido
Neste projeto você vai desenvolver um jogo no estilo Super Trunfo! Ao utilizar essa aplicação uma pessoa usuária deverá ser capaz de:
-
Criar um baralho com o tema livre;
-
Adicionar e remover uma carta do baralho;
-
Visualizar todas as cartas que foram adicionadas ao baralho;
-
Jogar com o baralho criado.
📝 Habilidades
Neste projeto, verificamos se você é capaz de:
-
Ler o estado de um componente e usá-lo para alterar o que exibimos no browser
-
Inicializar um componente, dando a ele um estado pré-definido
-
Atualizar o estado de um componente
-
Capturar eventos utilizando a sintaxe do React
-
Criar formulários utilizando sintaxe JSX com as tags:
input
,textarea
,select
,form
,checkbox
-
Transmitir informações de componentes filhos para componentes pais via callbacks
🗓 Data de Entrega
- Este projeto é individual;
- Serão
3
dias de projeto; - Data para entrega final do projeto:
14/02/2023 14:00
.
‼️ Antes de começar a desenvolver
- Clone o repositório
- Use o comando:
git clone git@github.com:tryber/sd-028-b-project-tryunfo.git
. - Entre na pasta do repositório que você acabou de clonar:
cd sd-028-b-project-tryunfo
- Instale as dependências
npm install
.
- Crie uma branch a partir da branch
master
- Verifique que você está na branch
master
- Exemplo:
git branch
- Exemplo:
- Se não estiver, mude para a branch
master
- Exemplo:
git checkout master
- Exemplo:
- Agora crie uma branch à qual você vai submeter os
commits
do seu projeto- Você deve criar uma branch no seguinte formato:
nome-de-usuario-nome-do-projeto
- Exemplo:
git checkout -b joaozinho-sd-028-b-project-tryunfo
- Você deve criar uma branch no seguinte formato:
- Adicione as mudanças ao stage do Git e faça um
commit
- Verifique que as mudanças ainda não estão no stage
- Exemplo:
git status
(deve aparecer listada a pasta joaozinho em vermelho)
- Exemplo:
- Adicione o novo arquivo ao stage do Git
- Exemplo:
git add .
(adicionando todas as mudanças - que estavam em vermelho - ao stage do Git)git status
(deve aparecer listado o arquivo joaozinho/README.md em verde)
- Exemplo:
- Faça o
commit
inicial- Exemplo:
git commit -m 'iniciando o projeto x'
(fazendo o primeiro commit)git status
(deve aparecer uma mensagem tipo nothing to commit )
- Exemplo:
- Adicione a sua branch com o novo
commit
ao repositório remoto
- Usando o exemplo anterior:
git push -u origin joaozinho-sd-028-b-project-tryunfo
- Crie um novo
Pull Request
(PR)
- Vá até a página de Pull Requests do repositório no GitHub
- Clique no botão verde "New pull request"
- Clique na caixa de seleção "Compare" e escolha a sua branch com atenção
- Coloque um título para a sua Pull Request
- Exemplo: "Cria tela de busca"
- Clique no botão verde "Create pull request"
- Adicione uma descrição para o Pull Request e clique no botão verde "Create pull request"
- Não se preocupe em preencher mais nada por enquanto!
- Volte até a página de Pull Requests do repositório e confira que o seu Pull Request está criado
⌨️ Durante o desenvolvimento
-
Faça
commits
das alterações que você fizer no código regularmente -
Lembre-se de sempre após um (ou alguns)
commits
atualizar o repositório remoto -
Os comandos que você utilizará com mais frequência são:
git status
(para verificar o que está em vermelho - fora do stage - e o que está em verde - no stage)git add
(para adicionar arquivos ao stage do Git)git commit
(para criar um commit com os arquivos que estão no stage do Git)git push -u origin nome-da-branch
(para enviar o commit para o repositório remoto na primeira vez que fizer opush
de uma nova branch)git push
(para enviar o commit para o repositório remoto após o passo anterior)
🤝 Depois de terminar o desenvolvimento (opcional)
Para sinalizar que o seu projeto está pronto para o "Code Review", faça o seguinte:
-
Vá até a página DO SEU Pull Request, adicione a label de "code-review" e marque seus colegas:
-
No menu à direita, clique no link "Labels" e escolha a label code-review;
-
No menu à direita, clique no link "Assignees" e escolha o seu usuário;
-
No menu à direita, clique no link "Reviewers" e digite
students
, selecione o timetryber/students-sd-028-b
.
-
Caso tenha alguma dúvida, aqui tem um video explicativo.
🕵🏿 Revisando um pull request
Use o conteúdo sobre Code Review para te ajudar a revisar os Pull Requests.
🎛 Linter
Para garantir a qualidade do código, vamos utilizar neste projeto os linters ESLint
e StyleLint
.
Assim o código estará alinhado com as boas práticas de desenvolvimento, sendo mais legível
e de fácil manutenção! Para rodá-los localmente no projeto, execute os comandos abaixo:
npm run lint
npm run lint:styles
Em caso de dúvidas, confira o material do course sobre ESLint e Stylelint.
🛠 Testes
Para avaliar o projeto iremos utilizar React Testing Library para execução dos testes.
Esse framework de testes utiliza algumas marcações no código para verificar a solução proposta, uma dessas marcações é o atributo data-testid
e faremos uso dele aqui.
Na descrição dos requisitos (logo abaixo) será pedido que seja feita a adição de atributos data-testid
nos elementos HTML. Vamos a um exemplo para deixar claro essa configuração:
Se o requisito pedir "crie um botão e adicione o id de teste (ou data-testid
) com o valor my-action
, você pode criar:
<button data-testid="my-action"></button>
ou
<a data-testid="my-action"></a>
Ou seja, o atributo data-testid="my-action"
servirá para o React Testing Library(RTL) identificar o elemento e dessa forma, conseguiremos realizar testes focados no comportamento da aplicação.
Em alguns requisitos, utilizamos o getByRole
para poder selecionar os elementos de forma semântica. Portanto atente-se às instruções de cada requisito. Por exemplo, se o requisito pedir explicitamente um button
, você deverá utilizar exatamente esse elemento.
Afim de verificar a solução proposta, você pode executar todos os testes localmente, basta executar:
npm test
Especialmente no início, quando a maioria dos testes está falhando, a saída após executar os testes é extensa. Você pode desabilitar temporariamente um teste utilizando a função skip
junto à função it
. Como o nome indica, esta função "pula" um teste. Veja um exemplo:
it.skip("Será validado se o campo de filtro por nome renderiza na tela", () => {
render(<App />)
const filterNameInput = screen.getByTestId(/name-filter/i);
expect(filterNameInput).toBeInTheDocument();
});
Uma estratégia é pular todos os testes no início e ir implementando um teste de cada vez, removendo dele a função skip
.
Você também pode rodar apenas um arquivo de teste, por exemplo:
npm test 01.Form.test.js
ou
npm test 01.Form
Uma outra forma para contornar esse problema é a utilização da função .only
após o it
. Com isso, será possível que apenas um requisito rode localmente e seja avaliado.
it.only("Será validado se o campo de filtro por nome renderiza na tela", () => {
render(<App />)
const filterNameInput = screen.getByTestId(/name-filter/i);
expect(filterNameInput).toBeInTheDocument();
});
🏪 Desenvolvimento
Você deve desenvolver uma aplicação em React com manipulação de estados em classes. Essa aplicação simulará um jogo de Super Trunfo, desde a criação das cartas do seu baralho até a funcionalidade de jogar.
Na renderização das cartas, sua aplicação deverá possuir três filtros de listagem de cartas: filtro por nome, por raridade e por Super Trunfo. Os filtros nome e raridade são acumulativos. O filtro Super Trunfo funciona de forma independente.
O tema do seu baralho é livre, então explore a sua criatividade! Mas use seu bom senso para a criação do seu baralho. Lembre-se do código de Conduta e do Manual da Pessoa Estudante da Trybe.
Em alguns requisitos será necessária a utilização de renderização condicional. Você pode verificar a documentação do React Renderização Condicional.
Este comportamento é utilizado no React para renderizar, ou não, determinado componente de acordo com uma condição booleana.
No exemplo abaixo, o estado isActiveButton
começa como false
, e ao clicar no botão Clique em mim!
, mudamos esse estado para true
.
Na condição da renderização, quando o estado for false
, renderizamos o parágrafo Não está ativo!
e quando for true
, renderizamos o parágrafo Está ativo!
.
import React from "react"
class Componente extends React.Component {
constructor() {
super();
this.state = {
isActiveButton: false,
};
}
render() {
const { isActiveButton } = this.state;
return (
<div>
<button onClick={() => this.setState({isActiveButton: true})}>Clique em mim!</button>
{
isActiveButton ? <p>Está ativo!</p> : <p>Não está ativo!</p>
}
</div>
)
}
}
No caso acima, temos duas possibilidades, ativo ou não, ou seja, duas renderizações. Mas se for de apenas uma renderização, como por exemplo, renderizar somente se o tamanho do array for maior do que 0, podemos utilizar o &&
:
...
{
array.length > 0 && <p>Array não vazio!</p>
}
...
ℹ️ Informações Adicionais
O Super Trunfo é um jogo de cartas que ficou muito popular no Brasil entre as décadas de 80 e 90, mas que faz bastante sucesso até hoje. Suas regras são bastante simples, por isso ele é considerado um jogo fácil de jogar. Apesar de ter regras simples, cada baralho de Super Trunfo pode ter um tema diferente, o que o torna um jogo bastante divertido.
Originalmente, o jogo de Super Trunfo é formado por um baralho de 32 cartas. Cada carta representa um item relacionado ao tema do jogo. Em cada carta também existe uma lista com características daquele item e cada característica possui um valor numérico.
Para começar o jogo, as cartas devem ser embaralhadas e divididas igualmente para cada participante. Em cada rodada cada pessoa pega somente a primeira carta do seu monte. Na primeira rodada uma pessoa escolhe qual característica quer comparar com as cartas das outras pessoas que estão jogando. Ganha quem tiver o maior número nessa característica. A pessoa que ganhou a rodada recebe as cartas das outras pessoas e escolhe qual característica quer comparar na próxima rodada. O jogo termina quando alguma pessoa tiver todas as cartas do baralho.
Em cada baralho existe uma (e somente uma) carta Super Trunfo. Essa carta ganha de todas as outras cartas do baralho, independentemente dos valores das características.
O jogo de Super Trunfo pode ser feito com praticamente qualquer tema, mas tradicionalmente os mais comuns são: carros, países, cidades ou animais.
Quando estamos lidando com informações, temos 4 operações principais: Create (criar), Read (ler), Update (atualizar) e Delete (apagar). Com essas quatro operações, formamos o acrônimo CRUD. Esse acrônimo é um termo que será bastante utilizado daqui para frente na sua jornada como pessoa desenvolvedora.
Nesse projeto vamos começar a lidar um pouco mais com essas operações, mas não vamos fazer todas elas. Você precisará criar, ler e apagar informações, mas não precisará desenvolver a função de editar por enquanto. Não se preocupe, pois no futuro, voltaremos a implementar essas operações e nos próximos projetos você fará um CRUD completo.
🗣 Nos dê feedbacks sobre o projeto!
Ao finalizar e submeter o projeto, não se esqueça de avaliar sua experiência preenchendo o formulário. Leva menos de 3 minutos!
💻 Protótipo do projeto no Figma
Além da qualidade do código e do atendimento aos requisitos, um bom layout é um dos aspectos responsáveis por melhorar a usabilidade de uma aplicação e turbinar seu portfólio!
Você pode estar se perguntando: "Como deixo meu projeto com um layout mais atrativo?" 🤔
Para isso, disponibilizamos esse protótipo do Figma para lhe ajudar !
🗂 Compartilhe seu portfólio!
Você sabia que o LinkedIn é a principal rede social profissional e compartilhar o seu aprendizado lá é muito importante para quem deseja construir uma carreira de sucesso? Compartilhe esse projeto no seu LinkedIn, marque o perfil da Trybe (@trybe) e mostre para a sua rede toda a sua evolução.
🙇 Agradecimentos
Pessoas que contribuíram com feedbacks no programa de beta testers desse projeto:
Crie um formulário que será utilizado para criar as cartas do seu baralho.
-
Crie um componente chamado
Form
dentro da pastasrc/components
. -
Renderize o componente
Form
dentro do componente principalApp
. -
Crie os seguintes itens dentro do component
Form
:💡 Dica: Você pode criar um componente de input. Lembre-se de sempre ter uma label associada para cada input.
-
um campo do tipo
text
que contenha o atributodata-testid="name-input"
. Este campo será usado para inserir o nome da carta. -
um campo do tipo
textarea
que contenha o atributodata-testid="description-input"
. Este campo será usado para inserir a descrição da carta. -
um campo do tipo
number
que contenha o atributodata-testid="attr1-input"
. Este campo será usado para inserir o primeiro atributo da carta. Ele é livre para você adicionar o atributo que mais combinar com o seu baralho. -
um campo do tipo
number
que contenha o atributodata-testid="attr2-input"
. Este campo será usado para inserir o segundo atributo da carta. Ele é livre para você adicionar o atributo que mais combinar com o seu baralho. -
um campo do tipo
number
que contenha o atributodata-testid="attr3-input"
. Este campo será usado para inserir o terceiro atributo da carta. Ele é livre para você adicionar o atributo que mais combinar com o seu baralho. -
um campo do tipo
text
que contenha o atributodata-testid="image-input"
. Este campo será usado para inserir o caminho para imagem da carta. -
um campo do tipo
select
que contenha o atributodata-testid="rare-input"
. Este campo será usado para inserir a raridade da carta e deverá ter asoptions
:normal
,raro
emuito raro
(é importante que as opções estejam nessa ordem). -
um campo do tipo
checkbox
que contenha o atributodata-testid="trunfo-input"
. Este campo será usado para inserir se a carta é o Super Trunfo. -
um
button
que contenha o atributodata-testid="save-button"
e que tenha o texto "Salvar".
-
O que será verificado
-
Será validado se existe um input texto que possui o
data-testid="name-input"
. -
Será validado se existe um input textarea que possui o
data-testid="description-input"
. -
Será validado se existe um input number que possui o
data-testid="attr1-input"
. -
Será validado se existe um input number que possui o
data-testid="attr2-input"
. -
Será validado se existe um input number que possui o
data-testid="attr3-input"
. -
Será validado se existe um input texto que possui o
data-testid="image-input"
. -
Será validado se existe um input select que possui o
data-testid="rare-input"
com asoptions
:normal
,raro
emuito raro
, nesta ordem. -
Será validado se existe um input checkbox que possui o
data-testid="trunfo-input"
. -
Será validado se existe um botão que possui o
data-testid="save-button"
.
-
O componente
Form
deverá receber as seguintes props:cardName
, uma string;cardDescription
, uma string;cardAttr1
, uma string;cardAttr2
, uma string;cardAttr3
, uma string;cardImage
, uma string;cardRare
, uma string;cardTrunfo
, um boolean;hasTrunfo
, um boolean;isSaveButtonDisabled
, um boolean;onInputChange
, uma callback;onSaveButtonClick
, uma callback;
-
As props do componente
Form
deverão ser utilizadas conforme o indicado abaixo:-
Campo
name-input
: o atributovalue
deve receber o valor da propcardName
e o atributoonChange
deve receber o valor da proponInputChange
. -
Campo
description-input
: o atributovalue
deve receber o valor da propcardDescription
e o atributoonChange
deve receber o valor da proponInputChange
. -
Campo
attr1-input
: o atributovalue
deve receber o valor da propcardAttr1
e o atributoonChange
deve receber o valor da proponInputChange
. -
Campo
attr2-input
: o atributovalue
deve receber o valor da propcardAttr2
e o atributoonChange
deve receber o valor da proponInputChange
. -
Campo
attr3-input
: o atributovalue
deve receber o valor da propcardAttr3
e o atributoonChange
deve receber o valor da proponInputChange
. -
Campo
image-input
: o atributovalue
deve receber o valor da propcardImage
e o atributoonChange
deve receber o valor da proponInputChange
. -
Campo
rare-input
: o atributovalue
deve receber o valor da propcardRare
e o atributoonChange
deve receber o valor da proponInputChange
. -
Campo
trunfo-input
: o atributochecked
deve receber o valor da propcardTrunfo
e o atributoonChange
deve receber o valor da proponInputChange
. -
Botão
save-button
: o atributodisabled
deve receber o valor da propisSaveButtonDisabled
e o atributoonClick
deve receber o valor da proponSaveButtonClick
.
💡 Obs: por enquanto a prop
hasTrunfo
ainda não foi utilizada, mas não se preocupe, pois ela será usada em breve. -
💡 Obs: não se preocupe com os valores a serem passados para as props
nesse momento. No requisito 4, ficará nítido como estas props
serão utilizadas.
O que será verificado
-
Será validado se o campo de nome recebe o valor da prop
cardName
e se a callbackonInputChange
é chamada quando o campo sofre alguma alteração. -
Será validado se o campo de descrição recebe o valor da prop
cardDescription
e se a callbackonInputChange
é chamada quando o campo sofre alguma alteração. -
Será validado se o campo do atributo 1 recebe o valor da prop
cardAttr1
e se a callbackonInputChange
é chamada quando o campo sofre alguma alteração. -
Será validado se o campo do atributo 2 recebe o valor da prop
cardAttr2
e se a callbackonInputChange
é chamada quando o campo sofre alguma alteração. -
Será validado se o campo do atributo 3 recebe o valor da prop
cardAttr3
e se a callbackonInputChange
é chamada quando o campo sofre alguma alteração. -
Será validado se o campo de imagem recebe o valor da prop
cardImage
e se a callbackonInputChange
é chamada quando o campo sofre alguma alteração. -
Será validado se o campo de raridade recebe o valor da prop
cardRare
e se a callbackonInputChange
é chamada quando o campo sofre alguma alteração. -
Será validado se o campo de Super Trufo recebe o valor da prop
cardTrunfo
e se a callbackonInputChange
é chamada quando o campo sofre alguma alteração. -
Será validado se o botão de salvar é habilitado se o valor da prop
isSaveButtonDisabled
forfalse
. -
Será validado se o botão de salvar é desabilitado se o valor da prop
isSaveButtonDisabled
fortrue
. -
Será validado se a callback
onSaveButtonClick
é chamada quando o botão é clicado.
-
Crie um componente com o nome
Card
na pastasrc/components
e renderize-o no componente principalApp
. O componenteCard
deve receber as seguintes props:cardName
, uma string;cardDescription
, uma string;cardAttr1
, uma string;cardAttr2
, uma string;cardAttr3
, uma string;cardImage
, uma string;cardRare
, uma string;cardTrunfo
, um boolean;
-
Renderize o componente
Card
dentro do componente principalApp
:-
Exiba o valor da prop
cardName
. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributodata-testid="name-card"
. -
Exiba a imagem usando a tag HTML
img
, com o atributosrc
que tenha o valor da propcardImage
e o atributoalt
com o valor da propcardName
. Essa imagem também deve ter o atributodata-testid="image-card"
-
Exiba o valor da prop
cardDescription
. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributodata-testid="description-card"
. -
Exiba o valor da prop
cardAttr1
. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributodata-testid="attr1-card"
. -
Exiba o valor da prop
cardAttr2
. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributodata-testid="attr2-card"
-
Exiba o valor da prop
cardAttr3
. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributodata-testid="attr3-card"
. -
Exiba o valor da prop
cardRare
. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributodata-testid="rare-card"
. -
Exiba o texto
Super Trunfo
somente quando o valor da propcardTrunfo
fortrue
. Você pode usar qualquer tag HTML que faça sentido, desde que ela tenha o atributodata-testid="trunfo-card"
.
Dica: Você pode utilizar renderização condicional para renderizar ou não o texto do super trunfo.
-
O que será verificado
- Será validado se o componente
data-testid="name-card"
é exibido e possui o valor da propcardName
. - Será validado se o componente
data-testid="image-card"
é exibido e possui o atributosrc
com o valor da propcardImage
e o atributo alt com o valor da propcardName
. - Será validado se o componente
data-testid="description-card"
é exibido e possui o valor da propcardDescription
. - Será validado se o componente
data-testid="attr1-card"
é exibido e possui o valor da propcardAttr1
. - Será validado se o componente
data-testid="attr2-card"
é exibido e possui o valor da propcardAttr2
. - Será validado se o componente
data-testid="attr3-card"
é exibido e possui o valor da propcardAttr3
. - Será validado se o componente
data-testid="rare-card"
é exibido e possui o valor da propcardRare
. - Será validado se o componente
data-testid="trunfo-card"
é exibido quando a propcardTrunfo
tiver o valortrue
. - Será validado se o componente
data-testid="trunfo-card"
não é exibido quando a propcardTrunfo
tiver o valorfalse
.
Até o momento você criou dois componentes que recebem props
, agora está na hora de criar o estado dos componentes.
Os componentes Form
e Card
irão compartilhar o mesmo estado para exibir as mesmas informações (isso já te dá uma dica de onde o estado deve estar, não é mesmo?).
Quando alguma informação é digitada em algum campo do formulário, o componente Card
deve exibir a mesma informação em tempo real, criando um preview da carta antes de ela ser salva no baralho (a funcionalidade de salvar será feita nos próximos requisitos).
Você deverá usar a prop onInputChange
para passar uma callback para lidar com os eventos de onChange
dos inputs do formulário. Não se esqueça que os valores dos inputs (que também são passados por props) também devem ser salvos em um estado.
💡 Dica: o mesmo estado usado para controlar os inputs do formulário podem ser passados para o componente Card
.
Informações técnicas:
-
Ao digitar algo no campo com o
data-testid="name-input"
do formulário, o mesmo valor deverá ser renderizado no componenteCard
, no elemento com odata-testid="name-card"
. -
Ao digitar algo no campo com o
data-testid="description-input"
do formulário, o mesmo valor deverá ser renderizado no componenteCard
, no elemento com odata-testid="description-card"
. -
Ao digitar algo no campo com o
data-testid="image-input"
do formulário, o mesmo valor deverá ser passado para o componenteCard
, e ser usado no atributosrc
do elemento com odata-testid="image-card"
. -
Ao digitar algo no campo com o
data-testid="attr1-input"
do formulário, o mesmo valor deverá ser renderizado no componenteCard
, no elemento com odata-testid="attr1-card"
. -
Ao digitar algo no campo com o
data-testid="attr2-input"
do formulário, o mesmo valor deverá ser renderizado no componenteCard
, no elemento com odata-testid="attr2-card"
. -
Ao digitar algo no campo com o
data-testid="attr3-input"
do formulário, o mesmo valor deverá ser renderizado no componenteCard
, no elemento com odata-testid="attr3-card"
. -
Ao selecionar algum valor no
select
com odata-testid="rare-input"
do formulário, o mesmo valor deverá ser renderizado no componenteCard
, no elemento com odata-testid="rare-card"
. -
Quando o campo do tipo
checkbox
que possui odata-testid="trunfo-input"
estiverchecked
, deverá ser renderizado no componenteCard
o textoSuper Trunfo
dentro do elemento com odata-testid="trunfo-card"
.
💡 Dica: para campos que precisem de um valor padrão (como o campo de raridade, por exemplo) você pode iniciar o estado já com esse valor.
O que será verificado
- Será validado se é renderizado no preview da carta o valor digitado no input Nome do formulário.
- Será validado se é renderizado no preview da carta o valor digitado no input Descrição do formulário.
- Será validado se é renderizado no preview da carta o valor digitado no input referente ao atributo 1 no formulário.
- Será validado se é renderizado no preview da carta o valor digitado no input referente ao atributo 2 no formulário.
- Será validado se é renderizado no preview da carta o valor digitado no input referente ao atributo 3 no formulário.
- Será validado se é renderizado no preview da carta o
data-testid="trunfo-card"
se o checkbox Super Trunfo for selecionado.
O botão que possui o atributo data-testid="save-button"
só deve estar habilitado se todas as informações do formulário estiverem preenchidas corretamente, seguindo as seguintes regras:
-
Os campos
Nome
,Descrição
,Imagem
eRaridade
devem conter alguma informação (ou seja, osinputs
não podem estar vazios). -
A soma dos valores dos 3 atributos (
attr1-input
,attr2-input
eattr3-input
) não pode ultrapassar o valor 210. -
Cada um dos três atributos pode ter no máximo 90 pontos cada.
-
Os atributos não podem receber valores negativos.
O que será verificado
- Será validado se o botão
salvar
está desabilitado quando a página é renderizada pela primeira vez. - Será validado se o botão
salvar
está desabilitado se o campo nome estiver vazio. - Será validado se o botão
salvar
está desabilitado se o campo imagem estiver vazio. - Será validado se o botão
salvar
está desabilitado se o campo descrição estiver vazio. - Será validado se o botão
salvar
está desabilitado se o campo do atributo 1 for maior que 90. - Será validado se o botão
salvar
está desabilitado se o campo do atributo 1 for menor que 0. - Será validado se o botão
salvar
está desabilitado se o campo do atributo 2 for maior que 90. - Será validado se o botão
salvar
está desabilitado se o campo do atributo 2 for menor que 0. - Será validado se o botão
salvar
está desabilitado se o campo do atributo 3 for maior que 90. - Será validado se o botão
salvar
está desabilitado se o campo do atributo 3 for menor que 0. - Será validado se o botão
salvar
está desabilitado se a somatória dos campos de atributos for maior que 210. - Será validado se o botão
salvar
é habilitado ao preencher todos os campos do formulário corretamente.
Agora que o botão de salvar já está validado, você pode adicionar uma nova carta ao seu baralho. Isso significa que você precisará criar um novo estado na sua aplicação para salvar a lista de cartas existentes no seu baralho.
💡 Dica: você pode salvar cada carta em um formato de objeto e ter um array com esses objetos no seu estado.
-
Ao clicar no botão que possui o atributo
data-testid="save-button"
, as informações que foram preenchidas no formulário deverão ser salvas no estado da sua aplicação. -
Após salvar as informações, os
inputs
do formulárioNome
,Descrição
eImagem
e o conteúdo do preview da carta deverão ser limpos. -
Após salvar as informações, os três campos de atributos devem ter valor 0.
-
Após salvar as informações, o campo
Raridade
deve conter o valornormal
.
O que será verificado
-
Será validado se os campos do formulário
Nome
,Descrição
eImagem
são limpos após clicar emsalvar
. -
Será validado se o os três campos de atributos têm o valor
0
após clicar emsalvar
. -
Será validado se o campo de
Raridade
tem o valornormal
após clicar emsalvar
.
Em um baralho de Super Trunfo pode existir apenas uma carta Super Trunfo. Por isso é necessário fazer uma validação para que somente 1 carta Super Trunfo seja salva no seu baralho:
-
Para que uma carta seja salva como Super Trunfo é preciso que o input com o
data-testid="trunfo-input"
estejachecked
na hora de salvar a carta. Por isso, a validação será feita nesse campo. Para fazer essa validação, você deve usar o prophasTrunfo
do componenteForm
. -
Caso já exista uma carta Super Trunfo em seu baralho, o formulário de criação de carta não deverá exibir o
checkbox
data-testid="trunfo-input"
. No seu lugar deve ser renderizada a frase: "Você já tem um Super Trunfo em seu baralho".
Dica: Lembre-se de utilizar a renderização condicional (na seção 🏪 Desenvolvimento) do React nesse requisito.
O que será verificado
-
Será validado se o checkbox do Super Trunfo é renderizado ao carregar a página.
-
Será validado se o texto "Você já tem um Super Trunfo em seu baralho" é renderizado caso já exista uma carta Super Trunfo no baralho.
Você já tem várias cartas legais em seu baralho, agora é a hora de listá-las para que você possa ver toda sua coleção!
- Renderize dentro do component
App
uma lista com todas as cartas que você tem no estado da aplicação. - Garanta que sempre que uma carta for adicionada, a lista é atualizada automaticamente.
💡 Dica: você pode reutilizar o componente Card
nesse requisito. 💡
O que será verificado
- Será validado se a carta é renderizada na página ao salvá-la.
- Será validado se a lista é atualizada automaticamente quando uma carta é adicionada.
-
Criar em cada carta que está sendo renderizada do seu baralho um
button
com o textoExcluir
e o atributodata-testid="delete-button"
.-
A carta de preview não pode ter esse botão.
-
Ao clicar neste botão, a carta deve ser excluída do seu baralho, ou seja, não deverá mais ser renderizada na página. Dica: Lembre-se que o baralho está sendo renderizado a partir do estado do seu componente!
-
Se a carta excluída for uma carta Super Trunfo, o
checkbox
do formulário deverá aparecer novamente, tornando possível a criação de uma nova carta Super Trunfo.
-
O que será verificado
- Será validado se o botão
Excluir
é renderizado na tela apenas nas cartas adicionadas ao baralho. - Será validado se ao adicionar uma carta e excluí-la em seguida, a carta não é renderizada.
- Será validado se ao adicionar duas cartas e excluir uma em seguida, a carta não é renderizada.
- Será validado se ao excluir uma carta Super Trunfo, o checkbox no formulário é renderizado novamente.
Sua aplicação terá três filtros de listagem de cartas: filtro por nome, por raridade e por Super Trunfo. Os filtros nome e raridade são acumulativos. O filtro Super Trunfo funciona de forma independente.
Para filtro do nome, você deverá criar um campo do tipo text
e adicionar o atributo data-testid="name-filter"
:
-
Este campo deve ser renderizado sempre, mesmo se não existirem cartas salvas no baralho.
-
Ao digitar neste campo, deve ser renderizado na página apenas as cartas que contenham no
nome
o texto digitado.
O que será verificado
- Será validado se o campo de filtro por nome renderiza na tela.
- Será validado se apenas as cartas correspondentes aparecem após o filtro.
- Será validado se não renderiza nenhuma carta se não houver nome correspondente.
Para filtrar por raridade, você deverá criar um campo do tipo select
e adicionar o atributo data-testid="rare-filter"
:
-
Este
select
deve possuir as seguintesoptions
:todas
normal
raro
muito raro
-
Por padrão, a opção
todas
já estará selecionada; -
Ao selecionar uma das opções, apenas as cartas que possuem a raridade especificada deverão ser renderizadas. Caso esteja selecionada
todas
, não deve ter filtro de raridade aplicado na lista. -
Se o campo do filtro
Nome
estiver preenchido, os dois filtros (por nome e por raridade) devem funcionar em conjunto.
O que será verificado
- Será validado se o campo de filtro por Raridade renderiza na tela.
- Será validado se somente as cartas com raridade
normal
são exibidas após o filtro. - Será validado se somente as cartas com raridade
raro
são exibidas após o filtro. - Será validado se somente as cartas com raridade
muito raro
são exibidas após o filtro. - Será validado se todas as cartas são exibidas quando o filtro de raridade está com a opção
todas
selecionada. - Será validado se não renderiza nenhuma carta se não houver raridade correspondente.
Para filtrar por Super Trunfo, você deverá criar um campo do tipo checkbox
com a label
Super Trunfo e o atributo data-testid="trunfo-filter"
:
-
Ao selecionar este
checkbox
, apenas a carta Super Trunfo deverá ser renderizada. -
Enquanto o
checkbox
estiver com o atributochecked
, ou seja, se estiver selecionado, osinputs
dos filtros por nome e por raridade deverão ficar com o atributodisabled
. -
Se o
checkbox
não estiver selecionado, as cartas devem ser renderizadas normalmente, seguindo apenas as regras dos filtros anteriores.
O que será verificado
- Será validado se somente a carta de super trunfo é exibida quando esse filtro é selecionado.
Você já criou o baralho do seu Tryunfo. Agora você pode criar uma funcionalidade para jogar com outras pessoas estudantes! Abaixo iremos apresentar uma sugestão de como essa funcionalidade pode ser criada! Esses requisitos não serão avaliados pelo Evaluator, portanto, fique livre para desenvolver da maneira que você achar melhor! Use os conhecimentos que você aprendeu e desenvolveu ao longo dos módulos anteriores e exerça a sua criatividade!
Regras do Jogo
Antes de iniciar o desenvolvimento, vamos relembrar como funciona o jogo:
- Primeiramente, cada pessoa deve "pegar" uma carta aleatória do seu baralho.
- A primeira pessoa irá escolher um atributo para comparar com a carta da outra pessoa. Lembre-se que no Tryunfo os atributos podem ter nomes diferentes em cada baralho, por isso o ideal é se basear pela posição do atributo, ou seja, comparar o primeiro atributo da sua carta com o primeiro atributo da carta da pessoa rival.
- Ganha a rodada quem tiver o número maior no atributo escolhido.
- Ao término da rodada, cada pessoa deve "pegar" uma nova carta aleatória.
- A cada rodada é alternada a vez de quem escolhe o atributo para comparação.
O que será necessário
Para poder jogar, será necessário ter desenvolvido os seguintes passos:
- Criar baralho com N cartas (já desenvolvido nos requisitos anteriores).
- Criar uma função que embaralhe as cartas e renderize a primeira carta do baralho.
- Criar um botão para renderizar a próxima carta do baralho.
- Na ultima carta, ter um botão para recomeçar o jogo, embaralhando novamente.
-
Crie um botão com o texto
Jogar
; -
Crie um novo estado na sua aplicação, que receberá as cartas do seu baralho em ordem aleatória;
-
Ao clicar no botão
Jogar
, este novo estado deve receber as cartas que estão salvas no seu baralho, mas em ordem aleatória veja neste link como implementar uma função que embaralha um array. -
Crie um novo estado na sua aplicação que irá controlar a posição no array da carta que será renderizada.
-
Para renderizar na página, você pode utilizar renderização condicional para mostrar a carta apenas quando um jogo estiver em andamento.
Lembre-se que há várias formas possíveis para montar esta função. Isso é apenas uma sugestão.
-
Após clicar em
Jogar
e embaralhar as cartas existentes, exiba a primeira carta na tela, ou seja, a carta que está na posição0
do array. -
Exiba um botão com o texto
Próxima carta
. -
Ao clicar no botão "Próxima carta", a próxima carta do seu baralho "embaralhado" deve ser renderizada. Você pode usar o estado criado no requisito anterior e incrementá-lo em cada rodada.
-
Quando a última carta do baralho estiver sendo renderizada, ou seja, quando você estiver na última posição do array de cartas embaralhadas, o botão "Próxima carta" não deve ser renderizado na tela.
-
Um novo botão deve ser exibido com o texto
Embaralhar cartas
. -
Ao clicar no botão
Embaralhar cartas
o baralho deve ser embaralhado novamente e o estado que controla a posição da carta exibida deve ser0
novamente.