8.1 Criar página genérica do exercício de inversão.
Ao clicar em um card de Exercício de Inversão na tela de escolha de exercícios (#27 (closed)), o usuário deve ser redirecionado para a página do Exercício de Inversão.
O Exercício deve exibir um prompt e imagem recebidos pelo back. A responsabilidade de buscar essas informações é da tela escolha de exercícios (#27 (closed)), que receberá informações de todos exercícios possíveis do dia e enviará informações do exercício selecionado (no caso, Inversão).
Além do prompt e imagem, o exercício deve exibir um canva/quadro branco para o usuário desenhar, assim como "ferramentas" de desenho. As ferramentas serão as seguintes:
- Caneta padrão: Primeira, da esquerda para a direita, exibida no pé da página de exemplo. Faz um traço normal/intermediário;
- Caneta fina: Segunda, da esquerda para a direita, exibida no pé da página de exemplo. Faz um traço fino;
- Caneta grossa: Terceira, da esquerda para a direita, exibida no pé da página de exemplo. Faz um traço grosso;
- Borracha: Quarta, da esquerda para a direita, exibida no pé da página de exemplo. Apaga o que foi desenhado em um ponto específico;
A ferramenta escolhida deve ser destacada ao "subir" um pouco, saindo do alinhamento com as demais. Exemplo:
Além disso, o usuário deve poder escolher em que cor a caneta desenhará. No canto inferior direito deve haver um botão para selecionar a cor. Ao ser clicado, deve abrir um seletor de cores, semelhante ao exemplo a seguir.
Trocar a cor ou espessura da caneta não deve alterar as linhas já desenhadas.
Ao finalizar o exercício, o usuário deve clicar no botão de check no canto superior direito da tela, que o redirecionará para a tela de feedback (#12 (closed)). Ao clicar neste botão, a página também deve enviar um request para o back para registrar a realização do exercício.
Critérios de Aceitação
A página do exercício de inversão deve:
- Ser acessada via card na página de escolha de exercícios (#27 (closed));
- Receber informações a serem exibidas da página de escolha de exercícios;
- Permitir que o usuário trace linhas com a grossura e cor escolhidas;
- Permitir que o usuário apague pontualmente o que foi desenhado;
- Permitir que as linhas sejam traçadas ou apagadas em dispositivos touch ou com mouse;
- Redirecionar o usuário para a tela de feedback (#12 (closed)) ao finalizar o exercício;
- Enviar um request para o back para registrar a realização do exercício.