Translate invite code and start help page

app/lang/de.json

@@ -132,7 +132,15 @@
       "no_picture_uploaded": "Kein Bild hochgeladen",
       "admin_unreviewed": "Admin ({count} unbewertet)",
       "quest_not_revealed": "Quests wurden noch nicht aufgedeckt!",
-      "quest_soon_reveal": "Bald werden alle {count} Quests aufgedeckt!"
+      "quest_soon_reveal": "Bald werden alle {count} Quests aufgedeckt!",
+      "invite_toast_title": "Einladungscode",
+      "invite_toast_message": "Einladungscode wurde in deine Zwischenablage kopiert! Teile ihn mit deinen neuen Teammitgliedern.",
+      "invite_toast_text": "Trete dem Team {team} mit dem Code \"{code}\" im Hunt \"{hunt}\" bei!"
+    },
+    "help": {
+      "title": "Hilfe",
+      "subtitle": "Hier sind einige Themen und Wörter erklärt. Wenn du weiterhin Fragen hast, wende dich bitte ans Admin Team!",
+      "head": "PicHunt Hilfe"
     }
   },
   "validation": {

app/lang/en.json

@@ -132,7 +132,15 @@
       "no_picture_uploaded": "No picture uploaded",
       "admin_unreviewed": "Admin ({count} unreviewed)",
       "quest_not_revealed": "Quests not revealed yet!",
-      "quest_soon_reveal": "Soon all {count} quests will be revealed!"
+      "quest_soon_reveal": "Soon all {count} quests will be revealed!",
+      "invite_toast_title": "Invite code",
+      "invite_toast_message": "Invite code was copied to your clipboard! Share it with your next team mates.",
+      "invite_toast_text": "Join team {team} with code \"{code}\" on hunt \"{hunt}\"!"
+    },
+    "help": {
+      "title": "Help",
+      "subtitle": "Here are some topics and words explained. If you still have questions, please contact the Admin Team!",
+      "head": "PicHunt Help"
     }
   },
   "validation": {

app/layouts/default.vue

@@ -35,6 +35,16 @@ const slugs = computed(() => checkSlug(route.params));
         <template #center>
           {{ titleStore.title || t('layouts.default_tile') }}</template
         >
+        <template #right>
+          <VaButton
+            round
+            icon="help"
+            :to="$localePath('/help')"
+            title="Help"
+            :preset="$localePath('/help') === route.path ? 'secondary' : ''"
+            :border-color="$localePath('/help') === route.path ? 'primary' : ''"
+          />
+        </template>
       </VaNavbar>
     </template>
 

app/pages/help.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { useTitleStore } from '~/stores/title';
+
+const { t } = useI18n();
+const titleStore = useTitleStore();
+useHead({
+  title: t('layouts.title', {
+    title: t('page.help.title')
+  })
+});
+titleStore.title = t('page.help.head');
+
+// TODO: add help texts
+</script>
+
+<template>
+  <div>
+    <h1 class="text-3xl">
+      {{ t('page.help.title') }}
+    </h1>
+    <p>
+      {{ t('page.help.subtitle') }}
+    </p>
+    <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <VaCard>
+        <VaCardTitle>PicHunt</VaCardTitle>
+        <VaCardContent class="flex flex-col gap-2">
+          <p>tolle seite für fotosafaris</p>
+        </VaCardContent>
+      </VaCard>
+
+      <VaCard>
+        <VaCardTitle>Hunts</VaCardTitle>
+        <VaCardContent class="flex flex-col gap-2">
+          <p>haben meistens zeitrahmen</p>
+          <p>abgaben danach können evtl nicht bewertet werden</p>
+        </VaCardContent>
+      </VaCard>
+
+      <VaCard>
+        <VaCardTitle>Teams</VaCardTitle>
+        <VaCardContent class="flex flex-col gap-2">
+          <p>anmeldung pro user erforderlich!</p>
+          <p>dann einladecode an user teilen und beitreten</p>
+          <p>im team gemeinsam antworten abgeben</p>
+          <p>bei problemen admins ansprechen</p>
+        </VaCardContent>
+      </VaCard>
+
+      <VaCard>
+        <VaCardTitle>Quests</VaCardTitle>
+        <VaCardContent class="flex flex-col gap-2">
+          <p>aufgabe, die mit foto zu lösen ist</p>
+          <p>manchmal ist auch antwortstext erforderlich</p>
+          <p>
+            manchmal gibts extra punkte, dann steht erklärt nach welchen
+            kriterien die vergeben werden
+          </p>
+        </VaCardContent>
+      </VaCard>
+
+      <VaCard stripe stripe-color="primary">
+        <VaCardTitle>Answers</VaCardTitle>
+        <VaCardContent class="flex flex-col gap-2">
+          <p>zusammen an antwort feilen "zwischenspeichern"</p>
+          <p>wird erst bewertet wenn finalisiert, dann nicht mehr änderbar</p>
+        </VaCardContent>
+      </VaCard>
+
+      <VaCard color="info">
+        <VaCardTitle>Reviews</VaCardTitle>
+        <VaCardContent class="flex flex-col gap-2">
+          <p>
+            admin team bewertet über den zeitraum alle finalisierten antworten
+          </p>
+          <p>vergibt punkte und prüft auf richtige antworten</p>
+        </VaCardContent>
+      </VaCard>
+
+      <VaCard>
+        <VaCardTitle>Showcase</VaCardTitle>
+        <VaCardContent class="flex flex-col gap-2">
+          <p>
+            nach Hunt gibt es showcase der besten antworten und siegerehrung
+          </p>
+        </VaCardContent>
+      </VaCard>
+    </div>
+  </div>
+</template>

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

@@ -7,6 +7,7 @@ const app = useNuxtApp();
 const { loggedIn } = useUserSession();
 const { t, d } = useI18n();
 const { tKey, hasKey, tSluggy } = useI18nKey();
+const { init } = useToast();
 
 const { name, id } = app.$slugData.huntSlug!;
 
@@ -30,14 +31,26 @@ 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}"!`
+    'text/plain': `${t('page.hunt.invite_toast_text', {
+      team: data.value.ownTeam.name,
+      code: data.value.ownTeam.password,
+      hunt: data.value ? tKey(data.value, 'name').value : name
+    })}
+
+${document.location.href}`
   };
   const clipboardItem = new ClipboardItem(clipboardItemData);
   await navigator.clipboard.write([clipboardItem]);
+
+  init({
+    title: t('page.hunt.invite_toast_title'),
+    message: t('page.hunt.invite_toast_message'),
+    color: 'success',
+    duration: 2000
+  });
 }
 </script>
 
@@ -47,7 +60,7 @@ async function invite() {
       {{ data ? tKey(data, 'name') : name }}
 
       <VaChip v-if="data?.totalScore" class="float-right" color="success">{{
-        t('page.hunt.total_points', data!!.totalScore)
+        t('page.hunt.total_points', { score: data!!.totalScore })
       }}</VaChip>
     </h1>
     <div class="grid w-full grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-6">
@@ -95,56 +108,66 @@ async function invite() {
       >
     </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">
-        {{
-          t('page.home.start', {
-            start: d(data.start, fullDate)
-          })
-        }}
-      </p>
-      <p v-if="data.end">
-        {{
-          t('page.home.end', {
-            start: d(data.end, fullDate)
-          })
-        }}
-      </p>
-      <p>
-        {{
-          t(
-            data.ownTeam !== null
-              ? 'page.hunt.team_count_joined'
-              : 'page.hunt.team_count',
-            data._count.teams
-          )
-        }}
-      </p>
-      <p v-if="data.ownTeam">
-        {{ t('page.hunt.your_team') }}
-        <span class="font-bold">{{ data.ownTeam.name }}</span>
-        <VaButton size="small" class="ml-2" @click="invite"
-          >{{ t('page.hunt.invite') }}
-          <span
-            class="font-mono font-bold text-white blur transition hover:blur-none active:blur-none"
-          >
-            {{ data.ownTeam.password }}</span
-          ></VaButton
-        >
-      </p>
+      <VaCard class="my-4">
+        <VaCardTitle>
+          {{ data ? tKey(data, 'name') : name }}
+        </VaCardTitle>
+        <ClickableImage
+          v-if="data?.picture"
+          :src="data?.picture?.url"
+          class="h-48"
+          :title="data ? tKey(data, 'name').value : name"
+        />
+        <VaCardContent>
+          <div class="mb-4 flex flex-col gap-2">
+            <p
+              v-for="(line, i) in tKey(data, 'description').value.split('\n')"
+              :key="i"
+            >
+              {{ line }}
+            </p>
+          </div>
+          <p v-if="data.start" class="text-xl">
+            {{
+              t('page.home.start', {
+                start: d(data.start, fullDate)
+              })
+            }}
+          </p>
+          <p v-if="data.end" class="text-xl">
+            {{
+              t('page.home.end', {
+                start: d(data.end, fullDate)
+              })
+            }}
+          </p>
+          <p>
+            {{
+              t(
+                data.ownTeam !== null
+                  ? 'page.hunt.team_count_joined'
+                  : 'page.hunt.team_count',
+                data._count.teams
+              )
+            }}
+          </p>
+          <div v-if="data.ownTeam" class="mt-4">
+            <p>
+              {{ t('page.hunt.your_team') }}
+              <span class="text-xl font-bold">{{ data.ownTeam.name }}</span>
+            </p>
+            <VaButton size="small" class="group" @click="invite"
+              >{{ t('page.hunt.invite') }}
+              <span
+                class="font-mono font-bold text-white blur transition hover:blur-none active:blur-none group-hover:blur-none"
+              >
+                {{ data.ownTeam.password }}</span
+              ></VaButton
+            >
+          </div>
+        </VaCardContent>
+      </VaCard>
+      <VaDivider />
       <VaCard
         v-if="data.ownTeam === null && !data.isMember"
         color="primary"
@@ -167,12 +190,11 @@ async function invite() {
           >
         </VaCardActions>
       </VaCard>
-      <div v-else-if="!data.isMember" class="flex flex-row gap-2">
+      <div v-else-if="!data.isMember" class="my-4 flex flex-row gap-2">
         <VaSwitch v-model="hideAnswers" icon="image">{{
           t('page.hunt.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"