aboutsummaryrefslogtreecommitdiffstats
path: root/components/loader/LoaderFileSystemButton.vue
blob: 58c470c68a957fc30c50c1b08f902f91b3185169 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script setup lang="ts">
import type LoaderFileSystemModal from './LoaderFileSystemModal.vue';

const loaderStore = useLoaderStore();

const { canUseFsApi } = getBrowserCapabilities();

const fileSystemModal = ref<InstanceType<typeof LoaderFileSystemModal> | null>(null);

const openFileSystemPrompt = async () => {
  fileSystemModal.value?.open();
  loaderStore.setFileSystemLoaderStatus('pending');
  const dirHandle = await openFileSystem();
  if (!dirHandle) {
    loaderStore.setFileSystemLoaderStatus('inactive');
    return;
  }
  loaderStore.setPath(dirHandle.name);
  loaderStore.setFileSystemLoaderStatus('loaded');
  try {
    const { categories, quests, items } = await enumerateQuestDirectory(dirHandle);
    loaderStore.setCategories(categories);
    loaderStore.setQuests(quests);
    loaderStore.setItems(items);
    loaderStore.setFileSystemLoaderStatus('valid');
  } catch (e) {
    console.error(e);
    loaderStore.setFileSystemLoaderStatus('invalid');
  }
};
</script>

<template>
  <ClientOnly>
    <Button
      type="solid"
      :icon="['fas', 'folder-open']"
      label="Load"
      @click="openFileSystemPrompt"
      :disabled="!canUseFsApi"
    />

    <LoaderFileSystemModal ref="fileSystemModal" />
  </ClientOnly>
</template>