- commit
- 2df8a9e82d668242294c91f1a6ed1af2bfc439fd
- parent
- d7f3c1c435bd6bc9804c142133cec3a0781f37a1
- author
- dami <gazey55@gmail.com>
| M | site/ | 20 | +++++++++++++++++--- |
| M | site/ | 9 | ++++++++- |
| M | site/ | 2 | ++ |
@@ -1084,7 +1084,7 @@ const STYLE = `
10841084 .pane{flex:1;min-height:0;overflow:auto;font-size:12.5px}10851085 .moves{display:grid;grid-template-columns:auto 14px minmax(0,1fr);column-gap:8px;padding:6px 14px;align-items:baseline}10861086 .moves .n{color:var(--muted);text-align:right}1087-.moves .who{color:var(--text-dim)}1087+.moves .who{color:var(--text-dim);margin-right:5px}10881088 .moves .what{color:var(--text)}10891089 .moves .note{grid-column:1 / span 3;font-style:italic;color:var(--text-dim);padding:3px 0}10901090 .moves .note.danger{color:var(--danger)}@@ -1135,6 +1135,8 @@ export default function Viewer(
11351135 live?: string | null;11361136 /** the day this game is (for the head and the result card) */11371137 day?: string | null;1138+ /** an initial zoom in pixels per cell, centred on the cluster (deep links) */1139+ zoom?: number | null;11381140 },11391141 ) {11401142 const canvasRef = useRef<HTMLCanvasElement>(null);@@ -1282,11 +1284,23 @@ export default function Viewer(
12821284 cache.current.clear();12831285 }, [theme, hues]);12841286 1285- // initial fit1287+ // initial fit (or a deep-linked zoom about the cluster's centre)12861288 useEffect(() => {12871289 const c = canvasRef.current;12881290 if (!c || !state.manifest || view) return;1289- setView(fitView(final, c.clientWidth, c.clientHeight));1291+ const fit = fitView(final, c.clientWidth, c.clientHeight);1292+ if (props.zoom && props.zoom > 0) {1293+ const W = c.clientWidth, H = c.clientHeight;1294+ const cx = (W / 2 - fit.ox) / fit.scale,1295+ cy = (H / 2 - fit.oy) / fit.scale;1296+ setView({1297+ scale: props.zoom,1298+ ox: W / 2 - cx * props.zoom,1299+ oy: H / 2 - cy * props.zoom,1300+ });1301+ return;1302+ }1303+ setView(fit);12901304 }, [state.manifest, view]);12911305 12921306 // the placement snap: when the revision changes, the newest stones grow@@ -26,6 +26,7 @@ export default define.page(function Day(ctx) {
2626 }2727 const t = ctx.url.searchParams.get("theme");2828 const theme = t === "dark" || t === "light" ? t : null;29+ const zoom = Number(ctx.url.searchParams.get("zoom")) || null;2930 return (3031 <div style="display:flex;flex-direction:column;height:100vh;height:100dvh">3132 <nav class="nav">@@ -39,7 +40,13 @@ export default define.page(function Day(ctx) {
3940 <a href={`/leaderboard/${date}`}>table</a>4041 </nav>4142 <div style="flex:1;min-height:0">42- <Viewer replay={row.game_id} theme={theme} live={null} day={date} />43+ <Viewer44+ replay={row.game_id}45+ theme={theme}46+ live={null}47+ day={date}48+ zoom={zoom}49+ />4350 </div>4451 </div>4552 );@@ -16,6 +16,7 @@ export default define.page(function Home(ctx) {
1616 const status = d?.status() ?? null;1717 const origin = ctx.url.origin;1818 const prompt = bootstrapText(origin, status?.date ?? null);19+ const zoom = Number(ctx.url.searchParams.get("zoom")) || null;1920 return (2021 <div style="display:flex;flex-direction:column;height:100vh;height:100dvh">2122 <nav class="nav">@@ -36,6 +37,7 @@ export default define.page(function Home(ctx) {
3637 theme={theme}3738 live={null}3839 day={status?.date ?? null}40+ zoom={zoom}3941 />4042 )4143 : <Today initial={status} theme={theme} />}