Add import and export functionality

src/routes/+page.svelte

@@ -3,6 +3,11 @@
     import type { Adventure } from '$lib/utils/types';
     import { addAdventure, getAdventures, getNextId, removeAdventure ,saveEdit } from "../services/adventureService";
     import { onMount } from 'svelte';
+    import { exportData } from "../services/export";
+    import { importData } from "../services/import";
+
+    import mapDrawing from "$lib/assets/adventure_map.svg"
+
 
     let newName = '';
     let newLocation = '';
@@ -52,6 +57,8 @@
             editCreated = adventure.created;
         }
     }
+
+
     
 </script>
 
@@ -66,7 +73,11 @@
 {/each}
 
 {#if adventures.length == 0}
-<span class="addsomething">Add some adventures!</span>
+<div class="addsomething">
+    <h2>Add some adventures!</h2>
+    <img src={mapDrawing} width="25%" alt="Logo" />
+</div >
+
 {/if}
 
 {#if !Number.isNaN(editId)}
@@ -78,9 +89,12 @@
     </form>
 {/if}
 
+<button on:click={async () => { window.location.href = exportData(); }}>Save as File</button>
+
 <style>
 .addsomething {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 90vh;

src/services/adventureService.ts

@@ -18,6 +18,10 @@ export function getNextId() {
     return nextId;
 }
 
+export function setAdventures(importArray: Adventure[]) {
+    adventures = importArray
+}
+
 export function addAdventure(adventure: Adventure) {
     adventures = [...adventures, adventure];
     if (isBrowser) {

src/services/export.ts

@@ -0,0 +1,11 @@
+import type { Adventure } from '$lib/utils/types';
+import { getAdventures } from './adventureService';
+
+export function exportData() {
+    let adventures: Adventure[] = getAdventures()
+    let jsonArray = JSON.stringify(adventures)
+    console.log(jsonArray)
+    let blob = new Blob([jsonArray], {type: "application/json"});
+    let url = URL.createObjectURL(blob);
+    return url
+}

src/services/import.ts

@@ -0,0 +1,12 @@
+import type { Adventure } from '$lib/utils/types';
+import { setAdventures } from './adventureService';
+
+export function importData(file:File) {
+    let reader = new FileReader();
+    reader.onload = function() {
+        let importArray: Adventure[] = JSON.parse(reader.result as string);
+        setAdventures(importArray);
+    }
+    reader.readAsText(file);
+    
+}