Просмотр кода страницы Widget:GangCalc

<includeonly>
<!-- Уникальный контейнер -->
<div id="gang-calc-<!--{$id|default:'1'}-->" class="gang-calc-widget" style="background:#f8f9fa; border:1px solid #ccc; padding:15px; border-radius:5px; max-width:400px; font-family:sans-serif; margin-bottom: 20px;">
    <h3 style="margin-top:0;">Очки банды</h3>
    
    <div style="margin-bottom:10px;">
        <label><b>Потрачено монет:</b></label><br>
        <input type="number" class="gc-coins" placeholder="Сумма" style="width:100%; padding:5px; margin-top:5px; box-sizing:border-box;">
    </div>

    <div style="margin-bottom:10px;">
        <label><b>Игроков в банде (2-10):</b></label><br>
        <input type="number" class="gc-players" placeholder="Кол-во людей" style="width:100%; padding:5px; margin-top:5px; box-sizing:border-box;">
    </div>

    <button type="button" class="gc-btn" style="background:#36c; color:white; border:none; padding:8px 15px; cursor:pointer; font-weight:bold; border-radius:3px;">Рассчитать</button>

    <div class="gc-error" style="color:red; margin-top:10px; display:none; font-size:0.9em;"></div>

    <div class="gc-result" style="margin-top:15px; border-top:1px solid #ddd; padding-top:10px; display:none;">
        <div style="margin-bottom:5px;">Покупатель: <b class="res-buyer" style="color:green; font-size:1.2em;">0</b> очков банды</div>
        <div style="margin-bottom:5px;">Остальные (каждый): <b class="res-others" style="color:green; font-size:1.2em;">0</b> очков банды</div>
        <div style="font-size:0.8em; color:#666;">Процент возврата: <span class="res-percent"></span></div>
    </div>
</div>

<script>
(function() {
    // Функция инициализации, которая сработает, когда страница будет готова
    var initWidget = function() {
        var containerId = "gang-calc-<!--{$id|default:'1'}-->";
        var container = document.getElementById(containerId);

        // Если контейнера нет (например, скрипт сработал раньше времени или ID неверен), выходим
        if (!container) return;

        // Находим элементы внутри контейнера без jQuery
        var btn = container.querySelector('.gc-btn');
        var inputCoins = container.querySelector('.gc-coins');
        var inputPlayers = container.querySelector('.gc-players');
        var divError = container.querySelector('.gc-error');
        var divResult = container.querySelector('.gc-result');
        var spanBuyer = container.querySelector('.res-buyer');
        var spanOthers = container.querySelector('.res-others');
        var spanPercent = container.querySelector('.res-percent');

        // Защита от дублирования событий (если скрипт запустится дважды)
        if (btn.getAttribute('data-bound') === 'true') return;
        btn.setAttribute('data-bound', 'true');

        btn.addEventListener('click', function() {
            var coins = parseInt(inputCoins.value);
            var players = parseInt(inputPlayers.value);
            
            // Сброс отображения
            divError.style.display = 'none';
            divResult.style.display = 'none';

            // Валидация
            if (isNaN(coins) || coins < 0) {
                divError.innerText = 'Введите корректную сумму монет.';
                divError.style.display = 'block';
                return;
            }
            if (isNaN(players) || players < 2 || players > 10) {
                divError.innerText = 'Игроков должно быть от 2 до 10.';
                divError.style.display = 'block';
                return;
            }

            // Логика
            var percent = 0;
            if (players >= 2 && players <= 5) percent = 0.10;
            else if (players >= 6 && players <= 9) percent = 0.20;
            else if (players === 10) percent = 0.30;

            var buyerPoints = Math.round(coins * percent);
            var othersPoints = Math.round((coins * percent) / (players - 1));

            // Вывод
            spanBuyer.innerText = buyerPoints;
            spanOthers.innerText = othersPoints;
            spanPercent.innerText = (percent * 100) + '%';
            
            divResult.style.display = 'block';
        });
    };

    // Запускаем скрипт только после полной загрузки DOM
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initWidget);
    } else {
        initWidget();
    }
})();
</script>
</includeonly>