From 62b4428cf1e5e4ae7e036b1e736bf0c68c14b7fc Mon Sep 17 00:00:00 2001
From: empty <let5sne.mac@gmail.com>
Date: Tue, 30 Dec 2025 13:14:47 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E9=80=82=E9=85=8D=E9=98=B5?=
 =?UTF-8?q?=E8=90=A5=E6=8A=95=E7=A5=A8=E7=B3=BB=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加投票按钮（乐观派/恐惧派）
- 添加实时投票统计显示
- 实现 sendVote 函数发送投票事件

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 web/index.html | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/web/index.html b/web/index.html
index c54944e..d45609b 100644
--- a/web/index.html
+++ b/web/index.html
@@ -37,6 +37,21 @@
     .btn-quick { background: #3f3f46; color: #a1a1aa; }
     .btn-quick:hover { background: #52525b; color: #e4e4e7; }
 
+    /* 投票按钮 */
+    .vote-section { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
+    .vote-label { font-size: 12px; color: #71717a; }
+    .btn-vote { padding: 8px 16px; font-weight: 600; }
+    .btn-vote-opt { background: #166534; color: #86efac; }
+    .btn-vote-opt:hover { background: #15803d; }
+    .btn-vote-fear { background: #7f1d1d; color: #fca5a5; }
+    .btn-vote-fear:hover { background: #991b1b; }
+
+    /* 投票统计 */
+    .votes-display { display: flex; gap: 16px; margin-top: 8px; font-size: 13px; }
+    .vote-count { display: flex; align-items: center; gap: 4px; }
+    .vote-count.opt { color: #86efac; }
+    .vote-count.fear { color: #fca5a5; }
+
     /* 能量条 - 极简 */
     #global-meter { width: 100%; height: 16px; background: #27272a; border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
     #meter-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #00ffcc, #ff0066); transition: width 0.3s ease; }
@@ -133,6 +148,15 @@
         <button class="btn-quick" onclick="sendQuick('混乱')">混乱</button>
         <button class="btn-quick" onclick="sendQuick('下雨')">下雨</button>
       </div>
+      <div class="vote-section">
+        <span class="vote-label">投票：</span>
+        <button class="btn-vote btn-vote-opt" onclick="sendVote('optimists')">👍 乐观派</button>
+        <button class="btn-vote btn-vote-fear" onclick="sendVote('fearful')">👎 恐惧派</button>
+        <div class="votes-display">
+          <span class="vote-count opt" id="vote-opt">乐观: 0</span>
+          <span class="vote-count fear" id="vote-fear">恐惧: 0</span>
+        </div>
+      </div>
     </section>
 
     <!-- ① 能量条 -->
@@ -218,6 +242,12 @@
       ws.send(JSON.stringify({ type: 'comment', text, user: 'viewer' }));
     }
 
+    // 发送投票
+    function sendVote(faction) {
+      if (!ws || ws.readyState !== WebSocket.OPEN) return;
+      ws.send(JSON.stringify({ type: 'vote', faction, text: '', user: 'viewer' }));
+    }
+
     // 更新 UI
     const weatherMap = { sunny: '☀️', rainy: '🌧️' };
     const actionHistory = [];
@@ -237,6 +267,12 @@
         document.getElementById('meter-bar').style.width = percent + '%';
       }
 
+      // ① 投票统计
+      if (world_state.votes) {
+        document.getElementById('vote-opt').textContent = '乐观: ' + world_state.votes.optimists;
+        document.getElementById('vote-fear').textContent = '恐惧: ' + world_state.votes.fearful;
+      }
+
       // ② 世界事件
       const eventEl = document.getElementById('world-event');
       if (global_event?.triggered && global_event.event) {