Add highest number of points earned variable when task is completed

Author: lulunac27a

src/components/TodoList.vue

@@ -3,47 +3,16 @@
     <p>Level: {{ levels.toLocaleString("en-US") }}</p>
     <p>XP: {{ xps.toLocaleString("en-US") }}</p>
     <p>Daily Streak: {{ dailyStreaks.toLocaleString("en-US") }}</p>
-    <p>
-      Tasks Completed Today: {{ tasksCompletedTodays.toLocaleString("en-US") }}
-    </p>
-    <p>
-      Total Tasks Completed: {{ totalTasksCompletions.toLocaleString("en-US") }}
-    </p>
+    <p>Tasks Completed Today: {{ tasksCompletedTodays.toLocaleString("en-US") }}</p>
+    <p>Total Tasks Completed: {{ totalTasksCompletions.toLocaleString("en-US") }}</p>
     <p>Score: {{ scores.toLocaleString("en-US") }}</p>
-    <!--show circular progress bar filled with level progress--><ve-progress
-      :progress="progresses"
-      >Level {{ levels.toLocaleString("en-US") }}</ve-progress
-    >
+    <p>Best Points Earned After Completing the Task: {{ bestScoreEarneds.toLocaleString("en-US") }}</p>
+    <!--show circular progress bar filled with level progress--><ve-progress :progress="progresses">Level {{ levels.toLocaleString("en-US") }}</ve-progress>
     <h3>Task list</h3>
-    <ul class="todos">
-      <!--repeat for each tasks-->
+    <ul class="todos"><!--repeat for each tasks-->
       <li v-for="todo in todos" :key="todo.newId" class="todo">
-        <span
-          v-bind:class="{
-            overdue: new Date(todo.dueDate + ' 23:59:59.999') < new Date(),
-          }"
-          >{{ todo.task }} <br />Streak:
-          {{ todo.streak.toLocaleString("en-US") }} <br />Due date:
-          {{ todo.dueDate }} <br />Priority: {{ todo.priority }}
-          <br />Difficulty: {{ todo.difficulty }} <br />Repeat:
-          <span v-if="todo.repeatFrequency != 5">{{
-            todo.repeatOften.toLocaleString("en-US")
-          }}</span
-          >&nbsp;<span v-if="todo.repeatFrequency == 1">Day</span
-          ><span v-if="todo.repeatFrequency == 2">Week</span
-          ><span v-if="todo.repeatFrequency == 3">Month</span
-          ><span v-if="todo.repeatFrequency == 4">Year</span
-          ><span v-if="todo.repeatFrequency == 5">Once</span
-          ><span v-if="todo.repeatOften > 1 && todo.repeatFrequency != 5"
-            >s</span
-          ></span
-        >
-        <!--don't show complete button if one-time task is completed--><button
-          v-if="!todo.completed"
-          @click="completeTodo(todo.newId)"
-        >
-          Complete
-        </button>
+        <span v-bind:class="{overdue: new Date(todo.dueDate + ' 23:59:59.999') < new Date()}">{{ todo.task }} <br/>Streak: {{ todo.streak.toLocaleString("en-US") }} <br/>Due date: {{ todo.dueDate }} <br/>Priority: {{ todo.priority }} <br/>Difficulty: {{ todo.difficulty }} <br/>Repeat: <span v-if="todo.repeatFrequency != 5">{{ todo.repeatOften.toLocaleString("en-US") }}</span>&nbsp;<span v-if="todo.repeatFrequency == 1">Day</span><span v-if="todo.repeatFrequency == 2">Week</span><span v-if="todo.repeatFrequency == 3">Month</span><span v-if="todo.repeatFrequency == 4">Year</span><span v-if="todo.repeatFrequency == 5">Once</span><span v-if="todo.repeatOften > 1 && todo.repeatFrequency != 5">s</span></span>
+        <!--don't show complete button if one-time task is completed--><button v-if="!todo.completed" @click="completeTodo(todo.newId)">Complete</button>
         <button @click="deleteTodo(todo.newId)">Delete</button><br />
       </li>
     </ul>
@@ -88,14 +57,12 @@ export default defineComponent({
     timesCompleted: Number,
     streak: Number,
     dailyStreak: Number,
-    originalDueDate: Date,
+    originalDueDate: Date
   },
   computed: {
     todos() {
       //eslint-disable-next-line
-      return store.getters.getTodos.sort((a: any, b: any) =>
-        a.dueDate.localeCompare(b.dueDate)
-      ); //get tasks (todos) and sort tasks by task's due date with the top one the oldest
+      return store.getters.getTodos.sort((a: any, b: any) => a.dueDate.localeCompare(b.dueDate)); //get tasks (todos) and sort tasks by task's due date with the top one the oldest
     },
     levels() {
       return store.getters.getLevel; //get current level
@@ -107,20 +74,23 @@ export default defineComponent({
       return store.getters.getProgress; //get current progress
     },
     scores() {
-      return store.getters.getScore; //get current score
+      return store.getters.getScore;//get current score
     },
     dailyStreaks() {
-      return store.getters.getDailyStreak; //get current daily streak
+      return store.getters.getDailyStreak;//get current daily streak
     },
     tasksCompletedTodays() {
-      return store.getters.getTasksCompletedToday; //get tasks completed in a day (today)
+      return store.getters.getTasksCompletedToday;//get tasks completed in a day (today)
     },
     totalTasksCompletions() {
-      return store.getters.getTotalTasksCompleted; //get total tasks completed
+      return store.getters.getTotalTasksCompleted;//get total tasks completed
     },
     lastCompletedDates() {
-      return store.getters.getLastCompletionDate; //get current last completion date
+      return store.getters.getLastCompletionDate;//get current last completion date
     },
+    bestScoreEarneds() {
+      return store.getters.getBestScoreEarned;//get best score earned
+    }
   },
   methods: {
     /**