index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🐺 狼人杀 AI 模拟面板 - GLM能力测试</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <!-- 标题栏 -->
    <div class="header">
      <h1>🐺 狼人杀 AI 模拟面板</h1>
      <p class="subtitle">经典12人局 · 全AI驱动 · GLM能力测试</p>
    </div>

    <!-- 控制栏 -->
    <div class="controls">
      <button id="btnStart" class="btn-start">▶ 开始游戏</button>
      <button id="btnPause" class="btn-pause" disabled>⏸ 暂停</button>
      <button id="btnResume" class="btn-resume" disabled>▶ 继续</button>
      <button id="btnStop" class="btn-stop" disabled>⏹ 停止</button>
      
      <span style="color: var(--text-muted); margin: 0 5px;">|</span>
      
      <span style="font-size: 0.85em; color: var(--text-secondary);">速度:</span>
      <button class="btn-speed" data-speed="4000">慢</button>
      <button class="btn-speed active" data-speed="2000">中</button>
      <button class="btn-speed" data-speed="800">快</button>
      <button class="btn-speed" data-speed="200">极速</button>
      
      <span style="color: var(--text-muted); margin: 0 5px;">|</span>
      
      <button id="btnReset" class="btn-reset">🔄 重置</button>
      <button onclick="window.werewolfUI.exportGameData()" class="btn-reset">📁 导出</button>
    </div>

    <!-- API Key 配置 -->
    <div class="controls" style="padding: 10px 15px;">
      <span style="font-size: 0.85em; color: var(--text-secondary);">GLM API Key:</span>
      <input id="apiKeyInput" type="password" placeholder="输入GLM API Key以启用真实API调用..." 
             style="flex: 1; padding: 8px 12px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 0.85em; max-width: 400px;">
      <button id="apiKeyBtn" style="padding: 8px 16px; background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 0.85em;">设置</button>
      <span style="font-size: 0.75em; color: var(--text-muted);">留空使用Mock模式</span>
    </div>

    <!-- 游戏面板 -->
    <div class="game-layout">
      <!-- 玩家座位环 -->
      <div class="player-ring">
        <h3>🎭 玩家座位</h3>
        <div class="seats-grid" id="playerSeats">
          <!-- 动态渲染 -->
        </div>
      </div>

      <!-- 游戏状态栏 -->
      <div class="status-bar">
        <div class="status-item">
          <div class="status-label">当前轮次</div>
          <div class="status-value round" id="roundNumber">0</div>
        </div>
        <div class="status-item">
          <div class="status-label">游戏阶段</div>
          <div class="status-value phase" id="phaseText">等待开始</div>
        </div>
        <div class="status-item">
          <div class="status-label">🐺 狼人存活</div>
          <div class="status-value wolf-count" id="wolfCount">4</div>
        </div>
        <div class="status-item">
          <div class="status-label">👥 好人存活</div>
          <div class="status-value village-count" id="villageCount">8</div>
        </div>
        <div class="status-item">
          <div class="status-label">总存活</div>
          <div class="status-value" id="aliveCount" style="color: var(--info);">12</div>
        </div>
      </div>

      <!-- 发言面板 -->
      <div class="speech-panel">
        <h3>💬 玩家发言</h3>
        <div id="speechList">
          <div style="color: var(--text-muted); text-align: center; padding: 20px;">等待游戏开始...</div>
        </div>
      </div>

      <!-- 日志面板 -->
      <div class="log-panel">
        <h3>📋 游戏日志</h3>
        <div id="logList">
          <div style="color: var(--text-muted); text-align: center; padding: 20px;">等待游戏开始...</div>
        </div>
      </div>

      <!-- 投票结果 -->
      <div class="vote-result-panel">
        <h3>🗳️ 投票结果</h3>
        <div id="voteResults">
          <div style="color: var(--text-muted); text-align: center; padding: 20px;">暂无投票数据</div>
        </div>
      </div>
    </div>

    <!-- 图例说明 -->
    <div style="margin-top: 20px; padding: 15px; background: var(--bg-secondary); border-radius: 10px; border: 1px solid var(--border);">
      <h3 style="color: var(--text-secondary); font-size: 0.9em; margin-bottom: 10px;">📖 角色配置</h3>
      <div style="display: flex; gap: 15px; flex-wrap: wrap; font-size: 0.85em;">
        <span>🐺 狼人 ×4 <span style="color: var(--text-muted);">| 狼人阵营，每晚可击杀一名玩家</span></span>
        <span>👤 平民 ×4 <span style="color: var(--text-muted);">| 好人阵营，无特殊技能</span></span>
        <span>🔮 预言家 ×1 <span style="color: var(--text-muted);">| 每晚查验一名玩家身份</span></span>
        <span>🧙‍♀️ 女巫 ×1 <span style="color: var(--text-muted);">| 拥有解药和毒药各一瓶</span></span>
        <span>🏹 猎人 ×1 <span style="color: var(--text-muted);">| 死亡时可开枪带走一名玩家</span></span>
        <span>🛡️ 守卫 ×1 <span style="color: var(--text-muted);">| 每晚可守护一名玩家</span></span>
      </div>
    </div>

    <!-- 测试指标说明 -->
    <div style="margin-top: 15px; padding: 15px; background: var(--bg-secondary); border-radius: 10px; border: 1px solid var(--border);">
      <h3 style="color: var(--text-secondary); font-size: 0.9em; margin-bottom: 10px;">🧪 GLM能力测试指标</h3>
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; font-size: 0.82em;">
        <div>📝 <strong>语言生成</strong><br><span style="color: var(--text-muted);">发言是否符合角色身份和性格</span></div>
        <div>🧠 <strong>逻辑推理</strong><br><span style="color: var(--text-muted);">投票和指控是否有合理依据</span></div>
        <div>🎯 <strong>策略制定</strong><br><span style="color: var(--text-muted);">夜晚行动是否具有战术性</span></div>
        <div>🎭 <strong>欺骗能力</strong><br><span style="color: var(--text-muted);">狼人伪装好人的效果如何</span></div>
        <div>🤝 <strong>协作能力</strong><br><span style="color: var(--text-muted);">同阵营玩家是否形成配合</span></div>
        <div>⚡ <strong>反应速度</strong><br><span style="color: var(--text-muted);">对新信息的适应和调整能力</span></div>
      </div>
    </div>
  </div>

  <script type="module" src="ui.js"></script>
</body>
</html>