adventurer exp bars

src/classes/Adventurer.ts

@@ -25,7 +25,18 @@ export class Adventurer {
     }
 
     canLevelUp(): boolean {
-        const requirement = this.level * 3;
-        return this.exp >= requirement;
+        return this.exp >= this.getNextLevelExpRequirement();
     }
+
+    getNextLevelExpRequirement(): number {
+        return this.level * 3;
+    }
+
+    /**
+     * Returns the percentage of exp to the next level
+     */
+    getExpPercentage(): number {
+        return (this.exp / this.getNextLevelExpRequirement()) * 100;
+    }
+
 }

src/components/AdventurerTile.vue

@@ -5,6 +5,7 @@
   >
     <img :src="adventurer.portrait" :alt="adventurer.name" draggable="false">
     <div class="level">{{adventurer.level}}</div>
+    <div class="exp"></div>
   </article>
 </template>
 
@@ -19,6 +20,21 @@ export default defineComponent({
     adventurer: {
       type: Object as PropType<Adventurer>,
     }
+  },
+  data: () => ({
+    expProgress: "0%",
+  }),
+  watch: {
+    adventurer: {
+      deep: true,
+      handler: function (adventurer: Adventurer) {
+        this.expProgress = adventurer.getExpPercentage() + "%";
+      },
+    }
+  },
+  mounted() {
+    if (this.adventurer === undefined) return;
+    this.expProgress = this.adventurer.getExpPercentage() + "%";
   }
 });
 </script>
@@ -37,11 +53,21 @@ export default defineComponent({
     top: 0;
     left: 0;
     font-size: 1rem;
+    min-width: 1rem;
     background-color: rgba(0,0,0, 0.75);
     border-bottom-right-radius: 0.2rem;
     padding: 0.1rem;
     color: #fff;
   }
+  .exp {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: v-bind(expProgress);
+    height: 3.5%;
+    background-color: rgba(203, 33, 213, 0.75);
+    transition: width 1s linear;
+  }
   img {
     width: 100%;
     height: 100%;