kzg strony starter

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- tutaj dodaj tytuł dla strony-->
    <!-- tutaj dodaj ikonę dla strony-->
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <!-- dodaj nagłówek h1 o treści z tytułem -->
		<div id="kontener">
      <div id="naglowek">
        <!-- dodaj nagłówek h2 z tekstem SteAIva i id="dymek"-->
      </div>

      <div id="lewo">
        <!-- dodaj obrazek bohatera i ustaw mu wysokość 500 -->
      </div>

      <div id="srodek">
        <div id="siatka">
          <button class="element" data-index="0" onclick="toggleActive(0)"></button>
          <button class="element" data-index="1" onclick="toggleActive(1)"></button>
          <button class="element" data-index="2" onclick="toggleActive(2)"></button>
          <button class="element" data-index="3" onclick="toggleActive(3)"></button>
          <button class="element" data-index="4" onclick="toggleActive(4)"></button>
          <button class="element" data-index="5" onclick="toggleActive(5)"></button>
          <button class="element" data-index="6" onclick="toggleActive(6)"></button>
          <button class="element" data-index="7" onclick="toggleActive(7)"></button>
          <button class="element" data-index="8" onclick="toggleActive(8)"></button>
        </div>
      </div>

      <div id="prawo">
        <!-- dodaj nagłówek h2 z id="odpowiedz"-->
      </div>
    </div>
  </body>
</html>


@import url('https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Lato&family=Press+Start+2P&display=swap');

body {
    height: 100vh;
    /* obrazkowe tło */
    background-color: #6a8394;
    font-family: 'Lato', Arial, sans-serif;
    text-align: center;
    font-size: 18px;
}

h1{
    font-family: 'Press Start 2P', Arial;
    /* kolor tekstu na zielony */
    text-shadow: black 5px 5px 2px;
    font-size: 60px;
}

#kontener{
    background: #c6c6c6dd;
    min-height: 700px;
    width:60%;
    margin: 50px auto;
    padding: 40px;
    /* dodajemy ramkę do okienka */
}

#naglowek{
    width: 100%;
    text-align: center;
}

#lewo{
    width: 35%;
    float: left;
    text-align: right;
}

#dymek{
    padding: 40px;
    margin: auto;
    max-width: 500px;
    min-height: 150px;
    background: url('https://cdn.glitch.global/ecf4df02-f0c0-4c48-ad05-84fc22c9a327/dymek.png?v=1723120143585') no-repeat;
}

#srodek{
    width: 30%;
    float:left;
    text-align: center;
    padding-top: 50px;
}

#prawo{
    width: 35%;
    float: left;
    text-align: center;
}

#odpowiedz {
    padding: 35px;
    padding-top: 17%;
    background: url('https://cdn.glitch.global/ecf4df02-f0c0-4c48-ad05-84fc22c9a327/dymek-boczny.png?v=1723120143925') no-repeat;
    height: 300px;
    width: 250px;
}


#siatka {
    display: grid;
	  justify-content: center;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
}

.element{
    width: 100px;
    height: 100px;
    background-color: #8b8b8b;
    border: 5px groove white;
    font-size: 24px;
    /* zmieniamy styl kursora na pointer */
}

.element.active {
    background: url("https://cdn.glitch.global/ecf4df02-f0c0-4c48-ad05-84fc22c9a327/pytajnik.png?v=1723120145413") #fdbf89;
    color: #ffffff;
}

/* Dodajemy regułę :hover zmieniającą kolor tła przycisku */


/* Zdarzenie zapisujące do pamięci programu wszystkie przyciski istniejące na stronie, podczas pierwszego uruchomienia strony i zapisujące ich statusy aktywności(wciśnięty/niewciśnięty) */
document.addEventListener("DOMContentLoaded", () => {
    const gridItems = document.querySelectorAll(".element");

    window.toggleActive = function(index) {
        const item = gridItems[index];
        item.classList.toggle("active");
        checkCrafting();
    }

  /* Funkcja sprawdzająca atualnie aktywne przyciski i porównująca je z nauczonymi wzorcami przedmiotów*/
    function checkCrafting() {
        const activeIndexes = [];
        gridItems.forEach((item, index) => {
            if (item.classList.contains("active")) {
                activeIndexes.push(index);
            }
        });

        let result = "Hmm.. o co Ci może chodzić...";

        //Instrukcje warunkowe sprawdzające konkretny wzorzec i przypisujące odpowiedni tekst
        if (arraysEqual(activeIndexes, [1, 4, 7])) {
            result = "Tworzymy łopatę lub miecz?";
        } else if (arraysEqual(activeIndexes, [0, 1, 2, 4, 7])) {
            result = "Tworzymy kilof?";
        } else if (arraysEqual(activeIndexes, [6, 4, 2])) {
            result = "Tworzymy nożyce?";
        } else if (arraysEqual(activeIndexes, [0, 1, 3, 4, 7])) {
            result = "Tworzymy siekierę?";
        } else if (arraysEqual(activeIndexes, [0, 1, 3, 5, 6, 7])) {
            result = "Tworzymy łuk?";
        } else if (arraysEqual(activeIndexes, [1, 2, 3, 5, 7, 8])) {
            result = "Tworzymy łuk?";
        } else if (arraysEqual(activeIndexes, [2, 4, 5, 6, 8])) {
            result = "Tworzymy wędkę?";
        } else if (arraysEqual(activeIndexes, [0, 1, 4, 7])) {
            result = "Tworzymy motykę?";
        } else if (arraysEqual(activeIndexes, [4, 7])) {
            result = "Tworzymy pochodnię lub dźwignię?";
        } else if (arraysEqual(activeIndexes, [0, 1, 2, 3, 4, 5, 6, 7, 8])) {
            result = "Nie tak łatwo stworzyć wszystko :)";
        }


       /* *ZADANIE*
       Po tej klamrze możemy dopisać kolejne przedmioty na wzór poprzednich.
       Komendę zaczynamy od "else if(...".

       Przyciski opisane są w konfiguracji:
       0 1 2
       3 4 5
       6 7 8

       */

        document.getElementById("odpowiedz").textContent = result;
    }

    function arraysEqual(a, b) {
        return JSON.stringify(a) === JSON.stringify(b);
    }
});