diff --git a/src/stage/RandomStage.tsx b/src/stage/RandomStage.tsx index cf7509e5..954cdbf2 100644 --- a/src/stage/RandomStage.tsx +++ b/src/stage/RandomStage.tsx @@ -1,8 +1,9 @@ -// Responsibility: Random-mode stage orchestration — intro + pool status + summary + select all / clear all + collage or empty state. No sampling. +// Responsibility: Random-mode stage orchestration — today's sun track, pool status, summary + select all / +// clear all, then the collage or the empty state. No sampling. import { randomStore, selectAll, clearAll } from "@/store/random.store"; import { availableThemeIds } from "@/store/catalog.selectors"; import { t } from "@/i18n"; -import { createMemo } from "solid-js"; +import { createMemo, Show } from "solid-js"; import { WriteNote } from "./WriteNote"; import { RandomStats } from "./RandomStats"; import { RandomSunPath } from "./RandomSunPath"; @@ -17,12 +18,19 @@ export function RandomStage() { return ( <> -

- {t("stage.randomIntro")} -

+ {/* The track leads: it is the only part of this stage that moves during the day. An + empty pool has nothing drawn, so it stays out of the way then. */} + 0}> + +
+ {/* The explanation sits in the space the figures leave, at caption size: it is a + note about the mode, not a heading over the stage. */} +

+ {t("stage.randomIntro")} +

- {poolSize() === 0 ? ( - - ) : ( - <> - {/* The pool area reports rather than asks, so the track sits with it: it belongs - to the theme drawn for today, not to the whole pool. */} - - - - )} + {poolSize() === 0 ? : } ); diff --git a/src/stage/RandomSunPath.tsx b/src/stage/RandomSunPath.tsx index bfb45045..2808547f 100644 --- a/src/stage/RandomSunPath.tsx +++ b/src/stage/RandomSunPath.tsx @@ -55,6 +55,13 @@ export function RandomSunPath() { 0 && current()}> {(cur) => (
+ + {/* Below the track, and quiet: it names the theme, it is not a heading. */}
@@ -63,11 +70,6 @@ export function RandomSunPath() { })}
-
)}
diff --git a/src/stage/SunPathPanel.tsx b/src/stage/SunPathPanel.tsx index ad8696a9..3c93c444 100644 --- a/src/stage/SunPathPanel.tsx +++ b/src/stage/SunPathPanel.tsx @@ -31,6 +31,12 @@ interface Props { /** Entry the user picked; omit it, and `onSelect`, for a track that only reports. */ selIndex?: number | null; onSelect?: (index: number | null) => void; + /** + * Fill the column instead of the fixed-mode card width. The random-mode stage is as wide as + * the window, and a narrow track centred in it reads as a floating island; there the track + * also becomes the day's own horizontal axis, so the azimuth labels spread out. + */ + fullWidth?: boolean; } export function SunPathPanel(props: Props) { @@ -78,7 +84,9 @@ export function SunPathPanel(props: Props) { ); return ( -
+