feat(about): about page with every role (#53)

antoinezanardi · Jan 27, 2024 · 2233d28 · 2233d28
1 parent 0c93a31
commit 2233d28
Show file tree

Hide file tree

Showing 73 changed files with 6,347 additions and 2,946 deletions.
diff --git a/assets/css/google-fonts.css b/assets/css/google-fonts.css
@@ -0,0 +1,8 @@
+/* https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%C3%80%C3%81%C3%82%C3%83%C3%84%C3%85%C3%86%C3%87%C3%88%C3%89%C3%8A%C3%8B%C3%8C%C3%8D%C3%8E%C3%8F%C3%90%C3%91%C3%92%C3%93%C3%94%C3%95%C3%96%C3%98%C3%99%C3%9A%C3%9B%C3%9C%C3%9D%C3%9E%C3%9F%C3%A0%C3%A1%C3%A2%C3%A3%C3%A4%C3%A5%C3%A6%C3%A7%C3%A8%C3%A9%C3%AA%C3%AB%C3%AC%C3%AD%C3%AE%C3%AF%C3%B0%C3%B1%C3%B2%C3%B3%C3%B4%C3%B5%C3%B6%C3%B8%C3%B9%C3%BA%C3%BB%C3%BC%C3%BD%C3%BE%C3%BF0123456789.,;:!?'%22%E2%84%A2 */
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 300 700;
+  font-display: swap;
+  src: url('../fonts/Quicksand-300_700-1.woff2') format('woff2');
+}
diff --git a/assets/fonts/Quicksand-300_700-1.woff2 b/assets/fonts/Quicksand-300_700-1.woff2
diff --git a/assets/scss/_anchors.scss b/assets/scss/_anchors.scss
@@ -1,4 +1,5 @@
 a {
   text-decoration: none;
   color: white;
+  font-size: 1rem;
 }
diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss
@@ -2,4 +2,5 @@
   color: white;
   text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
   text-decoration: none;
+  font-weight: 500;
 }
diff --git a/assets/scss/_global.scss b/assets/scss/_global.scss
@@ -6,6 +6,7 @@ html {
     height: 100%;
     width: 100%;
     margin: 0;
+    font-family: "Quicksand", sans-serif !important;
 
     #__nuxt {
       height: 100%;
@@ -16,4 +17,4 @@ html {
       padding: 10px;
     }
   }
-}
+}
diff --git a/assets/scss/_lists.scss b/assets/scss/_lists.scss
@@ -0,0 +1,9 @@
+ul {
+  line-height: 1.80;
+
+  li {
+    font-size: 1.1rem;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+}
diff --git a/assets/scss/_paragraphs.scss b/assets/scss/_paragraphs.scss
@@ -0,0 +1,5 @@
+p {
+  font-size: 1.1rem;
+  line-height: 1.80;
+  font-weight: 500;
+}
diff --git a/assets/scss/_prime-vue-override.scss b/assets/scss/_prime-vue-override.scss
@@ -0,0 +1,7 @@
+.p-component {
+  font-family: "Quicksand", sans-serif !important;
+}
+
+.p-accordion-header-link {
+  padding: 0.25rem;
+}
diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
@@ -2,3 +2,6 @@
 @use "anchors";
 @use "buttons";
 @use "dividers";
+@use "paragraphs";
+@use "lists";
+@use "prime-vue-override";
diff --git a/components/layouts/default/NavBar/NavBar.vue b/components/layouts/default/NavBar/NavBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     id="navbar"
-    class="align-items-center d-flex justify-content-between"
+    class="align-items-center d-flex justify-content-between py-1"
   >
     <NuxtLink
       :aria-label="$t('components.NavBar.homePage')"
@@ -14,12 +14,12 @@
         src="/img/logo/square/werewolves-logo-small.png"
       />
 
-      <div
+      <h3
         :aria-label="$t('shared.werewolvesAssistant')"
         class="ms-2"
       >
         {{ $t("shared.werewolvesAssistant") }}
-      </div>
+      </h3>
     </NuxtLink>
 
     <ParametersMenu

diff --git a/...about/AboutAvailableRoles/AboutAvailableRoleDescription/AboutAvailableRoleDescription.vue b/...about/AboutAvailableRoles/AboutAvailableRoleDescription/AboutAvailableRoleDescription.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="d-flex">
+    <div
+      id="role-left-description"
+      class="align-items-center d-flex flex-column justify-content-center"
+    >
+      <RoleImage
+        class="available-role-description-role-image"
+        :role-name="role.name"
+        sizes="150px"
+      />
+
+      <h2 class="available-role-description-role-name mt-3">
+        {{ getRoleNameLabel(role.name) }}
+      </h2>
+
+      <RoleTypeBadge
+        class="available-role-description-role-type-badge  mt-3"
+        :role-type="role.type"
+      />
+
+      <RoleOriginBadge
+        class="available-role-description-role-origin-badge mt-3"
+        :role-origin="role.origin"
+      />
+    </div>
+
+    <div
+      id="role-right-description"
+      class="container-fluid d-flex flex-column justify-content-center"
+    >
+      <p
+        v-for="line in roleDescriptionLines"
+        :key="line"
+        class="available-role-description-role-description-line"
+      >
+        {{ line }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AboutAvailableRoleDescriptionProps } from "~/components/pages/about/AboutAvailableRoles/AboutAvailableRoleDescription/about-available-role-description.types";
+import RoleImage from "~/components/shared/role/RoleImage/RoleImage.vue";
+import RoleOriginBadge from "~/components/shared/role/RoleOriginBadge/RoleOriginBadge.vue";
+import RoleTypeBadge from "~/components/shared/role/RoleTypeBadge/RoleTypeBadge.vue";
+import type { RoleNames } from "~/composables/api/role/enums/role.enums";
+import { useRoleName } from "~/composables/api/role/useRoleName";
+
+const props = defineProps<AboutAvailableRoleDescriptionProps>();
+
+const { t, messages, locale } = useI18n();
+
+const roleDescriptionLines = computed<string[]>(() => {
+  type ComponentsMessages = Record<"AboutAvailableRoleDescription", Record<"descriptions", Record<RoleNames, Record<string, string>>>>;
+
+  const componentsMessages = messages.value[locale.value].components as ComponentsMessages;
+  const roleDescriptionMessages = componentsMessages.AboutAvailableRoleDescription.descriptions[props.role.name] as Record<string, string> | undefined;
+  if (!roleDescriptionMessages) {
+    return [];
+  }
+  return Object.keys(roleDescriptionMessages).map(key => t(`components.AboutAvailableRoleDescription.descriptions.${props.role.name}.${key}`));
+});
+
+const { getRoleNameLabel } = useRoleName();
+</script>
+
+<style lang="scss">
+#role-left-description {
+  min-width: 200px;
+}
+</style>
diff --git a/...outAvailableRoles/AboutAvailableRoleDescription/about-available-role-description.types.ts b/...outAvailableRoles/AboutAvailableRoleDescription/about-available-role-description.types.ts
@@ -0,0 +1,7 @@
+import type { Role } from "~/composables/api/role/types/role.types";
+
+type AboutAvailableRoleDescriptionProps = {
+  role: Role;
+};
+
+export type { AboutAvailableRoleDescriptionProps };
diff --git a/components/pages/about/AboutAvailableRoles/AboutAvailableRoles.vue b/components/pages/about/AboutAvailableRoles/AboutAvailableRoles.vue
@@ -0,0 +1,77 @@
+<template>
+  <div id="about-available-roles">
+    <div class="align-items-center d-flex">
+      <RoleImage
+        id="about-available-roles-title-role-image"
+        class="me-3"
+        :role-name="RoleNames.ANGEL"
+        sizes="50px"
+      />
+
+      <h2 id="about-available-roles-title">
+        {{ $t('components.AboutAvailableRoles.availableRoles') }}
+      </h2>
+    </div>
+
+    <hr>
+
+    <div
+      v-if="!roles"
+      id="loading-roles-container"
+      class="align-items-center d-flex flex-column justify-content-center"
+    >
+      <VuePrimeProgressSpinner/>
+
+      <small>{{ $t("components.AboutAvailableRoles.loadingRoles") }}</small>
+    </div>
+
+    <div v-else>
+      <p id="about-available-roles-first-section">
+        {{ availableRolesText }}
+      </p>
+
+      <VuePrimeAccordion>
+        <VuePrimeAccordionTab
+          v-for="role in roles"
+          :key="role.name"
+        >
+          <template #header>
+            <div class="align-items-center available-role-image-header d-flex">
+              <RoleImage
+                :role-name="role.name"
+                sizes="40px"
+              />
+
+              <div class="ms-2">
+                {{ getRoleNameLabel(role.name) }}
+              </div>
+            </div>
+          </template>
+
+          <AboutAvailableRoleDescription :role="role"/>
+        </VuePrimeAccordionTab>
+      </VuePrimeAccordion>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+
+import AboutAvailableRoleDescription from "~/components/pages/about/AboutAvailableRoles/AboutAvailableRoleDescription/AboutAvailableRoleDescription.vue";
+import RoleImage from "~/components/shared/role/RoleImage/RoleImage.vue";
+import { RoleNames } from "~/composables/api/role/enums/role.enums";
+import { useRoleName } from "~/composables/api/role/useRoleName";
+import { useRolesStore } from "~/stores/role/useRolesStore";
+
+const { t } = useI18n();
+const { getRoleNameLabel } = useRoleName();
+const { roles } = storeToRefs(useRolesStore());
+
+const availableRolesText = computed<string | undefined>(() => {
+  if (!roles.value) {
+    return undefined;
+  }
+  return t("components.AboutAvailableRoles.assistantHasManyRoles", roles.value.length);
+});
+</script>
diff --git a/components/pages/about/AboutCreator.vue b/components/pages/about/AboutCreator.vue
@@ -0,0 +1,42 @@
+<template>
+  <div id="about-creator">
+    <h2
+      id="about-creator-title"
+      class="align-items-center d-flex"
+    >
+      <i class="fa fa-2x fa-pen-fancy me-3 text-info"/>
+      {{ $t('components.AboutCreator.wordFromCreator') }}
+    </h2>
+
+    <hr>
+
+    <p id="about-creator-first-section">
+      {{ $t("components.AboutCreator.creatorBackground") }}
+    </p>
+
+    <div class="d-flex justify-content-center">
+      <a
+        id="about-creator-portfolio-button"
+        class="p-button primary"
+        href="https://antoinezanardi.fr"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <span class="fa-palette fas me-2"/>
+        {{ $t('components.AboutCreator.myPortfolio') }}
+      </a>
+    </div>
+
+    <p id="about-creator-second-section">
+      {{ $t("components.AboutCreator.whyWerewolvesGameIsGreat") }}
+    </p>
+
+    <p id="about-creator-third-section">
+      {{ $t("components.AboutCreator.whyWerewolvesAssistant") }}
+    </p>
+
+    <p id="about-creator-forth-section">
+      {{ $t("components.AboutCreator.pleaseShareFeedback") }}
+    </p>
+  </div>
+</template>
diff --git a/components/pages/about/AboutHowToContribute.vue b/components/pages/about/AboutHowToContribute.vue
@@ -0,0 +1,46 @@
+<template>
+  <div id="about-how-to-contribute">
+    <h2
+      id="about-how-to-contribute-title"
+      class="align-items-center d-flex"
+    >
+      <i class="fa fa-2x fa-handshake-angle me-3 text-success"/>
+      {{ $t('components.AboutHowToContribute.howToContribute') }}
+    </h2>
+
+    <hr>
+
+    <p id="about-how-to-contribute-first-section">
+      {{ $t("components.AboutHowToContribute.thereAreManyWaysToContribute") }}
+    </p>
+
+    <ul id="about-how-to-contribute-second-section">
+      <li>
+        {{ $t("components.AboutHowToContribute.openSourceProject") }}
+        <div class="align-items-center d-flex justify-content-center my-3">
+          <GitHubRepositoryButton
+            id="about-how-to-contribute-github-button"
+            :text-button="$t('components.AboutHowToContribute.accessGitHubRepository')"
+          />
+        </div>
+      </li>
+
+      <li>
+        {{ $t("components.AboutHowToContribute.thisProjectIsFree") }}
+
+        <div class="align-items-center d-flex justify-content-center my-3">
+          <BuyMeACoffeeButton/>
+        </div>
+      </li>
+
+      <li>
+        {{ $t("components.AboutHowToContribute.talkAboutThisProject") }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BuyMeACoffeeButton from "~/components/shared/external/BuyMeACoffeeButton/BuyMeACoffeeButton.vue";
+import GitHubRepositoryButton from "~/components/shared/external/GitHubRepositoryButton/GitHubRepositoryButton.vue";
+</script>