Create checkbox to hide milestones (#3186)

* Create checkbox to hide milestones

* Turn into button

javascripts/core/player.js

@@ -338,6 +338,7 @@ window.player = {
     usedSTD: false,
     hasStarted: false,
     hideInfo: false,
+    displayAllMilestones: false,
     startDate: 0,
     name: "",
     offlineTimeUsed: 0,

src/components/tabs/speedrun-milestones/SpeedrunMilestoneSingle.vue

@@ -6,19 +6,23 @@ export default {
       type: Object,
       required: true
     },
-    time: {
-      type: Number,
+    display: {
+      type: Boolean,
       required: false,
-      default: 0,
+      default: false,
     },
-    gap: {
+    time: {
       type: Number,
       required: false,
       default: 0,
     }
   },
   computed: {
+    displayName() {
+      return this.display ? this.milestone.name : "???";
+    },
     description() {
+      if (!this.display) return "";
       return typeof this.milestone.description === "function"
         ? this.milestone.description()
         : this.milestone.description;
@@ -28,11 +32,6 @@ export default {
         ? `Completed in ${TimeSpan.fromMilliseconds(this.time).toStringShort(true)}`
         : "Not reached yet";
     },
-    gapDisplay() {
-      return this.gap && this.gap !== this.time
-        ? `(${TimeSpan.fromMilliseconds(this.gap).toStringShort(true)} after previous)`
-        : "";
-    },
     classObject() {
       return {
         "l-speedrun-milestone-entry": true,
@@ -45,8 +44,8 @@ export default {
 
 <template>
   <div :class="classObject">
-    <b>{{ milestone.name }}</b>
+    <b>{{ displayName }}</b>
     <i>{{ description }}</i>
-    {{ timeDisplay }} {{ gapDisplay }}
+    {{ timeDisplay }}
   </div>
 </template>

src/components/tabs/speedrun-milestones/SpeedrunMilestonesTab.vue

@@ -1,19 +1,28 @@
 <script>
+import PrimaryToggleButton from "@/components/PrimaryToggleButton";
 import SpeedrunMilestoneSingle from "./SpeedrunMilestoneSingle";
 
 export default {
   name: "SpeedrunMilestonesTab",
   components: {
+    PrimaryToggleButton,
     SpeedrunMilestoneSingle,
   },
   data() {
     return {
       milestones: [],
       startTimeStr: "",
+      displayAll: false,
     };
   },
+  watch: {
+    displayAll(newValue) {
+      player.speedrun.displayAllMilestones = newValue;
+    }
+  },
   methods: {
     update() {
+      this.displayAll = player.speedrun.displayAllMilestones;
       const db = GameDatabase.speedrunMilestones;
       const idList = db.map(m => m.id);
       this.milestones = [];
@@ -25,6 +34,10 @@ export default {
           time,
         });
       }
+      // It's possible to complete milestones out of order,
+      // so we have to check which was the last completed and show everything up to that + the next one.
+      const maxMilestone = this.milestones.map(i => Boolean(i.time)).lastIndexOf(true);
+      this.milestones.forEach((m, i) => m.display = this.displayAll || (i <= maxMilestone + 1));
       this.startTimeStr = player.speedrun.startDate === 0
         ? "Speedrun not started yet."
         : `Speedrun started at ${Time.toDateTimeString(player.speedrun.startDate)}`;
@@ -35,6 +48,12 @@ export default {
 
 <template>
   <div>
+    <PrimaryToggleButton
+      v-model="displayAll"
+      class="o-primary-btn--subtab-option"
+      label="Describe all milestones:"
+    />
+    <br>
     <b>{{ startTimeStr }}</b>
     <br>
     <div class="l-speedrun-milestone-tab">
@@ -42,8 +61,8 @@ export default {
         v-for="milestone in milestones"
         :key="milestone.id"
         :milestone="milestone.db"
+        :display="milestone.display"
         :time="milestone.time"
-        :gap="milestone.gap"
       />
     </div>
   </div>