Quest: WordPress + JS

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 300px;
  }

  .grid div {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    transition: filter 0.2s;
  }

  .pk-czerwony {
    background-color: red;
    color: white;
    border-color: darkred;
  }

  .pk-niebieski {
    background-color: blue;
    color: white;
    border-color: navy;
  }

  .pk-zielony {
    background-color: green;
    color: white;
    border-color: darkgreen;
  }

  /* Dodaj więcej klas pk- jeśli chcesz */
</style>

<div class="grid">
  <div class="pk-czerwony">1</div>
  <div class="pk-niebieski">2</div>
  <div class="pk-zielony">3</div>
  <div class="pk-czerwony">4</div>
  <div class="pk-niebieski">5</div>
  <div class="pk-zielony">6</div>
  <div class="pk-czerwony">7</div>
  <div class="pk-niebieski">8</div>
  <div class="pk-zielony">9</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
  const colors = [
  "#FFFF00", "#FFE600", "#FFCC00", "#FFB300", "#FF9900",
  "#FF8000", "#FF6600", "#FF4C00", "#FF3300", "#FF1919",
  "#FF0033", "#FF0066", "#FF0099", "#FF00CC", "#F000FF",
  "#CC00FF", "#9900FF", "#6600FF", "#3300FF", "#1900FF",
  "#0033FF", "#0066FF", "#0099FF", "#00CCFF", "#00E6FF",
  "#00FFFF", "#00FFE6", "#00FFCC", "#00FFB3", "#00FF99",
  "#00FF66", "#00FF33", "#00FF00", "#1AFF00", "#33FF00",
  "#4CFF00", "#66FF00", "#80FF00", "#99FF00", "#B3FF00",
  "#CCFF00", "#E6FF00", "#D4E600", "#B3CC00", "#809900",
  "#666699", "#4C4C99", "#333366", "#1A1A66", "#000066"
];

  document.body.addEventListener("wheel", function (e) {
    const target = e.target;

    if (!(target instanceof HTMLElement)) return;

    const pkClass = Array.from(target.classList).find(cls => cls.startsWith("pk-"));
    if (!pkClass) return;

    e.preventDefault();

    // Ustaw domyślny indeks, jeśli jeszcze nie istnieje
    if (!target.dataset.colorIndex) {
      target.dataset.colorIndex = "0";
    }

    let index = parseInt(target.dataset.colorIndex);
    const direction = e.deltaY > 0 ? 1 : -1;

    // Przejście do następnego lub poprzedniego koloru z zawinięciem
    index = (index + direction + colors.length) % colors.length;

    target.dataset.colorIndex = index;
    target.style.backgroundColor = colors[index];
  }, { passive: false });
});
</script>