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

feat(web): add faction distribution visualization

Browse Source 
- Add faction bar with color-coded segments
- Show optimists (green), neutral (gray), fearful (red)
- Add legend for faction types

🤖 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 11:07:23 +08:00
parent 296e65ff95
commit 012956f817
1 changed files with 26 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web/index.html
View File

@@ -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; }
</style>
</head>
<body>
@@ -121,6 +130,12 @@
<div><div class="stat-value" id="weather">-</div><div class="stat-label">天气</div></div>
<div><div class="stat-value" id="mood">0</div><div class="stat-label">情绪值</div></div>
</div>
<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>
<div class="card">
<div class="card-title">居民</div>
@@ -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 += `<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>`;
}
// 角色
const agentsEl = document.getElementById('agents');
agentsEl.innerHTML = '';