Add team creation, team join and debug login screen

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import TeamAddModal from '~/components/TeamAddModal.vue';
 import { useTitleStore } from '~/stores/title';
 
 const app = useNuxtApp();
-const { user } = useUserSession();
+const { loggedIn } = useUserSession();
 const localePath = useLocalePath();
 const { t } = useI18n();
 
@@ -10,7 +11,7 @@ const { name, id } = app.$slugData.huntSlug!;
 
 const titleStore = useTitleStore();
 
-const { data, pending } = await useFetch(`/api/hunt/${id}`);
+const { data, pending, refresh } = await useFetch(`/api/hunt/${id}`);
 
 const hideAnswers = ref(true);
 
@@ -20,26 +21,92 @@ useHead({
   })
 });
 
+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) }}</p>
-    <p v-if="data.end">End: {{ $d(data.end) }}</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>
-    <div class="flex flex-row gap-2" v-if="data.ownTeam !== null">
+    <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 />

app/pages/index.vue

@@ -1,8 +1,109 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const { loggedIn } = useUserSession();
+const { data, pending, refresh } = await useFetch('/api/home');
+
+watch(loggedIn, () => refresh());
+</script>
 
 <template>
   <h1 class="text-primary text-3xl">{{ $t('hello') }}</h1>
-  <VaButton icon="home" :to="$localePath('/hunt/bremer-stadtrallye-1')" />
+  <VaButton icon="refresh" @click="refresh" :disabled="pending" />
+
+  <div v-if="data">
+    <div v-if="data.own !== null">
+      <h2 class="my-4 text-2xl font-bold">Joined hunts:</h2>
+      <div class="lg-grid-cols-3 grid grid-cols-1 gap-4 md:grid-cols-2">
+        <VaCard
+          v-for="hunt in data.own"
+          :key="hunt.id"
+          stripe
+          :to="$localePath(`/hunt/${sluggy(hunt)}`)"
+        >
+          <VaCardTitle>{{ hunt.name }}</VaCardTitle>
+          <VaCardContent>
+            <h3 class="text-xl">{{ hunt.name }}</h3>
+            {{ hunt.description }}
+            <VaDivider />
+            <div class="flex flex-col gap-2">
+              <p>{{ hunt._count.quests }} Quests</p>
+              <p v-if="hunt.start">
+                Start:
+                {{
+                  $d(hunt.start, {
+                    dateStyle: 'medium',
+                    timeStyle: 'medium'
+                  })
+                }}
+              </p>
+              <p v-if="hunt.end">
+                End:
+                {{
+                  $d(hunt.end, {
+                    dateStyle: 'medium',
+                    timeStyle: 'medium'
+                  })
+                }}
+              </p>
+              <p>{{ hunt._count.teams }} teams joined!</p>
+            </div>
+          </VaCardContent>
+        </VaCard>
+        <VaCard v-if="data.own.length <= 0">
+          <VaCardTitle>No hunt joined yet</VaCardTitle>
+          <VaCardContent>Click on a hunt below and join them!</VaCardContent>
+        </VaCard>
+      </div>
+    </div>
+    <div v-else>
+      <VaButton color="info" icon="login" :to="$localePath(`/login`)"
+        >Login first</VaButton
+      >
+    </div>
+    <div class="mt-8">
+      <VaDivider />
+      <h2 class="my-4 text-2xl font-bold">Open to join hunts:</h2>
+      <div class="lg-grid-cols-3 grid grid-cols-1 gap-4 md:grid-cols-2">
+        <VaCard
+          v-for="hunt in data.others"
+          :key="hunt.id"
+          :to="$localePath(`/hunt/${sluggy(hunt)}`)"
+        >
+          <VaCardTitle>{{ hunt.name }}</VaCardTitle>
+          <VaCardContent>
+            <h3 class="text-xl">{{ hunt.name }}</h3>
+            {{ hunt.description }}
+            <VaDivider />
+            <div class="flex flex-col gap-2">
+              <p>{{ hunt._count.quests }} Quests</p>
+              <p v-if="hunt.start">
+                Start:
+                {{
+                  $d(hunt.start, {
+                    dateStyle: 'medium',
+                    timeStyle: 'medium'
+                  })
+                }}
+              </p>
+              <p v-if="hunt.end">
+                End:
+                {{
+                  $d(hunt.end, {
+                    dateStyle: 'medium',
+                    timeStyle: 'medium'
+                  })
+                }}
+              </p>
+              <p>{{ hunt._count.teams }} teams joined!</p>
+            </div>
+          </VaCardContent>
+        </VaCard>
+        <VaCard v-if="data.others.length <= 0">
+          <VaCardTitle>No hunt created yet</VaCardTitle>
+          <VaCardContent>New hunts will appear soon!</VaCardContent>
+        </VaCard>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>

app/pages/login.vue

@@ -1,9 +1,38 @@
 <script setup lang="ts">
+import { useRouter } from '#app';
+
 definePageMeta({
   middleware: ['guest']
 });
+
+const { fetch } = useUserSession();
+const router = useRouter();
+const route = useRoute();
+// TODO: remove this lol
+const { data } = await useFetch('/api/auth/test-list');
+
+async function login(id: number) {
+  await $fetch(`/api/auth/test?id=${id}`);
+
+  await fetch();
+
+  await router.push(
+    (route.query.to
+      ? typeof route.query.to === 'string'
+        ? route.query.to
+        : route.query.to[0]
+      : '/') || '/'
+  );
+}
 </script>
 
-<template><h1>login</h1></template>
+<template>
+  <h1>login</h1>
+  <div class="flex flex-col gap-2" v-if="data">
+    <VaButton v-for="user in data" :key="user.id" @click="login(user.id)"
+      >Login as "{{ user.name }}" {{ user.email }}</VaButton
+    >
+  </div>
+</template>
 
 <style scoped></style>