diff --git a/lib/folk-commitment-pool.ts b/lib/folk-commitment-pool.ts index 915eedc..5376a08 100644 --- a/lib/folk-commitment-pool.ts +++ b/lib/folk-commitment-pool.ts @@ -48,7 +48,11 @@ class Orb { constructor(c: PoolCommitment, cx: number, cy: number, r: number) { 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; const a = Math.random() * Math.PI * 2; const d = Math.random() * (r - this.baseRadius - 10); @@ -84,7 +88,7 @@ class Orb { const isH = hovered === this; 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); } @@ -318,9 +322,19 @@ export class FolkCommitmentPool extends FolkShape { const emptyMsg = this.#wrapper.querySelector(".empty-msg") as HTMLElement; 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])); - 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 ──