diff --git a/docs/DESIGN.md b/docs/DESIGN.md index 5683160..1119345 100644 --- a/docs/DESIGN.md +++ b/docs/DESIGN.md @@ -423,7 +423,9 @@ The unit of the checklist. It is one full-bleed target that opens the event and A strip of discrete ticks 10px tall with 2px gaps, lifted from the in-game stamina meters these games all use. Ticks drain from the right, so what is left sits at the left edge and stacked rows line up into a readable ramp. Remaining ticks carry the urgency colour and its glow; spent ticks -recede to hairline. **An unannounced end is hatched, never full.** Ticks fill in with a staggered +recede to hairline. A running event always keeps at least one lit tick, however little of its window +is left: an empty strip means "over", and the event with forty minutes left is the last one that +should look over. **An unannounced end is hatched, never full.** Ticks fill in with a staggered scale-in animation (320ms, at most a 14ms delay per tick) unless reduced motion is requested. ### Headline deadline diff --git a/src/client/components/Meter.tsx b/src/client/components/Meter.tsx index 134fe71..ffd77c3 100644 --- a/src/client/components/Meter.tsx +++ b/src/client/components/Meter.tsx @@ -33,9 +33,12 @@ interface MeterProps { */ export function Meter({ progress, urgency, animate = true, label }: MeterProps) { const unknown = progress === null; - const remainingTicks = unknown + // Never rounds a running event down to an empty strip. Forty minutes left of + // a two-week event is under half a tick, and drawing it as fully spent made + // the most urgent rows on the page look like the ones already over. + const remainingTicks = unknown || progress >= 1 ? 0 - : Math.max(0, Math.round((1 - progress) * TICKS)); + : Math.max(1, Math.round((1 - progress) * TICKS)); return (