三角洲行动：指挥终端

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>三角洲行动：指挥终端</title>
    <style>
        /* 基础暗黑军事风 UI */
        body { margin: 0; padding: 0; background: #1a1a1a; color: #eee; font-family: sans-serif; overflow: hidden; touch-action: none; user-select: none; }
        .panel { display: none; flex-direction: column; height: 100vh; padding: 15px; box-sizing: border-box; }
        .panel.active { display: flex; }
        
        /* 顶部状态栏 */
        .top-bar { background: #2c2c2c; padding: 10px; border-radius: 5px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
        .top-bar span { color: #fcd34d; font-weight: bold; }
        
        /* 通用按钮和面板样式 */
        .btn { background: #374151; border: 1px solid #4b5563; color: white; padding: 12px; margin: 5px 0; border-radius: 4px; text-align: center; font-size: 16px; active: opacity: 0.8; }
        .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .item-box { background: #2d2d2d; padding: 10px; border-radius: 4px; font-size: 13px; border: 1px solid #444; }
        
        /* 主菜单大按钮 */
        .menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
        .menu-btn { background: #1f2937; border: 1px solid #374151; padding: 20px; border-radius: 8px; text-align: center; font-weight: bold; font-size: 16px; }
        
        /* 靶场与改枪区 */
        .shooting-range { flex: 1; background: #111; position: relative; border: 1px solid #333; margin: 10px 0; overflow: hidden; }
        .target { width: 40px; height: 40px; background: #ef4444; border-radius: 50%; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); transition: left 0.2s; }
        
        .log-box { background: #111; height: 100px; overflow-y: auto; font-size: 12px; padding: 10px; color: #9ca3af; border-top: 1px solid #333; }
    </style>
</head>
<body>

<!-- ================= 1. 初始游戏面板 (主界面) ================= -->
<div id="main-panel" class="panel active">
    <div style="font-size: 24px; font-weight: bold; margin-top: 20px; text-align: center; color: #fcd34d;">
        边境行动 指挥中心
    </div>
    <div class="top-bar" style="margin-top: 20px;">
        <div>干员: <span id="ui-operator">未选择</span></div>
        <div>哈夫币: <span id="ui-coin">5000</span></div>
    </div>
    <div class="top-bar">
        <div>仓库容量: <span id="ui-capacity">20/50</span></div>
        <div>行动点: <span id="ui-ap">5</span></div>
    </div>

    <div class="menu-grid">
        <div class="menu-btn" onclick="switchPanel('inventory')">🎒 仓库</div>
        <div class="menu-btn" onclick="switchPanel('trade')">💰 交易行</div>
        <div class="menu-btn" onclick="switchPanel('gunsmith')">🔧 改枪台</div>
        <div class="menu-btn" onclick="switchPanel('operator')">👤 干员系统</div>
        <div class="menu-btn" onclick="switchPanel('range')">🎯 靶场</div>
        <div class="menu-btn" onclick="switchPanel('hq')">🏰 特勤处</div>
        <div class="menu-btn" style="grid-column: span 2; background: #7c3aed; border: none;" onclick="startGame()">🚀 进入对局</div>
    </div>
</div>

<!-- ================= 2. 仓库系统 ================= -->
<div id="inventory" class="panel">
    <div style="display:flex; justify-content:space-between;"><h3>我的仓库</h3> <button class="btn" style="padding:5px 15px;" onclick="switchPanel('main')">返回</button></div>
    <div id="warehouse-list" class="grid" style="flex:1; overflow-y:auto; margin-top:10px;">
        <!-- 物品动态生成在这里 -->
    </div>
    <div style="font-size:12px; color:#aaa; margin-top:10px;">* 长按物品可一键上架交易行</div>
</div>

<!-- ================= 3. 交易行系统 ================= -->
<div id="trade" class="panel">
    <div style="display:flex; justify-content:space-between;"><h3>交易行</h3> <button class="btn" style="padding:5px 15px;" onclick="switchPanel('main')">返回</button></div>
    <div style="margin: 10px 0; display: flex; gap: 5px;">
        <input type="text" placeholder="搜索物资..." style="flex:1; background:#222; border:1px solid #444; color:white; padding:8px; border-radius:4px;">
    </div>
    <div id="trade-list" class="grid" style="flex:1; overflow-y:auto;">
        <!-- 交易行物品动态生成 -->
    </div>
</div>

<!-- ================= 4. 改枪台系统 ================= -->
<div id="gunsmith" class="panel">
    <div style="display:flex; justify-content:space-between;"><h3>改枪台</h3> <button class="btn" style="padding:5px 15px;" onclick="switchPanel('main')">返回</button></div>
    <div style="background:#222; padding:15px; border-radius:8px; margin-top:15px;">
        <div style="color:#aaa; font-size:14px;">当前武器: <span style="color:white; font-weight:bold;">M4A1 突击步枪</span></div>
        <div style="display:flex; justify-content:space-between; margin-top:10px;">
            <div>后坐力控制: <span id="stat-recoil" style="color:#fcd34d">40</span></div>
            <div>开镜速度: <span id="stat-ads" style="color:#fcd34d">35</span></div>
        </div>
    </div>
    
    <div style="margin-top:20px; font-size:14px; color:#aaa;">选择配件 (消耗哈夫币):</div>
    <div class="grid" style="margin-top:10px;">
        <div class="item-box" onclick="modifyGun(500, 5, 0)">全息瞄具<br><span style="color:#fcd34d">500币</span><br>开镜+5</div>
        <div class="item-box" onclick="modifyGun(800, 10, -5)">垂直握把<br><span style="color:#fcd34d">800币</span><br>后座-10</div>
        <div class="item-box" onclick="modifyGun(1200, 15, -10)">消音器<br><span style="color:#fcd34d">1200币</span><br>后座-15</div>
        <div class="item-box" onclick="modifyGun(2000, 20, 10)">轻型枪托<br><span style="color:#fcd34d">2000币</span><br>后座-20</div>
    </div>
</div>

<!-- ================= 5. 干员系统 ================= -->
<div id="operator" class="panel">
    <div style="display:flex; justify-content:space-between;"><h3>特战干员</h3> <button class="btn" style="padding:5px 15px;" onclick="switchPanel('main')">返回</button></div>
    <div class="grid" style="margin-top:20px;">
        <div class="item-box" onclick="selectOperator('突击兵', '突破手')">
            <div style="font-weight:bold; color:#f43f5e;">突击兵</div>
            <div style="font-size:12px; margin-top:5px;">定位: 突破手</div>
            <div style="font-size:11px; color:#aaa; margin-top:5px;">技能: 肾上腺素(速度+20%)</div>
        </div>
        <div class="item-box" onclick="selectOperator('医疗兵', '支援者')">
            <div style="font-weight:bold; color:#22c55e;">医疗兵</div>
            <div style="font-size:12px; margin-top:5px;">定位: 支援者</div>
            <div style="font-size:11px; color:#aaa; margin-top:5px;">技能: 烟雾弹(范围掩护)</div>
        </div>
        <div class="item-box" onclick="selectOperator('侦察兵', '信息位')">
            <div style="font-weight:bold; color:#3b82f6;">侦察兵</div>
            <div style="font-size:12px; margin-top:5px;">定位: 信息位</div>
            <div style="font-size:11px; color:#aaa; margin-top:5px;">技能: 声纳箭(标记敌人)</div>
        </div>
    </div>
</div>

<!-- ================= 6. 靶场 (纯交互体验) ================= -->
<div id="range" class="panel">
    <div style="display:flex; justify-content:space-between;"><h3>射击靶场</h3> <button class="btn" style="padding:5px 15px;" onclick="switchPanel('main')">退出</button></div>
    <div style="text-align:center; margin-top:10px;">
        得分: <span id="range-score" style="font-size:20px; color:#fcd34d; font-weight:bold;">0</span>
    </div>
    <div class="shooting-range" id="range-area" onclick="shoot()">
        <div class="target" id="target"></div>
    </div>
    <div style="text-align:center; color:#aaa; font-size:13px;">点击屏幕红点区域进行射击测试</div>
</div>

<!-- ================= 7. 特勤处升级 ================= -->
<div id="hq" class="panel">
    <div style="display:flex; justify-content:space-between;"><h3>特勤处 (基地升级)</h3> <button class="btn" style="padding:5px 15px;" onclick="switchPanel('main')">返回</button></div>
    <div style="margin-top:20px; display:grid; gap:15px;">
        <div class="item-box" onclick="upgradeHQ('指挥中心', 1000)">
            <div style="display:flex; justify-content:space-between;">
                <strong>指挥中心 (Lv.<span id="lvl-1">1</span>)</strong>
                <span style="color:#fcd34d;">1000 币</span>
            </div>
            <div style="font-size:11px; color:#aaa; margin-top:5px;">升级提升交易行挂单上限</div>
        </div>
        <div class="item-box" onclick="upgradeHQ('制造台', 1500)">
            <div style="display:flex; justify-content:space-between;">
                <strong>制造台 (Lv.<span id="lvl-2">1</span>)</strong>
                <span style="color:#fcd34d;">1500 币</span>
            </div>
            <div style="font-size:11px; color:#aaa; margin-top:5px;">升级解锁高级配件制造</div>
        </div>
    </div>
</div>

<div id="log" class="log-box">系统: 欢迎来到边境行动指挥终端...</div>

<script>
    // ================= 游戏核心数据 (完全还原之前的 C# 逻辑) =================
    let playerData = {
        coin: 5000,
        ap: 5,
        operatorName: "未选择",
        capacity: 20,
        maxCapacity: 50,
        gunStats: { recoil: 40, ads: 35 }
    };

    let warehouseItems = [
        { name: "7N39 穿甲弹", count: 60 },
        { name: "三级头 (破损)", count: 1 },
        { name: "M105 狙击镜", count: 1 },
        { name: "医疗包", count: 2 }
    ];

    let tradeItems = [
        { name: "四级护甲", price: 1500 },
        { name: "M4A1 改满版", price: 8000 },
        { name: "绝版钥匙卡", price: 2500 }
    ];

    let hqLevels = { 1: 1, 2: 1 };

    // ================= 核心逻辑函数 =================
    function updateUI() {
        document.getElementById('ui-coin').innerText = playerData.coin;
        document.getElementById('ui-ap').innerText = playerData.ap;
        document.getElementById('ui-operator').innerText = playerData.operatorName;
        document.getElementById('ui-capacity').innerText = `${playerData.capacity}/${playerData.maxCapacity}`;
        
        document.getElementById('stat-recoil').innerText = playerData.gunStats.recoil;
        document.getElementById('stat-ads').innerText = playerData.gunStats.ads;
    }

    function switchPanel(id) {
        document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
        document.getElementById(id).classList.add('active');
        if(id === 'inventory') renderWarehouse();
        if(id === 'trade') renderTrade();
        addLog(`切换到了: ${id}`);
    }

    function renderWarehouse() {
        const list = document.getElementById('warehouse-list');
        list.innerHTML = '';
        warehouseItems.forEach(item => {
            list.innerHTML += `<div class="item-box" onclick="addLog('查看了 ${item.name} 属性')">
                <div style="font-weight:bold;">${item.name}</div>
                <div style="font-size:12px; color:#aaa; margin-top:5px;">数量: ${item.count}</div>
            </div>`;
        });
    }

    function renderTrade() {
        const list = document.getElementById('trade-list');
        list.innerHTML = '';
        tradeItems.forEach(item => {
            list.innerHTML += `<div class="item-box" onclick="buyItem('${item.name}', ${item.price})">
                <div style="font-weight:bold;">${item.name}</div>
                <div style="color:#fcd34d; margin-top:5px;">${item.price} 币</div>
            </div>`;
        });
    }

    // 交易行购买逻辑
    function buyItem(name, price) {
        if (playerData.coin >= price) {
            playerData.coin -= price;
            playerData.capacity += 2;
            warehouseItems.push({name: name, count: 1});
            addLog(`交易成功: 花费 ${price} 币购买了 ${name}`);
            updateUI();
        } else {
            addLog(`余额不足，无法购买 ${name}`);
        }
    }

    // 改枪台逻辑
    function modifyGun(cost, recoilChange, adsChange) {
        if (playerData.coin >= cost) {
            playerData.coin -= cost;
            playerData.gunStats.recoil += recoilChange;
            playerData.gunStats.ads += adsChange;
            addLog(`枪械改装成功！消耗 ${cost} 币。`);
            updateUI();
        } else {
            addLog(`哈夫币不足，无法改装。`);
        }
    }

    // 干员切换逻辑
    function selectOperator(name, role) {
        playerData.operatorName = name;
        addLog(`已切换主战干员: ${name} (${role})`);
        updateUI();
        switchPanel('main');
    }

    // 特勤处升级逻辑
    function upgradeHQ(name, cost) {
        let key = name === '指挥中心' ? 1 : 2;
        if (playerData.coin >= cost) {
            playerData.coin -= cost;
            hqLevels[key]++;
            playerData.maxCapacity += 10;
            addLog(`${name} 升级成功！当前等级: ${hqLevels[key]}`);
            document.getElementById(`lvl-${key}`).innerText = hqLevels[key];
            updateUI();
        } else {
            addLog(`特勤处升级资金不足。`);
        }
    }

    // 靶场射击逻辑
    let rangeScore = 0;
    function shoot() {
        rangeScore++;
        document.getElementById('range-score').innerText = rangeScore;
        let randomX = Math.random() * 80 + 10;
        document.getElementById('target').style.left = randomX + '%';
        addLog(`靶场测试: 命中目标！当前成绩: ${rangeScore}`);
    }

    // 进入对局模拟
    function startGame() {
        if(playerData.ap > 0) {
            playerData.ap--;
            addLog(`正在匹配 12人 对局... 成功撤离！获得物资。`);
            warehouseItems.push({name: "黄金项链", count: 1});
            updateUI();
            switchPanel('inventory');
        } else {
            addLog(`行动点不足，请明日再来。`);
        }
    }

    function addLog(msg) {
        const logBox = document.getElementById('log');
        logBox.innerHTML += `<div>[${new Date().toLocaleTimeString()}] ${msg}</div>`;
        logBox.scrollTop = logBox.scrollHeight;
    }

    // 初始化 UI
    updateUI();
</script>
</body>
</html>