lucasw89/gacha-event-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(timeline): let the reader set the scale

Browse Source 
One density cannot answer both questions the board is asked. A patch cycle is
six weeks, a login campaign runs for months, and 13px a day is a compromise
between "what am I in the middle of this week?" and "how do the next three
months line up?" that serves neither well.

A pair of controls steps through a ladder of day widths and the choice is
remembered, on the same argument as the view tabs: a reader who has said how
they want to read this should not say it again on the next load.

Two things it had to get right. Zooming holds the middle of the view still —
rescaling around the left edge of a three-month board throws away whatever
they had scrolled to, and re-opening at today would undo the scrolling that
got them there. And the dated ticks thin out as the scale shrinks, because a
week is 42px at the widest setting and the dates would sit on top of each
other; the gridlines stay weekly, since they carry the rhythm rather than the
reading.

The scale is stored as the measurement, not a step number, and read through
`snapDayWidth`. An export written against a different ladder then opens on
something close to what its reader chose, and a corrupt value opens on the
default rather than a board one pixel wide.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
Lucas Winther
2026-08-18 04:13:31 +02:00
co-authored by Claude Opus 5
parent d5dbe72e17
commit ba39ad2bce
9 changed files with 302 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/App.tsx
+12 -1
View File
@@ -18,6 +18,7 @@ import { useMarkSet } from "./state/useMarkSet.ts";
import { useProgress } from "./state/useProgress.ts";
import { useDailyLog, type DailyLogMap } from "./state/useDailyLog.ts";
import { adoptNewLanes, usePrefs, type View } from "./state/usePrefs.ts";
import { snapDayWidth } from "./state/zoom.ts";
import { useCustom } from "./state/useCustom.ts";
import { compareRows, SORT_MODES, type Activity, type SortMode } from "./state/sort.ts";
import {
@@ -509,7 +510,17 @@ export function App() {
</div>
</div>
) : (
<Timeline rows={visible} now={now} onOpen={setOpenId} isDone={isDone} />
<Timeline
rows={visible}
now={now}
// Snapped here rather than trusted: a stored number arrives from an
// export written by another version of the ladder, or from a file a
// reader edited, and a board one pixel wide is not a preference.
dayWidth={snapDayWidth(prefs.timelineDayWidth)}
onZoom={(timelineDayWidth) => update({ timelineDayWidth })}
onOpen={setOpenId}
isDone={isDone}
/>
)}
<Controls
src/client/components/Timeline.tsx
+115 -23
View File
@@ -1,11 +1,10 @@
import { useEffect, useRef } from "react";
import { useLayoutEffect, useRef } from "react";
import { useGameMeta } from "../state/gameMeta.tsx";
import type { LaneId } from "../../shared/custom.ts";
import { DAY } from "../../shared/time.ts";
import type { RowEvent } from "./EventRow.tsx";
import { URGENCY_COLOR } from "./Meter.tsx";
const DAY_WIDTH = 13; // px per day — dense enough to see a patch cycle at once
import { canStep, stepDayWidth, weekLabelStep } from "../state/zoom.ts";
/**
* How far in from the left edge of the board a pinned label sits.
@@ -62,11 +61,16 @@ const OPEN_INSET = 28;
export function Timeline({
rows,
now,
dayWidth,
onZoom,
onOpen,
isDone,
}: {
rows: RowEvent[];
now: number;
/** How wide one day is, in px. Snapped to the ladder in `state/zoom.ts`. */
dayWidth: number;
onZoom: (dayWidth: number) => void;
onOpen: (id: string) => void;
/**
* Asked rather than derived from the progress store: an entry exists there
@@ -82,9 +86,9 @@ export function Timeline({
const starts = rows.map((r) => r.clock.startsMs);
const { min, max } = boardWindow(starts, ends, now);
const totalDays = Math.ceil((max - min) / DAY);
const chartWidth = totalDays * DAY_WIDTH;
const chartWidth = totalDays * dayWidth;
/** One coordinate space for everything: bars, gridlines and the now rule. */
const x = (ms: number) => ((ms - min) / DAY) * DAY_WIDTH;
const x = (ms: number) => ((ms - min) / DAY) * dayWidth;
// Open at today rather than at the far past, with a little of the past week
// still on screen — an event that began three days ago is context, not
@@ -94,8 +98,39 @@ export function Timeline({
const jumpToNow = (behavior: ScrollBehavior) =>
scroller.current?.scrollTo({ left: openAt, behavior });
useEffect(() => {
jumpToNow("instant");
/**
* A moment in time to hold still through the next re-render, and where in the
* pane to hold it. Set when the reader zooms: rescaling around the left edge
* of the scroll area would throw whatever they were reading off the screen,
* and re-opening at today would undo the scrolling they did to get there.
*/
const hold = useRef<{ ms: number; px: number } | null>(null);
const zoom = (by: 1 | -1) => {
const el = scroller.current;
if (el !== null) {
// The middle of the view is what a reader is looking at, so that is what
// stays put.
const px = el.clientWidth / 2;
hold.current = { ms: min + ((el.scrollLeft + px) / dayWidth) * DAY, px };
}
onZoom(stepDayWidth(dayWidth, by));
};
// Before paint, so a zoom never shows a frame at the wrong offset.
useLayoutEffect(() => {
const el = scroller.current;
if (el === null) return;
const anchor = hold.current;
if (anchor !== null) {
hold.current = null;
el.scrollLeft = Math.max(0, x(anchor.ms) - anchor.px);
return;
}
// Open at today rather than at the far past: it is what they came for.
// Keyed on the rounded offset so it runs when the range changes, not every
// second — re-scrolling on each tick would fight the reader's own scrolling.
el.scrollTo({ left: openAt, behavior: "instant" });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [openAt]);
@@ -114,6 +149,9 @@ export function Timeline({
const months = monthBoundaries(min, max);
const weeks = weekBoundaries(min, max);
// Every Monday is right at the default scale and illegible at the widest zoom
// out, where the dates would sit on top of each other.
const labelEvery = weekLabelStep(dayWidth);
return (
<>
@@ -122,13 +160,33 @@ export function Timeline({
calendar and cover the very dates it sends you back to. */}
<div className="flex items-center justify-between gap-3 border-b border-hairline px-4 py-2.5">
<p className="eyebrow">One lane per game</p>
<button
type="button"
onClick={() => jumpToNow("smooth")}
className="text-[0.6875rem] font-medium text-faint transition-colors duration-150 hover:text-ink"
>
Jump to today
</button>
<div className="flex items-center gap-3">
<div role="group" aria-label="Scale" className="flex items-center gap-1">
<ScaleButton
label="Show a longer stretch of time"
disabled={!canStep(dayWidth, -1)}
onClick={() => zoom(-1)}
>
−
</ScaleButton>
<ScaleButton
label="Show a shorter stretch of time in more detail"
disabled={!canStep(dayWidth, 1)}
onClick={() => zoom(1)}
>
+
</ScaleButton>
</div>
<button
type="button"
onClick={() => jumpToNow("smooth")}
className="text-[0.6875rem] font-medium text-faint transition-colors duration-150 hover:text-ink"
>
Jump to today
</button>
</div>
</div>
<div
@@ -181,15 +239,17 @@ export function Timeline({
{m.label}
</span>
))}
{weeks.map((ms) => (
<span
key={ms}
className="tnum absolute bottom-1 whitespace-nowrap pl-1.5 text-[0.625rem] leading-none text-faint"
style={{ left: x(ms) }}
>
{dayLabel(ms)}
</span>
))}
{weeks.map((ms, i) =>
i % labelEvery === 0 ? (
<span
key={ms}
className="tnum absolute bottom-1 whitespace-nowrap pl-1.5 text-[0.625rem] leading-none text-faint"
style={{ left: x(ms) }}
>
{dayLabel(ms)}
</span>
) : null,
)}
</div>
<div className="space-y-7 pb-10 pt-5">
@@ -296,6 +356,38 @@ export function boardWindow(
};
}
/**
* One step of the scale control.
*
* Labelled by what it does to the board rather than "zoom in" and "zoom out",
* which say what happens to the picture and leave the reader to work out what
* that means for the dates.
*/
function ScaleButton({
label,
disabled,
onClick,
children,
}: {
label: string;
disabled: boolean;
onClick: () => void;
children: React.ReactNode;
}) {
return (
<button
type="button"
onClick={onClick}
disabled={disabled}
aria-label={label}
title={label}
className="grid size-6 place-items-center rounded-md border border-hairline text-xs font-semibold leading-none text-muted transition-colors duration-150 hover:border-faint hover:text-ink disabled:cursor-not-allowed disabled:border-hairline/60 disabled:text-faint/50 disabled:hover:text-faint/50"
>
{children}
</button>
);
}
/**
* Fade a bar's edge where the truth extends past what is drawn: the left when
* the event began before the view opens, the right when its end is unannounced.
src/client/state/usePrefs.ts
+11
View File
@@ -4,6 +4,7 @@ import type { Region } from "../../shared/schema.ts";
import { guessRegion } from "../../shared/time.ts";
import type { SortMode } from "./sort.ts";
import { KEYS, readJson, writeJson } from "./storage.ts";
import { DEFAULT_DAY_WIDTH } from "./zoom.ts";
/**
* Which of the two views the reader is looking at.
@@ -62,6 +63,15 @@ export interface Prefs {
* them and the choice is remembered from then on.
*/
view: View;
/**
* How wide one day is on the timeline, in px.
*
* Stored as the measurement rather than a step number, so the ladder in
* `state/zoom.ts` can change without silently rescaling boards that were set
* before it did. Read through `snapDayWidth`, which is what makes a value
* from an older export — or a corrupted one — land on something renderable.
*/
timelineDayWidth: number;
/**
* Whether to guess which events repeat daily from what the source printed.
* Off leaves only the ones the reader marked themselves; it never discards a
@@ -88,6 +98,7 @@ function defaults(): Prefs {
focusGame: null,
sort: "ending",
view: "soon",
timelineDayWidth: DEFAULT_DAY_WIDTH,
detectDaily: false,
showCompleted: true,
showIgnored: false,
src/client/state/zoom.ts
+64
View File
@@ -0,0 +1,64 @@
/**
* How far the timeline is zoomed in, expressed as the width of one day.
*
* A patch cycle is six weeks and a login campaign can run for months, so no
* single scale answers both "what am I in the middle of this week?" and "how do
* the next three months line up?". The reader picks.
*
* Pure, and its own module rather than a constant inside `Timeline`, because
* `prefs` stores the chosen value and the two must agree on what is valid.
*/
/** The ladder, in px per day. Roughly a third wider at each step. */
export const DAY_WIDTHS = [6, 9, 13, 20, 32, 48] as const;
/**
* The scale the board opens at for a reader who has never touched the control.
*
* Thirteen px/day is a little over a quarter on a laptop and a patch cycle on a
* phone — dense enough that a bar's length reads as a duration rather than a
* dash, wide enough that most event names fit inside their own bar.
*/
export const DEFAULT_DAY_WIDTH = 13;
/**
* The nearest valid scale to a stored number.
*
* `prefs` is a file on someone's device that an export/import round trip can
* carry between versions, so the ladder is allowed to change and a value off
* it must not render a board one pixel wide. Anything unusable falls back to
* the default rather than to the nearest edge — a corrupt value is not a
* preference.
*/
export function snapDayWidth(px: number): number {
if (!Number.isFinite(px) || px <= 0) return DEFAULT_DAY_WIDTH;
// `<=` over an ascending ladder means a value sitting exactly between two
// steps takes the wider one. Ties go to the more legible board.
return DAY_WIDTHS.reduce((best, step) =>
Math.abs(step - px) <= Math.abs(best - px) ? step : best,
);
}
/** One step in or out, stopping at the ends of the ladder. */
export function stepDayWidth(px: number, by: 1 | -1): number {
const at = DAY_WIDTHS.indexOf(snapDayWidth(px) as (typeof DAY_WIDTHS)[number]);
return DAY_WIDTHS[Math.min(Math.max(at + by, 0), DAY_WIDTHS.length - 1)] ?? DEFAULT_DAY_WIDTH;
}
/** Whether there is anywhere further to go in that direction. */
export function canStep(px: number, by: 1 | -1): boolean {
return stepDayWidth(px, by) !== snapDayWidth(px);
}
/**
* How many weeks apart the dated ticks on the axis are.
*
* Every Monday is right at the default scale and unreadable at the widest zoom
* out, where a week is 42px and the labels would sit on top of each other. The
* gridlines stay weekly either way — they are hairlines and they carry the
* rhythm; it is only the dates that have to thin out.
*/
export function weekLabelStep(dayWidth: number): number {
const MIN_LABEL_GAP = 64;
return Math.max(1, Math.ceil(MIN_LABEL_GAP / (7 * dayWidth)));
}