diff --git a/web/index.html b/web/index.html index 8ea54f4..c54944e 100644 --- a/web/index.html +++ b/web/index.html @@ -86,6 +86,30 @@ .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; } + + /* 阵营能量条 */ + .faction-power { display: flex; gap: 12px; margin-top: 12px; } + .power-item { flex: 1; } + .power-label { font-size: 11px; color: #a1a1aa; margin-bottom: 4px; display: flex; justify-content: space-between; } + .power-bar { height: 8px; background: #27272a; border-radius: 4px; overflow: hidden; } + .power-fill { height: 100%; transition: width 0.3s ease; } + .power-fill.optimist { background: linear-gradient(90deg, #22c55e, #86efac); } + .power-fill.fearful { background: linear-gradient(90deg, #ef4444, #fca5a5); } + + /* 阵营技能提示 */ + #faction-event { background: #1e3a5f; border: 1px solid #60a5fa; border-radius: 8px; padding: 12px; margin-bottom: 16px; display: none; font-size: 14px; } + + /* 剧情线 */ + .story-arcs { margin-top: 16px; padding-top: 12px; border-top: 1px solid #3f3f46; } + .arc-item { margin-bottom: 10px; } + .arc-header { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; } + .arc-name { color: #a1a1aa; } + .arc-stage { color: #f59e0b; } + .arc-bar { height: 6px; background: #27272a; border-radius: 3px; overflow: hidden; } + .arc-fill { height: 100%; background: linear-gradient(90deg, #a78bfa, #f472b6); transition: width 0.3s ease; } + + /* 剧情事件提示 */ + #story-event { background: #3b0764; border: 1px solid #a78bfa; border-radius: 8px; padding: 12px; margin-bottom: 16px; display: none; font-size: 14px; } @@ -117,6 +141,12 @@
+ +
+ + +
+
@@ -133,9 +163,12 @@
乐观派 - 中立 恐惧派
+ +
+ +
居民
@@ -190,7 +223,7 @@ const actionHistory = []; function updateUI(data) { - const { world_state, actions, global_event } = data; + const { world_state, actions, global_event, triggered_faction_event, story_event } = data; // 世界状态 document.getElementById('tick').textContent = world_state.tick; @@ -213,6 +246,27 @@ eventEl.style.display = 'none'; } + // ② 阵营技能提示 + const factionEventEl = document.getElementById('faction-event'); + if (triggered_faction_event?.type) { + const msg = triggered_faction_event.type === 'festival' + ? '🎉 乐观派发动了节日庆典！' + : '😱 恐惧派引发了恐慌！'; + factionEventEl.textContent = msg; + factionEventEl.style.display = 'block'; + } else { + factionEventEl.style.display = 'none'; + } + + // ② 剧情事件提示 + const storyEventEl = document.getElementById('story-event'); + if (story_event?.triggered) { + storyEventEl.textContent = '📖 ' + story_event.event_name + '：' + story_event.description; + storyEventEl.style.display = 'block'; + } else { + storyEventEl.style.display = 'none'; + } + // ③ 持续影响 const effectsEl = document.getElementById('world-effects'); if (world_state.world_effects?.length > 0) { @@ -226,12 +280,43 @@ // ④ 派系分布 if (world_state.factions) { const f = world_state.factions; - const total = f.optimists + f.neutral + f.fearful || 1; + const optimistCount = f.optimists.members.length; + const fearfulCount = f.fearful.members.length; + const total = optimistCount + fearfulCount || 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}
`; + if (optimistCount > 0) bar.innerHTML += `
${optimistCount}
`; + if (fearfulCount > 0) bar.innerHTML += `
${fearfulCount}
`; + + // ⑤ 阵营能量条 + const powerEl = document.getElementById('faction-power'); + const optPct = Math.min(100, f.optimists.power / f.optimists.threshold * 100); + const fearPct = Math.min(100, f.fearful.power / f.fearful.threshold * 100); + powerEl.innerHTML = ` +
+
乐观派能量${f.optimists.power}/${f.optimists.threshold}
+
+
+
+
恐惧派能量${f.fearful.power}/${f.fearful.threshold}
+
+
`; + } + + // ⑥ 剧情线进度 + if (world_state.story_arcs) { + const arcsEl = document.getElementById('story-arcs'); + const arcNames = { civil_unrest: '民众骚乱', golden_age: '黄金时代' }; + arcsEl.innerHTML = Object.entries(world_state.story_arcs).map(([id, arc]) => { + const pct = Math.min(100, arc.progress / arc.threshold * 100); + return `
+
+ ${arcNames[id] || id} + 阶段 ${arc.stage} +
+
+
`; + }).join(''); } // 角色