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

style: shrink NPC info panel fonts and center command panel

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
root
2026-03-08 17:21:57 +00:00
parent 29417c7818
commit 37b9390c64
2 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/ui/CommandPanel.ts
+4 -4
View File
@@ -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';
}
client/src/ui/NpcInfoPanel.ts
+19 -19
View File
@@ -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');