Widget:GangCalc: различия между версиями

Материал из FREESTREET База знаний
Перейти к навигации Перейти к поиску
Нет описания правки
Нет описания правки
Строка 1: Строка 1:
<includeonly>
<includeonly>
<!-- Уникальный ID для каждого вызова виджета, чтобы не было конфликтов -->
<!-- Уникальный контейнер -->
<div id="gang-calc-<!--{$id|default:'1'}-->" style="background:#f8f9fa; border:1px solid #ccc; padding:15px; border-radius:5px; max-width:400px; font-family:sans-serif;">
<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>
     <h3 style="margin-top:0;">Очки банды</h3>
      
      
Строка 14: Строка 14:
     </div>
     </div>


     <button class="gc-btn" style="background:#36c; color:white; border:none; padding:8px 15px; cursor:pointer; font-weight:bold; border-radius:3px;">Рассчитать</button>
     <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-error" style="color:red; margin-top:10px; display:none; font-size:0.9em;"></div>
Строка 26: Строка 26:


<script>
<script>
/* Оборачиваем в RLQ, чтобы ждать загрузки ядра MediaWiki */
(function() {
(window.RLQ = window.RLQ || []).push(function() {
     // Функция инициализации, которая сработает, когда страница будет готова
      
     var initWidget = function() {
     mw.loader.using('jquery', function() {
         var containerId = "gang-calc-<!--{$id|default:'1'}-->";
         /* Этот код сработает только когда jQuery и mw будут готовы */
         var container = document.getElementById(containerId);
          
 
         // Используем класс .gang-calc-wrapper, чтобы скрипт работал
         // Если контейнера нет (например, скрипт сработал раньше времени или ID неверен), выходим
         // даже если виджет вставлен несколько раз или внутри сложных шаблонов
        if (!container) return;
         var containerId = 'gang-calc-<!--{$id|default:'1'}-->';
 
          
         // Находим элементы внутри контейнера без jQuery
         // Ждем полной отрисовки DOM (на всякий случай)
         var btn = container.querySelector('.gc-btn');
         $(function() {
        var inputCoins = container.querySelector('.gc-coins');
             var $container = $('#' + containerId);
        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);
              
              
             // Если контейнер не найден (например, id конфликтует), ищем по классу внутри родителя
             // Сброс отображения
             if ($container.length === 0) {
            divError.style.display = 'none';
                // Фолбэк на случай проблем с ID
            divResult.style.display = 'none';
                return;  
 
            // Валидация
             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;
             }
             }


             $container.find('.gc-btn').click(function() {
             // Логика
                var $btn = $(this);
            var percent = 0;
                // Ищем поля именно внутри этого контейнера
            if (players >= 2 && players <= 5) percent = 0.10;
                var coins = parseInt($container.find('.gc-coins').val());
            else if (players >= 6 && players <= 9) percent = 0.20;
                var players = parseInt($container.find('.gc-players').val());
            else if (players === 10) percent = 0.30;
                var $error = $container.find('.gc-error');
                var $result = $container.find('.gc-result');
               
                $error.hide();
                $result.hide();


                if (isNaN(coins) || coins < 0) {
            var buyerPoints = Math.round(coins * percent);
                    $error.text('Введите корректную сумму монет.').fadeIn();
            var othersPoints = Math.round((coins * percent) / (players - 1));
                    return;
                }
                if (isNaN(players) || players < 2 || players > 10) {
                    $error.text('Игроков должно быть от 2 до 10.').fadeIn();
                    return;
                }


                var percent = 0;
            // Вывод
                if (players >= 2 && players <= 5) percent = 0.10;
            spanBuyer.innerText = buyerPoints;
                else if (players >= 6 && players <= 9) percent = 0.20;
            spanOthers.innerText = othersPoints;
                else if (players === 10) percent = 0.30;
            spanPercent.innerText = (percent * 100) + '%';
 
           
                var buyerPoints = Math.round(coins * percent);
            divResult.style.display = 'block';
                var othersPoints = Math.round((coins * percent) / (players - 1));
 
                $container.find('.res-buyer').text(buyerPoints);
                $container.find('.res-others').text(othersPoints);
                $container.find('.res-percent').text((percent * 100) + '%');
               
                $result.fadeIn();
            });
         });
         });
     });
     };


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

Версия от 19:48, 26 ноября 2025

Источник — https://wiki.freestreet.dance/index.php?title=Widget:GangCalc&oldid=14774