Address review comments

.eslintrc.json

@@ -33,11 +33,11 @@
       }
     ],
 
-    "vue/one-component-per-file": "off",
-    "vue/component-definition-name-casing": "off",
-    "vue/order-in-components": "off",
-    "vue/require-prop-type-constructor": "off",
-    "vue/require-default-prop": "off",
+    "vue/one-component-per-file": "error",
+    "vue/component-definition-name-casing": "warn",
+    "vue/order-in-components": "warn",
+    "vue/require-prop-type-constructor": "warn",
+    "vue/require-default-prop": "warn",
     "vue/html-comment-content-newline": "warn",
     "vue/html-comment-content-spacing": "warn",
     "vue/html-comment-indent": "warn",

javascripts/core/app/ui.js

@@ -11,6 +11,30 @@ Vue.mixin({
       return state.view;
     }
   },
+  created() {
+    if (this.update) {
+      this.on$(GAME_EVENT.UPDATE, this.update);
+      if (GameUI.initialized) {
+        this.update();
+      }
+    }
+
+    // Following is used to force the recomputation of computed values
+    // from this fiddle https://codepen.io/sirlancelot/pen/JBeXeV
+    const recomputed = Object.create(null);
+    const watchers = this._computedWatchers;
+
+    if (!watchers) return;
+
+    for (const key in watchers)
+      makeRecomputable(watchers[key], key, recomputed);
+
+    this.$recompute = key => recomputed[key] = !recomputed[key];
+    Vue.observable(recomputed);
+  },
+  destroyed() {
+    EventHub.ui.offAll(this);
+  },
   methods: {
     emitClick() {
       this.$emit("click");
@@ -48,30 +72,6 @@ Vue.mixin({
     pluralize,
     quantify,
     quantifyInt
-  },
-  created() {
-    if (this.update) {
-      this.on$(GAME_EVENT.UPDATE, this.update);
-      if (GameUI.initialized) {
-        this.update();
-      }
-    }
-
-    // Following is used to force the recomputation of computed values
-    // from this fiddle https://codepen.io/sirlancelot/pen/JBeXeV
-    const recomputed = Object.create(null);
-    const watchers = this._computedWatchers;
-
-    if (!watchers) return;
-
-    for (const key in watchers)
-      makeRecomputable(watchers[key], key, recomputed);
-
-    this.$recompute = key => recomputed[key] = !recomputed[key];
-    Vue.observable(recomputed);
-  },
-  destroyed() {
-    EventHub.ui.offAll(this);
   }
 });
 
@@ -186,10 +186,10 @@ Vue.use(VueGtag, {
 
 export const ui = new Vue({
   el: "#ui",
-  data: state,
   components: {
     GameUIComponent
   },
+  data: state,
   computed: {
     notation() {
       return Notations.find(this.notationName);
@@ -204,15 +204,6 @@ export const ui = new Vue({
       return this.view.newUI;
     },
   },
-  methods: {
-    scroll(t) {
-      const now = Date.now();
-      if (this.view.scrollWindow) {
-        window.scrollBy(0, this.view.scrollWindow * (now - t) / 2);
-        setTimeout(() => this.scroll(now), 20);
-      }
-    }
-  },
   watch: {
     currentGlyphTooltip(newVal) {
       if (newVal !== -1 && !GameUI.globalClickListener) {
@@ -233,5 +224,14 @@ export const ui = new Vue({
       }
     },
   },
+  methods: {
+    scroll(t) {
+      const now = Date.now();
+      if (this.view.scrollWindow) {
+        window.scrollBy(0, this.view.scrollWindow * (now - t) / 2);
+        setTimeout(() => this.scroll(now), 20);
+      }
+    }
+  },
   template: "<GameUIComponent />"
 });

public/index.html

@@ -14,7 +14,6 @@
   <link rel="stylesheet" type="text/css" href="stylesheets/codemirror/panda-syntax.css">
   <link rel="stylesheet" type="text/css" href="stylesheets/codemirror/liquibyte.css">
   <link rel="stylesheet" type="text/css" href="stylesheets/vue-sfc-classes.css">
-  <link rel="stylesheet" type="text/css" href="stylesheets/components.css">
   <link rel="stylesheet" type="text/css" href="stylesheets/ad-slider-component.css">
   <link rel="stylesheet" type="text/css" href="stylesheets/glyphs.css">
   <link rel="stylesheet" type="text/css" href="stylesheets/styles.css?3">

public/stylesheets/styles.css

@@ -54,9 +54,6 @@ html {
 
   --color-v--base: #ead584;
 
-  --color-pelle--base: crimson;
-  --color-pelle-secondary: #00bcd4;
-
   --color-ra-base: #9575cd;
   --color-ra-pet-teresa: #8596ea;
   --color-ra-pet-effarig: #ea8585;
@@ -65,6 +62,9 @@ html {
 
   --color-laitela--base: white;
   --color-laitela--accent: black;
+
+  --color-pelle--base: crimson;
+  --color-pelle-secondary: #00bcd4;
 }
 
 .t-metro #ui-container, /* csslint allow: empty-rules */
@@ -254,6 +254,17 @@ button:focus {
 
 /*#region TT shop*/
 
+.TTbuttons {
+  color: var(--color-text);
+  position: fixed;
+  bottom: 0;
+  font-family: Typewriter, serif;
+  display: flex;
+  align-items: flex-end;
+  z-index: 2;
+  width: 55.5rem;
+}
+
 .l-tt-buy-button {
   width: 17rem;
   z-index: 1;
@@ -269,7 +280,7 @@ button:focus {
   font-size: 1.35rem;
 }
 
-.s-base--metro .c-tt-buy-button {
+.s-base--metro .c-tt-buy-button{
   border-radius: 0;
 }
 
@@ -293,6 +304,23 @@ button:focus {
   background: #652F2F;
 }
 
+.timetheorems {
+  font-size: 15px;
+  text-align: center;
+  flex: 1 0 auto;
+}
+
+.ttbuttons-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: stretch;
+}
+
+.ttbuttons-top-row {
+  align-items: center;
+}
+
 .o-tt-top-row-button {
   min-height: 3rem;
   font-size: 1.2rem;
@@ -407,6 +435,15 @@ button:focus {
   border: 0.1rem solid #3AACD6;
 }
 
+.ttshop-container {
+  padding: 0 0.5rem;
+  min-width: 60rem;
+  max-width: 80rem;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.25s ease-out;
+}
+
 .ttshop-minimize-btn {
   display: flex;
   justify-content: center;

src/components/BlobBackground.vue

@@ -2,7 +2,10 @@
 export default {
   name: "BlobBackground",
   props: {
-    bounds: Object
+    bounds: {
+      type: Object,
+      required: true,
+    }
   },
   mounted() {
     this.drop();

src/components/BlobSnowflake.vue

@@ -4,7 +4,10 @@ import TWEEN from "tween.js";
 export default {
   name: "BlobSnowflake",
   props: {
-    bounds: Object
+    bounds: {
+      type: Object,
+      required: true,
+    }
   },
   mounted() {
     this.fly();

src/components/CostDisplay.vue

@@ -1,5 +1,4 @@
 <script>
-
 import { isDecimal, isFunction, isNumber } from "@/utility";
 
 /* eslint-disable no-empty-function */

src/components/OfflineSpeedupButton.vue

@@ -7,8 +7,14 @@ export default {
     PrimaryButton,
   },
   props: {
-    button: Object,
-    progress: Object,
+    button: {
+      type: Object,
+      required: true
+    },
+    progress: {
+      type: Object,
+      required: true
+    },
   },
   computed: {
     canBeClicked() {

src/components/SpeedrunStatus.vue

@@ -33,6 +33,11 @@ export default {
         : `(${formatPercents(this.offlineFraction, 2)} time spent offline)`;
       return `${stateText} ${fractionText}`;
     },
+    collapseIcon() {
+      return this.isCollapsed
+        ? "fas fa-expand-arrows-alt"
+        : "fas fa-compress-arrows-alt";
+    }
   },
   methods: {
     update() {
@@ -59,11 +64,6 @@ export default {
       if (this.hasStarted) return;
       Modal.changeName.show();
     },
-    collapseIcon() {
-      return this.isCollapsed
-        ? "fas fa-expand-arrows-alt"
-        : "fas fa-compress-arrows-alt";
-    },
     collapseText() {
       return `Click to ${this.isCollapsed ? "expand" : "collapse"} Speedrun info`;
     },
@@ -97,9 +97,9 @@ export default {
       class="speedrun-collapse"
       @click="toggleCollapse"
     >
-      <i :class="collapseIcon()" />
+      <i :class="collapseIcon" />
       {{ collapseText() }}
-      <i :class="collapseIcon()" />
+      <i :class="collapseIcon" />
     </div>
   </div>
 </template>

src/components/index.js

@@ -1 +0,0 @@
-import "./GameUI";

src/components/modals/ModalConfirmationCheck.vue

@@ -17,9 +17,6 @@ export default {
       setting: true
     };
   },
-  created() {
-    this.setting = this.confirmation.option;
-  },
   computed: {
     confirmation() {
       return ConfirmationTypes[this.option];
@@ -28,6 +25,9 @@ export default {
       return `${this.setting ? "Disable" : "Reenable"} the ${this.confirmation.name} confirmation`;
     }
   },
+  created() {
+    this.setting = this.confirmation.option;
+  },
   methods: {
     toggle() {
       this.setting = !this.setting;

src/components/modals/SingularityMilestonesModal.vue

@@ -17,23 +17,6 @@ export default {
       orderVal: 0
     };
   },
-  watch: {
-    resourceVal(newValue) {
-      player.celestials.laitela.singularitySorting.displayResource = newValue;
-    },
-    sortVal(newValue) {
-      player.celestials.laitela.singularitySorting.sortResource = newValue;
-    },
-    completedVal(newValue) {
-      player.celestials.laitela.singularitySorting.showCompleted = newValue;
-    },
-    orderVal(newValue) {
-      player.celestials.laitela.singularitySorting.sortOrder = newValue;
-    },
-  },
-  beforeDestroy() {
-    player.celestials.laitela.lastCheckedMilestones = Currency.singularities.value;
-  },
   computed: {
     resourceStr() {
       const states = ["Singularity Count", "Condense Count", "Manual Time", "Auto Time"];
@@ -53,6 +36,23 @@ export default {
       return states[this.orderVal];
     },
   },
+  watch: {
+    resourceVal(newValue) {
+      player.celestials.laitela.singularitySorting.displayResource = newValue;
+    },
+    sortVal(newValue) {
+      player.celestials.laitela.singularitySorting.sortResource = newValue;
+    },
+    completedVal(newValue) {
+      player.celestials.laitela.singularitySorting.showCompleted = newValue;
+    },
+    orderVal(newValue) {
+      player.celestials.laitela.singularitySorting.sortOrder = newValue;
+    },
+  },
+  beforeDestroy() {
+    player.celestials.laitela.lastCheckedMilestones = Currency.singularities.value;
+  },
   methods: {
     update() {
       this.milestones = SingularityMilestones.sortedForCompletions(true);

src/components/modals/prestige/ResetRealityModal.vue

@@ -6,9 +6,6 @@ export default {
   components: {
     ModalWrapperChoice
   },
-  created() {
-    this.on$(GAME_EVENT.REALITY_RESET_AFTER, this.emitClose);
-  },
   data() {
     return {
       isDoomed: false,
@@ -17,6 +14,9 @@ export default {
   computed: {
     resetTerm() { return this.isDoomed ? "Armageddon" : "Reality"; },
   },
+  created() {
+    this.on$(GAME_EVENT.REALITY_RESET_AFTER, this.emitClose);
+  },
   methods: {
     handleYesClick() {
       beginProcessReality(getRealityProps(true));

src/components/tabs/black-hole/BlackHoleTab.vue

@@ -142,7 +142,10 @@ export default {
     <div v-if="isEnslaved || isDoomed">
       The physics of this Reality do not allow the existence of Black Holes.
     </div>
-    <div v-else-if="!isUnlocked" style="display: flex; flex-direction: column; align-items: center;">
+    <div
+      v-else-if="!isUnlocked"
+      style="display: flex; flex-direction: column; align-items: center;"
+    >
       <BlackHoleUnlockButton @blackholeunlock="startAnimation" />
       The Black Hole makes the entire game run significantly faster for a short period of time.
       <br>

src/components/tabs/glyphs/sidebar/GlyphSetSavePanel.vue

@@ -158,7 +158,10 @@ export default {
           :none-text="noSet"
         />
       </div>
-      <div class="c-glyph-single-set-save-flexbox" style="width: 22rem">
+      <div
+        class="c-glyph-single-set-save-flexbox"
+        style="width: 22rem"
+      >
         <div ach-tooltip="Set a custom name (up to 20 characters)">
           <input
             :id="id"

src/components/tabs/replicanti/ReplicantiTab.vue

@@ -42,8 +42,8 @@ export default {
     replicantiChanceSetup() {
       return new ReplicantiUpgradeButtonSetup(
         ReplicantiUpgrade.chance,
-        (value) => `Replicate chance: ${formatPercents(value)}`,
-        (cost) => `+${formatPercents(0.01)} Costs: ${format(cost)} IP`
+        value => `Replicate chance: ${formatPercents(value)}`,
+        cost => `+${formatPercents(0.01)} Costs: ${format(cost)} IP`
       );
     },
     replicantiIntervalSetup() {
@@ -66,8 +66,8 @@ export default {
       }
       return new ReplicantiUpgradeButtonSetup(
         upgrade,
-        (value) => `Interval: ${formatInterval(value)}`,
-        (cost) =>
+        value => `Interval: ${formatInterval(value)}`,
+        cost =>
           `➜ ${formatInterval(upgrade.nextValue)} Costs: ${format(cost)} IP`
       );
     },
@@ -75,7 +75,7 @@ export default {
       const upgrade = ReplicantiUpgrade.galaxies;
       return new ReplicantiUpgradeButtonSetup(
         upgrade,
-        (value) => {
+        value => {
           let description = `Max Replicanti Galaxies: ${formatInt(value)}`;
           const extra = upgrade.extra;
           if (extra > 0) {
@@ -83,7 +83,7 @@ export default {
           }
           return description;
         },
-        (cost) => `+${formatInt(1)} Costs: ${format(cost)} IP`
+        cost => `+${formatInt(1)} Costs: ${format(cost)} IP`
       );
     },
     boostText() {

src/components/tabs/shop/ShopButton.vue

@@ -2,7 +2,10 @@
 export default {
   name: "ShopButton",
   props: {
-    purchase: Object,
+    purchase: {
+      type: Object,
+      required: true
+    }
   },
   data() {
     return {

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

@@ -8,11 +8,13 @@ export default {
     },
     time: {
       type: Number,
-      required: false
+      required: false,
+      default: 0,
     },
     gap: {
       type: Number,
-      required: false
+      required: false,
+      default: 0,
     }
   },
   computed: {

src/components/tabs/time-dimensions/ModernTimeDimensionRow.vue

@@ -35,11 +35,6 @@ export default {
       ttCost: 0
     };
   },
-  watch: {
-    isAutobuyerOn(newValue) {
-      Autobuyer.timeDimension(this.tier).isActive = newValue;
-    }
-  },
   computed: {
     shiftDown() {
       return ui.view.shiftDown;
@@ -76,6 +71,11 @@ export default {
       return this.cost.exponent < 1e6;
     }
   },
+  watch: {
+    isAutobuyerOn(newValue) {
+      Autobuyer.timeDimension(this.tier).isActive = newValue;
+    }
+  },
   methods: {
     update() {
       const tier = this.tier;

src/components/tabs/time-studies/tt-shop/HoverMenu.vue

@@ -2,7 +2,10 @@
 export default {
   name: "HoverMenu",
   props: {
-    saveslot: Number
+    saveslot: {
+      type: Number,
+      default: 0
+    }
   },
   data: () => ({
     componentID: UIID.next(),

src/components/tabs/time-studies/tt-shop/TimeTheoremBuyButton.vue

@@ -1,6 +1,17 @@
 <script>
 export default {
-  props: ["budget", "cost", "formatCost", "action"],
+  props: {
+    budget: Decimal,
+    cost: Decimal,
+    formatCost: {
+      type: Function,
+      required: true,
+    },
+    action: {
+      type: Function,
+      required: true
+    },
+  },
   computed: {
     isEnabled() {
       if (Pelle.isDoomed && player.eternities.eq(0)) return false;

src/components/tabs/time-studies/tt-shop/TimeTheoremShop.vue

@@ -34,11 +34,6 @@ export default {
       showTTGen: false
     };
   },
-  watch: {
-    isAutobuyerOn(newValue) {
-      Autobuyer.timeTheorem.isActive = newValue;
-    }
-  },
   computed: {
     minimized() {
       return this.minimizeAvailable && this.shopMinimized;
@@ -75,6 +70,11 @@ export default {
       return this.$viewModel.shiftDown ? "save:" : "load:";
     },
   },
+  watch: {
+    isAutobuyerOn(newValue) {
+      Autobuyer.timeTheorem.isActive = newValue;
+    }
+  },
   methods: {
     minimize() {
       player.timestudy.shopMinimized = !player.timestudy.shopMinimized;
@@ -125,19 +125,19 @@ export default {
 </script>
 
 <template>
-  <div id="TTbuttons">
+  <div class="TTbuttons">
     <div class="ttshop-container ttshop-background">
       <div
         data-role="page"
         class="ttbuttons-row ttbuttons-top-row"
       >
         <button
-          class="tt-save-load-btn tt-buy-button tt-buy-button--unlocked"
+          class="l-tt-save-load-btn c-tt-buy-button c-tt-buy-button--unlocked"
           onClick="Modal.preferredTree.show()"
         >
           <i class="fas fa-cog" />
         </button>
-        <p id="timetheorems">
+        <p class="timetheorems">
           <span class="c-tt-amount">
             {{ quantify("Time Theorem", theoremAmount, 2, 0, formatTimeTheoremType) }}
           </span>
@@ -146,9 +146,9 @@ export default {
             {{ quantifyInt("Space Theorem", STamount) }}
           </span>
         </p>
-        <div class="tree-load-tt-gen-area">
-          <div class="tree-load-buttons">
-            <span class="ttshop__save-load-text">{{ saveLoadText }}</span>
+        <div class="load-tree-area">
+          <div class="tree-load-button-wrapper">
+            <span class="c-ttshop__save-load-text">{{ saveLoadText }}</span>
             <TimeStudySaveLoadButton
               v-for="saveslot in 6"
               :key="saveslot"
@@ -185,10 +185,10 @@ export default {
           :format-cost="formatEP"
           :action="buyWithEP"
         />
-        <div class="tt-buy-max-vbox">
+        <div class="l-tt-buy-max-vbox">
           <button
             v-if="!minimized"
-            class="tt-top-row-button tt-buy-button tt-buy-button--unlocked"
+            class="o-tt-top-row-button c-tt-buy-button c-tt-buy-button--unlocked"
             @click="buyMaxTheorems"
           >
             Buy max
@@ -196,7 +196,7 @@ export default {
           <PrimaryToggleButton
             v-if="!minimized && hasTTAutobuyer"
             v-model="isAutobuyerOn"
-            class="tt-autobuyer-button tt-buy-button tt-buy-button--unlocked"
+            class="o-tt-autobuyer-button c-tt-buy-button c-tt-buy-button--unlocked"
             label="Auto:"
           />
         </div>
@@ -216,109 +216,15 @@ export default {
 </template>
 
 <style scoped>
-#TTbuttons {
-  color: var(--color-text);
-  position: fixed;
-  bottom: 0;
-  font-family: Typewriter, serif;
-  display: flex;
-  align-items: flex-end;
-  z-index: 2;
-  width: 55.5rem;
-}
-
-#timetheorems {
-  font-size: 15px;
-  text-align: center;
-  flex: 1 0 auto;
-}
-
-.ttbuttons-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: stretch;
-}
-
-.ttbuttons-top-row {
-  align-items: center;
-}
-
-.tt-save-load-btn {
-  min-width: 2em;
-}
-
-.tt-buy-button {
-  font-weight: bold;
-  font-family: Typewriter, serif;
-  border: 0.1rem solid #691fa5;
-  transition-duration: 0.2s;
-  border-radius: 4px;
-  font-size: 1.35rem;
-}
-
-.tt-buy-button--unlocked {
-  color: #3AACD6;
-  background: #232028;
-  cursor: pointer;
-}
-
-.tt-buy-button--unlocked:hover {
-  color: #232028;
-  background: #3AACD6;
-}
-
-.tree-load-tt-gen-area {
+.load-tree-area {
   display: flex;
   flex-direction: column;
   align-items: left;
 }
 
-.tree-load-buttons {
+.tree-load-button-wrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
 }
-
-.ttshop__save-load-text {
-  font-size: 10px;
-}
-
-.tt-buy-max-vbox {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.tt-top-row-button {
-  min-height: 3rem;
-  font-size: 1.2rem;
-  margin: 0.3rem;
-  flex-grow: 0;
-  flex-shrink: 0;
-  align-self: stretch;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.tt-autobuyer-button {
-  height: 2.5rem;
-  font-size: 1rem !important;
-  margin: 0.3rem;
-  flex-grow: 0;
-  flex-shrink: 0;
-  align-self: stretch;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  min-width: 8rem;
-}
-
-.ttshop-container {
-  padding: 0 0.5rem;
-  min-width: 60rem;
-  max-width: 80rem;
-  display: flex;
-  flex-direction: column;
-  transition: all 0.25s ease-out;
-}
 </style>