nanocode/happy-games/games/guandan/index.html

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="game-container">
        <!-- 游戏信息栏 -->
        <div class="game-info-bar">
            <div class="level-info">
                <span class="level-label">当前级牌</span>
                <span class="level-card" id="current-level">2</span>
            </div>
            <div class="team-score">
                <div class="team team-a">
                    <span class="team-name">我方</span>
                    <span class="team-level" id="team-a-level">2</span>
                </div>
                <div class="vs">VS</div>
                <div class="team team-b">
                    <span class="team-name">对方</span>
                    <span class="team-level" id="team-b-level">2</span>
                </div>
            </div>
        </div>

        <!-- 顶部玩家 -->
        <div class="player top-player" id="player-top">
            <div class="avatar">
                <div class="avatar-img">AI</div>
                <div class="player-name">队友</div>
                <div class="player-rank" id="top-rank"></div>
            </div>
            <div class="card-count">27张</div>
            <div class="cards-back">
                <div class="card-stack">
                    <div class="card-small back"></div>
                    <div class="card-small back"></div>
                    <div class="card-small back"></div>
                </div>
            </div>
        </div>

        <!-- 左侧玩家 -->
        <div class="player left-player" id="player-left">
            <div class="avatar">
                <div class="avatar-img">AI1</div>
                <div class="player-name">对手甲</div>
                <div class="player-rank" id="left-rank"></div>
            </div>
            <div class="card-count">27张</div>
            <div class="cards-back">
                <div class="card-stack">
                    <div class="card-small back"></div>
                    <div class="card-small back"></div>
                    <div class="card-small back"></div>
                </div>
            </div>
        </div>

        <!-- 右侧玩家 -->
        <div class="player right-player" id="player-right">
            <div class="card-count">27张</div>
            <div class="cards-back">
                <div class="card-stack">
                    <div class="card-small back"></div>
                    <div class="card-small back"></div>
                    <div class="card-small back"></div>
                </div>
            </div>
            <div class="avatar">
                <div class="avatar-img">AI2</div>
                <div class="player-name">对手乙</div>
                <div class="player-rank" id="right-rank"></div>
            </div>
        </div>

        <!-- 中央：桌面出牌区 -->
        <div class="table-area">
            <div class="last-played">
                <div class="played-by" id="played-by">等待游戏开始...</div>
                <div class="played-cards" id="played-cards">
                    <!-- 出的牌显示在这里 -->
                </div>
            </div>
        </div>

        <!-- 底部：玩家自己 -->
        <div class="player-self" id="player-self">
            <div class="self-info">
                <div class="avatar">
                    <div class="avatar-img me">我</div>
                    <div class="player-name">玩家</div>
                    <div class="player-rank" id="my-rank"></div>
                </div>
                <div class="card-count" id="my-card-count">27张</div>
            </div>
            
            <!-- 手牌区 -->
            <div class="hand-cards-container">
                <div class="hand-cards" id="hand-cards">
                    <!-- 手牌由JS动态生成 -->
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <button class="btn btn-primary" id="btn-play" disabled>出牌</button>
                <button class="btn btn-secondary" id="btn-pass" disabled>不出</button>
                <button class="btn btn-hint" id="btn-hint" disabled>提示</button>
            </div>
        </div>

        <!-- 游戏状态提示 -->
        <div class="game-status" id="game-status">点击"开始游戏"开始掼蛋</div>

        <!-- 开始按钮（居中） -->
        <div class="start-screen" id="start-screen">
            <div class="start-content">
                <h1>🃏 掼蛋</h1>
                <p>四人升级 · 两副牌 · 团队协作</p>
                <button class="btn-start" id="btn-start">开始游戏</button>
            </div>
        </div>

        <!-- 游戏结束弹窗 -->
        <div class="game-over-modal" id="game-over-modal" style="display: none;">
            <div class="modal-content">
                <h2 id="game-result-title">游戏结束</h2>
                <div class="rank-list" id="rank-list">
                    <!-- 排名列表 -->
                </div>
                <div class="upgrade-info" id="upgrade-info">
                    <!-- 升级信息 -->
                </div>
                <button class="btn btn-primary" id="btn-next-round">下一局</button>
            </div>
        </div>

        <!-- 规则提示弹窗 -->
        <div class="rules-modal" id="rules-modal" style="display: none;">
            <div class="modal-content">
                <h3>本局规则</h3>
                <div class="rules-content">
                    <p><strong>级牌：</strong><span id="rule-level">2</span></p>
                    <p><strong>百搭牌：</strong>红桃<span id="rule-wild">2</span></p>
                    <p><strong>升级条件：</strong></p>
                    <ul>
                        <li>双上（1、2名）：升3级</li>
                        <li>单上（1、3名）：升2级</li>
                        <li>险胜（1、4名）：升1级</li>
                    </ul>
                </div>
                <button class="btn btn-primary" onclick="document.getElementById('rules-modal').style.display='none'">知道了</button>
            </div>
        </div>
    </div>

    <script src="game.js"></script>
    <script src="ui.js"></script>
    <!-- 登录认证 -->
    <script src="../auth.js?v=1"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            GAME_AUTH.init('guandan', '掼蛋');
        });
    </script>
</body>
</html>