RPG Sheet

Com nosso formulário de RPG construído, precisamos deixá-lo dinâmico e utilizável, para isso, vamos utilizar as ferramentas da última apresentação para suprir os seguintes requisitos:

Persistência do formulário

O que precisa ser feito

Iremos trabalhar em cima da ficha de RPG criada no desafio passado, porém iremos trabalhar apenas com alguns atributos. O formulário deverá ter os seguintes atributos

Nome e Sobrenome do personagem
Nível
XP atual
Pontos de vida
Classe do personagem (exibir uma lista select ou radio com opções definidas pela lista de ícones no google drive, já utilizada no desafio passado)

Ao enviar o formulário, os dados precisam ser salvos na localStorage. Para isso, será construído um custom hook, useLocalStorage, que aceita um identificador único para os dados, e deverá retornar:

Os valores parseados salvos no storage, identificados pelo argumento passado.
Uma função para atualizar o valor.
Uma função para limpar o valor.

Critérios de aceitação

Nível, XP e pontos de vida devem aceitar apenas números, e apenas valores maiores do que 0.
Ao atualizar/fechar a página, os valores não devem ser perdidos.
Os dados devem ser salvos apenas ao enviar o formulário.
Os dados salvos são exibidos dentro do próprio formulário, e não em uma página separada.
- Os dados persistidos são exibidos como valor inicial dos inputs.
Toda a lógica de leitura e escrita em localStorage precisa estar contida no custom hook, e não no componente do formulário.
O valor retornado do hook deve ser utilizável, ou seja, parseado para um objeto. Não será aceito formatação de dados no componente.

Pontos de vida, mana, e de armadura

A página deverá exibir, abaixo do formulário, o status atual do personagem. Os status são compostos de: pontos de vida, pontos de mana e pontos de armadura.

O usuário poderá clicar em botões para aumentar e diminuir os pontos de vida e de mana. Os pontos de armadura são calculados de acordo com o XP, nível e vida do usuário.

armadura = pontos de vida + (Nível * 2) + (XP + 1).

Os pontos de vida e de mana não podem ser menores do que 0.

Os pontos de vida não podem ser maiores do que (Nível * 10).

Os pontos de mana não podem ser maiores do que (Nível * 2) + XP.

Critérios de aceitação

Os pontos são calculados de acordo com os atributos do formulário, e não são inseridos manualmente.
Pontos devem ser colocados dentro do formulário.
Vida/mana máxima devem ser exibidas para o usuário.
Botões de subtrair vida e mana não precisam ser desabilitados caso chegem a 0 ou valor máximo, apenas não devem surtir nenhum efeito.
Valores de vida, mana e armadura devem ser memoizados.
Funções para aumentar e diminuir atributos devem ser memoizados.

Reset do formulário

Deverá ser exibido um botão para limpar o formulário, bem como limpar da localStorage, todos os dados preenchidos e os dados salvos em local storage.

Os dados não podem ser limpos imediatamente ao clicar no botão, antes disso, o usuário verá uma mensagem (não precisando ser flutuante, podendo apenas ser exibida condicionalmente ao clicar no botão de “Reset”, conforme imagem abaixo). Ao clicar em “Sim”, os dados são reiniciados e a mensagem de confirmação é novamente escondida. Ao clicar em cancelar, a mensagem de confirmação é novamente escondida.

Critérios de aceitação

Mensagem de confirmação exibida apenas ao clicar em “Reset”
Todos os dados do formulário, bem como os salvos em localStorage, devem ser apagados.
As duas ações são realizadas no mesmo clique de confirmação.
A mensagem de confirmação deve ser escondida ao cancelar ou confirmar.

Estilização do formulário

O formulário deverá conter um seletor para a classe do personagem, podendo ser um radio ou um select. Ao selecionar uma classe, um ícone com o emblema da classe deve ser exibido ao lado do nome do personagem. Os ícones estão disponíveis na pasta compartilhada do desafio, os nomes dos ícones representam os nomes das classes.

Além disso, uma borda ao redor de todo o formulário deverá ser exibida, também refletindo a escolha da classe, combinando com a cor do ícone exibido.

Os inputs também devem exibir uma estilização customizada, mostrando ao usuário quando o input tem foco. Não há critério de aceitação visual, use sua criatividade, porém é obrigatoriamente necessário remover as bordas que o navegador aplica.

O botão de submit, bem como o de reset, deverá ter uma fonte, borda, e cor de fundo diferentes das aplicadas pelo navegador.

Critérios de aceitação

Ícone exibido corretamente, ao carregar um novo formulário, nenhum ícone deve ser exibido.
A cor da borda do formulário deve combinar com a cor do ícone, não tendo a necessidade de serem exatas ou extraídas da imagem, desde que sejam parecidas, será aceito.
Estilizações aplicadas ao focar em um input, devendo ser removidas quando o foco for perdido.
Remover estilizações de borda padrão do navegador dos inputs, e estilização conforme os requisitos para o botão de envio e reset.