feat: Add confetti package and dependency

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "animejs": "^3.2.2",
+        "canvas-confetti": "^1.9.2",
         "pinia": "^2.1.7",
         "vue": "^3.4.21",
         "vue-router": "^4.3.1"
@@ -2345,6 +2346,15 @@
         }
       ]
     },
+    "node_modules/canvas-confetti": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.2.tgz",
+      "integrity": "sha512-6Xi7aHHzKwxZsem4mCKoqP6YwUG3HamaHHAlz1hTNQPCqXhARFpSXnkC9TWlahHY5CG6hSL5XexNjxK8irVErg==",
+      "funding": {
+        "type": "donate",
+        "url": "https://www.paypal.me/kirilvatev"
+      }
+    },
     "node_modules/caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",

package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "animejs": "^3.2.2",
+    "canvas-confetti": "^1.9.2",
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
     "vue-router": "^4.3.1"

src/views/HomeView.vue

@@ -15,16 +15,19 @@
         <div class="flex flex-col basis-2/3 max-h-full mx-auto max-w-5/6 md:basis-1/2">
             <div class="flex justify-center align-center">
                 <span
-                    class="w-full max-w-60 max-h-12 bg-green-500 text-white font-bold py-2 rounded mt-8 text-center space-x-2 drop-shadow-lg"
+                    class="w-full max-w-60 max-h-12 text-black text-2xl font-bold py-2 rounded mt-8 text-center space-x-2 drop-shadow-lg"
                 >
                     Din Sparesti
                 </span>
             </div>
-            <div class="h-1 w-4/6 bg-black mx-auto my-2 opacity-10"></div>
+            <div class="h-1 w-4/6 mx-auto my-2 opacity-10"></div>
             <div
                 ref="containerRef"
-                class="container relative mx-auto pt-6 w-4/5 md:w-3/5 no-scrollbar h-full max-h-[60vh] md:max-h-[60v] overflow-y-auto border-2 border-black rounded-lg bg-white shadow-lg"
+                class="container relative mx-auto pt-6 w-4/5 md:w-3/5 no-scrollbar h-full max-h-[60vh] md:max-h-[60v] overflow-y-auto border-2 border-slate-300 rounded-lg bg-white shadow-lg"
             >
+            <div>
+        <img src="@/assets/start.png" alt="Spare" class="md:w-1/6 md:h-auto h-20 " />
+    </div>
                 <div
                     v-for="(challenge, index) in challenges"
                     :key="challenge.title"
@@ -43,13 +46,13 @@
                                 v-if="index === 3"
                                 src="@/assets/sleepingSpare.gif"
                                 alt="could not load"
-                                class="w-32 h-32 border-2 border-black"
+                                class="w-32 h-32 border-2 rounded-lg border-stale-400"
                             />
                             <img
                                 v-else-if="index === 1"
                                 src="@/assets/golfSpare.gif"
                                 alt="could not load"
-                                class="w-32 h-32 border-2 border-black"
+                                class="w-32 h-32 border-2 rounded-lg border-stale-400"
                             />
                         </div>
                         <!-- Challenge Icon and Details -->
@@ -92,7 +95,7 @@
                                         <button
                                             @click="incrementSaved(challenge)"
                                             type="button"
-                                            class="inline-block mb-2 ml-2 h-8 w-8 rounded-full bg-green-500 p-1 uppercase leading-normal text-white bg-color-green shadow-green-500 transition duration-150 ease-in-out hover:bg-green-700 hover:shadow-green-200 focus:bg-green-accent-300 focus:shadow-green-2 focus:outline-none focus:ring-0 active:bg-green-600 active:shadow-green-200 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
+                                            class="inline-block mb-2 ml-2 h-7 w-8 rounded-full p-1 uppercase leading-normal transition duration-150 ease-in-out focus:bg-green-accent-300 focus:shadow-green-2 focus:outline-none focus:ring-0 active:bg-green-600 active:shadow-green-200 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                                         >
                                             +
                                         </button>
@@ -108,11 +111,11 @@
                                     challenge.completion !== undefined &&
                                     challenge.completion >= 100
                                 "
-                                class="max-w-16 max-h-16"
+                                class="max-w-10 max-h-10"
                             >
                                 <img src="@/assets/completed.png" alt="" />️
                             </div>
-                            <div v-else class="max-w-16 max-h-16">
+                            <div v-else class="max-w-6 max-h-6">
                                 <img src="@/assets/pending.png" alt="" />️
                             </div>
                         </div>
@@ -121,12 +124,12 @@
                                 v-if="index === 0"
                                 src="@/assets/cowboySpare.gif"
                                 alt="could not load"
-                                class="h-32 w-32 border-2 border-black"
+                                class="h-32 w-32 border-2 rounded-lg border-stale-400"
                             />
                             <img
                                 v-else-if="index === 2"
                                 src="@/assets/hotAirBalloonSpare.gif"
-                                class="h-32 w-32 border-black border-2"
+                                class="h-32 w-32 border-stale-400 border-2 rounded-lg"
                                 alt="could not load"
                             />
                         </div>
@@ -163,7 +166,7 @@
                 </div>
                 <img
                     src="@/assets/finishLine.png"
-                    class="w-full max-h-4 mx-auto mt-10"
+                    class="w-full max-h-auto mx-auto mt-4"
                     alt="Finish Line"
                 />
                 <!-- Sparemannen -->
@@ -182,9 +185,9 @@
                 </div>
                 <div class="flex flex-col items-end">
                     <div @click="goToEditGoal" class="cursor-pointer">
-                        <h3 class="text-blue-500 text-base">Endre mål</h3>
+                        <h3 class="text-black text-base">Endre mål</h3>
                     </div>
-                    <div ref="targetRef" class="bg-yellow-400 px-4 py-1 rounded-full text-black">
+                    <div ref="targetRef" class="bg-yellow-400 px-4 py-1 rounded-full text-black font-bold">
                         {{ goal.saved }}kr / {{ goal.target }}kr
                     </div>
                 </div>
@@ -192,8 +195,8 @@
         </div>
         <!-- Animation icon -->
         <img
-            src="@/assets/coins.png"
-            alt="Coins"
+            src="@/assets/penger.png"
+            alt="Penger"
             ref="iconRef"
             class="max-w-20 max-h-20 absolute opacity-0"
         />
@@ -205,10 +208,11 @@
 import { nextTick, onMounted, ref, watch } from 'vue'
 import anime from 'animejs'
 import InteractiveSpare from '@/components/InteractiveSpare.vue'
-import ButtonAddGoalOrChallenge from '@/components/ButtonAddGoalOrChallange.vue'
+import ButtonAddGoalOrChallenge from '@/components/ButtonAddGoalOrChallenge.vue'
 import router from '@/router'
 import type { Challenge } from '@/types/challenge'
 import type { Goal } from '@/types/goal'
+import confetti from 'canvas-confetti';
 
 // Define your speech array
 const speechArray = [
@@ -248,13 +252,13 @@ const challenge: Challenge = {
     completedOn: undefined // Not yet completed
 }
 const challenge1: Challenge = {
-    title: 'Snacks',
+    title: 'Mat',
     saved: 200,
     target: 400,
     description: 'Saving monthly for a year-end vacation to Bali',
     createdOn: new Date('2023-01-01T00:00:00Z'),
     dueDate: new Date('2023-12-31T23:59:59Z'),
-    type: 'SNACKS',
+    type: 'MAT',
     completion: 50,
     completedOn: undefined // Not yet completed
 }
@@ -314,11 +318,22 @@ const animateChallenge = (challenge: Challenge) => {
         !animatedChallenges.value.has(challenge.title)
     ) {
         console.log('Animating for:', challenge.title)
-        recalculateAndAnimate() // Assumes this function triggers the actual animation
+
+        triggerConfetti();
+
+        recalculateAndAnimate()
         saveAnimatedState(challenge.title)
     }
 }
 
+function triggerConfetti() {
+        confetti({
+            particleCount: 400,
+            spread: 80,
+            origin: { x: 0.8 , y: 0.8 }
+        });
+}
+
 watch(
     challenges,
     (newChallenges) => {
@@ -412,7 +427,7 @@ function animateIcon() {
 // Helper methods to get icons
 function getChallengeIcon(challenge: Challenge): string {
     if (challenge.type === undefined) {
-        return 'src/assets/coins.png'
+        return 'src/assets/penger.png'
     }
     return `src/assets/${challenge.type.toLowerCase()}.png`
 }