Nesta atividade vamos criar um montador de avatares em pixel art! Cada aluno, assim que chegar, dever assinar, virtualmente, a lista de presença (veja link no quadro). A nota do aluno será computada considerando o horário de assinatura. Caso o aluno saia antes do grupo, deverá assinar o horario de saida, caso contrário, será o horário do último commit.

Nossos objetivos incluem:

• Exercitar o uso de controles (input) do HTML para criar formulários com os quais o usuário possa interagir
• Detectar quando o usuário interagiu com esses controles (elementos HTML)
• Usar os valores que o usuário colocou e usá-los de alguma forma
• (Opcional, desafio 1) Usar código JavaScript de uma biblioteca feita por outra pessoa

Todos os controles, exceto pelo "botão salvar" (desafio 1) devem ser colocados por você dentro da section #secao-controles no arquivo index.html.

Todo o código JavaScript, exceto pelo referente ao "botão salvar" (desafio 1) deve ser colocado dentro de avatar.js.

Se necessário, veja o FAQ (no final da prática) e/ou consulte os slides sobre elementos de formulários - no final dele, falamos sobre eventos. Acesse os slides sobre eventos, caso queira relembrar. Você pode usar JQuery nesta prática.

1. Coloque um controle que permita o usuário digitar o nome do avatar.
   • Esse controle deve permitir texto de até 50 caracteres (veja no FAQ como limitar o número de caracteres em um input).
2. Coloque um evento nesse elemento HTML para que, quando o usuário alterar o campo com o nome, a <p id="avatar-nome">Meu nome...</p> tenha um conteúdo com o valor digitado no campo.

Você sabia?? Existe o evento change, que é chamado em um input quando seu valor é "confirmadamente alterado". Em um <input type="text">, por exemplo, o evento change é chamado quando o usuário alterou o valor e saiu do controle (fez ele "perder o foco").

Existe um evento que é chamado sempre que o usuário interagiu com o controle, que é o input. Experimente usar os dois eventos para este exercício!

1. Coloque um controle que permita o usuário definir uma cor para a pele do avatar.
2. Coloque um evento, quando o valor da cor for alterado, que vai executar uma função que defina a cor de fundo (propriedade CSS, via JavaScript) das imagens #avatar-corpo e #avatar-cabeca.

Há várias imagens com cabelos diferentes que podem ser usados no avatar:

• imgs/cabelo-careca-curto.png
• imgs/cabelo-alaranjado-curto.png
• imgs/cabelo-azul-longo.png
• imgs/cabelo-cabelo-marrom-curto.png
• imgs/cabelo-preto-medio.png
• imgs/cabelo-roxo-curto.png
• imgs/cabelo-verde-medio.png

1. Coloque uma lista de seleção (aquela que o usuário clica e ela abre mostrando as opções) que permita o usuário escolher uma opção de cabelo.
   • Você pode colocar, para cada opção (i.e., <option>...</option>) da lista, um value com o caminho da imagem a que ela se refere
2. Coloque um evento, quando a opção escolhida for alterada, que vai definir o atributo src="..." da imagem #avatar-cabelo para o valor da opção escolhida

Há três acessórios que o avatar pode usar:

• imgs/acessorio-oculos.png
• imgs/acessorio-lacinhos.png
• imgs/acessorio-bandana.png

O jogador pode usar nenhum, todos, ou quaisquer combinação deles ao mesmo tempo. Sendo assim, determine que tipo de controle é mais adequado para usar.

1. Coloque os controles que permitam o usuário determinar se o avatar possui ou não cada acessório.
2. Associe eventos a cada um para quando o usuário optar por usar/não usar um acessório, o código coloque ou remova a classe visivel da imagem que representa esse acessório.

Crie um botão, abaixo do avatar, que, quando clicado, "baixa a imagem" do avatar. Exemplo:

Você sabia?? É possível colocar imagens e até outros elementos HTML dentro de um <button></button>.

Na verdade, o navegador não nos dá uma forma para fazermos isso usando HTML, CSS ou JavaScript. Mas existe uma biblioteca JavaScript capaz de nos ajudar chamada html2canvas.

Uma biblioteca JavaScript é um arquivo .js, como qualquer outro, mas programado de forma a ser utilizado em outros códigos. Assim, para usar o html2canvas, basta (a) ir até sua página (no GitHub), (b) baixar o arquivo html2canvas.js da versão mais recente e (c) incluí-lo na página (pode ser abaixo do avatar.js).

Agora, é necessário escrever código que usa os recursos oferecidos pela biblioteca html2canvas. De acordo com sua documentação, ela possui uma função com o mesmo nome e os seguintes parâmetros:

// no clique de um botão "Baixar imagem"...
html2canvas(elementoQueSeraSalvo, opcoes);
// fim da callback de clique do botão

O elementoQueSeraSalvo é, como o nome indica, o elemento HTML que queremos colocar em uma imagem - no caso, o #avatar-preview. E opcoes é um objeto que define algumas configurações, das quais precisamos apenas de uma chamada useCORS. Logo após, chamaos outra função "then" esta função será chamada logo após a renderização do avatar. Nesta função, criamos outra função que será executada assim que a biblioteca html2canvas conclua a sua mágica e, dentro dessa função, precisamos "arrumar uma forma" para baixar a imagem.

A explicação de como isso tudo funciona vai muito além do escopo da atividade e, por causa disso, o código para chamar a biblioteca, que deve ser atrelado ao clique de um botão, é o seguinte:

// no clique de um botão "Baixar imagem"...
// 'avatarEl' deve conter o elemento #avatar-preview
html2canvas(avatarEl, { useCORS: true }).then(function (canvas) {
    // a  foi gerada nesse objeto "canvas" e vamos pedir a ele
    // uma URL que a representa, codificada em uma String no modelo base64¹
    //
    // ¹base64: é uma forma de representar os pixels da imagem (ou qualquer
    // informação, na verdade) usando uma string com 64 tipos de caracteres
    // (todas as letras, maiúsculas e minúsculas, os algarismos de 0 a 9
    // e os símbolos '/' e '+'). Para mais informações, veja a página
    // da Wikipedia sobre base64 (https://pt.wikipedia.org/wiki/Base64)
    let imagemCodificadaEmURL = canvas.toDataURL();

    // cria um <a href="xxx" download="avatar.png"></a> dinamicamente
    // e o configura para que ele aponte (href) para uma URL que codifica
    // a imagem gerada pela biblioteca html2canvas
    let linkEl = document.createElement('a');
    linkEl.download = 'avatar.png';
    linkEl.href = imagemCodificadaEmURL;

    // coloca esse link no body da página
    document.body.appendChild(linkEl);

    // simula um clique no link
    linkEl.click();
  }
);
// fim da callback de clique do botão

1. Como definir uma quantidade máxima de caracteres em um input?
   • Use o atributo maxlength com a quantidade máxima de caracteres. Exemplo:

     <input type="text" maxlength="10">

2. O que é o DOM mesmo?
   • O Document Object Model (DOM) é uma representação "viva" da árvore de elementos HTML da página (diferente do código fonte - que está "morto")
   • Assim que o navegador recebe/abre um arquivo HTML, ele começa a ler seu código fonte e a montar essa estrutura em forma de árvore¹ de elementos HTML (¹ árvore: um elemento HTML pode ter vários elementos "filhos", como galhos em uma árvore)
   • Via JavaScript, para acessar o DOM e "pegar" elementos HTML para trabalhar com eles, usamos document.querySelector ou document.querySelectorAll. O document.querySelector('...') retorna apenas o primeiro elemento encontrado, ao passo que document.querySelectorAll('...') retorna uma lista com todos os elementos encontrados. Exemplos:

     let botaoSalvarEl = document.querySelector('#salvar-imagem');
     let marcacoes = document.querySelectorAll('.marcacao');

3. Como atribuir um evento a um elemento?
   • Uma vez que se possui uma referência a um elemento HTML da página (usando document.querySelector/All), podemos associar um evento a ele da seguinte forma:

     elementoEl.addEventListener('tipodoevento', nomeDeUmaFuncao);
     
     // por exemplo:
     botaoSalvarEl.addEventListener('click', salvaImagem);
     for (let marcacaoEl of marcacoes) {
       marcacaoEl.addEventListener('mousemove', mouseMovimentou);
     }

   • Lembre-se que, se você quiser, é possível escrever o "corpo" da função "na própria linha" do evento, tipo assim:

     botaoSalvarEl.addEventListener('click', function(e) {
       // ... corpo da função
     });

     ...mas o código fica mais organizado se você definir a função antes e depois apenas passar o seu nome (do 1º jeito).
4. Como alternar (tirar/colocar) uma classe em um elemento HTML?
   • Todo elemento HTML "pegado do DOM" (ie., document.querySelector etc.), tem uma propriedade chamada classList que possui 3 métodos. Considere que existe uma variável imagemEl que seja uma referência para uma imagem da página. Você pode:
     1. imagemEl.classList.add('nova-classe')
     2. imagemEl.classList.remove('classe-que-sera-removida')
     3. imagemEl.classList.toggle('coloca-ou-tira')
        • O toggle tira a classe, se o elemento não a tiver, ou a coloca, caso contrário. Além disso, o método retorna true/false indicando se ele inseriou a classe (true) ou se a retirou (false)