Oii, Gabriele! Que bom ver você praticando os conceitos de lógica de programação com o projeto AluGames.
Sua implementação tá muito bem estruturada. Você conseguiu identificar corretamente os elementos necessários através do id e utilizou seletores específicos para manipular o botão e a imagem dentro do item clicado.
- Uso do parâmetro id: Ao concatenar
'game-' + id, você tornou a função flexível para funcionar com qualquer jogo da lista. - Manipulação de classes: O uso do
classList.contains, remove e add é a melhor forma de alterar o estado visual dos elementos no CSS. - Lógica condicional: O
if/else trata corretamente os dois estados possíveis (alugado ou disponível).
Notei que você usou innerHTML em um momento e innerText em outro:
botao.innerHTML = 'Alugar'; // Aqui
botao.innerText = 'Devolver'; // E aqui
Embora ambos funcionem para trocar o texto, é interessante manter a consistência no código. Parabéns pelo empenho e por compartilhar sua solução no fórum. Continue assim!
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!