andy/dflike
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add click-to-expand for relationship tier groups and memories

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
root
2026-03-07 16:10:03 +00:00
parent 68c910f406
commit a0ce9c92f8
1 changed files with 64 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/ui/NpcInfoPanel.ts
+64 -3
View File
@@ -512,7 +512,7 @@ export class NpcInfoPanel {
const showCount = 2;
const shown = group.slice(0, showCount);
const remaining = group.length - showCount;
const hidden = group.slice(showCount);
const tierEl = document.createElement('div');
tierEl.style.cssText = 'margin-bottom: 8px;';
@@ -520,13 +520,41 @@ export class NpcInfoPanel {
const tierLabel = document.createElement('div');
const icon = tierIcons[tier] ?? '';
tierLabel.style.cssText = `font-size: 8px; color: ${EB.textSecondary}; margin-bottom: 4px;`;
tierLabel.textContent = `${icon} ${tier}${remaining > 0 ? ` (${remaining} more...)` : ''}`;
tierLabel.textContent = `${icon} ${tier}`;
tierEl.appendChild(tierLabel);
for (const rel of shown) {
tierEl.appendChild(this.createRelSlider(rel.name, rel.value, tier));
}
if (hidden.length > 0) {
const overflow = document.createElement('div');
overflow.style.cssText = 'display: none;';
for (const rel of hidden) {
overflow.appendChild(this.createRelSlider(rel.name, rel.value, tier));
}
tierEl.appendChild(overflow);
const toggle = document.createElement('div');
toggle.style.cssText = `
font-size: 7px;
color: ${EB.borderOuter};
cursor: pointer;
user-select: none;
padding: 2px 0;
text-align: center;
`;
toggle.textContent = `\u25BC ${hidden.length} more...`;
toggle.addEventListener('click', () => {
const expanded = overflow.style.display !== 'none';
overflow.style.display = expanded ? 'none' : '';
toggle.textContent = expanded
? `\u25BC ${hidden.length} more...`
: '\u25B2 show less';
});
tierEl.appendChild(toggle);
}
this.relationshipsContent.appendChild(tierEl);
}
@@ -537,9 +565,42 @@ export class NpcInfoPanel {
memLabel.style.cssText = `font-size: 8px; color: ${EB.textMuted}; margin-bottom: 4px;`;
memLabel.textContent = '\u25CB Memories';
memEl.appendChild(memLabel);
for (const rel of memories.slice(0, 2)) {
const memShown = memories.slice(0, 2);
const memHidden = memories.slice(2);
for (const rel of memShown) {
memEl.appendChild(this.createRelSlider(rel.name + ' \u2020', rel.value, 'memory'));
}
if (memHidden.length > 0) {
const overflow = document.createElement('div');
overflow.style.cssText = 'display: none;';
for (const rel of memHidden) {
overflow.appendChild(this.createRelSlider(rel.name + ' \u2020', rel.value, 'memory'));
}
memEl.appendChild(overflow);
const toggle = document.createElement('div');
toggle.style.cssText = `
font-size: 7px;
color: ${EB.borderOuter};
cursor: pointer;
user-select: none;
padding: 2px 0;
text-align: center;
`;
toggle.textContent = `\u25BC ${memHidden.length} more...`;
toggle.addEventListener('click', () => {
const expanded = overflow.style.display !== 'none';
overflow.style.display = expanded ? 'none' : '';
toggle.textContent = expanded
? `\u25BC ${memHidden.length} more...`
: '\u25B2 show less';
});
memEl.appendChild(toggle);
}
this.relationshipsContent.appendChild(memEl);
}
}