From 89c0021335970276283965cfca1d921631853b72 Mon Sep 17 00:00:00 2001
From: Iris Hoffmeyer <hoffmeyer25@gmail.com>
Date: Thu, 11 Jul 2024 21:31:32 -0400
Subject: [PATCH 1/3] Fix navbar not being sticky enough

The css class navbar can sometimes overright the position property of sticky-top if sticky-top and navbar are used in the same html element.

Rather than unnecessarily wrapping the narbar in another element, we just add overright the position for navbar's class.
---
 components/viewer/ViewMenuBar.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/viewer/ViewMenuBar.vue b/components/viewer/ViewMenuBar.vue
index b6edf25..8d876c6 100644
--- a/components/viewer/ViewMenuBar.vue
+++ b/components/viewer/ViewMenuBar.vue
@@ -28,4 +28,8 @@ import { useViewerStore } from '~/composables/store/viewer';
 const { toggleBackpack, toggleSearch } = useViewerStore();
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.navbar {
+  position: sticky;
+}
+</style>

From 9449aeda7c26462d24ed28dee9d84719983254bb Mon Sep 17 00:00:00 2001
From: Iris Hoffmeyer <hoffmeyer25@gmail.com>
Date: Wed, 17 Jul 2024 18:57:34 -0400
Subject: [PATCH 2/3] Add a menu to swap projects

It probably could use work style wise (eg centering) but I don't really feel like figuring that out.
---
 components/viewer/ViewMenuBar.vue           |  7 +-
 components/viewer/modal/ViewProjectMenu.vue | 73 ++++++++++++++++++
 composables/store/viewer.ts                 | 36 +++++++++
 composables/viewer.ts                       |  8 ++
 pages/index.vue                             | 83 ++++-----------------
 5 files changed, 138 insertions(+), 69 deletions(-)
 create mode 100644 components/viewer/modal/ViewProjectMenu.vue
 create mode 100644 composables/viewer.ts

diff --git a/components/viewer/ViewMenuBar.vue b/components/viewer/ViewMenuBar.vue
index 8d876c6..1eb7a38 100644
--- a/components/viewer/ViewMenuBar.vue
+++ b/components/viewer/ViewMenuBar.vue
@@ -4,7 +4,10 @@
   >
     <div class="container-fluid">
       <div class="d-flex flex-row items-center">
-        <button class="btn btn-light btn-lg i-solar-hamburger-menu-outline" />
+        <button
+          class="btn btn-light btn-lg i-solar-hamburger-menu-outline"
+          @click="toggleProjectMenu(true)"
+        />
       </div>
       <ViewScoreStatus />
       <div class="d-flex gap-1">
@@ -25,7 +28,7 @@
 import ViewScoreStatus from '~/components/viewer/ViewScoreStatus.vue';
 import { useViewerStore } from '~/composables/store/viewer';
 
-const { toggleBackpack, toggleSearch } = useViewerStore();
+const { toggleBackpack, toggleSearch, toggleProjectMenu } = useViewerStore();
 </script>
 
 <style scoped lang="scss">
diff --git a/components/viewer/modal/ViewProjectMenu.vue b/components/viewer/modal/ViewProjectMenu.vue
new file mode 100644
index 0000000..c4ba5d8
--- /dev/null
+++ b/components/viewer/modal/ViewProjectMenu.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="dialog-container">
+    <div class="dialog bg-dark-subtle text-light">
+      <h5>Default Files</h5>
+      <ul class="list-group mb-3">
+        <li
+          v-for="projects in projectList.items"
+          :key="projects.title"
+          class="list-group-item"
+        >
+          <a
+            href="#"
+            :data-fileurl="projects.remoteFileUrl"
+            @click.prevent="loadRemoteFile"
+          >
+            {{ projects.title }}
+          </a>
+        </li>
+      </ul>
+      <div
+        v-if="isLoading"
+        class="d-flex align-items-center justify-content-start gap-3 mb-3"
+      >
+        <div class="spinner-border text-primary" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+        <strong>Loading ...</strong>
+      </div>
+
+      <h5>Load File</h5>
+      <LoadProject />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ViewerProjectList } from 'composables/viewer';
+import { useProjectRefs, useProjectStore } from '~/composables/store/project';
+
+const isLoading = ref<boolean>(false);
+
+const { projectList } = defineProps<{
+  projectList: ViewerProjectList;
+}>();
+
+const { loadProject, unloadProject } = useProjectStore();
+const { isLoaded } = useProjectRefs();
+
+const loadRemoteFile = async ({ target }: MouseEvent) => {
+  if (target && target instanceof HTMLAnchorElement) {
+    const fileURL = target.dataset.fileurl;
+    if (!fileURL) return;
+    isLoading.value = true;
+    const result: any = await $fetch(fileURL, { parseResponse: JSON.parse });
+    if (!isLoaded.value) {
+      loadProject(result, fileURL);
+    } else {
+      unloadProject();
+      // Wait for the unloadProject to finish before loading the new project
+      nextTick(() => {
+        if (!isLoaded.value) {
+          loadProject(result, fileURL);
+        }
+      });
+    }
+    isLoading.value = false;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/css/bootstrap/config';
+</style>
diff --git a/composables/store/viewer.ts b/composables/store/viewer.ts
index 9d4128a..15f06c0 100644
--- a/composables/store/viewer.ts
+++ b/composables/store/viewer.ts
@@ -1,8 +1,37 @@
 import { defineStore, storeToRefs } from 'pinia';
 
+import { ViewerProjectList } from '~/composables/viewer';
+
 export const useViewerStore = defineStore('viewer', () => {
   const isBackpackVisible = ref<boolean>(false);
   const isSearchVisible = ref<boolean>(false);
+  const isProjectMenuVisible = ref<boolean>(false);
+
+  const viewerProjectList = ref<ViewerProjectList>({
+    items: [
+      {
+        remoteFileUrl:
+          'https://raw.githubusercontent.com/ltouroumov/worm-cyoa-v6-fork/master/extract-v6.0.json',
+        title: "Worm V6.0 (Pixel's Version)",
+      },
+      {
+        remoteFileUrl:
+          'https://raw.githubusercontent.com/ltouroumov/worm-cyoa-v6-fork/master/extract-v6.1.json',
+        title: "Worm V6.1 (Pixel's Version)",
+      },
+      {
+        remoteFileUrl:
+          'https://raw.githubusercontent.com/ltouroumov/worm-cyoa-v6-fork/master/project-v17.json',
+        title: "Worm V6 (Lt's Fork)",
+      },
+      {
+        remoteFileUrl:
+          'https://raw.githubusercontent.com/ltouroumov/pathfinder-cyoa/main/project-v0.json',
+        title: 'Pathfinder CYOA (WIP by Lt Ouroumov)',
+      },
+      // Add more projects...
+    ],
+  });
 
   const toggleBackpack = (set?: boolean) => {
     isBackpackVisible.value = set ?? !isBackpackVisible.value;
@@ -12,11 +41,18 @@ export const useViewerStore = defineStore('viewer', () => {
     isSearchVisible.value = set ?? !isSearchVisible.value;
   };
 
+  const toggleProjectMenu = (set?: boolean) => {
+    isProjectMenuVisible.value = set ?? !isProjectMenuVisible.value;
+  };
+
   return {
     isBackpackVisible,
     isSearchVisible,
+    isProjectMenuVisible,
+    viewerProjectList,
     toggleBackpack,
     toggleSearch,
+    toggleProjectMenu,
   };
 });
 
diff --git a/composables/viewer.ts b/composables/viewer.ts
new file mode 100644
index 0000000..17b928a
--- /dev/null
+++ b/composables/viewer.ts
@@ -0,0 +1,8 @@
+export type ViewerProject = {
+  remoteFileUrl: string;
+  title: string;
+};
+
+export type ViewerProjectList = {
+  items: ViewerProject[];
+};
diff --git a/pages/index.vue b/pages/index.vue
index 59e08fe..c00e644 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -13,87 +13,36 @@
     <StyleProject :styles="project.data.styling" />
     <ViewBackpack />
     <ViewSearch />
+    <ModalDialog :show="isProjectMenuVisible" @close="toggleProjectMenu(false)">
+      <template #header>
+        <h5 class="m-0">Project Menu</h5>
+      </template>
+      <template #default>
+        <ViewProjectMenu :project-list="projectList" />
+      </template>
+    </ModalDialog>
   </div>
   <div v-else class="dialog-container">
-    <div class="dialog bg-dark-subtle text-light">
-      <h5>Default Files</h5>
-      <ul class="list-group mb-3">
-        <li class="list-group-item">
-          <a
-            href="#"
-            data-fileurl="https://raw.githubusercontent.com/ltouroumov/worm-cyoa-v6-fork/master/extract-v6.0.json"
-            @click.prevent="loadRemoteFile"
-          >
-            Worm V6.0 (Pixel's Version)
-          </a>
-        </li>
-        <li class="list-group-item">
-          <a
-            href="#"
-            data-fileurl="https://raw.githubusercontent.com/ltouroumov/worm-cyoa-v6-fork/master/extract-v6.1.json"
-            @click.prevent="loadRemoteFile"
-          >
-            Worm V6.1 (Pixel's Version)
-          </a>
-        </li>
-        <li class="list-group-item">
-          <a
-            href="#"
-            data-fileurl="https://raw.githubusercontent.com/ltouroumov/worm-cyoa-v6-fork/master/project-v17.json"
-            @click.prevent="loadRemoteFile"
-          >
-            Worm V6 (Lt's Fork)
-          </a>
-        </li>
-        <li class="list-group-item">
-          <a
-            href="#"
-            data-fileurl="https://raw.githubusercontent.com/ltouroumov/pathfinder-cyoa/main/project-v0.json"
-            @click.prevent="loadRemoteFile"
-          >
-            Pathfinder CYOA (WIP by Lt Ouroumov)
-          </a>
-        </li>
-      </ul>
-      <div
-        v-if="isLoading"
-        class="d-flex align-items-center justify-content-start gap-3 mb-3"
-      >
-        <div class="spinner-border text-primary" role="status">
-          <span class="visually-hidden">Loading...</span>
-        </div>
-        <strong>Loading ...</strong>
-      </div>
-
-      <h5>Load File</h5>
-      <LoadProject />
-    </div>
+    <ViewProjectMenu :project-list="projectList" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from '#imports';
 import ViewBackpack from '~/components/viewer/modal/ViewBackpack.vue';
+import ViewProjectMenu from '~/components/viewer/modal/ViewProjectMenu.vue';
 import ViewSearch from '~/components/viewer/modal/ViewSearch.vue';
 import StyleProject from '~/components/viewer/style/StyleProject.vue';
 import ViewMenuBar from '~/components/viewer/ViewMenuBar.vue';
-import { useProjectRefs, useProjectStore } from '~/composables/store/project';
+import { useProjectRefs } from '~/composables/store/project';
+import { useViewerRefs, useViewerStore } from '~/composables/store/viewer';
 
-const { loadProject } = useProjectStore();
 const { project } = useProjectRefs();
+const { viewerProjectList } = useViewerRefs();
 
-const isLoading = ref<boolean>(false);
+const projectList = computed(() => viewerProjectList.value);
 
-const loadRemoteFile = async ({ target }: MouseEvent) => {
-  if (target && target instanceof HTMLAnchorElement) {
-    const fileURL = target.dataset.fileurl;
-    if (!fileURL) return;
-    isLoading.value = true;
-    const result: any = await $fetch(fileURL, { parseResponse: JSON.parse });
-    loadProject(result, fileURL);
-    isLoading.value = false;
-  }
-};
+const { toggleProjectMenu } = useViewerStore();
+const { isProjectMenuVisible } = useViewerRefs();
 </script>
 
 <style lang="scss">

From f0499ef1999c1982614cb501247c648d9b22afb5 Mon Sep 17 00:00:00 2001
From: Iris Hoffmeyer <hoffmeyer25@gmail.com>
Date: Wed, 17 Jul 2024 19:59:50 -0400
Subject: [PATCH 3/3] Remove selections when unloading project

Also make sure the project menu is set to false so it can't get into a bad state if the modal is closed by loadProject.
---
 components/viewer/modal/ViewProjectMenu.vue | 3 +++
 composables/store/project.ts                | 1 +
 2 files changed, 4 insertions(+)

diff --git a/components/viewer/modal/ViewProjectMenu.vue b/components/viewer/modal/ViewProjectMenu.vue
index c4ba5d8..b01b1a1 100644
--- a/components/viewer/modal/ViewProjectMenu.vue
+++ b/components/viewer/modal/ViewProjectMenu.vue
@@ -36,6 +36,7 @@
 <script setup lang="ts">
 import { ViewerProjectList } from 'composables/viewer';
 import { useProjectRefs, useProjectStore } from '~/composables/store/project';
+import { useViewerStore } from '~/composables/store/viewer';
 
 const isLoading = ref<boolean>(false);
 
@@ -44,6 +45,7 @@ const { projectList } = defineProps<{
 }>();
 
 const { loadProject, unloadProject } = useProjectStore();
+const { toggleProjectMenu } = useViewerStore();
 const { isLoaded } = useProjectRefs();
 
 const loadRemoteFile = async ({ target }: MouseEvent) => {
@@ -60,6 +62,7 @@ const loadRemoteFile = async ({ target }: MouseEvent) => {
       nextTick(() => {
         if (!isLoaded.value) {
           loadProject(result, fileURL);
+          toggleProjectMenu(false);
         }
       });
     }
diff --git a/composables/store/project.ts b/composables/store/project.ts
index ac58e26..5761fdd 100644
--- a/composables/store/project.ts
+++ b/composables/store/project.ts
@@ -78,6 +78,7 @@ export const useProjectStore = defineStore('project', () => {
   };
   const unloadProject = () => {
     project.value = null;
+    selected.value = {};
   };
 
   const setSelected = (id: string, isSelected: boolean) => {