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

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

const app = useNuxtApp();
const { loggedIn } = useUserSession();
const localePath = useLocalePath();
const { t } = useI18n();

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

const titleStore = useTitleStore();

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

const hideAnswers = ref(true);

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

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

titleStore.title = data.value?.name;

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.name || name}"!`
  };
  const clipboardItem = new ClipboardItem(clipboardItemData);
  await navigator.clipboard.write([clipboardItem]);
}
</script>

<template>
  <h1 class="text-2xl">
    {{ data?.name || name }}
    <VaChip color="danger" v-if="data?.isMember">Admin</VaChip>
    <VaChip v-if="data?.totalScore" class="float-right" color="success"
      >Total points: {{ data!!.totalScore }}</VaChip
    >
  </h1>
  <div v-if="data">
    <p>{{ data.description }}</p>
    <p v-if="data.start">
      Start:
      {{
        $d(data.start, {
          dateStyle: 'medium',
          timeStyle: 'medium'
        })
      }}
    </p>
    <p v-if="data.end">
      End:
      {{
        $d(data.end, {
          dateStyle: 'medium',
          timeStyle: 'medium'
        })
      }}
    </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" @click="invite" class="ml-2"
        >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 @update="refresh" :hunt-id="data.id" />
        <TeamAddModal @update="refresh" :hunt-id="data.id" />
      </VaCardActions>
      <VaCardActions v-else>
        <VaButton
          color="info"
          icon="login"
          :to="$localePath(`/login?to=/hunt/${sluggy(data)}`)"
          >Login first</VaButton
        >
      </VaCardActions>
    </VaCard>
    <div class="flex flex-row gap-2" v-else>
      <VaSwitch v-model="hideAnswers" icon="image">Hide answers</VaSwitch>
    </div>
    <VaDivider />
    <div 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}`"
        :to="$localePath(`/hunt/${sluggy(data)}/${sluggy(quest)}`)"
        :stripe="quest.answer !== null"
        :stripe-color="
          quest.answer?.score && quest.answer?.score > 0 ? 'success' : 'primary'
        "
      >
        <VaCardTitle><QuestTags :quest="quest" /></VaCardTitle>
        <VaImage
          v-if="!hideAnswers && quest?.answer?.picture"
          :src="quest?.answer?.picture"
          class="h-32"
          fit="cover"
          lazy
        >
          <template #loader> <VaProgressCircle indeterminate /> </template
        ></VaImage>
        <VaCardContent>
          <p class="line-clamp-1">{{ quest.description }}</p>
          <div v-if="!hideAnswers && quest.answer?.text">
            <VaDivider />
            <p class="line-clamp-1">
              {{ quest.answer?.text }}
            </p>
          </div>
        </VaCardContent>
      </VaCard>
    </div>
  </div>
</template>

<style scoped></style>