diff --git a/src/components/InteractiveSpare.vue b/src/components/InteractiveSpare.vue
index 186ed269a5529fe33fedb13bc425b89258cdd457..44a50ecbe1fe49a137d74e231fa09e1021a35081 100644
--- a/src/components/InteractiveSpare.vue
+++ b/src/components/InteractiveSpare.vue
@@ -42,33 +42,37 @@
</template>
<script setup lang="ts">
-import {computed, defineProps,ref, watch} from 'vue'
+import { computed, defineProps, ref, watch } from 'vue'
import spareImageSrc from '@/assets/spare.png'
import ModalComponent from '@/components/ModalComponent.vue'
interface Props {
- speech: string[] | null;
- direction: 'left' | 'right';
- pngSize: number;
- isModalOpen: boolean;
+ speech: string[] | null
+ direction: 'left' | 'right'
+ pngSize: number
+ isModalOpen: boolean
}
-const props = defineProps<Props>();
+const props = defineProps<Props>()
-const speech = ref<string[]>(props.speech || []);
-const isModalOpen = ref(props.isModalOpen);
+const speech = ref<string[]>(props.speech || [])
+const isModalOpen = ref(props.isModalOpen)
// Watch the speech prop for changes
-watch(() => props.speech, (newVal) => {
- if (newVal) { // Check if the new value is not null
- speech.value = newVal; // Update the reactive speech array
- currentSpeechIndex.value = 0; // Reset the speech index
- isModalOpen.value = true; // Open the modal if new speech is available
- } else {
- speech.value = []; // Clear the speech array if null is received
- isModalOpen.value = false; // Close the modal if there's no speech
- }
-});
+watch(
+ () => props.speech,
+ (newVal) => {
+ if (newVal) {
+ // Check if the new value is not null
+ speech.value = newVal // Update the reactive speech array
+ currentSpeechIndex.value = 0 // Reset the speech index
+ isModalOpen.value = true // Open the modal if new speech is available
+ } else {
+ speech.value = [] // Clear the speech array if null is received
+ isModalOpen.value = false // Close the modal if there's no speech
+ }
+ }
+)
const currentSpeechIndex = ref(0)
const currentSpeech = computed(() => speech.value[currentSpeechIndex.value])
@@ -111,10 +115,12 @@ const modalClosed = () => {
isModalOpen.value = false
}
-watch(() => props.isModalOpen, (newVal) => {
- isModalOpen.value = newVal;
-});
-
+watch(
+ () => props.isModalOpen,
+ (newVal) => {
+ isModalOpen.value = newVal
+ }
+)
</script>
<style scoped>
/* CSS talk bubble */
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 28e9ccfb44cae8a38ccd7077f69619268ae6b624..a0489624dc881778c0e31a34cd84c649e4734c20 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,15 +1,18 @@
<template>
<div class="flex flex-col items-center max-h-[60vh] md:flex-row md:max-h-[80vh] mx-auto">
<div class="flex flex-col basis-1/3 order-last md:order-first md:basis-1/4 md:pl-1 mt-10">
- <img v-if="newSpeechAvailable" alt="Varsel"
- class="jump scale-x-[-1] w-1/12 h-1/12 ml-52 cursor-pointer z-10"
- src="@/assets/varsel.png"
+ <img
+ v-if="newSpeechAvailable"
+ alt="Varsel"
+ class="jump scale-x-[-1] w-1/12 h-1/12 ml-52 cursor-pointer z-10"
+ src="@/assets/varsel.png"
/>
<div class="flex items-center">
<a @click="openInteractiveSpare" class="hover:bg-transparent z-20">
- <img alt="Spare"
- class="scale-x-[-1] md:h-5/6 md:w-5/6 w-2/3 h-2/3 cursor-pointer ml-14 md:ml-10"
- src="@/assets/spare.png"
+ <img
+ alt="Spare"
+ class="scale-x-[-1] md:h-5/6 md:w-5/6 w-2/3 h-2/3 cursor-pointer ml-14 md:ml-10"
+ src="@/assets/spare.png"
/>
</a>
</div>
@@ -33,10 +36,7 @@
></InteractiveSpare>
<div class="fixed bottom-5 left-5">
<div @click="openHelp" class="hover:cursor-pointer">
- <img alt="Hjelp"
- class="w-1/12"
- src="@/assets/hjelp.png"
- />
+ <img alt="Hjelp" class="w-1/12" src="@/assets/hjelp.png" />
</div>
</div>
</template>
@@ -50,7 +50,7 @@ import type { Goal } from '@/types/goal'
import { useGoalStore } from '@/stores/goalStore'
import { useChallengeStore } from '@/stores/challengeStore'
import SavingsPath from '@/components/SavingsPath.vue'
-import router from "@/router";
+import router from '@/router'
const goalStore = useGoalStore()
const challengeStore = useChallengeStore()
@@ -64,33 +64,33 @@ const goals = ref<Goal[]>([])
const goal = ref<Goal | null | undefined>(null)
onMounted(async () => {
- await goalStore.getUserGoals()
- await challengeStore.getUserChallenges()
- challenges.value = challengeStore.challenges
- goals.value = goalStore.goals
- goal.value = goals.value[0]
- firstLoggedInSpeech()
+ await goalStore.getUserGoals()
+ await challengeStore.getUserChallenges()
+ challenges.value = challengeStore.challenges
+ goals.value = goalStore.goals
+ goal.value = goals.value[0]
+ firstLoggedInSpeech()
})
const updateSpeech = (newSpeech: string[]) => {
- speech.value = newSpeech;
- newSpeechAvailable.value = true;
+ speech.value = newSpeech
+ newSpeechAvailable.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';
- if (isFirstLogin) {
- updateSpeech([
- 'Hei, jeg er Spare!',
- 'Jeg skal hjelpe deg med å spare penger.',
- 'Du får varsel når jeg har noe å si!'
- ]);
- // reset the query parameter
- router.replace({name: 'home', query: {firstLogin: 'false'}});
+ const isFirstLogin = router.currentRoute.value.query.firstLogin === 'true'
+ if (isFirstLogin) {
+ updateSpeech([
+ 'Hei, jeg er Spare!',
+ 'Jeg skal hjelpe deg med å spare penger.',
+ 'Du får varsel når jeg har noe å si!'
+ ])
+ // reset the query parameter
+ router.replace({ name: 'home', query: { firstLogin: 'false' } })
- openInteractiveSpare()
- }
+ openInteractiveSpare()
+ }
}
const openInteractiveSpare = () => {
@@ -105,21 +105,24 @@ const openHelp = () => {
'Heisann, jeg er Spare!',
'Jeg skal hjelpe deg med å spare penger.',
'Du kan legge til sparemål og spareutfordringer!',
- 'Sammen kan vi spare penger og nå dine mål!',
+ 'Sammen kan vi spare penger og nå dine mål!'
])
openInteractiveSpare()
}
-
-
</script>
<style>
@keyframes jump {
- 0%, 100% { transform: translateY(0); }
- 50% { transform: translateY(-10px); }
+ 0%,
+ 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-10px);
+ }
}
.jump {
animation: jump 0.6s infinite ease-in-out;
}
-</style>
\ No newline at end of file
+</style>