diff --git a/src/components/ButtonDisplayStreak.vue b/src/components/ButtonDisplayStreak.vue
index 2f83d276bd8e978a4109535ade01a71dee6d1332..1f246f113953f9438fc586cd43060caecc98c2ea 100644
--- a/src/components/ButtonDisplayStreak.vue
+++ b/src/components/ButtonDisplayStreak.vue
@@ -37,10 +37,22 @@
<Countdown
v-if="screenSize > 768 && currentStreak! > 0"
class="flex flex-row"
- countdownSize="1rem"
- labelSize=".5rem"
- mainColor="white"
- secondFlipColor="white"
+ countdownSize="1.4rem"
+ labelSize="0.8rem"
+ mainColor="black"
+ secondFlipColor="black"
+ mainFlipBackgroundColor="#30ab0e"
+ secondFlipBackgroundColor="#9af781"
+ :labels="{ days: 'dager', hours: 'timer', minutes: 'min', seconds: 'sek' }"
+ :deadlineISO="deadline"
+ ></Countdown>
+ <Countdown
+ v-if="screenSize <= 768 && currentStreak! > 0"
+ class="flex flex-row"
+ countdownSize="1.1rem"
+ labelSize=".6rem"
+ mainColor="black"
+ secondFlipColor="black"
mainFlipBackgroundColor="#30ab0e"
secondFlipBackgroundColor="#9af781"
:labels="{ days: 'dager', hours: 'timer', minutes: 'min', seconds: 'sek' }"
@@ -55,13 +67,13 @@
<div class="flex flex-col justify-around items-center">
<!-- Display the current streak day number adjusted by index -->
<span class="text-black text-xs md:text-1xl font-bold">
- {{ currentStreak! - ((currentStreak! % 7) + 1 - index) }}
+ {{ currentStreak! - ((currentStreak! % 7) - index) }}
</span>
<!-- Display images based on completion -->
<img
src="@/assets/pengesekkStreak.png"
:alt="index <= currentStreak! % 7 ? 'challenge completed' : 'challenge not completed'"
- :class="{'max-h-6 max-w-6 md:max-h-10 md:max-w-10': true, 'grayscale': index-1 > currentStreak! % 7}"
+ :class="{'max-h-6 max-w-6 md:max-h-10 md:max-w-10': true, 'grayscale': index > currentStreak! % 7}"
/>
</div>
</div>
@@ -73,21 +85,20 @@
</template>
<script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
import { useUserStore } from '@/stores/userStore'
// @ts-ignore
import { Countdown } from 'vue3-flip-countdown'
const userStore = useUserStore()
const currentStreak = ref<number>()
-const streakStart = ref<string>()
const deadline = ref<string>()
onMounted(async () => {
- await userStore.getUserStreak()
+ userStore.getUserStreak()
if (userStore.streak) {
currentStreak.value = userStore.streak?.streak
- streakStart.value = userStore.streak?.streakStart
- deadline.value = userStore.streak?.streakStart
+ deadline.value = userStore.streak?.firstDue
+
}
console.log('Streak:', currentStreak.value)
if (typeof window !== 'undefined') {
@@ -105,21 +116,15 @@ const handleWindowSizeChange = () => {
screenSize.value = window.innerWidth
}
-watch(
- () => currentStreak.value,
- (newStreak, oldStreak) => {
- if (newStreak !== oldStreak) {
- currentStreak.value = newStreak
- console.log('Updated Steak:', currentStreak)
- }
- },
- { immediate: true }
-)
+
const displayStreakCard = ref(false)
const display = () => {
displayStreakCard.value = true
+ userStore.getUserStreak();
+ currentStreak.value = userStore.streak?.streak;
+ deadline.value = userStore.streak?.firstDue;
}
const hide = () => {
diff --git a/src/components/CardChallengeSavingsPath.vue b/src/components/CardChallengeSavingsPath.vue
index 60c802cc19f57831ea726c8ef5773f96095c9317..f56167ea0417a8076cfa2e5fccf9c0970fbf257a 100644
--- a/src/components/CardChallengeSavingsPath.vue
+++ b/src/components/CardChallengeSavingsPath.vue
@@ -1,6 +1,6 @@
<template>
<!-- Challenge Icon and Details -->
- <div class="flex items-center justify-center shadow-black min-w-24 w-full h-auto md:max-h-full min-h-24 max-w-32 max-h-32 md:min-h-32 md:min-w-32 md:max-w-48 overflow-hidden">
+ <div v-if="challenge" class="flex items-center justify-center shadow-black min-w-24 w-full h-auto md:max-h-full min-h-24 max-w-32 max-h-32 md:min-h-32 md:min-w-32 md:max-w-48 overflow-hidden">
<!-- Challenge Icon -->
<div class="flex flex-col items-center mx-auto md:mx-2 my-auto">
@@ -78,45 +78,37 @@
<script setup lang="ts">
import type {Challenge} from "@/types/challenge";
import {useChallengeStore} from "@/stores/challengeStore";
-import type {Goal} from "@/types/goal";
-import {useGoalStore} from "@/stores/goalStore";
import router from "@/router";
const challengeStore = useChallengeStore();
-const goalStore = useGoalStore();
interface Props {
challenge: Challenge,
- goal: Goal
}
-const props = defineProps<Props>()
+defineProps<Props>()
+
+
+const emit = defineEmits(['update-challenge', 'complete-challenge']);
+
// Increment saved amount
+// In your incrementSaved function in the child component
const incrementSaved = async (challenge: Challenge) => {
- // Safely increment the saved amount, ensuring it exists
- challenge.saved += challenge.perPurchase
-
- // Check if the saved amount meets or exceeds the target
- if (challenge.saved >= challenge.target) {
- challenge.completion = 100
- await challengeStore.completeUserChallenge(challenge)
- }
-
- // Safely update the goal's saved value, ensuring goal.value exists and is not null
- if (props.goal) {
- props.goal.saved = (props.goal.saved || 0) + challenge.perPurchase
- // Update the goal in the store, ensuring goal is not null or undefined
- if (props.goal) {
- await goalStore.editUserGoal(props.goal)
- }
- } else {
- console.error('No goal selected for incrementing saved value.')
- }
-
- // Update the challenge in the store
- await challengeStore.editUserChallenge(challenge)
+
+
+ challenge.saved += challenge.perPurchase;
+ // Trigger the update in the store
+
+ const updatedChallenge = await challengeStore.editUserChallenge(challenge) as Challenge;
+
+ console.log('updated challenge in child: ', updatedChallenge);
+
+ // Emit an event to inform the parent component of the update
+ emit('update-challenge', updatedChallenge);
+
}
+
const editChallenge = (challenge: Challenge) => {
router.push(`/spareutfordringer/rediger/${challenge.id}`)
}
diff --git a/src/components/SavingsPath.vue b/src/components/SavingsPath.vue
index 6ab38706903e4d8286dcb5132ac9a53d57492efc..2778c486968ca18a271e6c079425964b639721fd 100644
--- a/src/components/SavingsPath.vue
+++ b/src/components/SavingsPath.vue
@@ -1,5 +1,5 @@
<template>
- <div
+ <div v-if="isMounted"
class="flex flex-col basis-2/3 max-h-full mx-auto md:ml-20 md:mr-2 max-w-5/6 md:basis-3/4 md:max-pr-20 md:pr-10 md:max-mr-20"
>
<div class="flex justify-center align-center">
@@ -18,7 +18,7 @@
Ufullførte utfordringer<br />↓
</button>
<div class="h-1 w-4/6 mx-auto my-2 opacity-10"></div>
- <div
+ <div v-if="challenges"
ref="containerRef"
class="container relative pt-6 w-4/5 bg-cover bg-[center] md:[background-position: center;] mx-auto md:w-4/5 no-scrollbar h-full max-h-[60vh] md:max-h-[60vh] md:min-w-2/5 overflow-y-auto border-2 border-transparent rounded-xl bg-white shadow-lg shadow-slate-400"
style="background-image: url('src/assets/backgroundSavingsPath.png')"
@@ -58,7 +58,10 @@
url="src/assets/archerSpare.gif"
></img-gif-template>
</div>
- <card-challenge-savings-path :goal="goal!" :challenge="challenge"></card-challenge-savings-path>
+ <card-challenge-savings-path :goal="goal!"
+ :challenge="challenge"
+ @update-challenge="handleChallengeUpdate"
+ ></card-challenge-savings-path>
<div class="flex">
<img-gif-template
:index="index"
@@ -92,13 +95,13 @@
class="flex flex-row mt-2"
>
<button class="text-2xl ml-48" @click="addSpareUtfordring">+</button>
- <span class="">Legg til <br />Spareutfordring</span>
+ <p class="">Legg til <br />Spareutfordring</p>
</div>
- <div v-else-if="index === challenges.length - 1 && index % 2 !== 0" class="mr-40">
+ <div v-else-if="index === challenges.length - 1 && index % 2 !== 0" class="mr-20 flex flex-row">
<button class="text-2xl ml-10 rounded-full" @click="addSpareUtfordring">
+
</button>
- <span class="">Legg til <br />Spareutfordring</span>
+ <p class="">Legg til <br />Spareutfordring</p>
</div>
<!-- Finish line -->
</div>
@@ -112,7 +115,7 @@
<div v-if="goal" 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">
<div class="row-span-3 cursor-pointer" @click="editGoal(goal)">
- <img ref="goalIconRef"
+ <img
:src="getGoalIcon(goal)" class="w-12 h-12 mx-auto" :alt="goal.title" />
<div class="text-lg font-bold" data-cy="goal-title">{{ goal.title }}</div>
</div>
@@ -121,7 +124,7 @@
<div @click="goToEditGoal" class="cursor-pointer">
<h3 class="text-blue-500 text-base">Endre mål</h3>
</div>
- <div
+ <div :key="componentKey"
ref="targetRef"
class="bg-yellow-400 px-4 py-1 rounded-full text-black font-bold"
>
@@ -137,18 +140,23 @@
ref="iconRef"
class="max-w-20 max-h-20 absolute opacity-0"
/>
+ <img v-if="goal"
+ :src="getGoalIcon(goal)"
+ alt="could not load"
+ ref="goalIconRef"
+ class="shadow-sm shadow-amber-300 max-w-20 max-h-20 absolute opacity-0"
+
+ />
</template>
<script setup lang="ts">
import {
- type ComponentPublicInstance,
- nextTick,
- onMounted,
- onUnmounted,
- reactive,
- type Ref,
- ref,
- watch
+ type ComponentPublicInstance, nextTick,
+ onMounted,
+ onUnmounted,
+ reactive,
+ type Ref,
+ ref,
} from 'vue'
import anime from 'animejs'
import type { Challenge } from '@/types/challenge'
@@ -168,109 +176,135 @@ interface Props {
}
const props = defineProps<Props>()
-const challenges = ref<Challenge[]>(props.challenges)
-const goal = ref<Goal | null | undefined>(props.goal)
+const challenges = ref<Challenge[]>()
+let goal: Goal | null | undefined = reactive({
+ title: '', // Default empty string to prevent undefined errors
+ saved: 0,
+ target: 0,
+} as Goal)
+const isMounted = ref<boolean>(false)
+const componentKey = ref<number>(0)
+//Initialisation:
-/**
- * Checks if all challenges are completed
- */
-const allChallengesCompleted = () => {
- // Assuming challenges.value is an array of challenge objects
- for (const challenge of challenges.value) {
- if (challenge.completion !== 100) {
- return false; // If any challenge is not completed, return false
+onMounted(async () => {
+ window.addEventListener('resize', handleWindowSizeChange)
+ handleWindowSizeChange();
+ challenges.value = props.challenges
+ goal = props.goal
+ sortChallenges();
+ allChallengesCompleted();
+ // Delay the execution of the following logic by 300ms
+ setTimeout(() => {
+ const container = containerRef.value;
+ if (container) {
+ container.addEventListener('scroll', () => {
+ if (!firstUncompletedRef.value) return;
+ const containerRect = container.getBoundingClientRect();
+ const firstUncompletedRect = firstUncompletedRef.value.getBoundingClientRect();
+ isAtFirstUncompleted.value = !(
+ firstUncompletedRect.top > containerRect.bottom ||
+ firstUncompletedRect.bottom < containerRect.top
+ );
+ });
}
- }
- return true; // If all challenges are completed, return true
-};
+ scrollToFirstUncompleted();
+ }, 300); // Timeout set to 300 milliseconds
+ // Load existing animated states first
+ loadAnimatedStates()
-/**
- * Sorts the challenges by completion status and due date
+ // Get completed challenge IDs, ensuring that only defined IDs are considered
+ const completedChallenges = challenges.value
+ .filter((challenge) => challenge.completion! >= 100 && challenge.id !== undefined)
+ .map((challenge) => challenge.id as number) // Use 'as number' to assert that ids are numbers after the check
- */
-const sortChallenges = () => {
- challenges.value.sort((a, b) => {
- // First, sort by completion status: non-completed (less than 100) before completed (100)
- if (a.completion !== 100 && b.completion === 100) {
- return 1 // 'a' is not completed and 'b' is completed, 'a' should come first
- } else if (a.completion === 100 && b.completion !== 100) {
- return -1 // 'a' is completed and 'b' is not, 'b' should come first
- } else {
- // Explicitly convert dates to numbers for subtraction
- const dateA = new Date(a.due).getTime()
- const dateB = new Date(b.due).getTime()
- return dateA - dateB
- }
- })
-}
+ // Update only new completions that are not already in the animatedChallenges
+ const newAnimations = completedChallenges.filter((id) => !animatedChallenges.value.includes(id))
+ animatedChallenges.value = [...animatedChallenges.value, ...newAnimations]
-// Interface for element references
-interface ElementRefs {
- [key: string]: HTMLElement | undefined
-}
+ // Save the updated list back to localStorage
+ localStorage.setItem('animatedChallenges', JSON.stringify(animatedChallenges.value))
+ isMounted.value = true;
+})
-const elementRefs = reactive<ElementRefs>({})
-const isAtFirstUncompleted = ref(false)
-const firstUncompletedRef: Ref<HTMLElement | undefined> = ref()
-const screenSize = ref<number>(window.innerWidth)
-/**
- * Handles the window size change event
- */
-const handleWindowSizeChange = () => {
- screenSize.value = window.innerWidth
-}
-/**
- * Scrolls to the first uncompleted challenge
+onUnmounted(() => {
+ window.removeEventListener('resize', handleWindowSizeChange)
+ const container = containerRef.value
+ if (container) {
+ container.removeEventListener('scroll', () => {
+ // Clean up the scroll listener
+ })
+ }
+})
- */
-const scrollToFirstUncompleted= ()=> {
- let found = false
- for (let i = 0; i < challenges.value.length; i++) {
- if (challenges.value[i].completion! < 100) {
- const refKey = `uncompleted-${i}`
- if (elementRefs[refKey]) {
- elementRefs[refKey]!.scrollIntoView({ behavior: 'smooth', block: 'start' })
- firstUncompletedRef.value = elementRefs[refKey] // Store the reference
- found = true
- isAtFirstUncompleted.value = true
- break
- }
- }
+const handleChallengeUpdate = (updatedChallenge: Challenge) => {
+ if (challenges.value) {
+ const index = challenges.value.findIndex(c => c.id === updatedChallenge.id);
+ if (index !== -1) {
+ challenges.value[index] = {...updatedChallenge};
}
- if (!found) {
- isAtFirstUncompleted.value = false
+
+ if (updatedChallenge.completion! >= 100 && !animatedChallenges.value.includes(updatedChallenge.id as number)) {
+ animateChallenge(updatedChallenge);
+ saveAnimatedStateChallenge(updatedChallenge);
+ }
+
+ if (goal) {
+ incrementGoalSaved(updatedChallenge);
+ // Force component update right here might be more appropriate
+ componentKey.value++;
+ }
+ }
+}
+
+const incrementGoalSaved = async (challenge: Challenge) => {
+ if (goal) {
+ // Correct the addition mistake and remove setTimeout
+ goal.saved = goal.saved + challenge.perPurchase;
+ await nextTick();// Only add the perPurchase amount
+
+ const completion = (goal.saved / goal.target) * 100;
+ if (completion >= 100 && !animatedGoals.value.includes(goal.id as number)) {
+ animateGoal(goal);
+ setTimeout(() => {
+ goalStore.getUserGoals();
+ goal = goalStore.priorityGoal;
+ }, 4000); // Keep this delay only for the store update and goal switch
+ } else {
+ await goalStore.getUserGoals();
+ goal = goalStore.priorityGoal;
}
+ }
}
+
+
/**
- * Assigns the reference to the element
- * @param el
- * @param challenge
- * @param index
+ * Navigates to the spareutfordringer page
*/
-const assignRef = (
- el: Element | ComponentPublicInstance | null,
- challenge: Challenge,
- index: number
-) => {
- const refKey = `uncompleted-${index}`
- if (el instanceof HTMLElement) {
- // Ensure that el is an HTMLElement
- if (challenge.completion! < 100) {
- elementRefs[refKey] = el
- }
- } else {
- // Cleanup if the element is unmounted or not an HTMLElement
- if (elementRefs[refKey]) {
- delete elementRefs[refKey]
- }
- }
+const addSpareUtfordring = () => {
+ router.push('/spareutfordringer').catch((error) => {
+ console.error('Routing error:', error)
+ })
}
+/**
+ * Checks if all challenges are completed
+ */
+const allChallengesCompleted = () => {
+ // Assuming challenges.value is an array of challenge objects
+ if (challenges.value) {
+ for (const challenge of challenges.value) {
+ if (challenge.completion !== 100) {
+ return false; // If any challenge is not completed, return false
+ }
+ }
+ return true;
+ }// If all challenges are completed, return true
+};
//-----------Animation for goal and challenge completion-----------------//
@@ -281,15 +315,7 @@ const containerRef = ref<HTMLElement | null>(null)
const targetRef = ref<HTMLElement | null>(null)
-/**
- * Navigates to the spareutfordringer page
- */
-const addSpareUtfordring = () => {
- console.log('Attempting to navigate to /spareutfordringer')
- router.push('/spareutfordringer').catch((error) => {
- console.error('Routing error:', error)
- })
-}
+
@@ -321,10 +347,9 @@ const loadAnimatedStates = () => {
*/
const animateChallenge = (challenge: Challenge) => {
if (
- challenge.completion === 100 &&
+ challenge.completion! >= 100 &&
!animatedChallenges.value.includes(challenge.id as number)
) {
- console.log('Animating for:', challenge.title)
if (challenge.id != null) {
animatedChallenges.value.push(challenge.id)
} // Ensure no duplication
@@ -342,18 +367,14 @@ const animateChallenge = (challenge: Challenge) => {
* @param goal
*/
const animateGoal = (goal: Goal) => {
- if (
- goal.completion === 100 &&
- !animatedGoals.value.includes(goal.id as number)
- ) {
- console.log('Animating for goal:', goal.title)
- if (goal.id != null) {
- animatedGoals.value.push(goal.id)
- } // Ensure no duplication
- saveAnimatedStateGoal(goal) // Refactor this to update localStorage correctly
- triggerConfetti()
- recalculateAndAnimate(true)
- }
+ console.log('im in animated goal')
+
+ if (goal.id != null) {
+ animatedGoals.value.push(goal.id)
+ } // Ensure no duplication
+ saveAnimatedStateGoal(goal) // Refactor this to update localStorage correctly
+ triggerConfetti()
+ recalculateAndAnimate(true)
}
/**
@@ -361,13 +382,21 @@ const animateGoal = (goal: Goal) => {
* @param isGoal
*/
const recalculateAndAnimate = (isGoal: boolean) => {
- nextTick(() => {
- if (iconRef.value && containerRef.value && targetRef.value && goalIconRef.value) {
+ console.log('im in recalculate and animate')
+
+
+ if (!isGoal && iconRef.value && containerRef.value && targetRef.value) {
animateIcon(isGoal)
- } else {
+ }
+ else if (isGoal && containerRef.value && goalIconRef.value){
+ animateIcon(isGoal)
+ }
+ else if (!isGoal && !targetRef.value) {
+ animateIcon(isGoal)
+ }
+ else {
console.error('Element references are not ready.')
}
- })
}
/**
@@ -375,11 +404,9 @@ const recalculateAndAnimate = (isGoal: boolean) => {
* @param challenge
*/
const saveAnimatedStateChallenge = (challenge: Challenge) => {
- console.log('Saving animated state for 1:', challenge.id)
if (challenge.id != null) {
animatedChallenges.value.push(challenge.id)
}
- console.log('Saving animated state for:', challenge.title)
localStorage.setItem('animatedChallenges', JSON.stringify(animatedChallenges.value))
}
@@ -392,7 +419,6 @@ const saveAnimatedStateGoal = (goal: Goal) => {
if (goal.id != null) {
animatedGoals.value.push(goal.id)
}
- console.log('Saving animated state for:', goal.title)
localStorage.setItem('animatedGoals', JSON.stringify(animatedGoals.value))
}
@@ -403,101 +429,143 @@ const saveAnimatedStateGoal = (goal: Goal) => {
* @param isGoal
*/
const animateIcon = (isGoal: boolean) => {
- const icon = iconRef.value
- const goal = goalIconRef.value
- const container = containerRef.value
- const target = targetRef.value
- if (!icon || !container || !target || !goal) {
- console.error('Required animation elements are not available.')
- return
- }
-
- const containerRect = container.getBoundingClientRect()
- const targetRect = target.getBoundingClientRect()
- const iconRect = icon.getBoundingClientRect()
- const goalRect = goal.getBoundingClientRect()
+ console.log('im in animate icon')
+ const icon = iconRef.value
+ const container = containerRef.value
+ const target = targetRef.value
+ if (!icon || !container) {
+ console.error('Required animation elements are not available.')
+ return
+ }
+ // Obtain bounding rectangles safely
+ const containerRect = container.getBoundingClientRect();
+ const targetRect = target?.getBoundingClientRect();
+ const iconRect = icon.getBoundingClientRect();
- let translateX1: number, translateY1: number, translateX2: number, translateY2: number;
+ // Initialize translation coordinates
+ let translateX1 = 0, translateY1 = 0, translateX2 = 0, translateY2 = 0;
if (isGoal) {
- translateX1 = containerRect.left + containerRect.width / 2 - goalRect.width / 2 - goalRect.left;
- translateY1 = containerRect.top + containerRect.height / 2 - goalRect.height / 2 - goalRect.top;
- anime
- .timeline({
- easing: 'easeInOutQuad',
- duration: 1500
- })
- .add({
- targets: icon,
- translateX: translateX1,
- translateY: translateY1,
- opacity: 0, // Start invisible
- duration: 1000
- })
- .add({
- targets: icon,
- opacity: 1, // Reveal the icon once it starts moving to the container
- duration: 1000, // Make the opacity change almost instantaneously
- scale: 3,
- begin: function(anim) {
- icon.classList.add('glow'); // Apply glow effect when this animation phase starts
- }
- })
- .add({
- targets: icon,
- translateX: 0, // Reset translation to original
- translateY: 0, // Reset translation to original
- duration: 500,
- complete: function(anim) {
- icon.classList.remove('glow'); // Remove glow effect when completed
+ const goal = goalIconRef.value;
+ if (goal) {
+ const goalRect = goal.getBoundingClientRect();
+ if (goalRect) {
+ // Calculate the translation coordinates for the goal
+ translateX1 = containerRect.left + containerRect.width / 2 - goalRect.width / 2 - goalRect.left;
+ translateY1 = containerRect.top + containerRect.height / 2 - goalRect.height / 2 - goalRect.top;
+
+ anime.timeline({
+ easing: 'easeInOutQuad',
+ duration: 1500
+ })
+ .add({
+ targets: goal,
+ translateX: translateX1,
+ translateY: translateY1,
+ opacity: [0, 1], // Fix: start from 0 opacity and animate to 1
+ duration: 1000
+ })
+ .add({
+ targets: goal,
+ opacity: [1, 0], // Fade out after moving
+ duration: 3000,
+ scale: 3,
+ begin: function (anim) {
+ if (icon) icon.classList.add('glow'); // Ensure icon exists before applying class
+ },
+ complete: function (anim) {
+ if (icon) icon.classList.remove('glow'); // Clean up: remove class after animation
+ }
+ });
+ } else {
+ console.error('Goal rectangle is not available.');
}
- })
- } else {
- translateX1 = containerRect.left + containerRect.width / 2 - iconRect.width / 2 - iconRect.left;
- translateY1 = containerRect.top + containerRect.height / 2 - goalRect.height / 2 - goalRect.top;
- translateX2 = targetRect.left + targetRect.width / 2 - iconRect.width / 2 - iconRect.left;
- translateY2 = targetRect.top + targetRect.height / 2 - iconRect.height / 2 - iconRect.top;
-
- anime
- .timeline({
- easing: 'easeInOutQuad',
- duration: 1500
- })
- .add({
- targets: icon,
- translateX: translateX1,
- translateY: translateY1,
- opacity: 0, // Start invisible
- duration: 1000
- })
- .add({
- targets: icon,
- opacity: 1, // Reveal the icon once it starts moving to the container
- duration: 1000, // Make the opacity change almost instantaneously
- scale: 3
- })
- .add({
- targets: icon,
- translateX: translateX2,
- translateY: translateY2,
- scale: 0.5,
- opacity: 1, // Keep the icon visible while moving to the target
- duration: 1500
- })
- .add({
- targets: icon,
- opacity: 0, // Fade out once it reaches the target
- scale: 1,
- duration: 500
- })
- .add({
- targets: icon,
- translateX: 0, // Reset translation to original
- translateY: 0, // Reset translation to original
- duration: 500
- })
- }
+ } else {
+ console.error('Goal element is not available.');
+ }
+ }
+ else if (!isGoal && target && targetRect) {
+ // Calculate the translation coordinates for the icon
+ translateX1 = containerRect.left + containerRect.width / 2 - iconRect.width / 2 - iconRect.left;
+ translateY1 = containerRect.top + containerRect.height / 2 - iconRect.height / 2 - iconRect.top;
+ translateX2 = targetRect.left + targetRect.width / 2 - iconRect.width / 2 - iconRect.left;
+ translateY2 = targetRect.top + targetRect.height / 2 - iconRect.height / 2 - iconRect.top;
+
+ anime
+ .timeline({
+ easing: 'easeInOutQuad',
+ duration: 1500
+ })
+ .add({
+ targets: icon,
+ translateX: translateX1,
+ translateY: translateY1,
+ opacity: 0, // Start invisible
+ duration: 1000
+ })
+ .add({
+ targets: icon,
+ opacity: 1, // Reveal the icon once it starts moving to the container
+ duration: 1000, // Make the opacity change almost instantaneously
+ scale: 3
+ })
+ .add({
+ targets: icon,
+ translateX: translateX2,
+ translateY: translateY2,
+ scale: 0.5,
+ opacity: 1, // Keep the icon visible while moving to the target
+ duration: 1500
+ })
+ .add({
+ targets: icon,
+ opacity: 0, // Fade out once it reaches the target
+ scale: 1,
+ duration: 500
+ })
+ .add({
+ targets: icon,
+ translateX: 0, // Reset translation to original
+ translateY: 0, // Reset translation to original
+ duration: 500
+ })
+ }
+ else if(!isGoal && !target) {
+ // Calculate the translation coordinates for the icon
+ translateX1 = containerRect.left + containerRect.width / 2 - iconRect.width / 2 - iconRect.left;
+ translateY1 = containerRect.top + containerRect.height / 2 - iconRect.height / 2 - iconRect.top;
+ anime
+ .timeline({
+ easing: 'easeInOutQuad',
+ duration: 1500
+ })
+ .add({
+ targets: icon,
+ translateX: translateX1,
+ translateY: translateY1,
+ opacity: 0, // Start invisible
+ duration: 1000
+ })
+ .add({
+ targets: icon,
+ opacity: 1, // Reveal the icon once it starts moving to the container
+ duration: 1000, // Make the opacity change almost instantaneously
+ scale: 3
+ })
+ .add({
+ targets: icon,
+ opacity: 0, // Fade out once it reaches the target
+ scale: 1,
+ duration: 500
+ })
+ .add({
+ targets: icon,
+ translateX: 0, // Reset translation to original
+ translateY: 0, // Reset translation to original
+ duration: 500
+ })
+ }
}
/**
* Triggers confeti animation
@@ -513,108 +581,118 @@ const triggerConfetti = () => {
//fetching images
const getGoalIcon = (goal: Goal): string => {
+ if (goal){
return `src/assets/${goal.title.toLowerCase()}.png`
+ }
+ else{
+ return 'src/assets/pengesekkStreak.png'
+ }
}
const getPigStepsIcon = () => {
return 'src/assets/pigSteps.png'
}
const goToEditGoal = () => {
- router.push({ name: 'edit-goal', params: { id: goal.value?.id } })
+ router.push({ name: 'edit-goal', params: { id: goal?.id } })
}
const editGoal = (goal: Goal) => {
router.push(`/sparemaal/rediger/${goal.id}`)
}
-//Initialisation:
-onMounted(async () => {
- await goalStore.getUserGoals()
- window.addEventListener('resize', handleWindowSizeChange)
- handleWindowSizeChange();
- sortChallenges();
- allChallengesCompleted();
- // Delay the execution of the following logic by 300ms
- setTimeout(() => {
- const container = containerRef.value;
- if (container) {
- container.addEventListener('scroll', () => {
- if (!firstUncompletedRef.value) return;
- const containerRect = container.getBoundingClientRect();
- const firstUncompletedRect = firstUncompletedRef.value.getBoundingClientRect();
- isAtFirstUncompleted.value = !(
- firstUncompletedRect.top > containerRect.bottom ||
- firstUncompletedRect.bottom < containerRect.top
- );
- });
- }
- scrollToFirstUncompleted();
- }, 300); // Timeout set to 300 milliseconds
- // Load existing animated states first
- loadAnimatedStates()
- // Get completed challenge IDs, ensuring that only defined IDs are considered
- const completedChallenges = challenges.value
- .filter((challenge) => challenge.completion === 100 && challenge.id !== undefined)
- .map((challenge) => challenge.id as number) // Use 'as number' to assert that ids are numbers after the check
+/**
+ * Sorts the challenges by completion status and due date
- // Update only new completions that are not already in the animatedChallenges
- const newAnimations = completedChallenges.filter((id) => !animatedChallenges.value.includes(id))
- animatedChallenges.value = [...animatedChallenges.value, ...newAnimations]
+ */
+const sortChallenges = () => {
+ if (challenges.value) {
+ challenges.value.sort((a, b) => {
+ // First, sort by completion status: non-completed (less than 100) before completed (100)
+ if (a.completion !== 100 && b.completion === 100) {
+ return 1 // 'a' is not completed and 'b' is completed, 'a' should come first
+ } else if (a.completion === 100 && b.completion !== 100) {
+ return -1 // 'a' is completed and 'b' is not, 'b' should come first
+ } else {
+ // Explicitly convert dates to numbers for subtraction
+ const dateA = new Date(a.due).getTime()
+ const dateB = new Date(b.due).getTime()
+ return dateA - dateB
+ }
+ })
+ }
+}
- // Save the updated list back to localStorage
- localStorage.setItem('animatedChallenges', JSON.stringify(animatedChallenges.value))
-})
+// Interface for element references
+interface ElementRefs {
+ [key: string]: HTMLElement | undefined
+}
+
+const elementRefs = reactive<ElementRefs>({})
+const isAtFirstUncompleted = ref(false)
+const firstUncompletedRef: Ref<HTMLElement | undefined> = ref()
+const screenSize = ref<number>(window.innerWidth)
+/**
+ * Handles the window size change event
+ */
+const handleWindowSizeChange = () => {
+ screenSize.value = window.innerWidth
+}
+/**
+ * Scrolls to the first uncompleted challenge
-onUnmounted(() => {
- window.removeEventListener('resize', handleWindowSizeChange)
- const container = containerRef.value
- if (container) {
- container.removeEventListener('scroll', () => {
- // Clean up the scroll listener
- })
+ */
+const scrollToFirstUncompleted= ()=> {
+ if (challenges.value) {
+ let found = false
+ for (let i = 0; i < challenges.value.length; i++) {
+ if (challenges.value[i].completion! < 100) {
+ const refKey = `uncompleted-${i}`
+ if (elementRefs[refKey]) {
+ elementRefs[refKey]!.scrollIntoView({behavior: 'smooth', block: 'start'})
+ firstUncompletedRef.value = elementRefs[refKey] // Store the reference
+ found = true
+ isAtFirstUncompleted.value = true
+ break
+ }
+ }
+ }
+ if (!found) {
+ isAtFirstUncompleted.value = false
+ }
}
-})
+}
-//watchers:
+/**
+ * Assigns the reference to the element
+ * @param el
+ * @param challenge
+ * @param index
+ */
+const assignRef = (
+ el: Element | ComponentPublicInstance | null,
+ challenge: Challenge,
+ index: number
+) => {
+ const refKey = `uncompleted-${index}`
+ if (el instanceof HTMLElement) {
+ // Ensure that el is an HTMLElement
+ if (challenge.completion! < 100) {
+ elementRefs[refKey] = el
+ }
+ } else {
+ // Cleanup if the element is unmounted or not an HTMLElement
+ if (elementRefs[refKey]) {
+ delete elementRefs[refKey]
+ }
+ }
+}
-watch(
- () => props.challenges,
- (newChallenges, oldChallenges) => {
- if (newChallenges !== oldChallenges) {
- challenges.value = newChallenges
- goalStore.
- sortChallenges()
- allChallengesCompleted()
- }
- },
- { immediate: true }
-)
-
-watch(
- challenges,
- (newChallenges) => {
- newChallenges.forEach((challenge) => {
- //wait for 300ms before animating maybe?
- nextTick(() => {
- if (challenge.completion === 100) {
- if (!animatedChallenges.value.includes(challenge.id as number)) {
- console.log(!animatedChallenges.value.includes(challenge.id as number))
- console.log('Animating challenge in watcher:', challenge.id)
- animateChallenge(challenge)
- saveAnimatedStateChallenge(challenge) // Refactor this to update localStorage correctly
- }
- }
- })
- })
- },
- { deep: true }
-)
</script>
<style scoped>
@@ -625,8 +703,6 @@ watch(
.no-scrollbar {
-ms-overflow-style: none; /* for Internet Explorer and Edge */
}
-.glow {
- box-shadow: 0 0 8px rgba(255, 242, 18, 0.8); /* Adjust color and size as needed */
-}
+
</style>
diff --git a/src/stores/challengeStore.ts b/src/stores/challengeStore.ts
index a8417aa62bf51495a6a06b401145b0fe06f34a06..faa63f85307076c7b858da4ab979c43d7a85072c 100644
--- a/src/stores/challengeStore.ts
+++ b/src/stores/challengeStore.ts
@@ -12,7 +12,6 @@ export const useChallengeStore = defineStore('challenge', () => {
const response = await authInterceptor('/challenges')
if (response.data && response.data.content) {
challenges.value = response.data.content
- console.log('Fetched Challenges:', challenges.value)
} else {
challenges.value = []
console.error('No challenge content found:', response.data)
@@ -33,12 +32,15 @@ export const useChallengeStore = defineStore('challenge', () => {
if (index !== -1) {
challenges.value[index] = { ...challenges.value[index], ...response.data }
console.log('Updated Challenge:', response.data)
+ return challenges.value[index];
}
} else {
console.error('No challenge content found in response data')
+ return null;
}
} catch (error) {
console.error('Error updating challenge:', error)
+ return null;
}
}
const completeUserChallenge = async (challenge: Challenge) => {
@@ -53,12 +55,16 @@ export const useChallengeStore = defineStore('challenge', () => {
if (index !== -1) {
challenges.value[index] = { ...challenges.value[index], ...response.data }
console.log('Updated Challenge:', response.data)
+ console.log('Challenge Completed store:', challenges.value[index])
+ return challenges.value[index];
}
} else {
console.error('No challenge content found in response data')
+ return null;
}
} catch (error) {
console.error('Error updating challenge:', error)
+ return null;
}
}
diff --git a/src/stores/goalStore.ts b/src/stores/goalStore.ts
index 7fbc0718d96eeb4c6c534c12d45d05dbb720e822..11a917cef522afc0529828b337e70d791a58301d 100644
--- a/src/stores/goalStore.ts
+++ b/src/stores/goalStore.ts
@@ -12,10 +12,13 @@ export const useGoalStore = defineStore('goal', () => {
if (response.data && response.data.content) {
goals.value = response.data.content
for (const goal of goals.value) {
- if (goal.priority) {
+ if (goal.priority === 1) {
priorityGoal.value = goal
break
}
+ else {
+ priorityGoal.value = null
+ }
}
console.log(response.data.content)
} else {
@@ -41,7 +44,6 @@ export const useGoalStore = defineStore('goal', () => {
const index = goals.value.findIndex((g) => g.id === goal.id)
if (index !== -1) {
goals.value[index] = { ...goals.value[index], ...response.data }
- console.log('Updated Goal:', response.data)
}
} else {
console.error('No goal content found in response data')
diff --git a/src/types/streak.ts b/src/types/streak.ts
index 61dafae24c954c7ca99a3596ca43a659f1ef122c..f49346322939e0b0517ebca400e5fcaeccddedc3 100644
--- a/src/types/streak.ts
+++ b/src/types/streak.ts
@@ -1,4 +1,5 @@
export interface Streak {
streakStart?: string
streak?: number
+ firstDue?: string
}
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 696cfe45e4e2ab39f2358e7286bd82a961f88e3c..02152ef313172a57c4277ebec99cc2ff350c3363 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -24,7 +24,7 @@
/>
</div>
</div>
- <savings-path :challenges="challenges" :goal="goal"></savings-path>
+ <savings-path v-if="isMounted" :challenges="challenges" :goal="goal"></savings-path>
</div>
<InteractiveSpare
:speech="speech"
@@ -41,7 +41,7 @@
</template>
<script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import {onMounted, ref} from 'vue'
import InteractiveSpare from '@/components/InteractiveSpare.vue'
import ButtonAddGoalOrChallenge from '@/components/ButtonAddGoalOrChallenge.vue'
import type { Challenge } from '@/types/challenge'
@@ -59,9 +59,8 @@ const speech = ref<string[]>([])
const newSpeechAvailable = ref(false)
const challenges = ref<Challenge[]>([])
-const goals = ref<Goal[]>([])
-
const goal = ref<Goal | null | undefined>(null)
+const isMounted = ref(false)
onMounted(async () => {
await goalStore.getUserGoals()
@@ -69,8 +68,11 @@ onMounted(async () => {
challenges.value = challengeStore.challenges
goal.value = goalStore.priorityGoal
firstLoggedInSpeech()
+ isMounted.value = true
})
+
+
// Check if the user is logging in for the first time, and display the first login speech
const firstLoggedInSpeech = () => {
const isFirstLogin = router.currentRoute.value.query.firstLogin === 'true'