let5see/ai-town
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): 适配阵营博弈和剧情线系统

Browse Source 
- 修复派系显示逻辑适配新数据结构
- 添加阵营能量条显示 (power/threshold)
- 添加阵营技能触发提示 (festival/panic)
- 添加剧情线进度显示
- 添加剧情事件触发提示
- 移除中立派显示

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
empty
2025-12-30 12:33:23 +08:00
parent 28976d9672
commit 87007d9b43
1 changed files with 91 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
web/index.html
View File

@@ -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; }
</style>
</head>
<body>
@@ -117,6 +141,12 @@
<!-- ② 世界事件提示 -->
<div id="world-event"></div>
<!-- ② 阵营技能提示 -->
<div id="faction-event"></div>
<!-- ② 剧情事件提示 -->
<div id="story-event"></div>
<!-- ③ 持续影响 -->
<div id="world-effects"></div>
@@ -133,9 +163,12 @@
<div class="factions-bar" id="factions-bar"></div>
<div class="factions-legend">
<span><span class="legend-dot" style="background:#22c55e"></span>乐观派</span>
<span><span class="legend-dot" style="background:#71717a"></span>中立</span>
<span><span class="legend-dot" style="background:#ef4444"></span>恐惧派</span>
</div>
<!-- 阵营能量条 -->
<div class="faction-power" id="faction-power"></div>
<!-- 剧情线 -->
<div class="story-arcs" id="story-arcs"></div>
</div>
<div class="card">
<div class="card-title">居民</div>
@@ -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 += `<div class="faction-segment faction-optimists" style="width:${f.optimists/total*100}%">${f.optimists}</div>`;
if (f.neutral > 0) bar.innerHTML += `<div class="faction-segment faction-neutral" style="width:${f.neutral/total*100}%">${f.neutral}</div>`;
if (f.fearful > 0) bar.innerHTML += `<div class="faction-segment faction-fearful" style="width:${f.fearful/total*100}%">${f.fearful}</div>`;
if (optimistCount > 0) bar.innerHTML += `<div class="faction-segment faction-optimists" style="width:${optimistCount/total*100}%">${optimistCount}</div>`;
if (fearfulCount > 0) bar.innerHTML += `<div class="faction-segment faction-fearful" style="width:${fearfulCount/total*100}%">${fearfulCount}</div>`;
// ⑤ 阵营能量条
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 = `
<div class="power-item">
<div class="power-label"><span>乐观派能量</span><span>${f.optimists.power}/${f.optimists.threshold}</span></div>
<div class="power-bar"><div class="power-fill optimist" style="width:${optPct}%"></div></div>
</div>
<div class="power-item">
<div class="power-label"><span>恐惧派能量</span><span>${f.fearful.power}/${f.fearful.threshold}</span></div>
<div class="power-bar"><div class="power-fill fearful" style="width:${fearPct}%"></div></div>
</div>`;
}
// ⑥ 剧情线进度
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 `<div class="arc-item">
<div class="arc-header">
<span class="arc-name">${arcNames[id] || id}</span>
<span class="arc-stage">阶段 ${arc.stage}</span>
</div>
<div class="arc-bar"><div class="arc-fill" style="width:${pct}%"></div></div>
</div>`;
}).join('');
}
// 角色