Vamo adicionar o evento de click para cada um desses espaços aqui, para só ver como é que para a gente o negócio. Tão vários maneiros de fazer isso, como sempre. Uma maneira de você adicionar no HTML, no próprio HTML, adiciona um atributo a cada um desses, dessa diva com espaço, chamado onclick, e diz o nome da função que você vai chamar quando você clicar esse cara. Outra maneira é adicionar esses ouvintes de evento, event listeners, usando o próprio JavaScript. Então, depende de você, tá? Eu vou usar o JavaScript nesse caso, tá bom? Então aqui no arquivo script.js, vou fazer o seguinte, eu vou aqui, vou selecionar cada um dessa diva, tá? Uma por uma, uma depois da outra, e vou adicionar o ouvinte de evento, evento listener, para cada um para poder executar a função que eu vou definir aqui. Então, para poder fazer isso, eu tenho que selecionar esse cara aqui, usando um selector. Vou usar o ID, porque é o único valor que é diferente para cada um desse cara, para poder selecionar um elemento de HTML usando o JavaScript. Por ID, você vai usar a função, está dentro do objeto document.catElementById, tá? Essa é a função para obter o elemento por ID. E eu vou usar, por exemplo, porque só para mostrar, se eu botar a esquerda acima aqui, aí dá o console log desse cara para você ver. Ele deu o console log desse cara aqui, que é o primeiro, a esquerda acima, tá? Então, se eu abrir, ele tem várias coisas, e eu posso adicionar um ouvinte de evento, tá? Usando o AddEventListener, tá bom? Então, vamos lá. Vou pegar a esquerda acima, vamos fazer primeiro só para um, depois a gente a generaliza para o outro, tá? Eu pego o elemento, tá? Vou pôr esse elemento antes de uma variável. Esse elemento vai ser o espaço. Aí eu pego o espaço e adiciono o evento Listener. Esse evento vai ser de click, tá? Click. Segundo argumento dessa função, o primeiro argumento é o tipo de evento, vai ser o click desse elemento. O segundo vai ser o callback para você executar, quando você clicar, né? Essa callback vai ter como argumento o evento, tá? Eu usei a função de Flash, você pode usar Function também, não importa aqui muito esse caso. Eu vou dar o console log do evento.target.id, tá bom? Event.target é o próprio elemento que foi clicado. Nesse caso ele tem um atributo id que vai ser esquerda acima, né? A gente vai precisar desse id depois para dizer qual dos caras mudar quando for clicado no tabuleiro. Eu... Cadê? Já que funcionou. Só o da esquerda acima que funciona agora. Eu cliquei no esquerda acima e aparece console log várias vezes, quando eu clico. Então, funcionou e tá ouvindo o evento, né? Está esperando pelo evento de click. Quando eu clico aqui, eu estou clicando no esquerda acima. Tá bom? Então, a gente vai fazer o seguinte. A gente pode começar aqui depois de sair para outra função. Então, quando eu clicar nesse cara, eu tenho um id. Com esse id, nesse caso vai ser esquerda acima, eu posso pegar o tabuleiro e marcar com alguma coisa. Por exemplo, aqui, olha aqui. Eu posso dizer tabuleiro, tá? Ponto. Se eu quiser mudar, modificar esse cara diretamente, eu posso falar tabuleiro, ponto. Eu quero usar esse id para selecionar essa propriedade valor aqui. Propriedade. Eu posso usar tabuleiro com esse cara, evento, ponto. E ponto id. Lembre que o evento, ponto. E ponto id vai ser esquerda acima, nesse caso. Aí, eu posso dizer que, por exemplo, que vai ser o jogador. O jogador tem x ou tem y. Então, eu posso adicionar o tabuleiro lá. Eu vou dar o console logo do tabuleiro depois para você verificar o que aconteceu. Vamos lá. Clicar no esquerda acima. Então, olha o que aconteceu. Ele diz o evento, ponto, ponto id, que é esquerda acima. Modificou o tabuleiro. Olha o console logo do tabuleiro. O esquerda acima agora virou x, que é o jogador 1. Tá bom? Agora, só nos resta modificar esse cara aqui, para poder adicionar a classe marcador x ao elemento. Note que ainda não checamos se foi preenchido pelo bola ou se não está preenchido ainda. A gente está só começando para você aprender e ver o que está acontecendo aqui. Então, vamos lá. Vamos. Para poder adicionar a classe ao elemento que foi clicado, ao espaço que foi clicado, você vai usar assim. Pega event, ponto target. Você pode usar classes. E é a lista de classes. Você pode usar o ad class com o marcador, traço, o nome x ou o o. Está dentro da variável jogador. Vamos ver aqui. Não é a função. Acho que eu errei aqui. Deixa eu ver aqui. Vamos dar a busca class list. Js. Eu esqueci, talvez. Vamos dar o lado na documentação, se você botar em português aqui. Element, ponto class list. Ah, é só add, tá? Desculpa. A gente esquece das coisas já muitas vezes, então você é um exercício para você ir e olhar na documentação para poder relembrar as coisas. Então eu recomendo documentação do MDN, Mozilla Development Network. Em português aqui, você não sabe o que tem as sintaxes, não sei o que. Eu quero os métodos desse class list. Eu queria o add para adicionar uma classe ao elemento. Então vamos lá, em vez de add class, só add. Voltando ao jogo da vela. Clicar, tá bom? Então eu cliquei na esquerda acima e adicionou a classe. Olha aqui no inspector marcador x para adicionar a classe. Está lista de classes, tá bom? E acho que está bom para essa aula, vamos revisar o que a gente fez aqui. Está bom? Então eu só comecei no primeiro esquerda acima para depois a gente pode generalizar para geral. Primeiro a gente seleciona esse espaço aqui. A gente tem que adicionar um ou vinte de event list para cada um desses espaços aqui. Você poderia fazer no html de próprio usando o atributo onclick e o nome da função para chamar. Nesse caso eu optei por usar JavaScript. Então o que é que eu faço? Para cada um desses caras faz o seguinte, você vai pegar, selecionar o elemento por id, está aqui o id desse cara, aí ponha uma variável e adiciona o event listener com essa função add event listener. O evento vai ser click e ponha a função de callback para ser executada quando você clicar no cara, no elemento. Para você obter dados do elemento que foi clicado, você usa o evento.target. O elemento tem o id obviamente do atributo que é nesse caso esquerda acima. Eu posso usar esse id aqui para poder modificar o tabuleiro. Tabuleiro é um objeto, que tem várias propriedades para cada quadrante. Então eu usei o objeto tabuleiro e selecionei e eu quero setar a propriedade de nome dada pelo target.id, que nesse caso vai ser esquerda acima. E eu mudei isso para o jogador atual, que vai ser o x inicialmente. Então o x vai ser entrar aqui no esquerda acima e vai virar x. Depois disso a gente vai ter que pegar, adicionar a classe marcador, traço x ou bola, dependendo do jogador. Adiciona essa classe ao evento.target, que é o elemento que foi clicado. Você usa o ponto class list, ponto class list tem a ponto add, para poder adicionar essa lista de classes. Obrigado.