pichunt/app/pages/hunt/[huntSlug]/index.vue

<script setup lang="ts">
import TeamAddModal from '~/components/TeamAddModal.vue';
import { useTitleStore } from '~/stores/title';
import { fullDate } from '~~/server/utils/date';

const app = useNuxtApp();
const { loggedIn } = useUserSession();
const { t, d } = useI18n();
const { tKey, hasKey, tSluggy } = useI18nKey();

const { name, id } = app.$slugData.huntSlug!;

const titleStore = useTitleStore();

const { data, pending, refresh, error } = await useFetch(`/api/hunt/${id}`);

const hideAnswers = ref(true);

useHead({
  title: t('layouts.title', {
    title: hasKey(data.value, 'name') ? tKey(data.value!, 'name').value : name
  })
});

watch(loggedIn, () => refresh());

titleStore.title = data.value ? tKey(data.value, 'name').value : undefined;

async function invite() {
  if (!data.value?.ownTeam) {
    return;
  }

  const clipboardItemData = {
    // TODO: add invite link
    // 'text/plain': `https://pichunt.syma.dev/hunt/${id}/join?id=${data.value.ownTeam.id}&pw=${data.value.ownTeam.password}`
    'text/plain': `Join team ${data.value.ownTeam.name} with code "${data.value.ownTeam.password}" on hunt "${data.value ? tKey(data.value, 'name').value : name}"!`
  };
  const clipboardItem = new ClipboardItem(clipboardItemData);
  await navigator.clipboard.write([clipboardItem]);
}
</script>

<template>
  <div>
    <h1 class="text-2xl">
      {{ data ? tKey(data, 'name') : name }}

      <VaChip v-if="data?.totalScore" class="float-right" color="success"
        >Total points: {{ data!!.totalScore }}</VaChip
      >
    </h1>
    <div class="grid w-full grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-6">
      <VaButton
        icon="replay"
        :disabled="pending"
        title="Refresh"
        @click="refresh"
        >Refresh</VaButton
      >

      <VaButton
        v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
        color="success"
        icon="leaderboard"
        :to="$localePath(`/hunt/${tSluggy(data).value}/showcase`)"
        >Showcase</VaButton
      >
      <VaButton
        v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
        color="success"
        icon="collections"
        :to="$localePath(`/hunt/${tSluggy(data).value}/diashow`)"
        >Diashow</VaButton
      >
      <VaButton
        v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
        color="success"
        icon="auto_awesome_mosaic"
        :to="$localePath(`/hunt/${tSluggy(data).value}/pictures`)"
        >All pictures</VaButton
      >
      <VaButton
        v-if="data?.isMember"
        color="danger"
        icon="edit"
        :to="$localePath(`/hunt/${tSluggy(data).value}/admin`)"
        >Admin</VaButton
      ><VaButton
        v-if="data?.isMember"
        color="danger"
        icon="groups"
        :to="$localePath(`/hunt/${tSluggy(data).value}/teams`)"
        >Teams</VaButton
      >
    </div>
    <div v-if="data">
      <div class="flex flex-col gap-2">
        <p
          v-for="(line, i) in tKey(data, 'description').value.split('\n')"
          :key="i"
        >
          {{ line }}
        </p>
      </div>
      <ClickableImage
        v-if="data?.picture"
        :src="data?.picture?.url"
        class="h-48"
        :title="data ? tKey(data, 'name').value : name"
      />
      <p v-if="data.start">
        Start:
        {{ d(data.start, fullDate) }}
      </p>
      <p v-if="data.end">
        End:
        {{ d(data.end, fullDate) }}
      </p>
      <p>
        {{ data._count.teams }} teams joined{{
          data.ownTeam !== null ? ', just like you' : ', unlike you'
        }}!
      </p>
      <p v-if="data.ownTeam">
        Your team: <span class="font-bold">{{ data.ownTeam.name }}</span>
        <VaButton size="small" class="ml-2" @click="invite"
          >Invite:
          <span
            class="font-mono font-bold text-white blur transition hover:blur-none active:blur-none"
          >
            {{ data.ownTeam.password }}</span
          ></VaButton
        >
      </p>
      <VaCard
        v-if="data.ownTeam === null && !data.isMember"
        color="primary"
        class="mb-16 mt-8"
      >
        <VaCardTitle>Join this hunt!</VaCardTitle>
        <VaCardContent class="text-2xl"
          >To join this hunt you need to join or create a team:</VaCardContent
        >
        <VaCardActions v-if="data.loggedIn">
          <TeamJoinModal :hunt-id="data.id" @update="refresh" />
          <TeamAddModal :hunt-id="data.id" @update="refresh" />
        </VaCardActions>
        <VaCardActions v-else>
          <VaButton
            color="info"
            icon="login"
            :to="$localePath(`/login?to=/hunt/${tSluggy(data).value}`)"
            >Login first</VaButton
          >
        </VaCardActions>
      </VaCard>
      <div v-else-if="!data.isMember" class="flex flex-row gap-2">
        <VaSwitch v-model="hideAnswers" icon="image">Hide answers</VaSwitch>
      </div>
      <VaDivider />
      <div
        v-if="data.revealQuests || data.isMember"
        class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4"
      >
        <VaCard
          v-for="quest in data.quests"
          :key="`q-${quest.id}`"
          stripe
          :stripe-color="
            (quest.answer?.review?.score && quest.answer?.review?.score > 0) ||
            quest.answer?.final
              ? 'success'
              : !!quest.answer
                ? 'warning'
                : 'primary'
          "
        >
          <VaCardTitle><QuestTags :quest="quest" /></VaCardTitle>
          <VaImage
            v-if="!hideAnswers"
            :src="quest?.answer?.picture?.url ?? ''"
            fallback-text="No picture uploaded"
            class="h-32"
            fit="cover"
            lazy
          >
            <template #loader> <VaProgressCircle indeterminate /> </template
          ></VaImage>
          <VaCardContent>
            <p class="line-clamp-2 h-12">{{ tKey(quest, 'description') }}</p>

            <div v-if="!hideAnswers && quest.answer?.text">
              <VaDivider />
              <p class="line-clamp-1">{{ quest.answer?.text }}</p>
            </div>
          </VaCardContent>
          <VaCardActions>
            <VaButton
              :to="
                $localePath(
                  `/hunt/${tSluggy(data).value}/${tSluggy(quest).value}`
                )
              "
              color="primary"
              icon="rate_review"
              class="flex-grow"
              >Open</VaButton
            >
            <VaButton
              v-if="data.isMember"
              color="danger"
              :icon="(quest.unreviewed || 0) > 0 ? 'priority_high' : undefined"
              :to="
                $localePath(
                  `/hunt/${tSluggy(data).value}/${tSluggy(quest).value}/admin`
                )
              "
              >Admin ({{ quest.unreviewed || 0 }} unreviewed)</VaButton
            >
          </VaCardActions>
        </VaCard>
      </div>
      <VaCard v-else color="warning" class="mt-4"
        ><VaCardTitle>Quests not revealed yet!</VaCardTitle>
        <VaCardContent
          >Soon all {{ data._count.quests }} quests will be
          revealed!</VaCardContent
        >
      </VaCard>
    </div>

    <div v-if="error">
      <h1 class="mt-8 text-3xl">{{ t(parseError(error)) }}</h1>
      <VaButton icon="arrow_back" :to="$localePath(`/`)">Back home</VaButton>
    </div>
  </div>
</template>

<style scoped></style>