From 37b9390c641cb58ad27ea7bb608b649a62c5bc52 Mon Sep 17 00:00:00 2001 From: root Date: Sun, 8 Mar 2026 17:21:57 +0000 Subject: [PATCH] style: shrink NPC info panel fonts and center command panel Co-Authored-By: Claude Opus 4.6 --- client/src/ui/CommandPanel.ts | 8 ++++---- client/src/ui/NpcInfoPanel.ts | 38 +++++++++++++++++------------------ 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/client/src/ui/CommandPanel.ts b/client/src/ui/CommandPanel.ts index a23b220..87f596b 100644 --- a/client/src/ui/CommandPanel.ts +++ b/client/src/ui/CommandPanel.ts @@ -28,14 +28,14 @@ export class CommandPanel { this.outerFrame.style.cssText = ` position: fixed; bottom: 16px; - right: 16px; + left: 50%; + transform: translateX(-50%) translateY(20px); min-width: 160px; border-radius: 12px; border: 3px solid ${EB.borderOuter}; background: ${EB.borderGap}; z-index: 1000; opacity: 0; - transform: translateY(20px); transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; @@ -150,7 +150,7 @@ export class CommandPanel { if (this.visible) return; this.visible = true; this.outerFrame.style.opacity = '1'; - this.outerFrame.style.transform = 'translateY(0)'; + this.outerFrame.style.transform = 'translateX(-50%) translateY(0)'; this.outerFrame.style.pointerEvents = 'auto'; } @@ -158,7 +158,7 @@ export class CommandPanel { if (!this.visible) return; this.visible = false; this.outerFrame.style.opacity = '0'; - this.outerFrame.style.transform = 'translateY(20px)'; + this.outerFrame.style.transform = 'translateX(-50%) translateY(20px)'; this.outerFrame.style.pointerEvents = 'none'; } diff --git a/client/src/ui/NpcInfoPanel.ts b/client/src/ui/NpcInfoPanel.ts index 0464777..aee65d9 100644 --- a/client/src/ui/NpcInfoPanel.ts +++ b/client/src/ui/NpcInfoPanel.ts @@ -54,12 +54,12 @@ export class NpcInfoPanel { position: fixed; top: 16px; right: 16px; - width: 400px; + width: 340px; border-radius: 16px; border: 3px solid ${EB.borderOuter}; background: ${EB.borderGap}; z-index: 1000; - transform: translateX(470px); + transform: translateX(410px); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 0 20px rgba(80, 60, 160, 0.4), @@ -155,7 +155,7 @@ export class NpcInfoPanel { flex: 1; text-align: center; padding: 8px 0; - font-size: 18px; + font-size: 14px; cursor: pointer; color: ${EB.textPrimary}; border-bottom: 2px solid ${EB.borderOuter}; @@ -168,7 +168,7 @@ export class NpcInfoPanel { flex: 1; text-align: center; padding: 8px 0; - font-size: 18px; + font-size: 14px; cursor: pointer; color: ${EB.textMuted}; user-select: none; @@ -198,7 +198,7 @@ export class NpcInfoPanel { // Name this.nameEl = document.createElement('div'); this.nameEl.style.cssText = ` - font-size: 26px; + font-size: 20px; color: ${EB.textPrimary}; text-align: center; padding: 2px 0 4px; @@ -210,7 +210,7 @@ export class NpcInfoPanel { // Activity this.activityEl = document.createElement('div'); this.activityEl.style.cssText = ` - font-size: 20px; + font-size: 16px; color: ${EB.textSecondary}; text-align: center; padding-bottom: 2px; @@ -220,7 +220,7 @@ export class NpcInfoPanel { // Backstory text this.backstoryEl = document.createElement('div'); this.backstoryEl.style.cssText = ` - font-size: 14px; + font-size: 11px; color: ${EB.textSecondary}; text-align: center; padding: 2px 8px 4px; @@ -237,7 +237,7 @@ export class NpcInfoPanel { this.separatorEl = document.createElement('div'); this.separatorEl.style.cssText = ` text-align: center; - font-size: 14px; + font-size: 11px; color: ${EB.textMuted}; padding: 4px 0; letter-spacing: 6px; @@ -259,7 +259,7 @@ export class NpcInfoPanel { const statsSeparator = document.createElement('div'); statsSeparator.style.cssText = ` text-align: center; - font-size: 14px; + font-size: 11px; color: ${EB.textMuted}; padding: 4px 0; letter-spacing: 6px; @@ -304,7 +304,7 @@ export class NpcInfoPanel { hide(): void { this.visible = false; - this.outerFrame.style.transform = 'translateX(470px)'; + this.outerFrame.style.transform = 'translateX(410px)'; } updateInfo(entity: EntityState): void { @@ -375,7 +375,7 @@ export class NpcInfoPanel { const labelEl = document.createElement('div'); labelEl.style.cssText = ` - font-size: 18px; + font-size: 14px; color: ${EB.textSecondary}; text-transform: uppercase; letter-spacing: 1px; @@ -384,7 +384,7 @@ export class NpcInfoPanel { const valueEl = document.createElement('div'); valueEl.style.cssText = ` - font-size: 20px; + font-size: 16px; color: ${EB.textPrimary}; text-shadow: 1px 1px 0 rgba(0,0,0,0.5); `; @@ -466,7 +466,7 @@ export class NpcInfoPanel { el.style.cssText = ` display: flex; justify-content: space-between; - font-size: 18px; + font-size: 14px; `; const labelEl = document.createElement('span'); labelEl.style.cssText = `color: ${EB.textSecondary}; text-transform: uppercase; letter-spacing: 0.5px;`; @@ -506,7 +506,7 @@ export class NpcInfoPanel { if (relationships.length === 0) { this.relationshipsContent.innerHTML = ''; const empty = document.createElement('div'); - empty.style.cssText = `text-align: center; color: ${EB.textMuted}; font-size: 18px; padding: 16px 0;`; + empty.style.cssText = `text-align: center; color: ${EB.textMuted}; font-size: 14px; padding: 16px 0;`; empty.textContent = 'No relationships yet'; this.relationshipsContent.appendChild(empty); return; @@ -549,7 +549,7 @@ export class NpcInfoPanel { const tierLabel = document.createElement('div'); const icon = tierIcons[tier] ?? ''; - tierLabel.style.cssText = `font-size: 16px; color: ${EB.textSecondary}; margin-bottom: 4px;`; + tierLabel.style.cssText = `font-size: 13px; color: ${EB.textSecondary}; margin-bottom: 4px;`; tierLabel.textContent = `${icon} ${tier}`; tierEl.appendChild(tierLabel); @@ -568,7 +568,7 @@ export class NpcInfoPanel { const toggle = document.createElement('div'); toggle.style.cssText = ` - font-size: 14px; + font-size: 11px; color: ${EB.borderOuter}; cursor: pointer; user-select: none; @@ -600,7 +600,7 @@ export class NpcInfoPanel { const memEl = document.createElement('div'); memEl.style.cssText = 'margin-bottom: 8px;'; const memLabel = document.createElement('div'); - memLabel.style.cssText = `font-size: 16px; color: ${EB.textMuted}; margin-bottom: 4px;`; + memLabel.style.cssText = `font-size: 13px; color: ${EB.textMuted}; margin-bottom: 4px;`; memLabel.textContent = '\u25CB Memories'; memEl.appendChild(memLabel); @@ -623,7 +623,7 @@ export class NpcInfoPanel { const toggle = document.createElement('div'); toggle.style.cssText = ` - font-size: 14px; + font-size: 11px; color: ${EB.borderOuter}; cursor: pointer; user-select: none; @@ -659,7 +659,7 @@ export class NpcInfoPanel { align-items: center; gap: 4px; margin-bottom: 3px; - font-size: 16px; + font-size: 13px; `; const nameEl = document.createElement('span');