feat: add number format config, resource cap, and modal scroll fix

- Add user-configurable number format (suffix/scientific/engineering)
  - Suffix: K/M/B/T through Dc (1e33), then letter-based a/b/c... indefinitely
  - Scientific: 1.23e15 style via toExponential
  - Engineering: exponent always a multiple of 3 (1.23E15)
  - Stored in ProfileSettings, fetched from profile API on load
  - Picker UI in EditProfileModal with live examples
- Cap all resource accumulation at 1e300 (RESOURCE_CAP constant)
  - Per-resource FULL badge with tooltip in ResourceBar
  - Amber notice strip when any resource is at cap
  - handleClick also respects the cap
- Make EditProfileModal scrollable with viewport margin
  - Flex column layout with sticky header, scrollable form body
  - Bio textarea preserved as resizable with min-height
- Fix ReferenceError: formatNumber not defined in BossPanel/AchievementPanel
  - Pass formatNumber as prop to BossCard and AchievementCard
  - Pass formatNumber as parameter to conditionDescription
This commit is contained in:
2026-03-06 18:59:43 -08:00
committed by Naomi Carrigan
parent 24beaf3131
commit 5ad2c44399
15 changed files with 290 additions and 65 deletions
+79 -2
View File
@@ -71,6 +71,30 @@ body {
font-weight: 600;
}
.resource-full .resource-value {
color: var(--colour-warning, #f59e0b);
}
.resource-cap-badge {
background: var(--colour-warning, #f59e0b);
border-radius: 0.25rem;
color: #000;
cursor: help;
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.05em;
padding: 0.1rem 0.3rem;
}
.resource-cap-notice {
background: rgba(245, 158, 11, 0.12);
border-bottom: 1px solid rgba(245, 158, 11, 0.35);
color: #f59e0b;
font-size: 0.82rem;
padding: 0.4rem 1.5rem;
text-align: center;
}
/* ===================== GAME LAYOUT ===================== */
.game-layout {
display: flex;
@@ -1366,7 +1390,11 @@ body {
/* ── Edit Profile Modal ─────────────────────────────────────────────────── */
.edit-profile-modal {
display: flex;
flex-direction: column;
max-height: calc(100dvh - 4rem);
max-width: 480px;
padding: 0;
text-align: left;
width: 100%;
}
@@ -1374,14 +1402,19 @@ body {
.modal-header {
align-items: center;
display: flex;
flex-shrink: 0;
justify-content: space-between;
margin-bottom: 1rem;
padding: 1.5rem 2rem 1rem;
}
.modal-header h2 {
margin: 0;
}
.edit-profile-modal .edit-profile-loading {
padding: 0 2rem 1.5rem;
}
.modal-close {
background: transparent;
border: none;
@@ -1401,6 +1434,8 @@ body {
display: flex;
flex-direction: column;
gap: 0.5rem;
overflow-y: auto;
padding: 0 2rem 1.5rem;
}
.edit-profile-label {
@@ -1425,10 +1460,14 @@ body {
font-family: inherit;
font-size: 0.9rem;
padding: 0.5rem 0.75rem;
resize: vertical;
width: 100%;
}
.edit-profile-textarea {
min-height: 5rem;
resize: vertical;
}
.edit-profile-input:focus,
.edit-profile-textarea:focus {
border-color: var(--colour-primary);
@@ -1484,6 +1523,44 @@ body {
color: var(--colour-success);
}
.number-format-picker {
display: flex;
gap: 0.5rem;
}
.number-format-btn {
align-items: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(147, 51, 234, 0.25);
border-radius: 0.4rem;
color: var(--colour-text-muted);
cursor: pointer;
display: flex;
flex: 1;
flex-direction: column;
font-family: inherit;
gap: 0.2rem;
padding: 0.5rem 0.75rem;
transition: all 0.15s;
}
.number-format-active {
background: rgba(147, 51, 234, 0.12);
border-color: rgba(147, 51, 234, 0.5);
color: var(--colour-text);
}
.number-format-label {
font-size: 0.85rem;
font-weight: 600;
}
.number-format-example {
color: var(--colour-accent);
font-family: monospace;
font-size: 0.8rem;
}
.edit-profile-error {
color: var(--colour-error);
font-size: 0.82rem;