script.js

// ===============================
// MoodPlay - Direct RAWG Version
// ===============================


const API_KEY = "6e04a75111304d79ac1a92278fcbac32";

const moodItems = document.querySelectorAll(".mood-item");
const customMoodInput = document.getElementById("customMood");
const suggestBtn = document.getElementById("suggestBtn");
const clearBtn = document.getElementById("clearBtn");
const themeToggle = document.getElementById("themeToggle");
const resultsGrid = document.getElementById("resultsGrid");
const resultCounter = document.getElementById("resultCounter");
const messageBox = document.getElementById("messageBox");

let selectedMood = "";

// mood => search query
const moodMap = {
    happy: "fun colorful cheerful",
    sad: "story emotional relaxing",
    excited: "action fast intense",
    relaxed: "calm relaxing peaceful",
    adventurous: "exploration journey adventure",
    competitive: "competitive multiplayer battle",
    cozy: "cozy wholesome chill",
    mysterious: "mystery dark atmospheric"
};

function updateCounter() {
    resultCounter.textContent = resultsGrid.children.length;
}

function showMessage(text, type = "info") {
    messageBox.textContent = text;
    messageBox.dataset.state = type;
}

function removeActiveMood() {
    moodItems.forEach((item) => item.classList.remove("active"));
}

function setActiveMood(mood) {
    removeActiveMood();

    moodItems.forEach((item) => {
        if (item.dataset.mood === mood) {
            item.classList.add("active");
        }
    });
}

function detectMood(text) {
    const value = text.toLowerCase().trim();

    if (
        value.includes("happy") ||
        value.includes("fun") ||
        value.includes("good") ||
        value.includes("joy")
    ) return "happy";

    if (
        value.includes("sad") ||
        value.includes("emotional") ||
        value.includes("lonely") ||
        value.includes("upset")
    ) return "sad";

    if (
        value.includes("excited") ||
        value.includes("energetic") ||
        value.includes("action") ||
        value.includes("hype")
    ) return "excited";

    if (
        value.includes("relaxed") ||
        value.includes("calm") ||
        value.includes("peaceful") ||
        value.includes("stressed") ||
        value.includes("tired")
    ) return "relaxed";

    if (
        value.includes("adventure") ||
        value.includes("explore") ||
        value.includes("journey")
    ) return "adventurous";

    if (
        value.includes("competitive") ||
        value.includes("challenge") ||
        value.includes("battle") ||
        value.includes("win")
    ) return "competitive";

    if (
        value.includes("cozy") ||
        value.includes("comfort") ||
        value.includes("warm")
    ) return "cozy";

    if (
        value.includes("mystery") ||
        value.includes("dark") ||
        value.includes("curious")
    ) return "mysterious";

    return value ? "happy" : "";
}

function clearResults() {
    resultsGrid.innerHTML = "";
    updateCounter();
}

function createGameCard(game, moodLabel) {
    const card = document.createElement("article");
    card.className = "game-card";

    const genreText = game.genres && game.genres.length
        ? game.genres[0].name
        : "Unknown Genre";

    const platformsText = game.parent_platforms && game.parent_platforms.length
        ? game.parent_platforms.slice(0, 3).map((item) => item.platform.name).join(", ")
        : "Not available";

    card.innerHTML = `
    <div class="card-image-wrap">
      <img class="card-image" src="${game.background_image || "https://via.placeholder.com/600x400?text=No+Image"}" alt="${game.name}">
      <span class="card-badge">Mood Match</span>
    </div>

    <div class="card-content">
      <h4 class="game-title">${game.name}</h4>

      <div class="game-meta">
        <span class="meta-pill genre">${genreText}</span>
        <span class="meta-pill mood">${moodLabel}</span>
      </div>

      <ul class="game-details">
        <li><strong>Released:</strong> <span>${game.released || "Unknown"}</span></li>
        <li><strong>Rating:</strong> <span>${game.rating ? game.rating + " / 5" : "Not available"}</span></li>
        <li><strong>Metacritic:</strong> <span>${game.metacritic ?? "Not available"}</span></li>
        <li><strong>Playtime:</strong> <span>${game.playtime ? game.playtime + " hours avg" : "Not available"}</span></li>
        <li><strong>Platforms:</strong> <span>${platformsText}</span></li>
      </ul>

      <div class="card-actions">
        <a class="btn btn-secondary" href="https://rawg.io/games/${game.slug}" target="_blank" rel="noopener noreferrer">View Game</a>
        <button class="btn btn-primary remove-btn" type="button">Remove</button>
      </div>
    </div>
  `;

    const removeBtn = card.querySelector(".remove-btn");

    removeBtn.addEventListener("click", () => {
        card.remove();
        updateCounter();
        showMessage(`${game.name} was removed from the page.`, "info");
    });

    card.addEventListener("dblclick", () => {
        card.remove();
        updateCounter();
        showMessage(`${game.name} was removed with double click.`, "info");
    });

    resultsGrid.appendChild(card);
    updateCounter();
}

async function fetchGamesByMood(moodKey) {
    if (!API_KEY || API_KEY === "PUT_YOUR_RAWG_API_KEY_HERE") {
        showMessage("Please add your RAWG API key inside script.js first.", "error");
        return;
    }

    const query = moodMap[moodKey] || moodKey;
    const url = `https://api.rawg.io/api/games?key=${API_KEY}&search=${encodeURIComponent(query)}&page_size=6`;

    try {
        showMessage(`Loading ${moodKey} games...`, "info");

        const response = await fetch(url);

        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }

        const data = await response.json();

        clearResults();

        if (!data.results || data.results.length === 0) {
            showMessage("No games found for this mood. Try another one.", "error");
            return;
        }

        data.results.forEach((game) => {
            createGameCard(game, moodKey);
        });

        showMessage(`Success! Games loaded for mood: ${moodKey}.`, "success");
    } catch (error) {
        console.error(error);
        showMessage("Failed to fetch games. Check your API key or try again.", "error");
    }
}

moodItems.forEach((item) => {
    item.addEventListener("click", () => {
        selectedMood = item.dataset.mood;
        setActiveMood(selectedMood);
        customMoodInput.value = "";
        showMessage(`Mood selected: ${selectedMood}`, "info");
    });
});

customMoodInput.addEventListener("keyup", () => {
    const value = customMoodInput.value.trim();

    if (value !== "") {
        selectedMood = detectMood(value);
        setActiveMood(selectedMood);
        showMessage(`Typed mood matched to: ${selectedMood}`, "info");
    }
});

suggestBtn.addEventListener("click", () => {
    const typedMood = customMoodInput.value.trim();

    if (typedMood !== "") {
        selectedMood = detectMood(typedMood);
        setActiveMood(selectedMood);
    }

    if (!selectedMood) {
        showMessage("Please choose a mood or type one first.", "error");
        return;
    }

    fetchGamesByMood(selectedMood);
});

clearBtn.addEventListener("click", () => {
    clearResults();
    removeActiveMood();
    customMoodInput.value = "";
    selectedMood = "";
    showMessage("Cleared. Choose a new mood.", "info");
});

if (themeToggle) {
    themeToggle.addEventListener("click", () => {
        document.body.classList.toggle("light-mode");
    });
}

window.addEventListener("load", () => {
    updateCounter();
    showMessage("Choose a mood to start your game journey.", "info");
});