script.js

// tryb (pick albo ban)
let mode = "pick";
let selectedTeam = "blue";

// dane z champions.json (ładujemy globalnie w <script>)
let champions = championsData.data;

let blueSlots = [], redSlots = [];
let blueBans = [], redBans = [];

document.addEventListener("DOMContentLoaded", () => {
  renderSlots();
  renderChampions();
});

function setMode(newMode) {
  mode = newMode;
}

function renderSlots() {
  const blueContainer = document.getElementById("blue-slots");
  const redContainer = document.getElementById("red-slots");
  const blueBanContainer = document.getElementById("blue-bans");
  const redBanContainer = document.getElementById("red-bans");

  for (let i = 0; i < 5; i++) {
    let slotBlue = document.createElement("div");
    slotBlue.className = "slot";
    slotBlue.addEventListener("click", () => selectedTeam = "blue");
    blueContainer.appendChild(slotBlue);
    blueSlots.push(slotBlue);

    let slotRed = document.createElement("div");
    slotRed.className = "slot";
    slotRed.addEventListener("click", () => selectedTeam = "red");
    redContainer.appendChild(slotRed);
    redSlots.push(slotRed);

    let banBlue = document.createElement("div");
    banBlue.className = "ban";
    banBlue.addEventListener("click", () => selectedTeam = "blue");
    blueBanContainer.appendChild(banBlue);
    blueBans.push(banBlue);

    let banRed = document.createElement("div");
    banRed.className = "ban";
    banRed.addEventListener("click", () => selectedTeam = "red");
    redBanContainer.appendChild(banRed);
    redBans.push(banRed);
  }
}

function renderChampions() {
  const list = document.getElementById("champion-list");
  list.innerHTML = "";

  Object.values(champions).forEach(champ => {
    let div = document.createElement("div");
    div.className = "champion";
    div.innerHTML = `<img src="images/${champ.image.full}" alt="${champ.name}">`;

    div.addEventListener("click", () => pickChampion(champ));
    list.appendChild(div);
  });

  document.getElementById("search").addEventListener("input", (e) => {
    const value = e.target.value.toLowerCase();
    list.innerHTML = "";
    Object.values(champions)
      .filter(c => c.name.toLowerCase().includes(value))
      .forEach(champ => {
        let div = document.createElement("div");
        div.className = "champion";
        div.innerHTML = `<img src="images/${champ.image.full}" alt="${champ.name}">`;
        div.addEventListener("click", () => pickChampion(champ));
        list.appendChild(div);
      });
  });
}

function pickChampion(champ) {
  let slot;
  if (mode === "pick") {
    if (selectedTeam === "blue") {
      slot = blueSlots.find(s => s.children.length === 0);
    } else {
      slot = redSlots.find(s => s.children.length === 0);
    }
  } else { // BAN
    if (selectedTeam === "blue") {
      slot = blueBans.find(s => s.children.length === 0);
    } else {
      slot = redBans.find(s => s.children.length === 0);
    }
  }

  if (slot) {
    slot.innerHTML = `<img src="images/${champ.image.full}" alt="${champ.name}" style="width:100%; height:100%; border-radius:8px;">`;
  }
}