Add rank levels

Author: lulunac27a

src/components/NewTodo.vue

@@ -96,8 +96,11 @@ export default defineComponent({
       repeatInterval: RepeatInterval.Once, //set default task repetition interval to one-time
       newId: 0, //initial task id is 0
       isCompleted: false, //task not completed if a task is created
-      timesCompleted: 0,
+      timesCompleted: 0, //set default task times completed to 0
       streak: 0, //set default task streak to 0
+      rank: 0, //set default task rank to 0
+      rankXp: 0, //set default task rank XP to 0
+      rankProgress: 0, //set default rank progress to 0
       originalDueDate: currentLocalDate.toISOString().split("T")[0], //set a default original task due date to today
     };
   },
@@ -124,6 +127,9 @@ export default defineComponent({
       this.isCompleted = false;
       this.timesCompleted = 0;
       this.streak = 0;
+      this.rank = 0;
+      this.rankXp = 0;
+      this.rankProgress = 0;
       this.originalDueDate = currentLocalDate.toISOString().split("T")[0];
     },
   },

src/components/TodoList.scss

@@ -1,25 +1,27 @@
-@use "sass:math";
+@use "sass:math"; //use math functions
 
-$margin: 10px;
+$margin: 10px; //default margin value
 h3 {
-  margin: $margin 0 0;
+  margin: $margin 0 0; //no left, right and bottom margins for displaying task list header
 }
 
 ul {
-  list-style-type: none;
-  padding: 0;
-  line-height: 150%;
+  list-style-type: none; //no bullets for unordered lists
+  padding: 0; //no padding for unordered lists
+  line-height: 150%; //more line spacing for easier to read text
 }
 
 li {
   margin: #{math.div($margin, 2)} $margin; //add line spacing between tasks
 }
 
-a {
-  color: #42b983;
+.overdue {
+  //overdue tasks
+  color: red; //set text color to red for overdue tasks
+  font-weight: bold; //bold text for overdue tasks
 }
 
-.overdue {
-  color: red;
-  font-weight: bold;
+#text-numeric-display {
+  //text output and numeric values display
+  font-weight: bold; //bold text for output and numeric values
 }

src/components/TodoList.vue

@@ -1,24 +1,54 @@
 <template>
   <div class="todo-app">
-    <p>Level: {{ getCurrentLevel.toLocaleString("en-US") }}</p>
-    <p>XP: {{ getCurrentXp.toLocaleString("en-US") }}</p>
-    <p>Daily Streak: {{ getCurrentDailyStreak.toLocaleString("en-US") }}</p>
+    <!--task list app content-->
+    <p>
+      Level:
+      <span id="text-numeric-display">{{
+        getCurrentLevel.toLocaleString("en-US")
+      }}</span>
+    </p>
+    <p>
+      XP:
+      <span id="text-numeric-display">{{
+        getCurrentXp.toLocaleString("en-US")
+      }}</span>
+    </p>
+    <p>
+      Daily Streak:
+      <span id="text-numeric-display">{{
+        getCurrentDailyStreak.toLocaleString("en-US")
+      }}</span>
+    </p>
     <p>
       Tasks Completed Today:
-      {{ getCurrentTasksCompletedToday.toLocaleString("en-US") }}
+      <span id="text-numeric-display">{{
+        getCurrentTasksCompletedToday.toLocaleString("en-US")
+      }}</span>
     </p>
     <p>
       Total Tasks Completed:
-      {{ getCurrentTotalTasksCompleted.toLocaleString("en-US") }}
+      <span id="text-numeric-display">{{
+        getCurrentTotalTasksCompleted.toLocaleString("en-US")
+      }}</span>
+    </p>
+    <p>
+      Score:
+      <span id="text-numeric-display">{{
+        getCurrentScore.toLocaleString("en-US")
+      }}</span>
     </p>
-    <p>Score: {{ getCurrentScore.toLocaleString("en-US") }}</p>
     <p>
       Best Points Earned After Completing the Task:
-      {{ getCurrentBestScoreEarned.toLocaleString("en-US") }}
+      <span id="text-numeric-display">{{
+        getCurrentBestScoreEarned.toLocaleString("en-US")
+      }}</span>
     </p>
     <!--show circular progress bar filled with level progress--><ve-progress
       :progress="getCurrentProgress"
-      >Level {{ getCurrentLevel.toLocaleString("en-US") }}</ve-progress
+      >Level
+      <span id="text-numeric-display">{{
+        getCurrentLevel.toLocaleString("en-US")
+      }}</span></ve-progress
     >
     <h3>Task list</h3>
     <ul class="todos">
@@ -28,13 +58,26 @@
           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.repeatInterval != 5">{{
-            todo.repeatEvery.toLocaleString("en-US")
-          }}</span
+          ><span id="text-numeric-display">{{ todo.task }}</span> <br />Streak:
+          <span id="text-numeric-display">{{
+            todo.streak.toLocaleString("en-US")
+          }}</span>
+          <br />Rank:
+          <span id="text-numeric-display">{{
+            todo.rank.toLocaleString("en-US")
+          }}</span>
+          <br /><progress max="100" :value="todo.rankProgress"></progress
+          ><br />Due date:
+          <span id="text-numeric-display">{{ todo.dueDate }}</span>
+          <br />Priority:
+          <span id="text-numeric-display">{{ todo.priority }}</span>
+          <br />Difficulty:
+          <span id="text-numeric-display">{{ todo.difficulty }}</span>
+          <br />Repeat:
+          <span v-if="todo.repeatInterval != 5"
+            ><span id="text-numeric-display">{{
+              todo.repeatEvery.toLocaleString("en-US")
+            }}</span></span
           >&nbsp;<span v-if="todo.repeatInterval == 1">Day</span
           ><span v-if="todo.repeatInterval == 2">Week</span
           ><span v-if="todo.repeatInterval == 3">Month</span
@@ -94,6 +137,9 @@ export default defineComponent({
     timesCompleted: Number,
     streak: Number,
     dailyStreak: Number,
+    rank: Number,
+    rankXp: Number,
+    rankProgress: Number,
     originalDueDate: Date,
   },
   computed: {
@@ -136,14 +182,14 @@ export default defineComponent({
      * Complete task based on task ID.
      * @param id task ID
      */
-    completeTodo: function (id: number) {
+    completeTodo: function (id: number): void {
       store.dispatch("completeTask", id);
     },
     /**
      * Delete task based on task ID.
      * @param id task ID
      */
-    deleteTodo: function (id: number) {
+    deleteTodo: function (id: number): void {
       store.dispatch("deleteTask", id);
     },
   },

src/store/index.ts

@@ -2,18 +2,21 @@ import { createStore } from "vuex";
 import createPersistedState from "vuex-persistedstate";
 interface Todo {
   //todos task interface
-  newId: number;
-  task: string;
-  dueDate: string | Date;
-  priority: number;
-  difficulty: number;
-  xp: number;
-  isCompleted: boolean;
-  repeatEvery: number;
-  repeatInterval: number;
-  timesCompleted: number;
-  streak: number;
-  originalDueDate: string | Date;
+  newId: number; //task new id
+  task: string; //task name
+  dueDate: string | Date; //task due date
+  priority: number; //task priority
+  difficulty: number; //task difficulty
+  xp: number; //task XP
+  isCompleted: boolean; //is task completed for one-time tasks
+  repeatEvery: number; //task repeat every
+  repeatInterval: number; //task repeat interval
+  timesCompleted: number; //number of times the task is completed
+  streak: number; //task streak
+  rank: number; //task rank
+  rankXp: number; //task rank XP
+  rankProgress: number; //task rank progress
+  originalDueDate: string | Date; //task original due date
 }
 export default createStore({
   state: {
@@ -23,8 +26,8 @@ export default createStore({
     todos: [] as Todo[],
     user: {
       level: 1 as number, //set level to 1 as total XP is 0 when state is created
-      xp: 0 as number,
-      progress: 0 as number,
+      xp: 0 as number, //set xp to 0 when state is created
+      progress: 0 as number, //set level progress to 0 percent when state is created
       score: 0 as number, //set score to 0 when state is created
       bestScoreEarned: 0 as number, //the highest number of points earned achieved when the task is completed
       dailyStreak: 0 as number, //set daily streak to 0 and last completion date to undefined when state is created
@@ -392,6 +395,26 @@ export default createStore({
         activeTasksMultiplier = 27; //27x active task score multiplier from 10,000 active tasks
       }
       //calculate the amount of XP earned and points earned when the task is completed
+      const rankXpEarned: number = Math.max(
+        Math.floor(
+          (dateMultiplier - 1) ** 2 *
+            100 *
+            task.rank *
+            Math.max(task.streak, 1),
+        ),
+        1,
+      ); //get at least 1 rank XP when the task is completed
+      task.rankXp += rankXpEarned; //increase rank XP based on task due date, task streak and task rank
+      const rankLevel: number = Math.max(
+        Math.floor(Math.pow(task.rankXp / 100, 1 / 4)),
+        1,
+      ); //update rank level
+      task.rank = rankLevel; //set task rank level
+      task.rankProgress =
+        ((task.rankXp / 100 - Math.pow(task.rank === 1 ? 0 : task.rank, 4)) /
+          (Math.pow(task.rank + 1, 3) -
+            Math.pow(task.rank === 1 ? 0 : task.rank, 4))) *
+        100; //calculate rank level progress and if level is 1 set rank level at the start of level 1 to 0 XP
       const xpEarned: number = Math.max(
         Math.floor(
           task.difficulty *
@@ -416,7 +439,8 @@ export default createStore({
             dayTasksMultiplier *
             levelMultiplier *
             tasksMultiplier *
-            activeTasksMultiplier,
+            activeTasksMultiplier *
+            (1 + task.rank / 10),
         ),
         1,
       ); //get at least 1 point when the task is completed
@@ -459,6 +483,9 @@ export default createStore({
         repeatInterval: payload.repeatInterval as number,
         timesCompleted: payload.timesCompleted as number,
         streak: payload.streak as number,
+        rank: payload.rank as number,
+        rankXp: payload.rankXp as number,
+        rankProgress: payload.rankProgress as number,
         originalDueDate: payload.originalDueDate as Date,
       };
       state.todos.unshift(createTask);