MediaWiki:Test.js

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

• Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
• Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
• Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
• Opera: Нажмите Ctrl+F5.

(function() {
    var races = [
        {name: 'Человек', img: 'Человек.png', link: 'Человек'},
        {name: 'Унатх', img: 'Унатх.png', link: 'Унатх'},
        {name: 'Дворф', img: 'Дворф.png', link: 'Дворф'},
        {name: 'Диона', img: 'Диона.png', link: 'Диона'},
        {name: 'Кидан', img: 'Кидан.png', link: 'Кидан'},
        {name: 'Фелинид', img: 'Фелинид.png', link: 'Фелинид'},
        {name: 'Родентия', img: 'Родения.png', link: 'Родентия'},
        {name: 'Авали', img: 'Авали.png', link: 'Авали'},
        {name: 'Вульпканин', img: 'Вульпанит.png', link: 'Вульпканин'},
        {name: 'Арахнид', img: 'Арахнид.png', link: 'Арахнид'},
        {name: 'Слаймолюд', img: 'Слаймолюд.png', link: 'Слаймолюд'},
        {name: 'Ниан', img: 'Ниан.png', link: 'Ниан'},
        {name: 'Вокс', img: 'Вокс.png', link: 'Вокс'}
    ];

    var currentIndex = 0;

    var container = document.createElement('div');
    container.className = 'race-carousel';

    // Центральная карточка с стрелками
    var main = document.createElement('div');
    main.className = 'race-main';

    var leftArrow = document.createElement('span');
    leftArrow.className = 'arrow';
    leftArrow.innerHTML = '◀';
    main.appendChild(leftArrow);

    var largeCard = document.createElement('div');
    largeCard.className = 'race-card-large';
    main.appendChild(largeCard);

    var rightArrow = document.createElement('span');
    rightArrow.className = 'arrow';
    rightArrow.innerHTML = '▶';
    main.appendChild(rightArrow);

    container.appendChild(main);

    // Мини-карточки
    var miniContainer = document.createElement('div');
    miniContainer.className = 'race-mini-container';

    for (var i = 0; i < races.length; i++) {
        (function(index) {
            var mini = document.createElement('div');
            mini.className = 'race-mini';
            mini.innerHTML = "[[File:" + races[index].img + "|link=" + races[index].link + "]]";
            mini.onclick = function() {
                currentIndex = index;
                updateDisplay();
            };
            miniContainer.appendChild(mini);
        })(i);
    }

    container.appendChild(miniContainer);

    // Информация о расе
    var infoDiv = document.createElement('div');
    infoDiv.className = 'race-info';
    container.appendChild(infoDiv);

    var target = document.querySelector('.race-display');
    if (!target) target = document.body;
    target.appendChild(container);

    function updateDisplay() {
        var race = races[currentIndex];
        largeCard.innerHTML = "[[File:" + race.img + "|link=" + race.link + "]]<div class='race-name-large'>[[" + race.name + "]]</div>";
        infoDiv.innerHTML = 'Название расы: ' + race.name;
    }

    leftArrow.onclick = function() {
        currentIndex--;
        if (currentIndex < 0) currentIndex = races.length - 1;
        updateDisplay();
    };

    rightArrow.onclick = function() {
        currentIndex++;
        if (currentIndex >= races.length) currentIndex = 0;
        updateDisplay();
    };

    updateDisplay();
})();