text: const util = "Util"
  
  const ID_CONTEUDO = "conteudo"
  const ID_BTN_JOGAR = "jogar"
  const ID_MENSAGEM = "mensagem"
  const CLASSE_INVISIVEL = "invisible"
  const ID_CARREGANDO = "carregando"
  const ID_CONTADOR = "contador"
  const ID_BTN_MOSTRAR_TUDO = "mostraTudo"
  const MENSAGENS = {
      sucesso: {
          texto: 'Combinação correta!',
          classe: 'alert-sucess'
      },
      erro: {
          texto: 'Combinação incorreta',
          classe: 'alert-danger'
      }
  }
  
  class Tela {
      static obterCodigoHtml(item){
          return `
          <div class="col-md-3">
              <div class="card" style="width: 50%" onclick="window.verificarSelecao('${item.id}', '${item.nome}')">
                  <img class="card-img-top" src="${item.img}" name="${item.nome}" alt="...">
              </div>
              <br />
          </div>`
      }
      static configurarBotaoVerificarSelecao(funcaoOnClick) {
          window.verificarSelecao = funcaoOnClick
      }
  
      static alterarConteudoHTML(condigoHtml) {
          const conteudo = document.getElementById(ID_CONTEUDO)
          conteudo.innerHTML = condigoHtml
      }
      static gerarStringHTMLPelaImagem(itens) {
          return itens.map(Tela.obterCodigoHtml).join('')
      }
      static atualizarImagens(itens){
          const codigoHtml = Tela.gerarStringHTMLPelaImagem(itens)
          Tela.alterarConteudoHTML(codigoHtml)
      }
      static configurarBotaoJogar(funcaoOnClick){
          const btnJogar = document.getElementById(ID_BTN_JOGAR);
          btnJogar.onclick = funcaoOnClick
      }
      static exibirHerois(nomeDoHeroi, img) {
          const elementosHTML = document.getElementsByName(nomeDoHeroi)
          elementosHTML.forEach(item => (item.src = img))
      }
      static async exibirMensagem(sucesso = true) {
          const elemento = document.getElementById(ID_MENSAGEM)
          if(sucesso) {
              elemento.classList.remove(MENSAGENS.erro.classe)
              elemento.classList.add(MENSAGENS.sucesso.classe)
              elemento.innerHTML = MENSAGENS.sucesso.texto
          } else {
              elemento.classList.remove(MENSAGENS.sucesso.classe)
              elemento.classList.add(MENSAGENS.erro.classe)
              elemento.innerHTML = MENSAGENS.erro.texto
          }
          elemento.classList.remove(CLASSE_INVISIVEL)
          await Util.timeout(1000)
          elemento.classList.add(CLASSE_INVISIVEL)
      }
  
      static exibirCarregando(mostrar = true) {
          const carregando = document.getElementById(ID_CARREGANDO)
          if(mostrar) {
              carregando.classList.remove(CLASSE_INVISIVEL)
              return;
          }
          carregando.classList.add(CLASSE_INVISIVEL)
      }
      
      static iniciarContador() {
          let contarAte = 3
          const elementoContador = document.getElementById(ID_CONTADOR)
          const identificadorNoTexto = "$$contador"
          const textoPadrao = `Começando em ${identificadorNoTexto} segundos...`
          const atualizarTexto = () =>
          (elementoContador.innerHTML = textoPadrao.replace(identificadorNoTexto, contarAte--))
          atualizarTexto()
          const idDoIntervalo = setInterval(atualizarTexto, 1000)
          return idDoIntervalo;
      }
  
      static limparContador(idDoIntervalo) {
          clearInterval(idDoIntervalo)
          document.getElementById(ID_CONTADOR).innerHTML = ""
      }
  
      static configurarBotaoMostrarTudo(funcaoOnClick) {
          const btnMostrarTudo = document.getElementById(ID_BTN_MOSTRAR_TUDO)
          btnMostrarTudo.onclick = funcaoOnClick
      }
  
  }