script.js

let enemyData = [];

// 1. JSONデータの読み込み
async function loadData() {
    try {
        const response = await fetch("boss.json");
        enemyData = await response.json();
        displayEnemies(enemyData); // 初期表示
    } catch (error) {
        console.error("データの読み込みに失敗しました:", error);
        document.getElementById("enemyList").innerText =
            "データの読み込みに失敗しました。";
    }
}

// 2. データを画面に表示する関数
function displayEnemies(enemies) {
    const listContainer = document.getElementById("enemyList");
    listContainer.innerHTML = ""; // 一度リセット

    if (enemies.length === 0) {
        listContainer.innerHTML = "<p>該当するデータが見つかりません。</p>";
        return;
    }

    enemies.forEach((enemy) => {
        const card = document.createElement("div");
        card.className = "enemy-card";

        // 出現場所とアイテムをタグ化
        const locationsHtml = enemy.locations
            .map((loc) => `<span class="tag location-tag">${loc}</span>`)
            .join("");
        const itemsHtml = enemy.items
            .map((item) => `<span class="tag item-tag">${item}</span>`)
            .join("");

        card.innerHTML = `
            <div class="enemy-name">${enemy.name}</div>
            <div><strong>出現場所:</strong> ${locationsHtml}</div>
            <div style="margin-top: 5px;"><strong>アイテム:</strong> ${itemsHtml}</div>
        `;
        listContainer.appendChild(card);
    });
}

// 3. 絞り込み検索ロジック
function filterEnemies() {
    const nameQuery = document.getElementById("searchName").value.toLowerCase();
    const locationQuery = document
        .getElementById("searchLocation")
        .value.toLowerCase();
    const itemQuery = document.getElementById("searchItem").value.toLowerCase();

    const filtered = enemyData.filter((enemy) => {
        // 名前の一致確認
        const matchName = enemy.name.toLowerCase().includes(nameQuery);

        // 出現場所の一致確認（配列のどこかに含まれているか）
        const matchLocation =
            locationQuery === "" ||
            enemy.locations.some((loc) =>
                loc.toLowerCase().includes(locationQuery)
            );

        // アイテムの一致確認（配列のどこかに含まれているか）
        const matchItem =
            itemQuery === "" ||
            enemy.items.some((item) => item.toLowerCase().includes(itemQuery));

        return matchName && matchLocation && matchItem;
    });

    displayEnemies(filtered);
}

// イベントリスナーの設定（入力されたら即座にフィルタリング）
document.getElementById("searchName").addEventListener("input", filterEnemies);
document
    .getElementById("searchLocation")
    .addEventListener("input", filterEnemies);
document.getElementById("searchItem").addEventListener("input", filterEnemies);

// ページ読み込み時にデータロード
window.addEventListener("DOMContentLoaded", loadData);