MediaWiki:TeamBuilder.js

(function() {
    'use strict';
    
    // 等待 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: []
        };
        
        // 模态框通用函数
        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';
            }
        }
        
        function hideModal(modalId) {
            const modal = document.getElementById(modalId);
            if (modal) modal.style.display = 'none';
        }
        
        // 战斗员选择
        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');
            });
        }
        
        // 装备选择
        document.querySelectorAll('.equip-slot').forEach(slot => {
            slot.addEventListener('click', function() {
                const type = this.getAttribute('data-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.querySelectorAll('.tb-modal').forEach(modal => {
            modal.addEventListener('click', function(e) {
                if (e.target === this) {
                    this.style.display = 'none';
                }
            });
        });
        
        // 战斗员列表点击事件（事件委托）
        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');
                    const imgSrc = card.getAttribute('data-character-img');
                    selectCharacter(name, imgSrc);
                    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 imgSrc = card.getAttribute('data-partner-img');
                    const id = card.getAttribute('data-partner-id');
                    selectPartner(name, imgSrc, id);
                    hideModal('partner-modal');
                }
            });
        }
        
        // 选择战斗员
        function selectCharacter(name, imgSrc) {
            state.selectedCharacter = { name, imgSrc };
            const slot = document.getElementById('character-slot');
            slot.innerHTML = `
                <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
                    <img src="${imgSrc}" style="width: 100%; height: 100%; object-fit: cover;" />
                </div>
            `;
            loadCharacterCards(name);
        }
        
        // 选择伙伴
        function selectPartner(name, imgSrc, id) {
            state.selectedPartner = { name, imgSrc, id };
            const slot = document.getElementById('partner-slot');
            const faceImg = `face_character_wide_${id}.png`;
            slot.innerHTML = `
                <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
                    <img src="/images/${faceImg}" style="width: 100%; height: 100%; object-fit: cover;" />
                </div>
            `;
        }
        
        // 加载装备列表
        function loadEquipmentList(type) {
            const listContainer = document.getElementById('equipment-list');
            // 这里需要调用 Module:装备 的数据
            // 暂时用占位符
            listContainer.innerHTML = '<p style="color: white;">加载中...</p>';
            
            // 使用 API 调用 Lua 模块
            new mw.Api().get({
                action: 'parse',
                text: '{{#invoke:装备|generateCards}}',
                contentmodel: 'wikitext',
                prop: 'text'
            }).done(function(data) {
                if (data.parse && data.parse.text) {
                    listContainer.innerHTML = data.parse.text['*'];
                    attachEquipmentClickHandlers(type);
                }
            });
        }
        
        // 装备点击处理
        function attachEquipmentClickHandlers(type) {
            document.querySelectorAll('.equipment-card').forEach(card => {
                card.addEventListener('click', function() {
                    const name = this.getAttribute('data-equipment');
                    selectEquipment(type, name);
                    hideModal('equipment-modal');
                });
            });
        }
        
        // 选择装备
        function selectEquipment(type, name) {
            const slotMap = {
                '武器': 'weapon-slot',
                '装甲': 'armor-slot',
                '戒指': 'ring-slot'
            };
            const slotId = slotMap[type];
            const slot = document.getElementById(slotId);
            
            // 使用 API 获取装备卡片 HTML
            new mw.Api().get({
                action: 'parse',
                text: `{{#invoke:装备|card|${name}|5}}`,
                contentmodel: 'wikitext',
                prop: 'text'
            }).done(function(data) {
                if (data.parse && data.parse.text) {
                    slot.innerHTML = data.parse.text['*'];
                }
            });
            
            // 保存到状态
            if (type === '武器') state.selectedWeapon = name;
            else if (type === '装甲') state.selectedArmor = name;
            else if (type === '戒指') state.selectedRing = name;
        }
        
        // 加载角色卡牌
        function loadCharacterCards(characterName) {
            const deckArea = document.getElementById('deck-cards');
            deckArea.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);
                }
            });
        }
        
        // 解析角色卡牌
        function parseCharacterCards(wikitext, characterName) {
            const cards = [];
            
            // 提取卡牌信息
            const patterns = {
                selfAware: /\|自我意识技能=([^\n]+)/,
                startCards: [
                    /\|起始卡牌_1=([^\n]+)/,
                    /\|起始卡牌_2=([^\n]+)/,
                    /\|起始卡牌_3=([^\n]+)/,
                    /\|起始卡牌_4=([^\n]+)/
                ],
                uniqueCards: [
                    /\|独特卡牌_1=([^\n]+)/,
                    /\|独特卡牌_2=([^\n]+)/,
                    /\|独特卡牌_3=([^\n]+)/,
                    /\|独特卡牌_4=([^\n]+)/
                ]
            };
            
            // 提取自我意识技能
            const selfAwareMatch = wikitext.match(patterns.selfAware);
            if (selfAwareMatch) {
                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() });
                }
            });
            
            displayAvailableCards(cards, characterName);
        }
        
        // 显示可用卡牌
        function displayAvailableCards(cards, characterName) {
            const deckArea = document.getElementById('deck-cards');
            deckArea.innerHTML = '';
            
            cards.forEach(card => {
                const cardDiv = document.createElement('div');
                cardDiv.style.cursor = 'pointer';
                
                // 使用 API 渲染卡牌
                new mw.Api().get({
                    action: 'parse',
                    text: `{{#invoke:卡牌|main|${characterName}|${card.name}}}`,
                    contentmodel: 'wikitext',
                    prop: 'text'
                }).done(function(data) {
                    if (data.parse && data.parse.text) {
                        cardDiv.innerHTML = data.parse.text['*'];
                        
                        // 添加点击事件
                        cardDiv.addEventListener('click', function() {
                            addCardToDeck(card.name, characterName);
                        });
                    }
                });
                
                deckArea.appendChild(cardDiv);
            });
        }
        
        // 添加卡牌到卡组
        function addCardToDeck(cardName, characterName) {
            state.deckCards.push({ cardName, characterName });
            updateDeckDisplay();
        }
        
        // 更新卡组显示
        function updateDeckDisplay() {
            const container = document.getElementById('selected-cards');
            container.innerHTML = '';
            
            state.deckCards.forEach((card, index) => {
                const cardDiv = document.createElement('div');
                cardDiv.style.position = 'relative';
                
                // 渲染卡牌
                new mw.Api().get({
                    action: 'parse',
                    text: `{{#invoke:卡牌|main|${card.characterName}|${card.cardName}}}`,
                    contentmodel: 'wikitext',
                    prop: 'text'
                }).done(function(data) {
                    if (data.parse && data.parse.text) {
                        cardDiv.innerHTML = data.parse.text['*'];
                        
                        // 添加删除按钮
                        const removeBtn = document.createElement('div');
                        removeBtn.innerHTML = '×';
                        removeBtn.style.cssText = 'position: absolute; top: 5px; right: 5px; background: red; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 100;';
                        removeBtn.addEventListener('click', function(e) {
                            e.stopPropagation();
                            state.deckCards.splice(index, 1);
                            updateDeckDisplay();
                        });
                        cardDiv.appendChild(removeBtn);
                    }
                });
                
                container.appendChild(cardDiv);
            });
        }
    }
    
    // MediaWiki hook
    if (typeof mw !== 'undefined' && mw.hook) {
        mw.hook('wikipage.content').add(initTeamBuilder);
    }
})();