Vuefy and I'm not going to cleanup SliderComponent now thank you

.eslintignore

@@ -1 +1,2 @@
 public/**/*.js
+src/components/SliderComponent.vue

javascripts/components/celestials/subtabs/enslaved-tab.js

@@ -1,7 +1,7 @@
 import "../celestial-quote-history.js";
-import "../../common/ad-slider-component.js";
 import PrimaryButton from "@/components/PrimaryButton";
 import PrimaryToggleButton from "@/components/PrimaryToggleButton";
+import SliderComponent from "@/components/SliderComponent";
 
 Vue.component("modal-enslaved-hints", {
   data() {
@@ -140,7 +140,8 @@ Vue.component("modal-enslaved-hints", {
 Vue.component("enslaved-tab", {
   components: {
     PrimaryButton,
-    PrimaryToggleButton
+    PrimaryToggleButton,
+    SliderComponent
   },
   data: () => ({
     isStoringBlackHole: false,
@@ -388,7 +389,7 @@ Vue.component("enslaved-tab", {
           <div v-if="canAdjustStoredTime" class="l-enslaved-top-container__half">
             Black Hole charging rate: {{ storedTimeRate }}
             <br><br>
-            <ad-slider-component
+            <SliderComponent
               v-bind="sliderProps"
               :value="storedFraction"
               @input="adjustSlider($event)"

javascripts/components/common/plus-minus-button.js

@@ -1,33 +0,0 @@
-Vue.component("plus-minus-button", {
-  props: {
-    type: {
-      type: String,
-      default: "plus",
-    },
-    size: String,
-  },
-  data() {
-    return {
-      color: "white",
-      computedSize: 0,
-    };
-  },
-  mounted() {
-    this.color = getComputedStyle(this.$el).color;
-    this.computedSize = this.$el.offsetWidth;
-  },
-  computed: {
-    iconClass() {
-      return `fas fa-${this.type}`;
-    }
-  },
-  template: `
-    <div
-      class="c-ad-slider__button"
-      v-repeating-click="{ delay: 500 }"
-      @firstclick="$emit('click')"
-      @repeatclick="$emit('click')"
-    >
-      <div :class="iconClass" />
-    </div>`
-});

javascripts/components/reality/black-hole/black-hole-tab.js

@@ -1,10 +1,13 @@
 import "./black-hole-unlock-button.js";
 import "./black-hole-upgrade-row.js";
 import "./black-hole-state-row.js";
-import "../../common/ad-slider-component.js";
 import { BlackHoleAnimation } from "./black-hole-animation.js";
+import SliderComponent from "@/components/SliderComponent";
 
 Vue.component("black-hole-tab", {
+  components: {
+    SliderComponent
+  },
   data() {
     return {
       isUnlocked: false,
@@ -223,7 +226,7 @@ Vue.component("black-hole-tab", {
           </div>
           <div v-if="canAdjustStoredTime" class="l-enslaved-shop-container">
             Black Hole charging rate: {{ storedTimeRate }}
-            <ad-slider-component
+            <SliderComponent
               v-bind="sliderPropsStoring"
               :value="storedFraction"
               @input="adjustSliderStoring($event)"
@@ -232,7 +235,7 @@ Vue.component("black-hole-tab", {
           <div v-if="isNegativeBHUnlocked" class="l-enslaved-shop-container">
             Inverted Black Hole divides game speed by {{ format(negativeBHDivisor, 2, 2) }}.
             This requires both Black Holes to be permanent and only works when paused.
-            <ad-slider-component
+            <SliderComponent
               v-bind="sliderPropsNegative"
               :value="negativeSlider"
               @input="adjustSliderNegative($event)"

javascripts/components/reality/glyphs/glyph-levels-and-weights.js

@@ -1,12 +1,13 @@
-import "../../common/ad-slider-component.js";
 import ToggleButton from "@/components/ToggleButton";
+import SliderComponent from "@/components/SliderComponent";
 
 // The things inside player.celestials.effarig.glyphWeights
 const _GLYPH_WEIGHT_FIELDS = ["ep", "repl", "dt", "eternities"];
 
 Vue.component("glyph-levels-and-weights", {
   components: {
-    ToggleButton
+    ToggleButton,
+    SliderComponent
   },
   data() {
     return {
@@ -331,7 +332,7 @@ Vue.component("glyph-levels-and-weights", {
           />
         </div>
         <div class="l-glyph-levels-and-weights__slider" :style="rowStyle('ep')">
-          <ad-slider-component
+          <SliderComponent
             v-bind="sliderProps"
             :value="weights.ep"
             :width="'100%'"
@@ -339,7 +340,7 @@ Vue.component("glyph-levels-and-weights", {
           />
         </div>
         <div class="l-glyph-levels-and-weights__slider" :style="rowStyle('replicanti')">
-          <ad-slider-component
+          <SliderComponent
             v-bind="sliderProps"
             :value="weights.repl"
             :width="'100%'"
@@ -347,7 +348,7 @@ Vue.component("glyph-levels-and-weights", {
           />
         </div>
         <div class="l-glyph-levels-and-weights__slider" :style="rowStyle('dt')">
-          <ad-slider-component
+          <SliderComponent
             v-bind="sliderProps"
             :value="weights.dt"
             :width="'100%'"
@@ -355,7 +356,7 @@ Vue.component("glyph-levels-and-weights", {
           />
         </div>
         <div class="l-glyph-levels-and-weights__slider" :style="rowStyle('eternities')">
-          <ad-slider-component
+          <SliderComponent
             v-bind="sliderProps"
             :value="weights.eternities"
             :width="'100%'"

javascripts/components/reality/glyphs/sidebar/glyph-filter-panel.js

@@ -1,5 +1,5 @@
 import "../glyph-component.js";
-import "../../../common/ad-slider-component.js";
+import SliderComponent from "@/components/SliderComponent";
 
 const AutoSacAdvancedTab = {
   props: {
@@ -235,6 +235,7 @@ Vue.component("glyph-filter-panel", {
   components: {
     "auto-sac-effect-tab": AutoSacEffectTab,
     "auto-sac-advanced-tab": AutoSacAdvancedTab,
+    SliderComponent
   },
   data() {
     return {
@@ -448,7 +449,7 @@ Vue.component("glyph-filter-panel", {
           @click="bumpRarity(type.id)"
         >
           <glyph-component :glyph="{type: type.id, strength: strengthThreshold(type.id) }" v-bind="glyphIconProps" />
-          <ad-slider-component
+          <SliderComponent
             v-bind="raritySliderProps"
             :value="rarityThresholds[type.id]"
             :width="'100%'"
@@ -478,7 +479,7 @@ Vue.component("glyph-filter-panel", {
             :glyph="{type: advancedType, strength: strengthThreshold(advancedType) }"
             v-bind="glyphIconProps"
           />
-          <ad-slider-component
+          <SliderComponent
             v-bind="raritySliderProps"
             :value="rarityThresholds[advancedType]"
             :width="'100%'"

src/components/PlusMinusButton.vue

@@ -0,0 +1,41 @@
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      required: true
+    },
+    size: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      color: "white",
+      computedSize: 0,
+    };
+  },
+  computed: {
+    iconClass() {
+      return `fas fa-${this.type}`;
+    }
+  },
+  mounted() {
+    this.color = getComputedStyle(this.$el).color;
+    this.computedSize = this.$el.offsetWidth;
+  }
+};
+</script>
+
+<template>
+  <div
+    v-repeating-click="{ delay: 500 }"
+    class="c-ad-slider__button"
+    @firstclick="$emit('click')"
+    @repeatclick="$emit('click')"
+  >
+    <div :class="iconClass" />
+  </div>
+</template>
+

src/components/SliderComponent.vue

@@ -1,4 +1,5 @@
-import "./plus-minus-button.js";
+<script>
+import PlusMinusButton from "@/components/PlusMinusButton";
 
 /*
 * This is based on vue-slider-component
@@ -34,7 +35,11 @@ const roundToDPR = (function () {
   const r = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1
   return value => Math.round(value * r) / r
 })()
-Vue.component("ad-slider-component", {
+
+export default {
+  components: {
+    PlusMinusButton
+  },
   props: {
     width: {
       type: String,
@@ -381,8 +386,8 @@ Vue.component("ad-slider-component", {
       let ret = this.direction === 'vertical' ? {
         height: this.height,
       } : {
-          width: this.width,
-        }
+        width: this.width,
+      }
       if (this.plusMinusButtons) {
         ret[this.direction === "vertical" ? "margin-top" : "margin-right"] = "0.5rem";
         ret[this.direction === "vertical" ? "margin-bottom" : "margin-left"] = "0.5rem";
@@ -439,9 +444,9 @@ Vue.component("ad-slider-component", {
         height: '100%',
         position: "relative"
       } : {
-          height: this.height,
-          position: "relative"
-        }
+        height: this.height,
+        position: "relative"
+      }
     },
     dotStyles() {
       let ret = {
@@ -482,9 +487,9 @@ Vue.component("ad-slider-component", {
           bottom: `${this.gap * i - this.usableSize / 2 }px`,
           left: 0
         } : {
-            left: `${this.gap * i - this.usableSize / 2 }px`,
-            top: 0
-          }
+          left: `${this.gap * i - this.usableSize / 2 }px`,
+          top: 0
+        }
         const index = this.reverse ? (this.total - i) : i
         const label = this.data ? this.data[index] : (this.spacing * index) + this.min
         if (this.piecewiseFilter && !this.piecewiseFilter({ index, label })) {
@@ -1012,142 +1017,145 @@ Vue.component("ad-slider-component", {
   beforeDestroy() {
     this.isComponentExists = false
     this.unbindEvents()
-  },
-  template: `
+  }
+};
+</script>
+
+<template>
   <div :class="['l-ad-slider', flowDirection, disabledClass, { 'l-ad-slider--has-label': piecewiseLabel }]"
        v-show="show">
-       <plus-minus-button v-if="plusMinusButtons" type="minus" size="1.6rem" @click="increment(-1)"/>
+    <PlusMinusButton v-if="plusMinusButtons" type="minus" size="1.6rem" @click="increment(-1)"/>
     <div ref="wrap"
-      :class="['l-ad-slider__wrap', stateClass]"
-      :style="[wrapStyles, boolDisabled ? disabledStyle : null]"
-      @click="wrapClick">
-    <div ref="elem" aria-hidden="true" :class="['l-ad-slider__bg', 'c-ad-slider__bg', bgClass]" :style="[elemStyles, bgStyle]">
-      <template v-if="isRange">
-        <div
-          ref="dot0"
-          key="dot0"
-          :class="[tooltipStatus, 'l-ad-slider__dot', 'c-ad-slider__dot',
+         :class="['l-ad-slider__wrap', stateClass]"
+         :style="[wrapStyles, boolDisabled ? disabledStyle : null]"
+         @click="wrapClick">
+      <div ref="elem" aria-hidden="true" :class="['l-ad-slider__bg', 'c-ad-slider__bg', bgClass]" :style="[elemStyles, bgStyle]">
+        <template v-if="isRange">
+          <div
+            ref="dot0"
+            key="dot0"
+            :class="[tooltipStatus, 'l-ad-slider__dot', 'c-ad-slider__dot',
             {
               'l-ad-slider__dot--focus': focusFlag && focusSlider === 0,
               'l-ad-slider__dot--dragging': flag && currentSlider === 0,
               'l-ad-slider__dot--disabled': !boolDisabled && disabledArray[0]
             }
           ]"
-          :style="dotStyles"
-          @mousedown="moveStart($event, 0)"
-          @touchstart="moveStart($event, 0)"
-        >
-          <slot name="dot" :value="val[0]" :index="0" :disabled="disabledArray[0]">
-            <div
-            :class="['l-ad-slider__dot-handle', 'c-ad-slider__dot-handle', dotClass]"
-            :style="[
+            :style="dotStyles"
+            @mousedown="moveStart($event, 0)"
+            @touchstart="moveStart($event, 0)"
+          >
+            <slot name="dot" :value="val[0]" :index="0" :disabled="disabledArray[0]">
+              <div
+                :class="['l-ad-slider__dot-handle', 'c-ad-slider__dot-handle', dotClass]"
+                :style="[
                 (!boolDisabled && disabledArray[0])
                 ? disabledDotStyles[0]
                 : null,
                 sliderStyles[0],
                 focusFlag && focusSlider === 0 ? focusStyles[0]: null
               ]"
-            ></div>
-          </slot>
-          <div ref="tooltip0" :class="['ad-slider-tooltip-' + tooltipDirection[0], 'ad-slider-tooltip-wrap']">
-            <slot name="tooltip" :value="val[0]" :index="0" :disabled="!boolDisabled && disabledArray[0]">
-              <span class="ad-slider-tooltip" :style="tooltipStyles[0]">{{ xformatter ? formatting(val[0]) : val[0] }}</span>
+              ></div>
             </slot>
+            <div ref="tooltip0" :class="['ad-slider-tooltip-' + tooltipDirection[0], 'ad-slider-tooltip-wrap']">
+              <slot name="tooltip" :value="val[0]" :index="0" :disabled="!boolDisabled && disabledArray[0]">
+                <span class="ad-slider-tooltip" :style="tooltipStyles[0]">{{ xformatter ? formatting(val[0]) : val[0] }}</span>
+              </slot>
+            </div>
           </div>
-        </div>
-        <div
-          ref="dot1"
-          key="dot1"
-          :class="[tooltipStatus, 'l-ad-slider__dot', 'c-ad-slider__dot',
+          <div
+            ref="dot1"
+            key="dot1"
+            :class="[tooltipStatus, 'l-ad-slider__dot', 'c-ad-slider__dot',
             {
               'l-ad-slider__dot--focus': focusFlag && focusSlider === 1,
               'l-ad-slider__dot--dragging': flag && currentSlider === 1,
               'l-ad-slider__dot--disabled': !boolDisabled && disabledArray[1]
             }
           ]"
-          :style="dotStyles"
-          @mousedown="moveStart($event, 1)"
-          @touchstart="moveStart($event, 1)"
-        >
-          <slot name="dot" :value="val[1]" :index="1" :disabled="disabledArray[1]">
-            <div
-            :class="['l-ad-slider__dot-handle', 'c-ad-slider__dot-handle', dotClass]"
-            :style="[
+            :style="dotStyles"
+            @mousedown="moveStart($event, 1)"
+            @touchstart="moveStart($event, 1)"
+          >
+            <slot name="dot" :value="val[1]" :index="1" :disabled="disabledArray[1]">
+              <div
+                :class="['l-ad-slider__dot-handle', 'c-ad-slider__dot-handle', dotClass]"
+                :style="[
                 (!boolDisabled && disabledArray[1])
                 ? disabledDotStyles[1]
                 : null,
                 sliderStyles[1],
                 focusFlag && focusSlider === 1 ? focusStyles[1]: null
               ]"
-            ></div>
-          </slot>
-          <div ref="tooltip1" :class="['ad-slider-tooltip-' + tooltipDirection[1], 'ad-slider-tooltip-wrap']">
-            <slot name="tooltip" :value="val[1]" :index="1" :disabled="!boolDisabled && disabledArray[1]">
-              <span class="ad-slider-tooltip" :style="tooltipStyles[1]">{{ xformatter ? formatting(val[1]) : val[1] }}</span>
+              ></div>
             </slot>
+            <div ref="tooltip1" :class="['ad-slider-tooltip-' + tooltipDirection[1], 'ad-slider-tooltip-wrap']">
+              <slot name="tooltip" :value="val[1]" :index="1" :disabled="!boolDisabled && disabledArray[1]">
+                <span class="ad-slider-tooltip" :style="tooltipStyles[1]">{{ xformatter ? formatting(val[1]) : val[1] }}</span>
+              </slot>
+            </div>
           </div>
-        </div>
-      </template>
-      <template v-else>
-        <div
-          ref="dot0"
-          key="dot0"
-          :class="[tooltipStatus, 'l-ad-slider__dot', 'c-ad-slider__dot',
+        </template>
+        <template v-else>
+          <div
+            ref="dot0"
+            key="dot0"
+            :class="[tooltipStatus, 'l-ad-slider__dot', 'c-ad-slider__dot',
             {
               'l-ad-slider__dot--focus': focusFlag && focusSlider === 0,
               'l-ad-slider__dot--dragging': flag && currentSlider === 0
             }
           ]"
-          :style="dotStyles"
-          @mousedown="moveStart"
-          @touchstart="moveStart"
-        >
-          <slot name="dot" :value="val" :disabled="boolDisabled">
-            <div :class="['l-ad-slider__dot-handle', 'c-ad-slider__dot-handle', dotClass]"
-                 :style="[sliderStyles, focusFlag && focusSlider === 0 ? focusStyles : null]">
-              {{dotContents(0)}}
-              <slot name="in-dot"/>
-            </div>
-          </slot>
-          <div :class="['ad-slider-tooltip-' + tooltipDirection, 'ad-slider-tooltip-wrap']">
-            <slot name="tooltip" :value="val">
-              <span class="ad-slider-tooltip" :style="tooltipStyles">{{ xformatter ? formatting(val) : val }}</span>
-            </slot>
-          </div>
-        </div>
-      </template>
-      <ul class="ad-slider-piecewise">
-        <li
-          v-for="(piecewiseObj, index) in piecewiseDotWrap"
-          class="ad-slider-piecewise-item"
-          :style="[piecewiseDotStyle, piecewiseObj.style]"
-          :key="index"
-        >
-          <slot
-            name="piecewise"
-            :value="val"
-            :label="piecewiseObj.label"
-            :index="index"
-            :first="index === 0"
-            :last="index === piecewiseDotWrap.length - 1"
-            :active="isActive(piecewiseObj.index)"
+            :style="dotStyles"
+            @mousedown="moveStart"
+            @touchstart="moveStart"
           >
+            <slot name="dot" :value="val" :disabled="boolDisabled">
+              <div :class="['l-ad-slider__dot-handle', 'c-ad-slider__dot-handle', dotClass]"
+                   :style="[sliderStyles, focusFlag && focusSlider === 0 ? focusStyles : null]">
+                {{dotContents(0)}}
+                <slot name="in-dot"/>
+              </div>
+            </slot>
+            <div :class="['ad-slider-tooltip-' + tooltipDirection, 'ad-slider-tooltip-wrap']">
+              <slot name="tooltip" :value="val">
+                <span class="ad-slider-tooltip" :style="tooltipStyles">{{ xformatter ? formatting(val) : val }}</span>
+              </slot>
+            </div>
+          </div>
+        </template>
+        <ul class="ad-slider-piecewise">
+          <li
+            v-for="(piecewiseObj, index) in piecewiseDotWrap"
+            class="ad-slider-piecewise-item"
+            :style="[piecewiseDotStyle, piecewiseObj.style]"
+            :key="index"
+          >
+            <slot
+              name="piecewise"
+              :value="val"
+              :label="piecewiseObj.label"
+              :index="index"
+              :first="index === 0"
+              :last="index === piecewiseDotWrap.length - 1"
+              :active="isActive(piecewiseObj.index)"
+            >
             <span
               v-if="piecewise"
               class="ad-slider-piecewise-dot"
               :style="[ piecewiseStyle, isActive(piecewiseObj.index) ? piecewiseActiveStyle : null ]"
             ></span>
-          </slot>
+            </slot>
 
-          <slot
-            name="label"
-            :value="val"
-            :label="piecewiseObj.label"
-            :index="index"
-            :first="index === 0"
-            :last="index === piecewiseDotWrap.length - 1"
-            :active="isActive(piecewiseObj.index)"
-          >
+            <slot
+              name="label"
+              :value="val"
+              :label="piecewiseObj.label"
+              :index="index"
+              :first="index === 0"
+              :last="index === piecewiseDotWrap.length - 1"
+              :active="isActive(piecewiseObj.index)"
+            >
             <span
               v-if="piecewiseLabel"
               class="ad-slider-piecewise-label"
@@ -1155,31 +1163,31 @@ Vue.component("ad-slider-component", {
             >
               {{ piecewiseObj.label }}
             </span>
-          </slot>
-        </li>
-      </ul>
-      <div
-        ref="process"
-        :class="['l-ad-slider__process', 'c-ad-slider__process', { 'ad-slider-process-draggable': isRange && processDraggable }, processClass]"
-        :style="processStyle"
-        @click="processClick"
-        @mousedown="moveStart($event, 0, true)"
-        @touchstart="moveStart($event, 0, true)"
-      >
-      <div
-        ref="mergedTooltip"
-        :class="['vue-merged-tooltip', 'ad-slider-tooltip-' + tooltipDirection[0], 'ad-slider-tooltip-wrap']"
-        :style="tooltipMergedPosition"
-      >
-          <slot name="tooltip" :value="val" :merge="true">
+            </slot>
+          </li>
+        </ul>
+        <div
+          ref="process"
+          :class="['l-ad-slider__process', 'c-ad-slider__process', { 'ad-slider-process-draggable': isRange && processDraggable }, processClass]"
+          :style="processStyle"
+          @click="processClick"
+          @mousedown="moveStart($event, 0, true)"
+          @touchstart="moveStart($event, 0, true)"
+        >
+          <div
+            ref="mergedTooltip"
+            :class="['vue-merged-tooltip', 'ad-slider-tooltip-' + tooltipDirection[0], 'ad-slider-tooltip-wrap']"
+            :style="tooltipMergedPosition"
+          >
+            <slot name="tooltip" :value="val" :merge="true">
             <span class="ad-slider-tooltip" :style="tooltipStyles">
               {{ tooltipFormatHelper }}
             </span>
-          </slot>
+            </slot>
+          </div>
+        </div>
       </div>
     </div>
-    </div>
+    <PlusMinusButton v-if="plusMinusButtons" type="plus" size="1.6rem" @click="increment(1)"/>
   </div>
-  <plus-minus-button v-if="plusMinusButtons" type="plus" size="1.6rem" @click="increment(1)"/>
-  </div>`
-});
+</template>