diff --git a/components/plans/StageSelector.tsx b/components/plans/StageSelector.tsx index 98c6a75d1..6b4ef41da 100644 --- a/components/plans/StageSelector.tsx +++ b/components/plans/StageSelector.tsx @@ -43,13 +43,15 @@ const StageSelector: React.FC = ({ {salmonRunStages .concat(stages) .sort((a, b) => a.localeCompare(b)) + .concat(["Blank"]) .map((stage) => ( ))} - {currentBackground.tide ? ( + {!currentBackground.tide && + !currentBackground.mode ? null : currentBackground.tide ? ( <> diff --git a/pages/plans.tsx b/pages/plans.tsx index 6d87c5a15..cd27cac1b 100644 --- a/pages/plans.tsx +++ b/pages/plans.tsx @@ -54,6 +54,9 @@ const stageToCode = new Map([ ]); const plannerMapBgToImage = (bg: PlannerMapBg) => { + if (!bg.tide && !bg.mode) { + return `images/plannerMaps/${bg.stage}.png`; + } if (!bg.tide) return `images/plannerMaps/${bg.view} ${stageToCode.get(bg.stage)} ${ bg.mode @@ -339,24 +342,30 @@ const MapPlannerPage = () => { { - const newStage = e.target.value; - if (newStage === "") { + const stage = e.target.value; + if (stage === "") { return; } - const newIsSalmonRunStage = !stages.includes(newStage as any); + + if (stage === "Blank") { + setBg({ stage }); + return; + } + + const newIsSalmonRunStage = !stages.includes(stage as any); const oldIsSalmonRunStage = !stages.includes(bg.stage as any); if (newIsSalmonRunStage === oldIsSalmonRunStage) { - setBg({ ...bg, stage: e.target.value }); + setBg({ ...bg, stage }); return; } if (newIsSalmonRunStage) { - setBg({ stage: e.target.value, tide: "mid" }); + setBg({ stage, tide: "mid" }); return; } - setBg({ stage: e.target.value, mode: "SZ", view: "M" }); + setBg({ stage, mode: "SZ", view: "M" }); }} currentBackground={bg} changeMode={(mode) => setBg({ ...bg, mode })} diff --git a/public/images/plannerMaps/Blank.png b/public/images/plannerMaps/Blank.png new file mode 100644 index 000000000..1441d78d2 Binary files /dev/null and b/public/images/plannerMaps/Blank.png differ