Add level progress using circular progress bar

Author: lulunac27a

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.8.3",
     "vue": "^3.4.15",
+    "vue-ellipse-progress": "^2.1.2",
     "vuex": "^4.1.0"
   },
   "devDependencies": {

src/components/TodoList.vue

@@ -5,6 +5,7 @@
     <br />
     <p>XP: {{ xps }}</p>
     <br />
+    <ve-progress :progress="progresses">Level {{ levels }}</ve-progress>
     <ul class="todos">
       <li v-for="todo in todos" :key="todo.newId" class="todo">
         <span
@@ -76,6 +77,9 @@ export default defineComponent({
     xps() {
       return store.getters.getXp; //get current xp
     },
+    progresses() {
+      return store.getters.getProgress; //get curent progress
+    },
   },
   methods: {
     completeTodo: function (id: number) {

src/main.ts

@@ -1,9 +1,11 @@
 import { createApp, h } from "vue";
 import App from "./App.vue";
 import store from "./store";
+import veProgress from "vue-ellipse-progress";
 
 createApp({ render: () => h(App) })
   .use(store)
+  .use(veProgress)
   .mount("#app");
 store.dispatch("loadUser"); //load user data
 store.dispatch("loadTodos"); //load task list data

src/store/index.ts

@@ -6,12 +6,14 @@ export default createStore({
     user: {
       level: 0,
       xp: 0,
+      progress: 0,
     },
   },
   getters: {
     getTodos: (state) => state.todos, //get task list
     getXp: (state) => state.user.xp, //get user xp
     getLevel: (state) => state.user.level, //get user level
+    getProgress: (state) => state.user.progress, //get user level progress
   },
   mutations: {
     updateXp: (state, payload) => {
@@ -20,6 +22,11 @@ export default createStore({
       );
       const xp = Math.max(task.difficulty * task.priority, 1); //get at least 1 xp when the task is completed
       state.user.xp += xp;
+      state.user.level = Math.floor(Math.pow(state.user.xp, 1 / 3)); //calculate level based on how many xp
+      state.user.progress =
+        ((state.user.xp - Math.pow(state.user.level, 3)) /
+          (Math.pow(state.user.level + 1, 3) - Math.pow(state.user.level, 3))) *
+        100; //calculate level progress
     },
     create_Todo: (state, payload) => {
       const createTask = {

src/typings/global.d.ts

@@ -0,0 +1 @@
+declare module "vue-ellipse-progress";

tsconfig.json

@@ -1,5 +1,9 @@
 {
   "compilerOptions": {
+    "typeRoots": [
+      "./types",
+      "./node_modules/@types"
+    ],
     "target": "esnext",
     "module": "esnext",
     "strict": true,
@@ -35,6 +39,7 @@
     "tests/**/*.tsx"
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "typings"
   ]
-}
+}