<!--HTML-->
<script>
// Массив с данными пользователей (редактируемый вручную)
const userProgress = [
    { userId: 2, passLevel: 5 },
    { userId: 5, passLevel: 15 },
    // { userId: 10, passLevel: 20 },
    // { userId: 25, passLevel: 7 },
    // Добавляйте новых пользователей по этой схеме
];

function getCurrentUserId() {
    try {
        if (typeof UserID === 'undefined') {
            console.warn('⚠️ UserID не найден');
            return null;
        }
        return parseInt(UserID);
    } catch (e) {
        console.error('❌ Ошибка получения UserID:', e);
        return null;
    }
}

function initBattlePass() {
    const currentUserId = getCurrentUserId();
    
    if (!currentUserId) {
        console.log('❌ Пользователь не авторизован, пропуск не активирован');
        return;
    }
    
    // Ищем данные пользователя в массиве
    const userData = userProgress.find(item => item.userId === currentUserId);
    
    if (!userData) {
        console.log(`❌ Пользователь с ID ${currentUserId} не найден в базе пропуска`);
        return;
    }
    
    const passLevel = userData.passLevel;
    console.log(`✅ Пользователь ${currentUserId} на уровне ${passLevel}`);
    
    // Получаем все элементы пропуска
    const items = document.querySelectorAll('.battlePass_item');
    let currentItem = null;
    let foundCurrent = false;
    
    items.forEach((item) => {
        const span = item.querySelector('.battlePass_top span');
        if (!span) return;
        
        const itemNumber = parseInt(span.textContent);
        if (isNaN(itemNumber)) return;
        
        // Убираем все классы состояния
        item.classList.remove('done', 'current');
        
        // Определяем состояние элемента
        if (itemNumber <= passLevel) {
            item.classList.add('done');
        }
        
        // Находим следующий уровень (passLevel + 1) для подсветки как current
        if (itemNumber === passLevel + 1) {
            item.classList.add('current');
            currentItem = item;
            foundCurrent = true;
        }
    });
    
    // Если дошли до 25 уровня, то последний элемент становится current
    if (!foundCurrent && passLevel >= 25) {
        const lastItem = items[items.length - 1];
        lastItem.classList.remove('done');
        lastItem.classList.add('current');
        currentItem = lastItem;
        console.log('🏆 Достигнут максимальный уровень!');
    }
    
    // Прокручиваем к текущему элементу, помещая его в центр
    if (currentItem) {
        const scrollToItem = () => {
            // Ищем родительский контейнер с прокруткой
            const container = document.querySelector('.battlePass');
            if (!container) {
                console.error('❌ Контейнер .battlePass не найден');
                return;
            }
            
            // Получаем позицию элемента внутри контейнера
            const containerRect = container.getBoundingClientRect();
            const itemRect = currentItem.getBoundingClientRect();
            
            // Вычисляем позицию для центрирования
            const scrollPosition = container.scrollLeft + (itemRect.left - containerRect.left) - (containerRect.width / 2) + (itemRect.width / 2);
            
            console.log(`📜 Прокрутка к элементу:`, {
                containerWidth: containerRect.width,
                itemLeft: itemRect.left,
                containerLeft: containerRect.left,
                scrollPosition: scrollPosition
            });
            
            // Плавная прокрутка
            container.scrollTo({
                left: scrollPosition,
                behavior: 'smooth'
            });
        };
        
        // Пробуем прокрутить несколько раз с разными задержками
        setTimeout(scrollToItem, 100);
        setTimeout(scrollToItem, 300);
        setTimeout(scrollToItem, 600);
        
        console.log(`📜 Прокрутка к уровню ${passLevel + 1}`);
    } else {
        console.log('ℹ️ Текущий элемент не найден');
    }
}

// Запускаем скрипт с задержкой для полной загрузки
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(initBattlePass, 500);
    });
} else {
    setTimeout(initBattlePass, 500);
}

// Дополнительный запуск после полной загрузки
window.addEventListener('load', function() {
    setTimeout(initBattlePass, 300);
});
</script>

<script>
// Дополнительная инициализация для abbr элементов внутри .battlePass
    // Используем делегирование, чтобы обработать все abbr элементы
    $(".battlePass_container abbr[title]").each(function() {
        // Сохраняем оригинальный title перед инициализацией
        var $this = $(this);
        var originalTitle = $this.attr('title');
        
        // Инициализируем плагин для этого abbr
        $this.style_my_tooltips({
            tip_follows_cursor: "on",
            tip_delay_time: 200
        });
        
        // Восстанавливаем title после инициализации (если плагин его удалил)
        // Некоторые версии плагина удаляют title при инициализации
        if (originalTitle && !$this.attr('title')) {
            $this.attr('title', originalTitle);
        }
    });
    
    // Альтернативный вариант: используем селектор для всех abbr на странице
    // Раскомментируйте если нужно применить ко всем abbr
    // $("abbr[title]").style_my_tooltips({
    //     tip_follows_cursor: "on",
    //     tip_delay_time: 200
    // });
}); 
</script>

<section class="maintheme">
  <div class="maintheme__subtitle unselectable">боевой пропуск</div>

<div class="maintheme__block">
    <ul>
      <li>Основной валютой на нашем проекте являются посты, учет которых ведется в поле профиля автоматически, а сумма потраченных постов проставляется администрацией на личной странице.</li>
 <li>За попадание в активисты недели автоматически начисляется один фрагмент персональной плашки. Подробно о фрагментах можно прочитать в faq о плашках ниже в теме.</li>
<li>Все, что не указано в перечне ниже, от твинков до изменений в анкетах, бесплатно и требует только вашего желания.</li>
<li>В качестве оплаты труда каждый администратор имеет право использовать каждую позицию по разу в месяц бесплатно. Месяц отсчитывается с календарной даты.</li>
    </ul>


  <section class="battlePass">

<div class="battlePass_container">
    <div class="battlePass_item">
    <div class="battlePass_top"><span>1</span></div>
    <div class="battlePass_bottom">бесплатные 3 подарка<br>🎁🎁🎁</div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>2</span></div>
    <div class="battlePass_bottom">осколок плашки 💎</div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>3</span></div>
    <div class="battlePass_bottom">50 плюсов в профиль 📈</div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>4</span></div>
    <div class="battlePass_bottom">случайный подарок в профиль от админа 💓</div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>5</span></div>
    <div class="battlePass_bottom">артефакт <abbr title="Повелитель мух – шапочка из материала, напоминающего фольгу. Надев её на голову, можно на полчаса взять под контроль любое насекомое в радиусе километра и управлять им как машинкой на радио-управлении мысленно. Одновременно можно взять под контроль не более ста насекомых.">🎊 повелитель мух 🎊</abbr></div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>6</span></div>
    <div class="battlePass_bottom">осколок плашки 💎</div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>7</span></div>
    <div class="battlePass_bottom">билет на переброс артефакта при покупке (1 раз) 🎲</div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>8</span></div>
    <div class="battlePass_bottom">скидка на любой товар в магазине <abbr title="с округлением в меньшую сторону">50% 🛒</abbr></div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>9</span></div>
    <div class="battlePass_bottom">осколок плашки 💎</div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>10</span></div>
    <div class="battlePass_bottom">персональная плашка (статичная) 🎊</div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>11</span></div>
    <div class="battlePass_bottom">50 плюсов в профиль 📈</div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>12</span></div>
    <div class="battlePass_bottom">билет на переброс артефакта при покупке (1 раз) 🎲</div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>13</span></div>
    <div class="battlePass_bottom">выкуп внешности для акции 👤️</div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>14</span></div>
    <div class="battlePass_bottom">бесплатные 3 подарка<br>🎁🎁🎁</div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>15</span></div>
    <div class="battlePass_bottom">артефакт <abbr title="Следопытка – один носок, вязаный, шерстяной и колючий. Который, тем не менее, помогает идти в направлении человека, о ком вы думаете, даже если думаете вы очень абстрактно («та девочка из третьего класса, которую я мельком видел на перемене»). Минусы: идти придется своими ногами, а ещё нога будет чесаться. Плюсы: действует, пока надет носок.">🎊 Следопытка 🎊</abbr></div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>16</span></div>
    <div class="battlePass_bottom">скидка на любой товар в магазине <abbr title="с округлением в меньшую сторону">50% 🛒</abbr></div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>17</span></div>
    <div class="battlePass_bottom">3 билета на переброс кубика в квестах 🎲</div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>18</span></div>
    <div class="battlePass_bottom">50 плюсов в профиль 📈</div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>19</span></div>
    <div class="battlePass_bottom">бесплатные 3 подарка<br>🎁🎁🎁</div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>20</span></div>
    <div class="battlePass_bottom">бесплатный рандомный артефакт в магазине 📦</div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>21</span></div>
    <div class="battlePass_bottom">персональная плашка (статичная) 🎊</div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>22</span></div>
    <div class="battlePass_bottom">скидка на любой товар в магазине <abbr title="с округлением в меньшую сторону">50% 🛒</abbr></div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>23</span></div>
    <div class="battlePass_bottom">100 плюсов в профиль<br>📈📈📈</div>
</div>
<div class="battlePass_item">
    <div class="battlePass_top"><span>24</span></div>
    <div class="battlePass_bottom">читкод «крыса» 🐀: бесплатный рандомный артефакт <abbr title="вы можете выбрать свойство, которым артефакт точно будет обладать">с выбором свойства</abbr></div>
</div>
<div class="battlePass_item last">
    <div class="battlePass_top"><span>25</span></div>
    <div class="battlePass_bottom">персональная плашка (статичная или гиф) + осколок плашки 💎 + памятный подарок в профиль<br>💰💰💰</div>
</div>
    

</div>

  </section>







</div>
</section>

<style>
.battlePass {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px 0px 15px;
}

.battlePass::-webkit-scrollbar {
height: 6px;
}

.battlePass_container {
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: nowrap;
    width: max-content;
}

.battlePass_item {
    width: 150px;
    flex-shrink: 0;
    background: var(--main-bg);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--accent);
    border-top: none;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
}



.battlePass_top {
    width: 110px;
    background: url(https://forumstatic.ru/files/001c/03/d3/68464.png);
    background-size: contain;
    background-repeat: no-repeat;
    HEIGHT: 67px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    position: relative;
}

.battlePass_top span {
    font-family: var(--font-accent);
    font-size: 35px;
    margin-top: 5px;
    background: var(--dark-bg);
    height: 35px;
    line-height: 37px;
    color: var(--accent-orange);
    padding: 0px 5px;
}

.battlePass_bottom {
    padding: 10px;
    border: 1px dashed var(--accent);
    border-radius: var(--main-bord-radius);
    text-align: center;
    position: relative;
    background: var(--main-bg);
    display: flex;
    flex: 1;
    width: 120px;
    align-items: center;
    justify-content: center; flex-direction: column;
text-transform: uppercase;
    font-weight: 600;
    font-size: 10px;
}

.battlePass_item.done {
    border: 2px solid #cdcdcd;
    border-top: none;
    border-bottom: none;
}

.battlePass_item.done .battlePass_top {
    filter: grayscale(1);
    color: #535353;
    opacity: 0.7;
}

.battlePass_item.done .battlePass_bottom {
    border: 1px dashed #cdcdcd;
    color: #7d7d7d;
    filter: grayscale(1);
}

.battlePass_item.done::before {
    font-family: Material Symbols Rounded;
    font-variation-settings: 'FILL' 1;
    color: var(--accent-orange);
    content: "\e5ca";
    display: block;
    position: absolute;
    z-index: 10;
    font-size: 27px;
    right: 74px;
    top: 71px;
    font-weight: 700;
    background: var(--dark-bg);
    width: 30px;
    height: 30px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.battlePass_item.current {
    border: 5px solid var(--dark-bg);
    background: linear-gradient(50deg, var(--accent-orange) 0%, transparent 58%);
    border-top: none;
    border-bottom: none;
}

.battlePass_item.current .battlePass_bottom {
border: 1px dashed var(--dark-bg);
}

.battlePass_item.last::before {
        font-family: Material Symbols Rounded;
    font-variation-settings: 'FILL' 1;
    content: "\f25c";
    display: block;
    position: absolute;
    z-index: 10;
    font-size: 65px;
    top: 6px;
}
</style>