diff --git a/src/App.vue b/src/App.vue index a658b80b..b1ce8b0c 100644 --- a/src/App.vue +++ b/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( + diff --git a/src/components/HeaderNavigator.vue b/src/components/HeaderNavigator.vue index db134a15..cb9dbb07 100644 --- a/src/components/HeaderNavigator.vue +++ b/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", ]); @@ -19,18 +21,21 @@ defineEmits([ ARCHIGUESSER diff --git a/src/components/icons/IconScoreboard.vue b/src/components/icons/IconScoreboard.vue new file mode 100644 index 00000000..a9e6f2e6 --- /dev/null +++ b/src/components/icons/IconScoreboard.vue @@ -0,0 +1,13 @@ + diff --git a/src/components/modals/ScoreModal.vue b/src/components/modals/ScoreModal.vue new file mode 100644 index 00000000..61748dc0 --- /dev/null +++ b/src/components/modals/ScoreModal.vue @@ -0,0 +1,85 @@ + + + + + diff --git a/src/pages/ArcadePage.vue b/src/pages/ArcadePage.vue index 2094a3c4..23ac7470 100644 --- a/src/pages/ArcadePage.vue +++ b/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 = () => { 👏
New levels will be added soon, stay tuned! -

You’re now level {{ currentLevel }}! 🏆

+

+ You’re now level {{ currentLevel }}! 🏆 You’ve earned + {{ currentLevel * 50 }} points! +


@@ -192,12 +196,17 @@ const openLinks = () => { Learn more about it +
@@ -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 { diff --git a/src/store.ts b/src/store.ts index ba157970..ea08bacf 100644 --- a/src/store.ts +++ b/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);