diff --git a/src/components/SavingsPath.vue b/src/components/SavingsPath.vue index 23aef04f4e32035fcc9e20ce1bf16aa436027e89..e5838eff61c1cb3ec4797a7358379c8749ddef58 100644 --- a/src/components/SavingsPath.vue +++ b/src/components/SavingsPath.vue @@ -117,6 +117,12 @@ alt="Finish Line" /> </div> + + <div v-if="showCompletedText" class="flex flex-row justify-center items-center mt-4 gap-3"> + <span>Gratulerer! Du har fullført en utfordring!</span> + <button class="primary" @click="showCompletedText = false">Skjul</button> + </div> + <!-- Goal --> <div v-if="goalLocal" class="flex flex-row justify-around m-t-2 pt-6 w-full mx-auto"> <div class="grid grid-rows-2 grid-flow-col gap 4"> @@ -197,6 +203,8 @@ let goalLocal: Goal | null | undefined = reactive({ const isMounted = ref<boolean>(false) const componentKey = ref<number>(0) +const showCompletedText = ref(false) + //Initialisation: onMounted(async () => { @@ -349,6 +357,7 @@ const animateChallenge = (challenge: Challenge) => { challenge.completion! >= 100 && !animatedChallenges.value.includes(challenge.id as number) ) { + showCompletedText.value = true if (challenge.id != null) { animatedChallenges.value.push(challenge.id) } // Ensure no duplication