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

feat: add D (Desires) tab to NPC info panel

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
root
2026-03-10 01:34:46 +00:00
parent 176ca88983
commit b347ada878
1 changed files with 25 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/ui/NpcInfoPanel.ts
+25 -12
View File
@@ -64,14 +64,16 @@ export class NpcInfoPanel {
private statsContainer: HTMLDivElement;
private statElements: Map<string, HTMLDivElement> = new Map();
private statusTab!: HTMLDivElement;
private desiresTab!: HTMLDivElement;
private relationshipsTab!: HTMLDivElement;
private historyTab!: HTMLDivElement;
private inventoryTab!: HTMLDivElement;
private statusContent!: HTMLDivElement;
private desiresContent!: HTMLDivElement;
private relationshipsContent!: HTMLDivElement;
private historyContent!: HTMLDivElement;
private inventoryContent!: HTMLDivElement;
private activeTab: 'status' | 'relationships' | 'history' | 'inventory' = 'status';
private activeTab: 'status' | 'desires' | 'relationships' | 'history' | 'inventory' = 'status';
private expandedTiers: Set<string> = new Set();
private tooltipCleanups: (() => void)[] = [];
private visible = false;
@@ -103,6 +105,7 @@ export class NpcInfoPanel {
`;
this.statusTab = this.createTab('S');
this.desiresTab = this.createTab('D');
this.relationshipsTab = this.createTab('R');
this.historyTab = this.createTab('H');
this.inventoryTab = this.createTab('I');
@@ -111,16 +114,19 @@ export class NpcInfoPanel {
this.statusTab.style.background = '#2a2a4e';
this.statusTab.addEventListener('click', () => this.switchTab('status'));
this.desiresTab.addEventListener('click', () => this.switchTab('desires'));
this.relationshipsTab.addEventListener('click', () => this.switchTab('relationships'));
this.historyTab.addEventListener('click', () => this.switchTab('history'));
this.inventoryTab.addEventListener('click', () => this.switchTab('inventory'));
this.tooltipCleanups.push(attachTooltip(this.statusTab, 'Status', 'left'));
this.tooltipCleanups.push(attachTooltip(this.desiresTab, 'Desires', 'left'));
this.tooltipCleanups.push(attachTooltip(this.relationshipsTab, 'Relationships', 'left'));
this.tooltipCleanups.push(attachTooltip(this.historyTab, 'History', 'left'));
this.tooltipCleanups.push(attachTooltip(this.inventoryTab, 'Inventory', 'left'));
tabColumn.appendChild(this.statusTab);
tabColumn.appendChild(this.desiresTab);
tabColumn.appendChild(this.relationshipsTab);
tabColumn.appendChild(this.historyTab);
tabColumn.appendChild(this.inventoryTab);
@@ -278,16 +284,6 @@ export class NpcInfoPanel {
`;
this.statusContent.appendChild(this.backstoryEl);
// Desires section
this.desiresEl = document.createElement('div');
this.desiresEl.style.cssText = `
padding: 4px 8px;
font-family: 'Press Start 2P', monospace;
font-size: 10px;
line-height: 1.8;
`;
this.statusContent.appendChild(this.desiresEl);
// Inner thought (italic first-person, shown above recent events)
this.thoughtEl = document.createElement('div');
this.thoughtEl.style.cssText = `
@@ -357,6 +353,22 @@ export class NpcInfoPanel {
contentWrapper.appendChild(this.statusContent);
this.desiresContent = document.createElement('div');
this.desiresContent.style.cssText = `
display: none;
padding: 10px 12px 12px;
font-family: 'Press Start 2P', monospace;
`;
this.desiresEl = document.createElement('div');
this.desiresEl.style.cssText = `
padding: 4px 8px;
font-family: 'Press Start 2P', monospace;
font-size: 10px;
line-height: 1.8;
`;
this.desiresContent.appendChild(this.desiresEl);
contentWrapper.appendChild(this.desiresContent);
this.relationshipsContent = document.createElement('div');
this.relationshipsContent.style.cssText = `
display: none;
@@ -726,10 +738,11 @@ export class NpcInfoPanel {
valueEl.textContent = String(value);
}
private switchTab(tab: 'status' | 'relationships' | 'history' | 'inventory'): void {
private switchTab(tab: 'status' | 'desires' | 'relationships' | 'history' | 'inventory'): void {
this.activeTab = tab;
const tabs = [
{ key: 'status' as const, tabEl: this.statusTab, contentEl: this.statusContent },
{ key: 'desires' as const, tabEl: this.desiresTab, contentEl: this.desiresContent },
{ key: 'relationships' as const, tabEl: this.relationshipsTab, contentEl: this.relationshipsContent },
{ key: 'history' as const, tabEl: this.historyTab, contentEl: this.historyContent },
{ key: 'inventory' as const, tabEl: this.inventoryTab, contentEl: this.inventoryContent },