MediaWiki:TeamBuilder.js

(function() {
    'use strict';

    mw.loader.load( mw.util.getUrl( 'MediaWiki:TeamBuilder.css', { action: 'raw', ctype: 'text/css' } ), 'text/css' );
    // 等待 DOM 加载
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initTeamBuilder);
    } else {
        initTeamBuilder();
    }
    
    function initTeamBuilder() {
        // 只在包含 team-builder 的页面初始化
        if (!document.getElementById('team-builder')) return;
        
        const state = {
            selectedCharacter: null,
            selectedPartner: null,
            selectedWeapon: null,
            selectedArmor: null,
            selectedRing: null,
            deckCards: [],
            availableCards: [],
            currentEquipmentType: null // 记录当前选择的装备类型
        };
        
        // 模态框通用函数
        function showModal(modalId) {
            const modal = document.getElementById(modalId);
            if (modal) {
                modal.style.display = 'flex';
                modal.style.position = 'fixed';
                modal.style.top = '0';
                modal.style.left = '0';
                modal.style.width = '100vw';
                modal.style.height = '100vh';
                modal.style.backgroundColor = 'rgba(0,0,0,0.8)';
                modal.style.alignItems = 'center';
                modal.style.justifyContent = 'center';
                modal.style.zIndex = '10000';
                document.body.style.overflow = 'hidden';
            }
        }
        
        function hideModal(modalId) {
            const modal = document.getElementById(modalId);
            if (modal) {
                modal.style.display = 'none';
                document.body.style.overflow = 'auto';
            }
        }
        
        // 战斗员选择
        const characterSlot = document.getElementById('character-slot');
        if (characterSlot) {
            characterSlot.addEventListener('click', function() {
                showModal('character-modal');
            });
        }
        
        // 伙伴选择
        const partnerSlot = document.getElementById('partner-slot');
        if (partnerSlot) {
            partnerSlot.addEventListener('click', function() {
                showModal('partner-modal');
            });
        }
        
        // 卡牌区域点击
        const deckArea = document.getElementById('deck-area');
        if (deckArea) {
            deckArea.addEventListener('click', function(e) {
                // 只有点击背景区域才打开模态框，不包括已选卡牌
                if (e.target === this || e.target.closest('.deck-area') === this) {
                    if (state.selectedCharacter) {
                        showModal('card-modal');
                    } else {
                        alert('请先选择战斗员');
                    }
                }
            });
        }
        
        // 装备选择
        document.querySelectorAll('.equip-slot').forEach(slot => {
            slot.addEventListener('click', function() {
                const type = this.getAttribute('data-type');
                state.currentEquipmentType = type; // 记录当前类型
                loadEquipmentList(type);
                document.getElementById('equipment-modal-title').textContent = '选择' + type;
                showModal('equipment-modal');
            });
        });
        
        // 关闭模态框
        document.querySelectorAll('.tb-modal-close').forEach(btn => {
            btn.addEventListener('click', function() {
                this.closest('.tb-modal').style.display = 'none';
                document.body.style.overflow = 'auto';
            });
        });
        
        // 点击模态框背景关闭
        document.querySelectorAll('.tb-modal').forEach(modal => {
            modal.addEventListener('click', function(e) {
                if (e.target === this) {
                    this.style.display = 'none';
                    document.body.style.overflow = 'auto';
                }
            });
        });
        
        // 战斗员列表点击事件（事件委托）
        const characterList = document.getElementById('character-list');
        if (characterList) {
            characterList.addEventListener('click', function(e) {
                const card = e.target.closest('[data-character-name]');
                if (card) {
                    const name = card.getAttribute('data-character-name');
                    selectCharacter(name);
                    hideModal('character-modal');
                }
            });
        }
        
        // 伙伴列表点击事件
        const partnerList = document.getElementById('partner-list');
        if (partnerList) {
            partnerList.addEventListener('click', function(e) {
                const card = e.target.closest('[data-partner-name]');
                if (card) {
                    const name = card.getAttribute('data-partner-name');
                    const id = card.getAttribute('data-partner-id');
                    selectPartner(name, id);
                    hideModal('partner-modal');
                }
            });
        }
        
        // 选择战斗员
        function selectCharacter(name) {
            state.selectedCharacter = name;
            const slot = document.getElementById('character-slot');
            
            // 使用 MediaWiki 文件路径
            const imgPath = mw.config.get('wgScriptPath') + '/index.php?title=Special:Redirect/file/战斗员图鉴_' + encodeURIComponent(name) + '.png';
            
            slot.innerHTML = `
                <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
                    <img src="${imgPath}" style="width: 100%; height: 100%; object-fit: cover;" 
                         onerror="this.src='${mw.config.get('wgScriptPath')}/resources/assets/file-type-icons/fileicon-image.png';" />
                </div>
            `;
            
            // 清空卡组和可用卡牌
            state.deckCards = [];
            state.availableCards = [];
            updateDeckDisplay();
            
            // 加载角色卡牌
            loadCharacterCards(name);
        }
        
        // 选择伙伴
        function selectPartner(name, id) {
            state.selectedPartner = { name, id };
            const slot = document.getElementById('partner-slot');
            
            // 使用 MediaWiki 文件路径
            const imgPath = mw.config.get('wgScriptPath') + '/index.php?title=Special:Redirect/file/face_character_wide_' + encodeURIComponent(id) + '.png';
            
            slot.innerHTML = `
                <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
                    <img src="${imgPath}" style="width: 100%; height: 100%; object-fit: cover;" 
                         onerror="this.src='${mw.config.get('wgScriptPath')}/resources/assets/file-type-icons/fileicon-image.png';" />
                </div>
            `;
        }
        
        // 加载装备列表
        function loadEquipmentList(type) {
            const listContainer = document.getElementById('equipment-list');
            listContainer.innerHTML = '<p style="color: white;">加载中...</p>';
            
            // 使用 API 调用 Lua 模块，获取筛选后的装备
            new mw.Api().post({
                action: 'parse',
                text: '{{#invoke:装备|generateCards}}',
                contentmodel: 'wikitext',
                prop: 'text',
                disablelimitreport: 1,
                disableeditsection: 1
            }).done(function(data) {
                if (data.parse && data.parse.text) {
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = data.parse.text['*'];
                    
                    // 筛选指定类型的装备
                    const allEquips = tempDiv.querySelectorAll('.equipment-wrapper');
                    listContainer.innerHTML = '';
                    
                    allEquips.forEach(function(equipWrapper) {
                        const equipType = equipWrapper.getAttribute('data-param3');
                        if (equipType === type) {
                            listContainer.appendChild(equipWrapper.cloneNode(true));
                        }
                    });
                    
                    if (listContainer.children.length === 0) {
                        listContainer.innerHTML = '<p style="color: white;">没有找到该类型装备</p>';
                    }
                    
                    attachEquipmentClickHandlers();
                }
            }).fail(function() {
                listContainer.innerHTML = '<p style="color: red;">加载失败</p>';
            });
        }
        
        // 装备点击处理
        function attachEquipmentClickHandlers() {
            document.querySelectorAll('#equipment-list .equipment-card').forEach(card => {
                card.style.cursor = 'pointer';
                card.addEventListener('click', function() {
                    const name = this.getAttribute('data-equipment');
                    const rarity = this.closest('.equipment-wrapper').getAttribute('data-param1');
                    selectEquipment(state.currentEquipmentType, name, rarity);
                    hideModal('equipment-modal');
                });
            });
        }
        
        // 选择装备
        function selectEquipment(type, name, rarity) {
            // 根据类型确定目标槽位
            const slotMap = {
                '武器': 'weapon-slot',
                '装甲': 'armor-slot',
                '戒指': 'ring-slot'
            };
            const slotId = slotMap[type];
            if (!slotId) return;
            
            const slot = document.getElementById(slotId);
            if (!slot) return;
            
            // 保存到状态
            if (type === '武器') state.selectedWeapon = name;
            else if (type === '装甲') state.selectedArmor = name;
            else if (type === '戒指') state.selectedRing = name;
            
            // 获取装备 ID（需要查询）
            new mw.Api().get({
                action: 'parse',
                page: name,
                prop: 'wikitext'
            }).done(function(data) {
                if (data.parse && data.parse.wikitext) {
                    const wikitext = data.parse.wikitext['*'];
                    const idMatch = wikitext.match(/\|id\s*=\s*([^\n|]+)/);
                    const equipId = idMatch ? idMatch[1].trim() : '0000';
                    
                    // 格式化 ID 为 4 位数字
                    const formattedId = equipId.padStart(4, '0');
                    const imgPath = mw.config.get('wgScriptPath') + '/index.php?title=Special:Redirect/file/relic_' + formattedId + '.png';
                    const framePath = mw.config.get('wgScriptPath') + '/index.php?title=Special:Redirect/file/frame_item_rarity_' + encodeURIComponent(rarity) + '.png';
                    
                    // 描边效果（简单文本阴影）
                    const textShadow = '-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000';
                    
                    slot.innerHTML = `
                        <div style="position:relative;width:124px;height:124px">
                            <div style="position:absolute;top:0px;left:0px">
                                <img src="${framePath}" style="width:124px;height:124px;" />
                            </div>
                            <div style="position:absolute;top:8px;left:8px;width:108px;height:108px;border:1px solid #fff;"></div>
                            <div style="position:absolute;top:6px;left:6px;">
                                <img src="${imgPath}" style="width:112px;height:112px;" 
                                     onerror="this.src='${mw.config.get('wgScriptPath')}/resources/assets/file-type-icons/fileicon-image.png';" />
                            </div>
                            <div style="position:absolute;bottom:2px;left:6px;color:white;font-size:12px;text-shadow:${textShadow};">${mw.html.escape(name)}</div>
                        </div>
                    `;
                }
            }).fail(function() {
                // 失败时使用默认显示
                slot.innerHTML = `
                    <div style="position:relative;width:124px;height:124px;display:flex;align-items:center;justify-content:center;">
                        <span style="color:white;font-size:12px;text-align:center;">${mw.html.escape(name)}</span>
                    </div>
                `;
            });
        }
        
        // 加载角色卡牌
        function loadCharacterCards(characterName) {
            const listContainer = document.getElementById('available-cards-list');
            listContainer.innerHTML = '<p style="color: white;">加载卡牌...</p>';
            
            // 获取角色页面数据
            new mw.Api().get({
                action: 'parse',
                page: characterName,
                prop: 'wikitext'
            }).done(function(data) {
                if (data.parse && data.parse.wikitext) {
                    const wikitext = data.parse.wikitext['*'];
                    parseCharacterCards(wikitext, characterName);
                }
            }).fail(function() {
                listContainer.innerHTML = '<p style="color: red;">加载失败</p>';
            });
        }
        
        // 解析角色卡牌
        function parseCharacterCards(wikitext, characterName) {
            const cards = [];
            
            // 提取卡牌信息
            const patterns = {
                selfAware: /\|自我意识技能\s*=\s*([^\n]+)/,
                startCards: [
                    /\|起始卡牌_1\s*=\s*([^\n]+)/,
                    /\|起始卡牌_2\s*=\s*([^\n]+)/,
                    /\|起始卡牌_3\s*=\s*([^\n]+)/,
                    /\|起始卡牌_4\s*=\s*([^\n]+)/
                ],
                uniqueCards: [
                    /\|独特卡牌_1\s*=\s*([^\n]+)/,
                    /\|独特卡牌_2\s*=\s*([^\n]+)/,
                    /\|独特卡牌_3\s*=\s*([^\n]+)/,
                    /\|独特卡牌_4\s*=\s*([^\n]+)/
                ]
            };
            
            // 提取自我意识技能
            const selfAwareMatch = wikitext.match(patterns.selfAware);
            if (selfAwareMatch && selfAwareMatch[1].trim()) {
                cards.push({ type: 'self', name: selfAwareMatch[1].trim() });
            }
            
            // 提取起始卡牌
            patterns.startCards.forEach(pattern => {
                const match = wikitext.match(pattern);
                if (match && match[1].trim()) {
                    cards.push({ type: 'start', name: match[1].trim() });
                }
            });
            
            // 提取独特卡牌
            patterns.uniqueCards.forEach(pattern => {
                const match = wikitext.match(pattern);
                if (match && match[1].trim()) {
                    cards.push({ type: 'unique', name: match[1].trim() });
                }
            });
            
            state.availableCards = cards;
            displayAvailableCards(cards, characterName);
        }
        
        // 显示可用卡牌（只渲染一次）
        function displayAvailableCards(cards, characterName) {
            const listContainer = document.getElementById('available-cards-list');
            listContainer.innerHTML = '';
            
            if (cards.length === 0) {
                listContainer.innerHTML = '<p style="color: white;">该角色没有卡牌</p>';
                return;
            }
            
            let loadedCount = 0;
            const totalCards = cards.length;
            
            cards.forEach(card => {
                const cardWrapper = document.createElement('div');
                cardWrapper.style.cursor = 'pointer';
                cardWrapper.style.position = 'relative';
                cardWrapper.setAttribute('data-card-name', card.name);
                
                // 使用 API 渲染卡牌（只调用一次）
                new mw.Api().post({
                    action: 'parse',
                    text: `{{#invoke:卡牌|main|${characterName}|${card.name}}}`,
                    contentmodel: 'wikitext',
                    prop: 'text',
                    disablelimitreport: 1,
                    disableeditsection: 1
                }).done(function(data) {
                    if (data.parse && data.parse.text) {
                        cardWrapper.innerHTML = data.parse.text['*'];
                        
                        // 添加点击事件
                        cardWrapper.addEventListener('click', function(e) {
                            // 防止触发卡牌模态框
                            e.stopPropagation();
                            addCardToDeck(card.name, characterName, this.innerHTML);
                        });
                        
                        loadedCount++;
                        if (loadedCount === 1) {
                            listContainer.innerHTML = ''; // 清除"加载中"
                        }
                    }
                }).fail(function() {
                    cardWrapper.innerHTML = '<div style="color:red;padding:10px;">加载失败: ' + mw.html.escape(card.name) + '</div>';
                    loadedCount++;
                    if (loadedCount === 1) {
                        listContainer.innerHTML = '';
                    }
                }).always(function() {
                    listContainer.appendChild(cardWrapper);
                });
            });
        }
        
        // 添加卡牌到卡组
        function addCardToDeck(cardName, characterName, cardHtml) {
            state.deckCards.push({ cardName, characterName, cardHtml });
            hideModal('card-modal');
            updateDeckDisplay();
        }
        
        // 更新卡组显示
        function updateDeckDisplay() {
            const deckArea = document.getElementById('deck-area');
            const deckCards = document.getElementById('deck-cards');
            const plusSign = deckArea.querySelector('span');
            
            deckCards.innerHTML = '';
            
            if (state.deckCards.length === 0) {
                deckCards.style.display = 'none';
                if (plusSign) plusSign.style.display = 'block';
                return;
            }
            
            deckCards.style.display = 'flex';
            if (plusSign) plusSign.style.display = 'none';
            
            state.deckCards.forEach((card, index) => {
                const cardDiv = document.createElement('div');
                cardDiv.style.position = 'relative';
                cardDiv.innerHTML = card.cardHtml;
                
                // 添加删除按钮
                const removeBtn = document.createElement('div');
                removeBtn.innerHTML = '×';
                removeBtn.style.cssText = 'position: absolute; top: 5px; right: 5px; background: #ff4444; color: white; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 100; font-size: 20px; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.3);';
                removeBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    state.deckCards.splice(index, 1);
                    updateDeckDisplay();
                });
                cardDiv.appendChild(removeBtn);
                
                deckCards.appendChild(cardDiv);
            });
        }
    }
    
    // MediaWiki hook
    if (typeof mw !== 'undefined' && mw.hook) {
        mw.hook('wikipage.content').add(initTeamBuilder);
    }
})();