diff --git a/client/src/ui/LeftPanel.ts b/client/src/ui/LeftPanel.ts index f6333ea..3d7e863 100644 --- a/client/src/ui/LeftPanel.ts +++ b/client/src/ui/LeftPanel.ts @@ -5,14 +5,18 @@ export class LeftPanel { private contentArea: HTMLDivElement; private statsTab: HTMLDivElement; private eventsTab: HTMLDivElement; + private inventionsTab: HTMLDivElement; + private inventionsContent: HTMLDivElement; + private notificationDot: HTMLDivElement; private expanded = false; - private activeTab: 'stats' | 'events' | null = null; + private activeTab: 'stats' | 'events' | 'inventions' | null = null; private superlativesContent: HTMLDivElement; private eventsFeedContent: HTMLDivElement; - constructor(superlativesContent: HTMLDivElement, eventsFeedContent: HTMLDivElement) { + constructor(superlativesContent: HTMLDivElement, eventsFeedContent: HTMLDivElement, inventionsContent: HTMLDivElement) { this.superlativesContent = superlativesContent; this.eventsFeedContent = eventsFeedContent; + this.inventionsContent = inventionsContent; // Outer container for positioning this.container = document.createElement('div'); @@ -110,8 +114,32 @@ export class LeftPanel { } }); + // Inventions tab ("I") + this.inventionsTab = this.createTab('I'); + this.inventionsTab.style.position = 'relative'; + this.notificationDot = document.createElement('div'); + this.notificationDot.style.cssText = ` + position: absolute; + top: 4px; + right: 4px; + width: 8px; + height: 8px; + background: #f0d060; + border-radius: 50%; + display: none; + `; + this.inventionsTab.appendChild(this.notificationDot); + this.inventionsTab.addEventListener('click', () => { + if (this.activeTab === 'inventions' && this.expanded) { + this.collapse(); + } else { + this.expand('inventions'); + } + }); + tabContainer.appendChild(this.statsTab); tabContainer.appendChild(this.eventsTab); + tabContainer.appendChild(this.inventionsTab); this.container.appendChild(this.panel); this.container.appendChild(tabContainer); @@ -171,9 +199,14 @@ export class LeftPanel { this.activeTab === 'events' && this.expanded ? '#2a2a4e' : '#1a1a2e'; this.eventsTab.dataset.active = this.activeTab === 'events' && this.expanded ? 'true' : 'false'; + + this.inventionsTab.style.background = + this.activeTab === 'inventions' && this.expanded ? '#2a2a4e' : '#1a1a2e'; + this.inventionsTab.dataset.active = + this.activeTab === 'inventions' && this.expanded ? 'true' : 'false'; } - private showContent(tab: 'stats' | 'events'): void { + private showContent(tab: 'stats' | 'events' | 'inventions'): void { // Remove current content while (this.contentArea.firstChild) { this.contentArea.removeChild(this.contentArea.firstChild); @@ -182,18 +215,24 @@ export class LeftPanel { if (tab === 'stats') { this.headerEl.textContent = 'SUPERLATIVES'; this.contentArea.appendChild(this.superlativesContent); - } else { + } else if (tab === 'events') { this.headerEl.textContent = 'EVENTS'; this.contentArea.appendChild(this.eventsFeedContent); + } else if (tab === 'inventions') { + this.headerEl.textContent = 'INVENTIONS'; + this.contentArea.appendChild(this.inventionsContent); } } - expand(tab: 'stats' | 'events'): void { + expand(tab: 'stats' | 'events' | 'inventions'): void { this.activeTab = tab; this.expanded = true; this.showContent(tab); this.updateTabs(); this.container.style.transform = 'translateY(-50%) translateX(0)'; + if (tab === 'inventions') { + this.hideNotificationDot(); + } document.dispatchEvent( new CustomEvent('left-panel-opened', { detail: { tab } }), ); @@ -210,10 +249,18 @@ export class LeftPanel { return this.expanded; } - getActiveTab(): 'stats' | 'events' | null { + getActiveTab(): 'stats' | 'events' | 'inventions' | null { return this.expanded ? this.activeTab : null; } + showNotificationDot(): void { + this.notificationDot.style.display = ''; + } + + hideNotificationDot(): void { + this.notificationDot.style.display = 'none'; + } + destroy(): void { this.container.remove(); }