nanocode/net-games/client/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <title>🎮 Net-Games 斗地主</title>
    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
    <link rel="stylesheet" href="style.css?v=5">
</head>
<body>
    <!-- 连接状态栏 -->
    <div class="connection-bar" id="connectionBar">
        <div class="connection-status disconnected" id="connectionStatus">
            <span class="status-dot"></span>
            <span class="status-text">未连接</span>
        </div>
        <input type="text" id="serverUrl" value="http://129.211.173.87:8900" placeholder="服务器地址">
        <button class="btn btn-small btn-primary" id="btn-connect" onclick="connectServer()">连接</button>
        <button class="btn btn-small btn-secondary" id="btn-disconnect" onclick="disconnectServer()" disabled>断开</button>
    </div>

    <!-- 登录/欢迎界面 -->
    <div class="welcome-screen" id="welcomeScreen">
        <div class="welcome-content">
            <h1>🎮 Net-Games 斗地主</h1>
            <p class="subtitle">在线三人斗地主 · AI对战</p>
            
            <div class="name-input-area">
                <label>您的昵称</label>
                <input type="text" id="playerName" value="蔡叔叔" placeholder="输入昵称">
            </div>
            
            <div class="user-score-area" id="userScoreArea" style="display: none;">
                <div class="score-display">
                    <span class="score-label">🏆 斗地主积分:</span>
                    <span class="score-value" id="userScoreValue">0</span>
                </div>
            </div>

            <div class="game-options">
                <h3>⚡ 快速开始</h3>
                <div class="option-row">
                    <label>AI数量:</label>
                    <select id="aiCount">
                        <option value="1">1个AI</option>
                        <option value="2" selected>2个AI</option>
                    </select>
                </div>
                <div class="option-row">
                    <label>AI-1:</label>
                    <select id="aiType1">
                        <option value="rule" selected>规则AI</option>
                        <option value="deepseek">DeepSeek</option>
                    </select>
                </div>
                <div class="option-row">
                    <label>AI-2:</label>
                    <select id="aiType2">
                        <option value="rule">规则AI</option>
                        <option value="deepseek" selected>DeepSeek</option>
                    </select>
                </div>
            </div>

            <button class="btn btn-start" id="btn-quickstart" onclick="quickStart()" disabled>
                🚀 一键开始游戏
            </button>

            <div class="divider">或</div>

            <div class="join-area">
                <input type="text" id="roomCodeInput" placeholder="输入房间号" maxlength="6">
                <button class="btn btn-secondary" id="btn-join" onclick="joinRoom()" disabled>加入房间</button>
            </div>
        </div>
    </div>

    <!-- 游戏主界面 -->
    <div class="game-container" id="gameContainer" style="display: none;">
        <!-- 房间信息 -->
        <div class="room-info" id="roomInfo">
            <span class="room-code">房间: --</span>
            <span class="game-status-text">等待中</span>
        </div>

        <!-- 顶部：底牌区 -->
        <div class="deck-area">
            <div class="deck-label">底牌</div>
            <div class="deck-cards" id="deckCards">
                <div class="card back"></div>
                <div class="card back"></div>
                <div class="card back"></div>
            </div>
        </div>

        <!-- 左侧玩家 -->
        <div class="player left-player" id="leftPlayer">
            <div class="avatar">
                <div class="avatar-img">?</div>
                <div class="countdown" id="leftCountdown">30</div>
                <div class="trustee-badge" id="leftTrustee">🤖 托管中</div>
                <div class="player-name">等待中</div>
                <div class="player-role">?</div>
            </div>
            <div class="card-count">0张</div>
            <div class="pass-popup" id="leftPassPopup">不要</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="rightPlayer">
            <div class="card-count">0张</div>
            <div class="pass-popup" id="rightPassPopup">不要</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">?</div>
                <div class="countdown" id="rightCountdown">30</div>
                <div class="trustee-badge" id="rightTrustee">🤖 托管中</div>
                <div class="player-name">等待中</div>
                <div class="player-role">?</div>
            </div>
        </div>

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

        <!-- 底部：玩家自己 -->
        <div class="player-self" id="playerSelf">
            <div class="self-info">
                <div class="avatar">
                    <div class="avatar-img me">我</div>
                    <div class="countdown" id="myCountdown">30</div>
                    <div class="trustee-badge" id="myTrustee">🤖 托管中</div>
                    <div class="player-name" id="myName">玩家</div>
                    <div class="player-role" id="myRole">?</div>
                </div>
                <div class="card-count" id="myCardCount">0张</div>
            </div>
            <div class="pass-popup" id="myPassPopup">不要</div>
            
            <!-- 手牌区 -->
            <div class="hand-cards" id="handCards">
                <!-- 手牌由JS动态生成 -->
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons" id="actionButtons">
                <button class="btn btn-primary" id="btn-play" onclick="playCards()" disabled>出牌</button>
                <button class="btn btn-secondary" id="btn-pass" onclick="passTurn()" disabled>不出</button>
                <button class="btn btn-hint" id="btn-hint" onclick="showHint()" disabled>提示</button>
                <button class="btn btn-trustee" id="btn-trustee" onclick="toggleTrustee()">🤖 托管</button>
            </div>
        </div>

        <!-- 叫地主弹窗 -->
        <div class="call-lord-modal" id="callLordModal" style="display: none;">
            <div class="modal-content">
                <h3>是否叫地主？</h3>
                <div class="modal-buttons">
                    <button class="btn btn-primary" onclick="callLord(true)">叫地主</button>
                    <button class="btn btn-secondary" onclick="callLord(false)">不叫</button>
                </div>
            </div>
        </div>

        <!-- 游戏结束弹窗 -->
        <div class="game-over-modal" id="gameOverModal" style="display: none;">
            <div class="modal-content">
                <h3 id="gameOverTitle">游戏结束</h3>
                <div class="game-result" id="gameResult"></div>
                <div class="modal-buttons">
                    <button class="btn btn-primary" onclick="backToLobby()">返回大厅</button>
                    <button class="btn btn-secondary" onclick="quickStart()">再来一局</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 日志面板 -->
    <div class="log-panel" id="logPanel">
        <div class="log-header">
            <span>游戏日志</span>
            <button onclick="clearLog()">清空</button>
        </div>
        <div class="log-content" id="logContent"></div>
    </div>

    <script src="game.js?v=9"></script>
</body>
</html>