Merge pull request #16 from Arzte/wip/style-engine

Add menu to swap between different projects
ltouroumov · Jul 26, 2024 · 7d2dd5b · 7d2dd5b
2 parents fc15b00 + f0499ef
commit 7d2dd5b
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 70 deletions.
diff --git 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,11 @@
 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"></style>
+<style scoped lang="scss">
+.navbar {
+  position: sticky;
+}
+</style>
diff --git a/components/viewer/modal/ViewProjectMenu.vue b/components/viewer/modal/ViewProjectMenu.vue
@@ -0,0 +1,76 @@
+<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';
+import { useViewerStore } from '~/composables/store/viewer';
+
+const isLoading = ref<boolean>(false);
+
+const { projectList } = defineProps<{
+  projectList: ViewerProjectList;
+}>();
+
+const { loadProject, unloadProject } = useProjectStore();
+const { toggleProjectMenu } = useViewerStore();
+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);
+          toggleProjectMenu(false);
+        }
+      });
+    }
+    isLoading.value = false;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/css/bootstrap/config';
+</style>
diff --git 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) => {

diff --git 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
@@ -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
@@ -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">