catch-a-chalk

import data from './js/data.json';

function p() {
    o.loadAnimation({
        container: h,
        renderer: "canvas",
        loop: !0,
        autoplay: !0,
        animationData: data
    });
}

function p() {
    const jsonPath = new URL('./js/data.json', import.meta.url).href;
    
    o.loadAnimation({
        container: h,
        renderer: "canvas",
        loop: !0,
        autoplay: !0,
        path: jsonPath
    });
}

const items = [
    { name: "100 000", reward: "100000_sr", chance: 5 },
    { name: "VIP (14 дней)", reward: "14_vipsr", chance: 3 },
    { name: "1000 Алмазов", reward: "1000_az", chance: 2 },
    { name: "75 000 ", reward: "75000_sr", chance: 10 },
    { name: "VIP SILVER (7 дней)", reward: "7_sl", chance: 8 },
    { name: "500 Алмазов", reward: "500_az", chance: 7 },
    { name: "1000 Пыли", reward: "1000_ds", chance: 6 },
    { name: "25 000 ", reward: "25000_sr", chance: 15 },
    { name: "200 Алмазов", reward: "200_az", chance: 15 },
    { name: "300 Пыли", reward: "300_ds", chance: 15 },
    { name: "Ускорение (3 lvl)", reward: "3_boost", chance: 10 },
    { name: "Улучшение (3 lvl)", reward: "3_imp", chance: 10 },
    { name: "VIP SILVER (2 дня)", reward: "2_sl", chance: 10 },
    { name: "10 000 ", reward: "10000_sr", chance: 20 },
    { name: "5 000 ", reward: "5000_sr", chance: 20 },
    { name: "100 Алмазов", reward: "100_az", chance: 20 },
    { name: "Ускорение (2 lvl)", reward: "2_boost", chance: 20 }
];

const caseContainer = document.getElementById("caseContainer");
const scrollingItems = document.getElementById("scrollingItems");
const resultText = document.getElementById("resultText");
const openCaseButton = document.getElementById("openCaseButton");
const marker = document.getElementById("marker");
let populatedItems = []; // Массив для хранения созданных предметов
let winningIndex = 0; // Индекс выигрышного предмета

function populateItems() {
    for (let i = 0; i < 151; i++) { // Создаем 151 предмет
        const item = items[i % items.length]; // Используем элементы из массива
        const div = document.createElement("div");
        div.className = "item";
        div.innerText = item.name;
        scrollingItems.appendChild(div);
        populatedItems.push(item); // Сохраняем предмет в массив
    }
}

function animateScroll(duration) {
    const itemWidth = scrollingItems.children[0].offsetWidth; // Ширина одного предмета
    const totalItems = scrollingItems.children.length;

    // Позиция, на которую нужно прокрутить, чтобы выигрышный элемент оказался под стрелкой
    const targetPosition = (winningIndex * itemWidth) - (caseContainer.offsetWidth / 2) + (itemWidth / 2); // Центрируем выигрышный элемент
    const scrollWidth = totalItems * itemWidth; // Общая ширина прокрутки
    const startTime = performance.now();

    function scrollAnimation(currentTime) {
        const elapsedTime = currentTime - startTime;
        const progress = Math.min(elapsedTime / duration, 1);
        const easeInOutQuad = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;

        const easeProgress = easeInOutQuad(progress);
        const currentPosition = -scrollWidth * easeProgress + targetPosition; // Прокручиваем к целевой позиции
        scrollingItems.style.marginLeft = `${currentPosition}px`;

        if (progress < 1) {
            requestAnimationFrame(scrollAnimation);
        } else {
            // После завершения анимации, показываем выигрышный элемент
            showWinningItem(); // Показываем выигрышный элемент
            positionMarker(); // Позиционируем маркер над выигрышным элементом
        }
    }

    requestAnimationFrame(scrollAnimation);
}

function showWinningItem() {
    const winningItem = populatedItems[winningIndex]; // Получаем выигрышный предмет
    resultText.innerText = `Вы выиграли: ${winningItem.name}`;

    // Изменяем текст выигрышного предмета в scrollingItems
    const winningElement = scrollingItems.children[winningIndex];
    winningElement.classList.add("winning-item"); // Добавляем класс для стилей
    winningElement.innerText = winningItem.name; // Обновляем текст
}

function positionMarker() {
    // Ширина одного предмета
    const itemWidth = scrollingItems.children[0].offsetWidth; 
    // Центрируем маркер над выигрышным элементом
    const markerPosition = (winningIndex * itemWidth) - (caseContainer.offsetWidth / 2) + (itemWidth / 2); 
    // Устанавливаем позицию маркера
    marker.style.left = `${markerPosition}px`; 
}

openCaseButton.addEventListener("click", () => {
    // Очищаем текст результата
    resultText.innerText = ""; 
    // Очищаем массив предметов
    populatedItems = []; 
    // Очищаем элементы прокрутки
    scrollingItems.innerHTML = ""; 
    // Заполняем предметами при загрузке страницы
    populateItems(); 

    // Выбираем случайный индекс выигрышного предмета
    // Случайный индекс в пределах массива items
    winningIndex = Math.floor(Math.random() * populatedItems.length);
    // Запускаем анимацию прокрутки (уменьшено время)
    animateScroll(2000); 
});

function slideChange(swiper) {
    const activeSlide = swiper.slides[swiper.activeIndex];
    const contentIndex = activeSlide.getAttribute('data-swiper-slide-index');

    const content = contentFullsizeEls[contentIndex];

    if (!content) return;

    if (state.bottomContent) {
        state.bottomContent.classList.remove("hero__content--bottom");
        state.bottomContent.classList.add("hero__content--hidden");
    }

    if (state.topContent) {
        state.topContent.classList.remove("hero__content--top");
        state.topContent.classList.add("hero__content--hidden");
    }

    state.bottomContent = state.topContent;
    state.topContent = content;

    const slidetRect = swiper.slides[swiper.activeIndex].getBoundingClientRect();
    const parentRect = heroEl.getBoundingClientRect();

    content.style.transition = "none";
    content.style.left = slidetRect.left - parentRect.left + "px";
    content.style.top = slidetRect.top - parentRect.top + "px";
    content.style.width = slidetRect.width + "px";
    content.style.height = slidetRect.height + "px";
    content.style.borderRadius = "var(--border-radius, 0)";

    content.getBoundingClientRect();

    content.classList.remove("hero__content--hidden");
    content.classList.add("hero__content--top", "hero__content--grow");

    content.style.transition = "";
    content.style.left = "";
    content.style.top = "";
    content.style.width = "";
    content.style.height = "";
    content.style.borderRadius = "";

    const onShowTextEnd = (event) => {
        if (event.target !== event.currentTarget) {
            event.currentTarget.removeEventListener("transitionend", onShowTextEnd);
        }
    };

    const onGrowEnd = (event) => {
        event.currentTarget.classList.remove("hero__content--grow");
        event.currentTarget.classList.add("hero__content--show-text");
        event.currentTarget.addEventListener("transitionend", onShowTextEnd);
    };

    content.addEventListener("transitionend", onGrowEnd, { once: true });
}

const mainBlocks = document.querySelectorAll('.main-block');
const maxActive = 2; // Максимальное количество активных элементов

mainBlocks.forEach(block => {
    block.addEventListener("click", function () {
        const id = block.dataset.id;
        const contentBlocks = document.querySelectorAll(`.other-block[data-id='${id}']`);

        // Если элемент уже активен, деактивируем его
        if (block.classList.contains('_active')) {
            block.classList.remove('_active');
            contentBlocks.forEach(contentBlock => contentBlock.classList.remove('_active'));
        } else {
            // Проверяем, сколько элементов уже активно
            const activeBlocks = document.querySelectorAll('.main-block._active');
            if (activeBlocks.length >= maxActive) {
                // Деактивируем первый активный элемент
                const firstActive = activeBlocks[0];
                firstActive.classList.remove('_active');
                const firstId = firstActive.dataset.id;
                document.querySelectorAll(`.other-block[data-id='${firstId}']`).forEach(contentBlock => contentBlock.classList.remove('_active'));
            }

            // Активируем текущий элемент
            block.classList.add('_active');
            contentBlocks.forEach(contentBlock => contentBlock.classList.add('_active'));
        }
    });
});