feat(score-modal): create score modal

src/App.vue

@@ -4,6 +4,7 @@ import { ref } from "vue";
 import InfoModal from "./components/modals/InfoModal.vue";
 import BackModal from "./components/modals/BackModal.vue";
 import UserModal from "./components/modals/UserModal.vue";
+import ScoreModal from "./components/modals/ScoreModal.vue";
 import LogInModal from "./components/modals/LogInModal.vue";
 import ArcadeModal from "./components/modals/ArcadeModal.vue";
 import HeaderNavigator from "./components/HeaderNavigator.vue";
@@ -17,6 +18,7 @@ import { LISTED_CATEGORIES } from "./config.json";
 const showBackModal = ref(false);
 const showInfoModal = ref(false);
 const showUserModal = ref(false);
+const showScoreModal = ref(false);
 const showLogInModal = ref(false);
 const showArcadeModal = ref(false);
 
@@ -30,11 +32,13 @@ const isArcadeMode = LISTED_CATEGORIES.includes(
   <BackModal v-model:is-visible="showBackModal" />
   <InfoModal v-model:is-visible="showInfoModal" />
   <UserModal v-model:is-visible="showUserModal" />
+  <ScoreModal v-model:is-visible="showScoreModal" />
   <LogInModal v-model:is-visible="showLogInModal" />
   <ArcadeModal v-model:is-visible="showArcadeModal" />
   <HeaderNavigator
     @showBackModal="showBackModal = true"
     @showInfoModal="showInfoModal = true"
+    @showScoreModal="showScoreModal = true"
     @showUserModal="
       isLogged() ? (showUserModal = true) : (showLogInModal = true)
     "
@@ -45,6 +49,7 @@ const isArcadeMode = LISTED_CATEGORIES.includes(
       v-if="isArcadeMode"
       @showArcadeModal="showArcadeModal = true"
       @showLogInModal="showLogInModal = true"
+      @showScoreModal="showScoreModal = true"
     />
     <DailyPage v-else @showBackModal="showBackModal = true" />
   </main>

src/components/HeaderNavigator.vue

@@ -3,12 +3,14 @@ import IconBack from "./icons/IconBack.vue";
 import IconHelp from "./icons/IconHelp.vue";
 import IconUser from "./icons/IconUser.vue";
 import IconTrophy from "./icons/IconTrophy.vue";
+import IconScoreboard from "./icons/IconScoreboard.vue";
 
 defineEmits([
   "showArcadeModal",
   "showBackModal",
   "showInfoModal",
   "showUserModal",
+  "showScoreModal",
 ]);
 </script>
 
@@ -19,18 +21,21 @@ defineEmits([
         <a href="/" id="brand">ARCHIGUESSER</a>
       </div>
       <div class="nav-block nav-right">
-        <a @click="$emit('showArcadeModal')">
-          <IconTrophy />
-        </a>
         <a @click="$emit('showBackModal')">
           <IconBack />
         </a>
-        <a @click="$emit('showInfoModal')">
-          <IconHelp />
+        <a @click="$emit('showArcadeModal')">
+          <IconTrophy />
+        </a>
+        <a @click="$emit('showScoreModal')">
+          <IconScoreboard />
         </a>
         <a @click="$emit('showUserModal')">
           <IconUser />
         </a>
+        <a @click="$emit('showInfoModal')">
+          <IconHelp />
+        </a>
       </div>
     </div>
   </header>

src/components/icons/IconScoreboard.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="20"
+    width="20"
+    viewBox="0 0 512 512"
+  >
+    <!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+    <path
+      d="M61.77 401l17.5-20.15a19.92 19.92 0 0 0 5.07-14.19v-3.31C84.34 356 80.5 352 73 352H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h22.84a154.82 154.82 0 0 0-11 12.31l-5.61 7c-4 5.07-5.25 10.13-2.8 14.88l1.05 1.93c3 5.76 6.3 7.88 12.25 7.88h4.73c10.33 0 15.94 2.44 15.94 9.09 0 4.72-4.2 8.22-14.36 8.22a41.54 41.54 0 0 1-15.47-3.12c-6.49-3.88-11.74-3.5-15.6 3.12l-5.59 9.31c-3.73 6.13-3.2 11.72 2.62 15.94 7.71 4.69 20.39 9.44 37 9.44 34.16 0 48.5-22.75 48.5-44.12-.03-14.38-9.12-29.76-28.73-34.88zM12.1 320H80a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H41.33c3.28-10.29 48.33-18.68 48.33-56.44 0-29.06-25-39.56-44.47-39.56-21.36 0-33.8 10-40.45 18.75-4.38 5.59-3 10.84 2.79 15.37l8.58 6.88c5.61 4.56 11 2.47 16.13-2.44a13.4 13.4 0 0 1 9.45-3.84c3.33 0 9.28 1.56 9.28 8.75C51 248.19 0 257.31 0 304.59v4C0 316 5.08 320 12.1 320zM16 160h64a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H64V40a8 8 0 0 0-8-8H32a8 8 0 0 0-7.14 4.42l-8 16A8 8 0 0 0 24 64h8v64H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8zm488-80H168a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h336a8 8 0 0 0 8-8V88a8 8 0 0 0-8-8zm0 320H168a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h336a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8zm0-160H168a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h336a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8z"
+    />
+  </svg>
+</template>

src/components/modals/ScoreModal.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+import BaseModal from "./BaseModal.vue";
+import IconHelp from "../icons/IconHelp.vue";
+import IconTrophy from "../icons/IconTrophy.vue";
+
+import { getScore, getChallengesScore, getDailiesScore } from "@/store";
+
+defineProps({
+  isVisible: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const showDetails = ref(false);
+const rank = ref();
+const score = computed(getScore);
+
+const emit = defineEmits(["update:isVisible"]);
+
+const closeModal = () => emit("update:isVisible", false);
+</script>
+
+<template>
+  <BaseModal
+    title="Score"
+    :is-visible="isVisible"
+    @update:is-visible="closeModal"
+  >
+    <template #default>
+      <div class="main">
+        <div class="scores">
+          <h1>{{ score }}</h1>
+          <h3>Daily Challenges: {{ getDailiesScore() }}</h3>
+          <h3>Theme Challenges: {{ getChallengesScore() }}</h3>
+        </div>
+
+        <div class="rank" v-if="rank">
+          <h3>You’re ranked <b>1th</b></h3>
+        </div>
+
+        <a class="details" @click="showDetails = true">
+          <IconHelp /> <span> How are points counted ?</span></a
+        >
+
+        <ul v-if="showDetails">
+          <li>
+            Each daily challenge is 1 point, up to 7 (when found in 1 guess)
+          </li>
+          <li>
+            50 points for the first level of a theme challenge <IconTrophy />,
+          </li>
+          <li>100 points for the second level,</li>
+          <li>150 points for the third level, etc…</li>
+          <li>50 bonus points when you’re signed in</li>
+        </ul>
+      </div>
+    </template>
+  </BaseModal>
+</template>
+
+<style scoped>
+.scores,
+.details {
+  text-align: center;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+a > svg {
+  vertical-align: text-top;
+  filter: invert(48%) sepia(73%) saturate(406%) hue-rotate(342deg)
+    brightness(97%) contrast(83%);
+}
+
+b {
+  font-weight: 500;
+}
+</style>

src/pages/ArcadePage.vue

@@ -18,11 +18,12 @@ import {
 
 import IconWiki from "@/components/icons/IconWiki.vue";
 import IconRetry from "@/components/icons/IconRetry.vue";
+import IconScore from "@/components/icons/IconScoreboard.vue";
 import IconTrophy from "@/components/icons/IconTrophy.vue";
 import GuessingForm from "@/components/guessing/GuessingForm.vue";
 import PictureDisplay from "@/components/picture-display/PictureDisplay.vue";
 
-defineEmits(["showArcadeModal", "showLogInModal"]);
+defineEmits(["showArcadeModal", "showLogInModal", "showScoreModal"]);
 
 const urlParameters = new URLSearchParams(window.location.search);
 const requestedCategory = urlParameters.get("challenge") || "";
@@ -161,7 +162,10 @@ const openLinks = () => {
           👏<br />
           New levels will be added soon, stay tuned!
         </h3>
-        <h3 v-else>You’re now level {{ currentLevel }}! 🏆</h3>
+        <h3 v-else>
+          You’re now level {{ currentLevel }}! 🏆 You’ve earned
+          {{ currentLevel * 50 }} points!
+        </h3>
         <br />
       </div>
       <div v-else>
@@ -192,12 +196,17 @@ const openLinks = () => {
             <span>Learn more about it</span>
             <IconWiki />
           </button>
+          <button class="white-btn" @click="$emit('showScoreModal')">
+            <span>Check your score</span>
+            <IconScore />
+          </button>
           <button class="white-btn" @click="$emit('showArcadeModal')">
-            <span>Try another challenge!</span>
+            <span>Try another challenge</span>
             <IconTrophy />
           </button>
           <button class="white-btn" @click="goHome()">
             <span>Back to daily challenge</span>
+            <IconRetry />
           </button>
         </div>
       </div>
@@ -264,7 +273,7 @@ button {
 }
 
 button svg {
-  margin-left: 0.25rem;
+  margin-left: 0.5rem;
   vertical-align: text-top;
 }
 
@@ -285,6 +294,7 @@ button svg {
 .white-btn {
   border: 1px solid;
   background-color: var(--background-color);
+  justify-content: space-between;
 }
 
 .center {

src/store.ts

@@ -36,3 +36,28 @@ export const getCredentials = () => {
   return { email: "", password: "" };
 };
 export const isLogged = () => localStorage.getItem("login") != null;
+
+export const getDailiesScore = () => {
+  const { firstPlayed, lastPlayed, ...stats } = getStats();
+
+  return (Object.values(stats) as number[]).reduce(
+    (total, dailyScore) => total + 1 + ((7 - dailyScore) % 7),
+    0,
+  );
+};
+export const getChallengesScore = () => {
+  const { dayNumber, retryCount, ...challengeLevels } = getChallenges();
+
+  return (Object.values(challengeLevels) as number[]).reduce(
+    (total, challengeLevel) => {
+      let challengeScore = 0;
+      for (let i = 1; i <= challengeLevel; i++) {
+        challengeScore += i * 50;
+      }
+      return total + challengeScore;
+    },
+    0,
+  );
+};
+export const getScore = () =>
+  getDailiesScore() + getChallengesScore() + (isLogged() ? 50 : 0);