jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(rtime): scale commitment orbs relative to basket size 

Orb radius now uses 8-15% of basket radius with sqrt(hours) scaling
instead of fixed pixel sizes (18+hours*9). Prevents orbs from being
oversized on small baskets or undersized on large ones. Hover expansion
also scales proportionally (15% instead of fixed 5px).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-04-03 14:41:05 -07:00
parent 0337797b7c
commit 4d06156e5f
1 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
lib/folk-commitment-pool.ts
View File

@ -48,7 +48,11 @@ class Orb {
constructor(c: PoolCommitment, cx: number, cy: number, r: number) { constructor(c: PoolCommitment, cx: number, cy: number, r: number) {
this.c = c; this.c = c;
this.baseRadius = 18 + c.hours * 9; // Scale orb radius relative to basket size so they always fit
// Base: 8-15% of basket radius, scaled by sqrt(hours) to avoid giant orbs
const minR = r * 0.08;
const maxR = r * 0.15;
this.baseRadius = Math.min(maxR, minR + (maxR - minR) * (Math.sqrt(c.hours) / Math.sqrt(10)));
this.radius = this.baseRadius; this.radius = this.baseRadius;
const a = Math.random() * Math.PI * 2; const a = Math.random() * Math.PI * 2;
const d = Math.random() * (r - this.baseRadius - 10); const d = Math.random() * (r - this.baseRadius - 10);
@ -84,7 +88,7 @@ class Orb {
const isH = hovered === this; const isH = hovered === this;
this.hoverT += ((isH ? 1 : 0) - this.hoverT) * 0.12; this.hoverT += ((isH ? 1 : 0) - this.hoverT) * 0.12;
this.radius = this.baseRadius + this.hoverT * 5; this.radius = this.baseRadius * (1 + this.hoverT * 0.15);
if (this.opacity < 1) this.opacity = Math.min(1, this.opacity + 0.025); if (this.opacity < 1) this.opacity = Math.min(1, this.opacity + 0.025);
} }
@ -318,9 +322,19 @@ export class FolkCommitmentPool extends FolkShape {
const emptyMsg = this.#wrapper.querySelector(".empty-msg") as HTMLElement; const emptyMsg = this.#wrapper.querySelector(".empty-msg") as HTMLElement;
if (emptyMsg) emptyMsg.style.display = commitments.length === 0 ? "flex" : "none"; if (emptyMsg) emptyMsg.style.display = commitments.length === 0 ? "flex" : "none";
// Preserve existing orbs by commitment ID // Preserve existing orbs by commitment ID, rescale to current basket size
const existing = new Map(this.#orbs.map(o => [o.c.id, o])); const existing = new Map(this.#orbs.map(o => [o.c.id, o]));
this.#orbs = commitments.map(c => existing.get(c.id) || new Orb(c, cx, cy, r)); this.#orbs = commitments.map(c => {
const old = existing.get(c.id);
if (old) {
// Rescale existing orb to current basket radius
const minR = r * 0.08;
const maxR = r * 0.15;
old.baseRadius = Math.min(maxR, minR + (maxR - minR) * (Math.sqrt(c.hours) / Math.sqrt(10)));
return old;
}
return new Orb(c, cx, cy, r);
});
} }
// ── Canvas coord helpers ── // ── Canvas coord helpers ──