Implement map

frontend/src/pages/mining/Mining.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    import Navbar from "../../Navbar.svelte";
+
+    import {
+        Unmined,
+        type UnminedOptions,
+        type UnminedRegions,
+    } from "./unmined";
+
+    export let id = "map";
+
+    let unmined = new Unmined();
+
+    type Metadata = {
+        properties: UnminedOptions;
+        regions: UnminedRegions;
+    };
+
+    async function get_metadata() {
+        let resp = await fetch("map/metadata.js");
+        let code = await resp.text();
+        let meta = Function(code).call({}); // TODO possibly vulnerable to prototype pollution
+        return meta;
+    }
+
+    function setupMap(node: HTMLDivElement, metadata: Metadata) {
+        unmined.map(node.id, metadata.properties, metadata.regions);
+
+        return {
+            destroy() {
+                if (unmined.openlayersMap) {
+                    unmined.openlayersMap.setTarget(null);
+                    unmined.openlayersMap = null;
+                }
+            },
+        };
+    }
+</script>
+
+<div class="map-outer">
+    <Navbar />
+    {#await get_metadata() then metadata}
+        <div class="map-target" {id} use:setupMap={metadata} />
+    {:catch err}
+        <div class="container">
+            <article class="message is-danger mt-5">
+                <div class="message-header">
+                    <p>Error loading map</p>
+                </div>
+                <div class="message-body">
+                    <p>Something went wrong:</p>
+                    <figure>
+                        <pre>{err}</pre>
+                    </figure>
+                </div>
+            </article>
+        </div>
+    {/await}
+</div>
+
+<style>
+    .map-outer {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+    }
+    .map-target {
+        flex-grow: 1;
+        background-color: #e2e2e2;
+    }
+</style>