diff --git a/web/index.html b/web/index.html index f8f3093..8ea54f4 100644 --- a/web/index.html +++ b/web/index.html @@ -77,6 +77,15 @@ .action-agent { font-weight: 600; color: #a78bfa; } .action-say { color: #fbbf24; } .action-do { color: #34d399; } + + /* 派系分布 */ + .factions-bar { display: flex; height: 24px; border-radius: 6px; overflow: hidden; margin-top: 12px; } + .faction-segment { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; transition: width 0.3s ease; } + .faction-optimists { background: #22c55e; color: #052e16; } + .faction-neutral { background: #71717a; color: #fafafa; } + .faction-fearful { background: #ef4444; color: #450a0a; } + .factions-legend { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; color: #a1a1aa; } + .legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; } @@ -121,6 +130,12 @@
-
天气
0
情绪值
+
+
+ 乐观派 + 中立 + 恐惧派 +
居民
@@ -208,6 +223,17 @@ effectsEl.innerHTML = ''; } + // ④ 派系分布 + if (world_state.factions) { + const f = world_state.factions; + const total = f.optimists + f.neutral + f.fearful || 1; + const bar = document.getElementById('factions-bar'); + bar.innerHTML = ''; + if (f.optimists > 0) bar.innerHTML += `
${f.optimists}
`; + if (f.neutral > 0) bar.innerHTML += `
${f.neutral}
`; + if (f.fearful > 0) bar.innerHTML += `
${f.fearful}
`; + } + // 角色 const agentsEl = document.getElementById('agents'); agentsEl.innerHTML = '';