A theoretically working v3.

README.md

@@ -2,7 +2,7 @@
 
 The purpose of this website is to act as a questionnaire for worldbuilding purposes.
 
-Version two of the experiment brings in templates and a more modular approach to the UI.
+Version three of the experiment brings editing/saving/loading.
 
 ## Current State
 

package.json

@@ -13,8 +13,10 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@tsconfig/svelte": "^5.0.2",
+    "@types/object-inspect": "^1.8.4",
     "@typescript-eslint/eslint-plugin": "^6.17.0",
     "@typescript-eslint/parser": "^6.17.0",
+    "ajv": "^8.12.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.2",
@@ -24,11 +26,15 @@
     "sass": "^1.69.7",
     "svelte": "^4.2.8",
     "svelte-check": "^3.6.2",
+    "svelte-feather-icons": "^4.1.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
     "vite": "^5.0.11"
   },
   "dependencies": {
-    "docx": "^8.5.0"
+    "docx": "^8.5.0",
+    "feather-icons": "^4.29.1",
+    "hash-wasm": "^4.11.0",
+    "object-inspect": "^1.13.1"
   }
 }

src/App.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import Controls from "./lib/Controls.svelte";
   import ExportBlock from "./lib/ExportBlock.svelte";
+  import ImportModal from "./lib/ImportModal.svelte";
+  import PermissionModal from "./lib/PermissionModal.svelte";
   import Questionnaire from "./lib/Questionnaire.svelte";
   import ScrollButton from "./lib/ScrollButton.svelte";
   import { changed } from "./lib/store";
@@ -21,10 +23,9 @@
   <h2>What is this?</h2>
   <p>
     The purpose of this website is to act as a questionnaire for worldbuilding
-    purposes. This is v2 of the experiment, where I've added templates for
-    different things one might want to build, automatic generation of sections,
-    and collapsible sections. There is also change tracking for the sections, so
-    changing the template can't break things.
+    purposes. This is v3 of the experiment, where I've added
+    saving/loading/editing functionality. Import/export theoretically also
+    works. To export a template, you must now be in Edit Mode.
   </p>
 
   <p>
@@ -39,7 +40,6 @@
     >.
   </p>
   <hr />
-
   <div id="questionnaire">
     <Controls />
     <Questionnaire />
@@ -50,3 +50,5 @@
   <ExportBlock />
 </main>
 <ScrollButton />
+<PermissionModal />
+<ImportModal />

src/app.scss

@@ -141,3 +141,16 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+.edit-button {
+  padding: 0.25em;
+  background-color: color-mix(in srgb, #1a1a1a 55%, #09f 45%);
+  display: inline-flex;
+  place-items: center;
+  place-content: center;
+  gap: 0.25em;
+
+  @media (prefers-color-scheme: light) {
+    background-color: color-mix(in srgb, #f9f9f9 55%, #09f 45%);
+  }
+}