Add warning map border overlays and feathered fills

web/src/pages/warnings/Warnings.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, createResource, createSignal, For, onMount, Show } from 'solid-js';
+import { createEffect, createMemo, createResource, createSignal, For, Show } from 'solid-js';
 import { apiHost } from '../../consts';
 import { download } from '../../helpers/download';
 import { LoadingSpinner } from '../../components/spinner/LoadingSpinner';
@@ -19,7 +19,7 @@ export function Warnings() {
     const [title, setTitle] = createSignal('');
     const [selectedDate, setSelectedDate] = createSignal('all');
     const [phenomenon, setPhenomenon] = createSignal('all');
-    const [background, setBackground] = createSignal<HTMLImageElement>();
+    const [artwork, setArtwork] = createSignal<{ background: HTMLImageElement; border: HTMLImageElement }>();
     const [data, { refetch }] = createResource(fetchWarnings);
     let canvas!: HTMLCanvasElement;
 
@@ -33,24 +33,33 @@ export function Warnings() {
         return dateMatches && phenomenonMatches;
     }));
 
-    const loadBackground = () => {
-        const image = new Image();
-        image.onload = () => setBackground(image);
-        image.src = template().map;
+    const loadArtwork = () => {
+        const current = template();
+        setArtwork(undefined);
+        const background = new Image();
+        const border = new Image();
+        let loaded = 0;
+        const finish = () => {
+            loaded += 1;
+            if (loaded === 2 && template() === current) setArtwork({ background, border });
+        };
+        background.onload = finish;
+        border.onload = finish;
+        background.src = current.map;
+        border.src = current.border;
     };
 
-    onMount(loadBackground);
-    createEffect(() => { output(); loadBackground(); });
+    createEffect(() => { output(); loadArtwork(); });
     createEffect(() => {
-        const image = background();
+        const images = artwork();
         const current = template();
         const warnings = filteredWarnings();
         const currentTitle = title();
-        if (!canvas || !image) return;
+        if (!canvas || !images) return;
         if (canvas.width !== current.width) canvas.width = current.width;
         if (canvas.height !== current.height) canvas.height = current.height;
         void document.fonts.load(`700 ${current.title.fontSize}px Monda`).then(() =>
-            drawWarningMap(canvas.getContext('2d')!, image, current, warnings, currentTitle),
+            drawWarningMap(canvas.getContext('2d')!, images.background, images.border, current, warnings, currentTitle),
         );
     });