feat: load session and display start button if not exists

app/src/components/game/HintPart.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import useSession from '../../store/session'
 import MarkdownText from '../MarkdownText.vue'
 
 const sessionStore = useSession()
 const current = ref(-1)
 watch(
-  () => sessionStore.session.hints,
+  () => sessionStore.session?.hints,
   (hints) => {
-    current.value = hints.length - 1
+    current.value = hints ? hints.length - 1 : -1
   },
   { deep: true }
 )
@@ -20,10 +20,18 @@ const left = () => {
 }
 
 const right = () => {
-  if (current.value < sessionStore.session.hints.length - 1) {
+  if (current.value < (sessionStore.session?.hints.length ?? 0) - 1) {
     current.value += 1
   }
 }
+
+const length = computed(() => {
+  return sessionStore.session?.hints.length ?? 0
+})
+
+const disabled = computed(() => {
+  return current.value === length.value - 1
+})
 </script>
 
 <template>
@@ -50,13 +58,13 @@ const right = () => {
         <p class="inline text-text font-xl w-1/14 p-2 m-1">{{ current + 1 }}</p>
         <p class="inline text-text font-xl w-1/14 p-2 m-1">/</p>
         <p class="inline text-text font-xl w-1/14 p-2 m-1">
-          {{ sessionStore.session.hints.length }}
+          {{ length }}
         </p>
         <button
           class="p-2 m-1 w-1/8"
           id="Rbutton"
           @click="right"
-          :disabled="current === sessionStore.session.hints.length - 1"
+          :disabled="disabled"
         >
           <font-awesome-icon :icon="['fas', 'arrow-right']" class="text-text" />
         </button>
@@ -65,7 +73,7 @@ const right = () => {
     <div id="hint" class="bg-bg p-8 overflow-y-auto">
       <ul>
         <li
-          v-for="response in sessionStore.session.responses[current]"
+          v-for="response in sessionStore.session?.responses[current]"
           :key="response.type"
           class="text-text font-xl whitespace-pre-wrap"
         >
@@ -74,7 +82,7 @@ const right = () => {
           </div>
         </li>
         <li
-          v-for="hint in sessionStore.session.hints[current]"
+          v-for="hint in sessionStore.session?.hints[current]"
           :key="hint"
           class="text-text-primary font-xl whitespace-pre-wrap"
         >

app/src/components/game/QuestPart.vue

@@ -6,7 +6,7 @@ import { Task } from '../../types'
 
 const sessionStore = useSession()
 const tasks = computed(() => {
-  return sessionStore.session.tasks.map((task: Task) => {
+  return sessionStore.session?.tasks.map((task: Task) => {
     const prefix = task.completed ? '✓' : '➤'
     const color = task.completed ? 'text-text-primary' : 'text-text'
     return {

app/src/components/game/StartButton.vue

@@ -1,31 +1,16 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
-import { onMounted, ref } from 'vue'
+import { computed } from 'vue'
 import useSession from '../../store/session'
 
-const props = defineProps({
-  questId: {
-    type: String,
-    required: true,
-  },
-})
-
 const toast = useToast()
-const showCover = ref(true)
 const sessionStore = useSession()
 
-onMounted(async () => {
-  sessionStore.setQuest(props.questId)
-  if (await sessionStore.getActiveSession()) {
-    showCover.value = false
-  }
-  sessionStore.setup()
-})
+const showCover = computed(() => sessionStore.session === null)
 
 const startSession = async () => {
   try {
     await sessionStore.createSession()
-    showCover.value = false
   } catch (err: any) {
     console.error(err)
     toast.error(err.message)

app/src/components/game/TreeChart.vue

@@ -10,6 +10,7 @@ const sessionStore = useSession()
     <ul>
       <li>
         <FileNode
+          v-if="sessionStore.session"
           :node="sessionStore.session.graph"
           :pwd="sessionStore.session.pwd"
         />