starcie gigantow starter

<!DOCTYPE html>
<html lang="pl">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">

  <!--miejsce na kod tytułu strony-->

  <link rel="stylesheet" href="/style.css">
  <script src="/script.js" defer></script>


  <!--miejsce na kod  favicon strony-->


</head>

<body>

  <div id="kontener">
    <!--miejsce na kod nagłówku strony-->


    <div>
      <div id="obrazekGry">
      </div>

      <br>
      <div id="gra" class="panel">
      <!--miejsce na kod panelu z gwiazdkami-->

      </div>

      <ul id="podsumowanie">

      </ul>

    </div>
  </div>

</body>

</html>


body {
    background-color: #121212;
    color: #f5f5f5;

}

h1 {
    padding: 30px;
    font-size: 35px;
    letter-spacing: 5px;
}

#obrazek {
    border-radius: 30px 5px 30px 5px;
}

.panel {
    background-color: #121212;
    margin-top: 30px;
    margin-bottom: 100px;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50px;
}

#podsumowanie {
    font-size: 25px;
    list-style: none;
    text-align: center;
}

span {
    color: red;
}


//tablica na obrazki z gier
const tabGry = ['<img id="obrazek" data-game="Minecraft" src="https://cdn.glitch.com/69514710-1596-4547-9a11-5da371878fac%2Fminecraft.webp?v=1627476123178" width="600">'];

//tablica przechowująca nazwę gry oraz ocenę użytkownika
let tabInfo = [];
//zmienna mająca dostęp do 5 gwiazdek na stronie
const gwiazdki = document.querySelectorAll('.gwiazdka');
//zmienna pomocnicza dzięki, której daną grę możemy ocenić tylko raz
let ocena = true;
//początkowy obrazek
document.getElementById('obrazekGry').innerHTML = tabGry[0];
//zmienna pomocnicza do wybiernia obrazków z tabGry
let licznik = 0;
//dla każej gwiazdki dodajemy zdarzenie na kliknięcie
gwiazdki.forEach(function (gwiazdka) {


    gwiazdka.addEventListener('mousedown', function () {

        //pętla odpowiedzialna za zaznaczenie gwiazdek
        for (let i = 1; i <= parseInt(gwiazdka.id.charAt(2)); i++) {

            document.querySelector("#g-" + i).innerHTML = '&#9733;';
        }

      //ocena danej gry
        if (ocena) {

            ocena = false;
          //dodajemy do tablicy nazwę gry oraz ocenę użytkownika
            tabInfo.push(document.getElementById('obrazek').dataset.game);
            tabInfo.push(gwiazdka.id.charAt(2));

          //zmianna kolejnej gry z opóżnieniem 1 sekundy
            setTimeout(function () {
                licznik++;
                if (licznik < tabGry.length) {

                //ładujemy kolejny obrazek gry
                    document.getElementById('obrazekGry').innerHTML = tabGry[licznik];
                  //resetujemy gwiazdki
                    for (let i = 1; i <= 5; i++) {

                        document.querySelector("#g-" + i).innerHTML = '&#9734;';
                    }
                }
              //jeśli nie ma już obrazków wyświetlamy podsumowanie z ocenami użytkownika
                else {

                    document.getElementById('naglowek').textContent = "Podsumowanie";
                    document.getElementById('obrazekGry').style.display = "none";
                    document.getElementById('gra').style.display = "none";

                    for (let i = 0; i < tabGry.length * 2; i += 2) {

                        document.getElementById('podsumowanie').innerHTML += "<li><span>" + tabInfo[i] + "</span> &#9733; " + tabInfo[i + 1] + "</li>";
                    }
                }
                ocena = true;

            }, 1000);
        }
    });
});