Add blank canvas option for Map Planner

Closes #483

components/plans/StageSelector.tsx

@@ -43,13 +43,15 @@ const StageSelector: React.FC<StageSelectorProps> = ({
         {salmonRunStages
           .concat(stages)
           .sort((a, b) => a.localeCompare(b))
+          .concat(["Blank"])
           .map((stage) => (
             <option key={stage} value={stage}>
               {i18n._(stage)}
             </option>
           ))}
       </Select>
-      {currentBackground.tide ? (
+      {!currentBackground.tide &&
+      !currentBackground.mode ? null : currentBackground.tide ? (
         <>
           <HStack my={4} display="flex" justifyContent="center">
             <Flex flexDir="column" alignItems="center">

pages/plans.tsx

@@ -54,6 +54,9 @@ const stageToCode = new Map<string, string>([
 ]);
 
 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 = () => {
         </Flex>
         <StageSelector
           handleChange={(e) => {
-            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 })}