{template header}

<!-- Game Background Music -->
<div id="ingamebgm" class="hidden">
    <!--{eval $bgm = init_bgm(1)}-->
    $bgm
</div>

<!-- Notice Container -->
<div id="notice" class="mb-4"></div>

<script type="text/javascript">
    var CURSCRIPT = 'game';
</script>

<!-- Dynamic Background Styles -->
<!--{eval $bgurl = "img/location/".$pls.".jpg";}-->
<!--{if $horizon}-->
<style>
    body::before {
        filter: hue-rotate(5deg) brightness(0.3);
    }
</style>
<!--{/if}-->

<!-- Game Layout Container -->
<div class="game-container grid grid-cols-1 lg:grid-cols-3 gap-6 min-h-screen">
    
    <!-- Main Game Area (Left Column) -->
    <div class="lg:col-span-2 space-y-6">
        
        <!-- Player Profile Section -->
        <div id="main" class="cyber-card p-6 border border-cyber-primary/30">
            <!--{if $main=='battle'}-->
                {template battle}
            <!--{elseif $main=='battle_rev'}-->
                {template battle_rev}
            <!--{elseif $main=='itemmix_tips'}-->
                {template itemmix_tips}
            <!--{else}-->
                {template profile}
            <!--{/if}-->
        </div>
        
        <!-- Chat Section -->
        <div class="cyber-card border border-cyber-primary/30">
            {template chat}
        </div>
        
    </div>
    
    <!-- Right Sidebar -->
    <div class="space-y-4">
        
        <!-- Location Info -->
        <div class="cyber-card p-4 border border-cyber-primary/30">
            <div class="text-center">
                <div class="cyber-terminal mb-2">
                    <span class="cyber-text-primary">位置:</span>
                </div>
                <div class="text-lg font-cyber cyber-text-glow">
                    <!--{if !isset($plsinfo[$pls]) && isset($hplsinfo[$pgroup])}-->
                        <span id="pls">$hplsinfo[$pgroup][$pls]</span>
                    <!--{else}-->
                        <span id="pls">$plsinfo[$pls]</span>
                    <!--{/if}-->
                </div>
                <div class="text-sm mt-2">
                    <span class="cyber-text-danger">剩余：<span id="anum">$alivenum</span>人</span>
                </div>
            </div>
        </div>
        
        <!-- Game Log -->
        <div class="cyber-card border border-cyber-primary/30 h-96 flex flex-col">
            <div class="p-3 border-b border-cyber-primary/20">
                <h3 class="font-cyber cyber-text-primary">系统日志</h3>
            </div>
            <div class="flex-1 overflow-y-auto p-3">
                <div id="log" class="text-sm font-mono space-y-1">$log</div>
            </div>
        </div>
        
        <!-- Command Interface -->
        <div class="cyber-card border border-cyber-primary/30">
            <div class="p-3 border-b border-cyber-primary/20">
                <h3 class="font-cyber cyber-text-primary">指令界面</h3>
            </div>
            <div class="p-3">
                <form method="post" id="gamecmd" name="gamecmd" class="space-y-3">
                    <div id="cmd">
                        <!--{if $hp <= 0}-->
                        {template death}
                        <!--{elseif $state >=1 && $state <= 3}-->
                        {template rest}
                        <!--{elseif $itms0}-->
                        {template itemfind}
                        <!--{elseif $cmd}-->
                        $cmd
                        <!--{else}-->
                        {template command}
                        <!--{/if}-->
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Quick Actions -->
        <div class="cyber-card p-3 border border-cyber-primary/30">
            <h3 class="font-cyber cyber-text-primary mb-3">快速操作</h3>
            <div class="grid grid-cols-2 gap-2">
                <button class="cyber-btn cyber-btn-primary text-xs" onclick="refreshGame()">
                    🔄 刷新
                </button>
                <button class="cyber-btn cyber-btn-secondary text-xs" onclick="toggleAutoRefresh()">
                    ⏱️ 自动
                </button>
                <button class="cyber-btn cyber-btn-accent text-xs" onclick="showHelp()">
                    ❓ 帮助
                </button>
                <button class="cyber-btn cyber-btn-warning text-xs" onclick="showMap()">
                    🗺️ 地图
                </button>
            </div>
        </div>
        
    </div>
    
</div>

<!-- Hidden Models -->
<div id="hidden-model" class="hidden">
    <!--{if !empty($clbpara['noskip_dialogue']) && $clbpara['noskip_dialogue'] == 'opening'}-->
        {template opening}
    <!--{/if}-->
</div>

<!-- Sliding Panel -->
{template slidingpanel}

<!-- Game-specific JavaScript -->
<script>
// Game interface enhancements
document.addEventListener('DOMContentLoaded', function() {
    initGameInterface();
    setupAutoRefresh();
    enhanceGameLog();
});

function initGameInterface() {
    // Add loading states to buttons
    const buttons = document.querySelectorAll('#cmd button, #cmd input[type="submit"]');
    buttons.forEach(btn => {
        btn.addEventListener('click', function() {
            if (!this.disabled) {
                this.classList.add('cyber-pulse');
                this.disabled = true;
                setTimeout(() => {
                    this.classList.remove('cyber-pulse');
                    this.disabled = false;
                }, 2000);
            }
        });
    });
    
    // Enhance form inputs
    const inputs = document.querySelectorAll('#cmd input[type="text"], #cmd select, #cmd textarea');
    inputs.forEach(input => {
        input.classList.add('cyber-input');
        
        // Add focus effects
        input.addEventListener('focus', function() {
            this.parentElement.classList.add('focused');
        });
        
        input.addEventListener('blur', function() {
            this.parentElement.classList.remove('focused');
        });
    });
}

let autoRefreshInterval = null;
let autoRefreshEnabled = false;

function toggleAutoRefresh() {
    autoRefreshEnabled = !autoRefreshEnabled;
    const btn = event.target;
    
    if (autoRefreshEnabled) {
        autoRefreshInterval = setInterval(refreshGame, 5000);
        btn.textContent = '⏹️ Stop';
        btn.classList.add('cyber-text-danger');
        showNotification('Auto-refresh enabled (5s interval)', 'info');
    } else {
        clearInterval(autoRefreshInterval);
        btn.textContent = '⏱️ Auto';
        btn.classList.remove('cyber-text-danger');
        showNotification('Auto-refresh disabled', 'info');
    }
}

function refreshGame() {
    showLoading('Refreshing game state...');
    
    // Simulate refresh (replace with actual game refresh logic)
    setTimeout(() => {
        hideLoading();
        showNotification('Game refreshed', 'success');
    }, 1000);
}

function enhanceGameLog() {
    const log = document.getElementById('log');
    if (!log) return;
    
    // Auto-scroll to bottom
    log.scrollTop = log.scrollHeight;
    
    // Add timestamp to new log entries
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList') {
                mutation.addedNodes.forEach(function(node) {
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        const timestamp = new Date().toLocaleTimeString('zh-CN', { hour12: false });
                        const timeSpan = document.createElement('span');
                        timeSpan.className = 'text-xs cyber-text-secondary';
                        timeSpan.textContent = `[${timestamp}] `;
                        node.insertBefore(timeSpan, node.firstChild);
                    }
                });
                log.scrollTop = log.scrollHeight;
            }
        });
    });
    
    observer.observe(log, { childList: true, subtree: true });
}

function showHelp() {
    showModal('Game Help', `
        <div class="space-y-4 text-sm">
            <div>
                <h4 class="cyber-text-primary font-bold">Keyboard Shortcuts:</h4>
                <ul class="mt-2 space-y-1 text-xs">
                    <li>Ctrl+Shift+T - Cycle theme</li>
                    <li>F11 - Toggle fullscreen</li>
                    <li>Ctrl+R - Refresh game</li>
                </ul>
            </div>
            <div>
                <h4 class="cyber-text-primary font-bold">Interface Features:</h4>
                <ul class="mt-2 space-y-1 text-xs">
                    <li>Auto-refresh for real-time updates</li>
                    <li>Multiple color themes</li>
                    <li>Responsive mobile design</li>
                    <li>Enhanced visual effects</li>
                </ul>
            </div>
        </div>
    `);
}

function showMap() {
    window.open('map.php', '_blank');
}

function showNotification(message, type = 'info') {
    if (window.nouveauTheme) {
        window.nouveauTheme.showNotification(message, type);
    }
}

// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
    if (e.ctrlKey && e.key === 'r') {
        e.preventDefault();
        refreshGame();
    }
});

// Update alive count with animation
function updateAliveCount(newCount) {
    const element = document.getElementById('anum');
    if (element && element.textContent !== newCount.toString()) {
        element.classList.add('cyber-pulse');
        element.textContent = newCount;
        setTimeout(() => element.classList.remove('cyber-pulse'), 1000);
    }
}

// Enhanced command submission
const originalPostCommand = window.postCommand;
if (originalPostCommand) {
    window.postCommand = function() {
        showLoading('Processing command...');
        const result = originalPostCommand.apply(this, arguments);
        setTimeout(hideLoading, 1000);
        return result;
    };
}
</script>

<style>
/* Game-specific responsive adjustments */
@media (max-width: 1024px) {
    .game-container {
        grid-template-columns: 1fr;
    }
    
    .cyber-card {
        margin-bottom: 1rem;
    }
}

/* Enhanced log styling */
#log {
    line-height: 1.4;
    word-wrap: break-word;
}

#log > div {
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

#log > div:last-child {
    border-bottom: none;
}

/* Command interface styling */
#cmd input[type="text"],
#cmd select,
#cmd textarea {
    width: 100%;
    margin-bottom: 0.5rem;
}

#cmd button,
#cmd input[type="submit"] {
    margin: 0.25rem;
}

/* Focus states */
.focused {
    box-shadow: 0 0 0 2px var(--cyber-primary);
}

/* Loading states */
.cyber-pulse {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
</style>

{template footer}
