script.js

// Application State
let allTeams = [];
let availableTeams = [];
let hiddenTeams = new Set();
let isSpinning = false;
let currentRotation = 0;
let selectedTeam = null;

// DOM Elements
const canvas = document.getElementById('wheel');
const ctx = canvas.getContext('2d');
const spinBtn = document.getElementById('spin-btn');
const modal = document.getElementById('result-modal');
const teamCountEl = document.getElementById('team-count');
const minStarsSlider = document.getElementById('min-stars');
const maxStarsSlider = document.getElementById('max-stars');
const minValueDisplay = document.getElementById('min-value');
const maxValueDisplay = document.getElementById('max-value');
const minStarsDisplay = document.getElementById('min-stars-display');
const maxStarsDisplay = document.getElementById('max-stars-display');

// Colors for wheel segments
const colors = [
    '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8',
    '#F7DC6F', '#BB8FCE', '#85C1E2', '#F8B739', '#52B788'
];

// Load teams from JSON
async function loadTeams() {
    try {
        const response = await fetch('teams.json');
        const data = await response.json();
        allTeams = data.teams;
        updateAvailableTeams();
        drawWheel();
    } catch (error) {
        console.error('Error loading teams:', error);
        alert('Failed to load teams. Please make sure teams.json exists.');
    }
}

// Update available teams based on filters
function updateAvailableTeams() {
    const minStars = parseFloat(minStarsSlider.value);
    const maxStars = parseFloat(maxStarsSlider.value);

    availableTeams = allTeams.filter(team => {
        const notHidden = !hiddenTeams.has(team.id);
        const matchesFilter = team.stars >= minStars && team.stars <= maxStars;
        return notHidden && matchesFilter;
    });

    teamCountEl.textContent = availableTeams.length;
    drawWheel();
}

// Update range displays
function updateRangeDisplays() {
    const minValue = parseFloat(minStarsSlider.value);
    const maxValue = parseFloat(maxStarsSlider.value);

    // Ensure min doesn't exceed max
    if (minValue > maxValue) {
        minStarsSlider.value = maxValue;
    }

    // Ensure max doesn't go below min
    if (maxValue < minValue) {
        maxStarsSlider.value = minValue;
    }

    // Update all displays
    const finalMin = parseFloat(minStarsSlider.value);
    const finalMax = parseFloat(maxStarsSlider.value);

    minValueDisplay.textContent = finalMin;
    maxValueDisplay.textContent = finalMax;
    minStarsDisplay.textContent = finalMin;
    maxStarsDisplay.textContent = finalMax;

    updateAvailableTeams();
}

// Draw the wheel on canvas
function drawWheel() {
    if (availableTeams.length === 0) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = '#333';
        ctx.font = '20px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('No teams available', canvas.width / 2, canvas.height / 2);
        spinBtn.disabled = true;
        return;
    }

    spinBtn.disabled = false;

    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = canvas.width / 2 - 10;
    const sliceAngle = (2 * Math.PI) / availableTeams.length;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw segments
    availableTeams.forEach((team, index) => {
        const startAngle = index * sliceAngle;
        const endAngle = startAngle + sliceAngle;

        // Draw segment
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.arc(centerX, centerY, radius, startAngle, endAngle);
        ctx.closePath();
        ctx.fillStyle = colors[index % colors.length];
        ctx.fill();
        ctx.strokeStyle = 'white';
        ctx.lineWidth = 3;
        ctx.stroke();

        // Draw text
        ctx.save();
        ctx.translate(centerX, centerY);
        ctx.rotate(startAngle + sliceAngle / 2);
        ctx.textAlign = 'center';
        ctx.fillStyle = 'white';
        ctx.font = 'bold 14px Arial';
        ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
        ctx.shadowBlur = 3;

        // Draw team name
        const textRadius = radius * 0.7;
        ctx.fillText(team.name, textRadius, 0);

        // Draw stars
        ctx.font = '12px Arial';
        const stars = '⭐'.repeat(team.stars);
        ctx.fillText(stars, textRadius, 15);

        ctx.restore();
    });

    // Draw center circle
    ctx.beginPath();
    ctx.arc(centerX, centerY, 30, 0, 2 * Math.PI);
    ctx.fillStyle = 'white';
    ctx.fill();
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 3;
    ctx.stroke();
}

// Spin the wheel
function spinWheel() {
    if (isSpinning || availableTeams.length === 0) return;

    isSpinning = true;
    spinBtn.disabled = true;

    // Random spin: 5-8 full rotations plus random angle
    const spins = 5 + Math.random() * 3;
    const randomAngle = Math.random() * 360;
    const totalRotation = spins * 360 + randomAngle;

    // Apply rotation
    currentRotation += totalRotation;
    canvas.style.transform = `rotate(${currentRotation}deg)`;

    // Calculate which team was selected
    setTimeout(() => {
        // The pointer is at the top (270 degrees or -90 degrees)
        // After rotation, calculate which segment is under the pointer
        const pointerAngle = 270; // Top of the wheel
        const finalRotation = currentRotation % 360;

        // Calculate the angle of the segment under the pointer
        // We subtract because the wheel rotates clockwise
        let targetAngle = (pointerAngle - finalRotation) % 360;
        if (targetAngle < 0) targetAngle += 360;

        const sliceAngle = 360 / availableTeams.length;
        const selectedIndex = Math.floor(targetAngle / sliceAngle) % availableTeams.length;

        selectedTeam = availableTeams[selectedIndex];
        showResult();

        isSpinning = false;
        spinBtn.disabled = false;
    }, 4000); // Match CSS transition duration
}

// Show result modal
function showResult() {
    const resultTeam = document.getElementById('result-team');
    const resultStars = document.getElementById('result-stars');

    resultTeam.textContent = selectedTeam.name;
    resultStars.textContent = '⭐'.repeat(selectedTeam.stars);

    modal.classList.add('show');
}

// Hide result modal
function hideModal() {
    modal.classList.remove('show');
}

// Hide team from future spins
function hideTeam() {
    if (selectedTeam) {
        hiddenTeams.add(selectedTeam.id);
        updateAvailableTeams();
        hideModal();
    }
}

// Keep team for future spins
function keepTeam() {
    hideModal();
}

// Event Listeners
spinBtn.addEventListener('click', spinWheel);
document.getElementById('hide-team-btn').addEventListener('click', hideTeam);
document.getElementById('keep-team-btn').addEventListener('click', keepTeam);

// Range slider event listeners
minStarsSlider.addEventListener('input', updateRangeDisplays);
maxStarsSlider.addEventListener('input', updateRangeDisplays);

// Initialize the application
loadTeams();