星塔旅人WIKI

/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */

// 动态创建角色属性查看器
$(document).ready(function() {
    $('.character-stats-container').each(function() {
        createCharacterStatsWidget($(this));
    });
});

function createCharacterStatsWidget($container) {
    var characterId = $container.data('character');
    var widgetId = $container.attr('id');
    
    // 创建 Widget 的 HTML 结构
    var widgetHTML = `
        <div class="character-stats-widget">
            <div class="character-header">
                <h2 class="character-name">加载中...</h2>
                <p class="character-description"></p>
            </div>
            
            <div class="level-selector">
                <div class="level-display">当前等级: <span class="current-level">1</span></div>
                
                <div class="slider-container">
                    <input type="range" min="1" max="90" value="1" class="level-slider">
                </div>
                
                <div class="quick-buttons">
                    <button class="level-btn" data-level="1">1</button>
                    <button class="level-btn" data-level="10">10</button>
                    <button class="level-btn" data-level="20">20</button>
                    <button class="level-btn" data-level="30">30</button>
                    <button class="level-btn" data-level="40">40</button>
                    <button class="level-btn" data-level="50">50</button>
                    <button class="level-btn" data-level="60">60</button>
                    <button class="level-btn" data-level="70">70</button>
                    <button class="level-btn" data-level="80">80</button>
                    <button class="level-btn" data-level="90">90</button>
                </div>
            </div>
            
            <div class="stats-container">
                <div class="stat-card attack">
                    <div class="stat-title">
                        <span>攻击力</span>
                    </div>
                    <div class="stat-value attack-value">-</div>
                    <div class="stat-progress">
                        <div class="stat-bar attack-bar"></div>
                    </div>
                    <div class="stat-growth">每级成长: <span class="attack-growth">-</span></div>
                </div>
                
                <div class="stat-card health">
                    <div class="stat-title">
                        <span>生命值</span>
                    </div>
                    <div class="stat-value health-value">-</div>
                    <div class="stat-progress">
                        <div class="stat-bar health-bar"></div>
                    </div>
                    <div class="stat-growth">每级成长: <span class="health-growth">-</span></div>
                </div>
            </div>
            
            <div class="loading-message">正在加载角色数据...</div>
            <div class="error-message" style="display: none;">加载数据失败，请刷新页面重试</div>
        </div>
    `;
    
    // 插入 HTML
    $container.html(widgetHTML);
    
    // 添加 CSS 样式（如果尚未添加）
    if (!$('#character-stats-styles').length) {
        $('head').append(`
            <style id="character-stats-styles">
                .character-stats-widget {
                    max-width: 800px;
                    margin: 0 auto;
                    background-color: #ffffff;
                    border-radius: 8px;
                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                    padding: 30px;
                    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                }
                
                .character-header {
                    text-align: center;
                    margin-bottom: 20px;
                }
                
                .character-name {
                    color: #4a6fa5;
                    margin-bottom: 10px;
                }
                
                .character-description {
                    color: #666;
                    font-style: italic;
                }
                
                .loading-message, .error-message {
                    text-align: center;
                    padding: 20px;
                    color: #666;
                }
                
                .error-message {
                    color: #d32f2f;
                    background-color: #ffebee;
                    border-radius: 4px;
                }
                
                .level-selector {
                    margin-bottom: 30px;
                }
                
                .level-display {
                    text-align: center;
                    font-size: 24px;
                    font-weight: bold;
                    margin-bottom: 15px;
                    color: #4a6fa5;
                }
                
                .slider-container {
                    position: relative;
                    margin-bottom: 10px;
                }
                
                .level-slider {
                    width: 100%;
                    height: 10px;
                    -webkit-appearance: none;
                    appearance: none;
                    background: linear-gradient(to right, #e0e0e0, #4a6fa5);
                    outline: none;
                    border-radius: 5px;
                }
                
                .level-slider::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    appearance: none;
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    background: #4a6fa5;
                    cursor: pointer;
                    border: 3px solid white;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                }
                
                .level-slider::-moz-range-thumb {
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    background: #4a6fa5;
                    cursor: pointer;
                    border: 3px solid white;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                }
                
                .quick-buttons {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    gap: 5px;
                }
                
                .level-btn {
                    flex: 1;
                    min-width: 60px;
                    padding: 8px 5px;
                    background-color: #e9ecef;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    font-weight: bold;
                    transition: all 0.2s;
                }
                
                .level-btn:hover {
                    background-color: #d0d8e2;
                }
                
                .level-btn.active {
                    background-color: #4a6fa5;
                    color: white;
                }
                
                .stats-container {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 20px;
                }
                
                .stat-card {
                    background-color: white;
                    border-radius: 8px;
                    padding: 20px;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
                    border-left: 4px solid #4a6fa5;
                }
                
                .stat-card.attack {
                    border-left-color: #ff6b6b;
                }
                
                .stat-card.health {
                    border-left-color: #4caf50;
                }
                
                .stat-title {
                    font-size: 18px;
                    margin-bottom: 10px;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                }
                
                .stat-value {
                    font-size: 32px;
                    font-weight: bold;
                    margin-bottom: 15px;
                }
                
                .stat-progress {
                    height: 10px;
                    background-color: #e9ecef;
                    border-radius: 5px;
                    overflow: hidden;
                }
                
                .stat-bar {
                    height: 100%;
                    border-radius: 5px;
                    width: 0%;
                    transition: width 0.3s ease;
                }
                
                .attack .stat-bar {
                    background-color: #ff6b6b;
                }
                
                .health .stat-bar {
                    background-color: #4caf50;
                }
                
                .stat-growth {
                    margin-top: 10px;
                    font-size: 14px;
                    color: #666;
                }
                
                @media (max-width: 600px) {
                    .character-stats-widget {
                        padding: 15px;
                    }
                    
                    .stats-container {
                        grid-template-columns: 1fr;
                    }
                    
                    .quick-buttons {
                        gap: 3px;
                    }
                    
                    .level-btn {
                        min-width: 50px;
                        padding: 6px 3px;
                        font-size: 14px;
                    }
                }
            </style>
        `);
    }
    
    // 初始化 Widget
    // initCharacterStatsWidget($container.find('.character-stats-widget'));
}