linux-odyssey/app/src/components/game/QuestPart.vue

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { computed } from 'vue'
import MarkdownText from '../MarkdownText.vue'
import { useSession } from '../../store/session'

const { t } = useI18n()

const sessionStore = useSession()
const tasks = computed(() => {
  console.log('session', sessionStore.session)
  return sessionStore.session?.tasks.map((task) => {
    const prefix = task.completed ? '✓' : '➤'
    const color = task.completed ? 'text-text-primary' : 'text-text'
    return {
      ...task,
      class: `${color} markdown-content`,
      content: `${prefix} ${task.name}`,
    }
  })
})
</script>

<template>
  <div class="h-full w-full max-h-full">
    <p id="topic" class="text-text font-black" v-if="sessionStore.quest">
      {{ sessionStore.quest.title }}
    </p>
    <br />
    <div>
      <div v-if="sessionStore.quest" class="whitespace-pre-wrap">
        <MarkdownText
          class="text-text markdown-content"
          :content="sessionStore.quest.instruction"
        />
        <br />
        <p id="tasks" class="text-text font-bold">{{ t('game.task') }}</p>
        <ul v-if="sessionStore.session">
          <li v-for="task in tasks" :key="task.id">
            <MarkdownText :class="task.class" :content="task.content" />
          </li>
        </ul>
      </div>
      <p class="text-text" v-else>{{ t('game.loading') }}</p>
    </div>
  </div>
</template>