strony kzg starcie gigantow

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

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

  <title>Starcie gigantów</title>

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


  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Shojumaru&display=swap" rel="stylesheet">


  <link rel="icon"
    href="https://cdn.glitch.com/69514710-1596-4547-9a11-5da371878fac%2Frating-2130774-1794816.png?v=1627478547297">

</head>

<body>

  <div id="kontener">

    <h1 id="naglowek">
      Zagłosuj na swoją ulubioną grę
    </h1>

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

      <br>
      <div id="gra" class="panel">
        <span id="g-1" class="gwiazdka">&#9734;</span>
        <span id="g-2" class="gwiazdka">&#9734;</span>
        <span id="g-3" class="gwiazdka">&#9734;</span>
        <span id="g-4" class="gwiazdka">&#9734;</span>
        <span id="g-5" class="gwiazdka">&#9734;</span>
      </div>

      <ul id="podsumowanie">

      </ul>

    </div>
  </div>

</body>

</html>


body {
    background-color: #121212;
    color: #f5f5f5;
    font-family: 'Shojumaru', cursive;
}

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

#kontener {
    text-align: center;
    width: 1000px;
    height:700px;
    margin-left: auto;
    margin-right: auto;
    background-color: #037aee;
    border-radius: 5px;
    margin-bottom: 100px;
}

.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;
}

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

.gwiazdka {
    color: #ed992d;/*kolor czcionki*/
    font-size: 60px;/*wielkość czcionki*/
    padding: 10px;/*odstęp od zawartości elementu a jego obramowaniem*/
    transition-duration: 0.5s;/*czas załadowania nowych właściwości po najechaniu kursorem myszki*/
}

.gwiazdka:hover {
    cursor: pointer;/*kursor myszki rączka*/
    opacity: 0.7;  /*przezroczystość elementu*/
}


//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">',
    '<img id="obrazek" data-game="Among Us" src="https://cdn.glitch.com/69514710-1596-4547-9a11-5da371878fac%2FAmong-Us.webp?v=1627476924693" width="600">',
    '<img id="obrazek" data-game="Fortnite" src="https://cdn.glitch.com/95af66be-7cc7-413d-8cc7-6a5f7efe984c%2Ffortnite.png?v=1628413185211" width="600">',
    '<img id="obrazek" data-game="League of Legends" src="https://cdn.glitch.com/95af66be-7cc7-413d-8cc7-6a5f7efe984c%2FLOL.jpg?v=1628413686089" width="600">',
    '<img id="obrazek" data-game="Brawl stars" src="https://cdn.glitch.com/95af66be-7cc7-413d-8cc7-6a5f7efe984c%2Fbrawlstars.jpg?v=1628413959550" width="600">',
    '<img id="obrazek" data-game="Roblox" src="https://cdn.glitch.com/95af66be-7cc7-413d-8cc7-6a5f7efe984c%2Froblox.webp?v=1628414523187" width="600">',
    '<img id="obrazek" data-game="Counter Strike" src="https://cdn.glitch.com/95af66be-7cc7-413d-8cc7-6a5f7efe984c%2Fcs.webp?v=1628415274643" 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żęmy 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 gwaiazdek
        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żytytkownika
            tabInfo.push(document.getElementById('obrazek').dataset.game);
            tabInfo.push(gwiazdka.id.charAt(2));

          //zmianna kolejnej 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);
        }
    });
});