js/tower-map.js - main - VictoriaKoltsova/AI_2026_Module2_Project2

js/tower-map.js
81 строка5 KB
moskoltsova2009-ai
Build UK Quest game platform
09 авг 2026, 23:28
09 авг 2026, 23:2854234c0
(() => {
const { LOCATIONS, ITEMS } = window.TowerEscapeData;
const { ACHIEVEMENTS } = window.UKQuestAchievements;
const { bindAudioControls } = window.UKQuestAudio;
const { getLevelProgress, getPlayerLevel, loadProgress } = window.UKQuestStorage;

const locationIndex = (id) => Math.max(0, LOCATIONS.findIndex((location) => location.id === id));

function setText(selector, value) {
  document.querySelectorAll(selector).forEach((node) => { node.textContent = value; });
}

function renderInventory(tower) {
  const container = document.querySelector("[data-tower-map-inventory]");
  const visibleItems = tower.inventory.slice(0, 5);
  const slots = [...visibleItems.map((id) => ({ id, item: ITEMS[id] }))];
  while (slots.length < 5) slots.push(null);
  container.innerHTML = slots.map((entry) => entry
    ? `<article class="tower-inventory-slot found"><b>${entry.item.icon}</b><strong>${entry.item.name}</strong></article>`
    : `<article class="tower-inventory-slot empty"><b>◇</b><strong>Empty slot</strong></article>`).join("");
  setText("[data-tower-inventory-count]", `${tower.inventory.length} items`);
}

function renderRooms(tower) {
  const currentIndex = locationIndex(tower.currentLocation);
  document.querySelector("[data-tower-room-list]").innerHTML = LOCATIONS.map((location, index) => {
    const complete = tower.completedLocations.includes(location.id) || tower.completed;
    const current = tower.started && !tower.completed && location.id === tower.currentLocation;
    const unlocked = tower.completed || complete || current || (!tower.started && index === 0);
    const status = complete ? "Completed" : current ? "Current room" : unlocked ? "Available" : "Locked";
    return `<a class="tower-room-card ${complete ? "complete" : ""} ${current ? "current" : ""} ${unlocked ? "" : "locked"}" ${unlocked ? "href=\"tower-escape.html\"" : "aria-disabled=\"true\""}>
      <img src="${location.image}" alt="${location.name}">
      <span class="tower-room-number">${String(index + 1).padStart(2, "0")}</span>
      <span class="tower-room-copy"><small>Location ${String(index + 1).padStart(2, "0")}</small><strong>${location.name}</strong><span>${location.mission}</span></span>
      <span class="tower-room-state"><b>${status}</b><small>${complete ? "✓" : unlocked ? "→" : "⌑"}</small></span>
    </a>`;
  }).join("");

  document.querySelectorAll("[data-tower-map-node]").forEach((node) => {
    const index = locationIndex(node.dataset.towerMapNode);
    const complete = tower.completedLocations.includes(node.dataset.towerMapNode) || tower.completed;
    const current = tower.started ? node.dataset.towerMapNode === tower.currentLocation : index === 0;
    const unlocked = tower.completed || complete || current || index <= currentIndex;
    node.classList.toggle("complete", complete);
    node.classList.toggle("current", current && !tower.completed);
    node.classList.toggle("locked", !unlocked);
    node.disabled = !unlocked;
    node.onclick = () => { if (unlocked) window.location.href = "tower-escape.html"; };
  });
}

function renderAchievements(progress) {
  const catalog = ACHIEVEMENTS.filter((item) => item.game === "tower");
  const unlocked = new Set(progress.unlockedAchievements);
  const unlockedTowerCount = catalog.filter((item) => unlocked.has(item.id)).length;
  document.querySelector("[data-tower-map-achievements]").innerHTML = catalog.slice(0, 4).map((item) => `<article class="tower-map-achievement ${unlocked.has(item.id) ? "unlocked" : "locked"}"><b>${unlocked.has(item.id) ? item.mark : "◇"}</b><p><strong>${item.title}</strong><span>${item.copy}</span></p></article>`).join("");
  const next = catalog.find((item) => !unlocked.has(item.id));
  setText("[data-tower-next-copy]", next ? next.copy : "Every Tower Escape achievement has been unlocked.");
  setText("[data-tower-next-progress]", next ? `${unlockedTowerCount} / ${catalog.length}` : `${catalog.length} / ${catalog.length}`);
  document.querySelector("[data-tower-next-bar]").style.width = `${Math.min(100, (unlockedTowerCount / catalog.length) * 100)}%`;
}

function render() {
  const progress = loadProgress();
  const tower = progress.towerEscape;
  const level = getLevelProgress(progress.totalXP);
  const reached = tower.completed ? LOCATIONS.length : tower.started ? Math.max(1, locationIndex(tower.currentLocation) + 1) : 0;
  setText("[data-tower-map-level]", `LEVEL ${getPlayerLevel(progress.totalXP)}`);
  setText("[data-tower-map-xp]", `${level.current} / ${level.target} XP`);
  document.querySelector("[data-tower-map-xp-bar]").style.width = `${level.percent}%`;
  setText("[data-tower-map-progress]", `${reached} / ${LOCATIONS.length}`);
  document.querySelectorAll("[data-tower-map-play]").forEach((link) => { link.href = tower.completed ? "tower-escape.html?replay=1" : "tower-escape.html"; });
  renderInventory(tower);
  renderRooms(tower);
  renderAchievements(progress);
}

window.addEventListener("ukquest:progress", render);
bindAudioControls();
render();
})();