quest display enchancements

src/App.vue

@@ -59,10 +59,10 @@ export default defineComponent({
     } as { [key: string]: Adventurer },
     quests: {
       F: {
-        "1": new Quest("1", QuestRank.F, "Frog Frenzy", "Kill 10 demon frogs.", 30, 1, 25),
+        "1": new Quest("1", QuestRank.F, "Frog Frenzy", "Kill 10 demon frogs.", 120, 1, 25),
-        "2": new Quest("2", QuestRank.F, "Rats!", "Get rid of the rats in someone's basement.", 21, 1, 15),
+        "2": new Quest("2", QuestRank.F, "Rats!", "Get rid of the rats in someone's basement.", 120, 1, 15),
-        "3": new Quest("3", QuestRank.F, "Herb gethering", "Colect medicinal herbs.", 25, 1, 19),
+        "3": new Quest("3", QuestRank.F, "Herb gethering", "Colect medicinal herbs.", 120, 1, 19),
-        "4": new Quest("4", QuestRank.F, "Big pile of rubble", "Tavern collapsed. Again. Help clean up the debris.", 27, 1, 10),
+        "4": new Quest("4", QuestRank.F, "Big pile of rubble", "Tavern collapsed. Again. Help clean up the debris.", 120, 1, 10),
       } as { [key: string]: Quest },
       E: {
         "1": new Quest("1", QuestRank.E, "Gnoblin subjegation", "Kill 3 gnoblins.", 500, 2, 30),
@@ -297,7 +297,7 @@ export default defineComponent({
         }
       }
 
-    }, 1000);
+    }, 250);
 
   }
 })

src/classes/Quest.ts

@@ -24,4 +24,8 @@ export class Quest {
         this.adventurers = [];
     }
 
+    getPercentProgress(): number {
+        return Math.round(this.progressPoints / this.maxProgress * 100);
+    }
+
 }

src/components/AdventurerMiniComponent.vue

@@ -79,7 +79,7 @@ export default defineComponent({
   bottom: 0;
   left: 50%;
   width: max-content;
-  max-width: 16rem;
+  max-width: 17rem;
   transform: translateX(-50%) translateY(104%);
   display: flex;
   flex-direction: row;
@@ -90,6 +90,9 @@ export default defineComponent({
   padding: 0.5rem;
   background-color: rgba(0,0,0, 0.2);
   z-index: 2;
+  cursor: default;
+  max-height: 12rem;
+  overflow-y: auto;
   .slot {
     width: 5rem;
     height: 5rem;

src/components/QuestMissive.vue

@@ -25,7 +25,16 @@
         />
       </button>
     </div>
-    <progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
+    <div class="progressWrap">
+      <span>{{ this.progressPercentage }}</span>
+      <span class="progress"></span>
+
+    </div>
+    <h3>Rewards</h3>
+    <div class="rewards">
+      <span>Gold: <b>{{missive.goldReward}}</b></span>
+      <span>Exp: <b>{{missive.expReward}}</b></span>
+    </div>
   </article>
 </template>
 
@@ -46,6 +55,29 @@ export default defineComponent({
       type: Object as PropType<{[key: string]: Adventurer}>,
     },
   },
+  data() {
+    return {
+      progressPercentage: "0%",
+    }
+  },
+  methods: {
+    updateProgress() {
+      if (this.missive === undefined) return;
+      const progress = (this.missive.progressPoints / this.missive.maxProgress * 100).toFixed(2);
+      this.progressPercentage = `${progress}%`;
+    }
+  },
+  mounted() {
+    this.updateProgress();
+  },
+  watch: {
+    missive: {
+      handler() {
+        this.updateProgress();
+      },
+      deep: true,
+    }
+  }
 });
 </script>
 
@@ -57,6 +89,43 @@ export default defineComponent({
   padding: 0.5rem;
   position: relative;
   background-color: rgba(255, 255, 255, 0.2);
+  h2 {
+    font-size: 1.5rem;
+
+  }
+  h3 {
+    font-size: 1.15rem;
+    margin: 0;
+  }
+
+  .progressWrap {
+    width: 80%;
+    border: 1px solid #000;
+    margin: 0.5rem auto;
+    position: relative;
+    .progress {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      display: block;
+      width: v-bind(progressPercentage);
+      background-color: rgba(0, 128, 0, 0.75);
+      transition: width 250ms linear;
+      z-index: -1;
+    }
+  }
+
+
+
+  .rewards {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+  }
 
   &.done {
     cursor: pointer;

src/views/QuestView.vue

@@ -167,7 +167,7 @@ export default defineComponent({
     flex-wrap: wrap;
     width: calc(100% - 2rem);
     justify-content: center;
-    align-items: center;
+    align-items: stretch;
     padding-inline: 1rem;
     gap: 1rem;
   }