clean up and beautify effarig celestial tab

remove redundant objects, reorganize layout, make the effarig reality button cooler

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

@@ -1,29 +1,5 @@
 Vue.component('effarig-tab', {
   components: {
-    "glyph-weight-sliders": {
-      props: {
-        value: {
-          type: Number,
-          default: 50
-        },
-        name: {
-          type: String
-        }
-      },
-      template:
-        `<div class="o-effarig-slider"> 
-          <b>{{ name }} weight: {{ value/100 }}</b>
-          <input
-            style="margin-left:0rem;"
-            :value="value"
-            class="o-primary-btn--update-rate__slider"
-            type="range"
-            min="0"
-            max="100"
-            @input="emitInput(parseInt($event.target.value))"
-          />
-         </div>`
-    },
     "run-unlock-reward": {
       props: {
         unlock: Object
@@ -33,12 +9,28 @@ Vue.component('effarig-tab', {
           isUnlocked: false
         };
       },
+      computed: {
+        descriptions() {
+          return this.unlock.config.description.split("\n");
+        },
+        symbol: () => GLYPH_SYMBOLS.effarig,
+      },
       methods: {
         update() {
           this.isUnlocked = this.unlock.isUnlocked;
         }
       },
-      template: `<div v-if="isUnlocked">{{ unlock.config.description }}</div>`
+      template: /*html*/`
+        <div class="l-effarig-tab__reward">
+          <div class="c-effarig-tab__reward-label">{{ unlock.config.label }}: </div>
+          <div v-if="isUnlocked" class="l-effarig-tab__reward-descriptions">
+            <div v-for="description in descriptions">
+              <span class="c-effarig-tab__reward-symbol">{{symbol}}</span>{{description}}
+            </div>
+          </div>
+          <span v-else class="c-effarig-tab__reward-symbol">?</span>
+        </div>
+      `
     }
   },
   data: function() {
@@ -49,59 +41,11 @@ Vue.component('effarig-tab', {
       adjusterUnlocked: false,
       autopickerUnlocked: false,
       runUnlocked: false,
-      weights: player.celestials.effarig.glyphWeights,
-      typePriorities: ["Power", "Time", "Infinity", "Dilation", "Replication"],
       quote: "",
       quoteIdx: 0,
+      isRunning: false,
     };
   },
-  methods: {
-    update() {
-      this.relicShards = player.celestials.effarig.relicShards;
-      this.shardsGained = Effarig.shardsGained;
-      this.typePriorities = player.celestials.effarig.typePriorityOrder;
-      this.quote = Effarig.quote;
-      this.quoteIdx = player.celestials.effarig.quoteIdx;
-      this.runUnlocked = EffarigUnlock.run.isUnlocked;
-      this.autosacrificeUnlocked = EffarigUnlock.autosacrifice.isUnlocked;
-      this.adjusterUnlocked = EffarigUnlock.adjuster.isUnlocked;
-      this.autopickerUnlocked = EffarigUnlock.autopicker.isUnlocked;
-    },
-    startRun() {
-      Effarig.startRun();
-    },
-    adjustWeights(name) {
-      let tempTotalWeight = 0
-      for (let i in this.weights) {
-        tempTotalWeight += this.weights[i]
-      }
-      let tempExtra = tempTotalWeight - 100
-      if (this.weights[name] === 100) {
-        for (let i in this.weights) {
-          this.weights[i] = 0;
-        }
-        this.weights[name] = 100;
-      } else {
-        while (tempExtra > 0) {
-          for (let i in this.weights) {
-            if (tempExtra > 0 && this.weights[i] > 0 && i != name) {
-              this.weights[i]--;
-              tempExtra--;
-            }
-          }
-        }
-      }
-    },
-    move() {
-      player.celestials.effarig.typePriorityOrder = this.typePriorities
-    },
-    nextQuote() {
-      Effarig.nextQuote()
-    },
-    hasNextQuote() {
-      return this.quoteIdx < Effarig.maxQuoteIdx
-    }
-  },
   computed: {
     shopUnlocks: () => [
       EffarigUnlock.adjuster,
@@ -113,54 +57,68 @@ Vue.component('effarig-tab', {
       EffarigUnlock.infinity,
       EffarigUnlock.eternity,
       EffarigUnlock.reality
-    ]
+    ],
+    symbol: () => GLYPH_SYMBOLS.effarig,
+    runButtonOuterClass() {
+      return this.isRunning ? "c-effarig-run-button--running" : "c-effarig-run-button--not-running";
+    },
+    runButtonInnerClass() {
+      return this.isRunning ? "c-effarig-run-button__inner--running" : "c-effarig-run-button__inner--not-running";
+    },
+    runDescription() {
+      return this.isRunning
+        ? "You are in Effarig's Reality - give up?"
+        : `Start a new reality, all production and gamespeed is severely lowered,
+          infinity and time dimensions reduce the production penalty.
+          Glyph levels are temporarily capped.`
+    }
+  },
+  methods: {
+    update() {
+      this.relicShards = player.celestials.effarig.relicShards;
+      this.shardsGained = Effarig.shardsGained;
+      this.quote = Effarig.quote;
+      this.quoteIdx = player.celestials.effarig.quoteIdx;
+      this.runUnlocked = EffarigUnlock.run.isUnlocked;
+      this.autosacrificeUnlocked = EffarigUnlock.autosacrifice.isUnlocked;
+      this.adjusterUnlocked = EffarigUnlock.adjuster.isUnlocked;
+      this.autopickerUnlocked = EffarigUnlock.autopicker.isUnlocked;
+      this.isRunning = Effarig.isRunning;
+    },
+    startRun() {
+      if (!this.isRunning) Effarig.startRun();
+      else startRealityOver();
+    },
+    nextQuote() {
+      Effarig.nextQuote()
+    },
+    hasNextQuote() {
+      return this.quoteIdx < Effarig.maxQuoteIdx
+    }
   },
   template:
     `<div class="l-effarig-celestial-tab">
       <div class="o-teresa-quotes"> {{ quote }}</div><button class="o-quote-button" @click="nextQuote()" v-if="hasNextQuote()">→</button>
       <div class="c-effarig-relics">You have {{ shortenRateOfChange(relicShards) }} Relic Shards.</div>
       <div class="c-effarig-relic-description">You gain {{ shortenRateOfChange(shardsGained) }} Shards next reality, based on different kinds of glyph effects you have equipped and EP.</div>
-      <div class="l-effarig-shop">
-        <effarig-unlock-button
-          v-for="(unlock, i) in shopUnlocks"
-          :key="i"
-          :unlock="unlock"
-        />
-      </div>
-      <effarig-unlock-button :unlock="runUnlock" />
-      <div class="l-effarig-glyph-settings">
-        <div v-if="autosacrificeUnlocked">
-          Highest type will be picked, lowest sacrificed.
-          <draggable :list="typePriorities" @end="move()">
-            <div v-for="element in typePriorities" class="o-effarig-glyph-type">{{element}}</div>
-          </draggable>
+      <div class="l-effarig-shop-and-run">
+        <div class="l-effarig-shop">
+          <effarig-unlock-button
+           v-for="(unlock, i) in shopUnlocks"
+           :key="i"
+           :unlock="unlock" />
+          <effarig-unlock-button v-if="!runUnlocked" :unlock="runUnlock" />
         </div>
-        <div v-if="adjusterUnlocked">
-          <div>
-            <glyph-weight-sliders v-model="weights.ep" name="EP" @input="adjustWeights('ep')"/>
-            <glyph-weight-sliders v-model="weights.repl" name="Replicanti" @input="adjustWeights('repl')"/>
-          </div>
-          <div>
-            <glyph-weight-sliders v-model="weights.dt" name="DT" @input="adjustWeights('dt')"/>
-            <glyph-weight-sliders v-model="weights.eternities" name="Eternities" @input="adjustWeights('eternities')"/>
+        <div v-if="runUnlocked" class="l-effarig-run">
+          <div class="c-effarig-run-description">{{runDescription}}</div>
+          <div :class="['l-effarig-run-button', 'c-effarig-run-button', runButtonOuterClass]"
+               @click="startRun()">
+            <div :class="runButtonInnerClass" :button-symbol="symbol">{{symbol}}</div>
           </div>
+          <run-unlock-reward v-for="(unlock, i) in runUnlocks"
+                             :key="i"
+                             :unlock="unlock" />
         </div>
-        <div v-if="autopickerUnlocked">Glyph effect weight settings here</div>
-      </div>
-      <div v-if="runUnlocked">
-        <button
-          class="o-effarig-shop-button effarig-run-button"
-          @click="startRun()"
-        >
-          Start a new reality, all production and gamespeed is severely lowered,
-          infinity and time dimensions reduce the production penalty.
-          Glyph levels are temporarily capped. You will gain unlocks at Infinity, Eternity and Reality.
-        </button>
-        <run-unlock-reward
-          v-for="(unlock, i) in runUnlocks"
-          :key="i"
-          :unlock="unlock"
-        />
       </div>
     </div>`
 });

javascripts/components/celestials/subtabs/effarig/effarig-unlock-button.js

@@ -27,10 +27,14 @@ Vue.component("effarig-unlock-button", {
       @click="purchase"
     >
       <description-display :config="config"/>
-      <cost-display br
+      <cost-display
         v-if="!isBought"
         :config="config"
         singular="Relic Shard"
+        prefix=""
       />
+      <div v-else>
+        (Unlocked)
+      </div>
     </button>`
 });

javascripts/components/cost-display.js

@@ -3,7 +3,11 @@ Vue.component("cost-display", {
     config: Object,
     br: Boolean,
     singular: String,
-    plural: String
+    plural: String,
+    prefix: {
+      type: String,
+      default: "Cost:",
+    }
   },
   data() {
     return {
@@ -42,5 +46,5 @@ Vue.component("cost-display", {
       if (this.updateFn) this.updateFn();
     }
   },
-  template: `<span v-if="isVisible"><br v-if="br">Cost: {{costDisplay}} {{singular | pluralize(cost, plural)}}</span>`
+  template: `<span v-if="isVisible"><br v-if="br">{{prefix}} {{costDisplay}} {{singular | pluralize(cost, plural)}}</span>`
 });

javascripts/core/celestials/effarig.js

@@ -8,7 +8,7 @@ const effarigQuotes = [
   "Do you like my little Stall? It’s not much, but it’s mine.",
   "Thank you for your purchase, customer!",
   "Is that too much? I think it’s too much.",
-  "You bought out my entire stock... well at least I‘m rich now.",
+  "You bought out my entire stock... well, at least I‘m rich now.",
   "The heart of my reality is suffering. Each Layer is harder than the last.",
   "I hope you never complete it.",
   "This is the first threshold. It only gets worse from here.",
@@ -66,7 +66,7 @@ const EffarigUnlock = (function() {
 
 var Effarig = {
   startRun() {
-    startRealityOver()
+    if (!startRealityOver()) return;
     player.celestials.effarig.run = true
     recalculateAllGlyphs()
     showRealityTab("glyphstab");

javascripts/core/secret-formula/celestials/effarig.js

@@ -2,37 +2,43 @@ GameDatabase.celestials.effarig = {
   unlocks: {
     adjuster: {
       id: 0,
-      description: "Unlock glyph level adjustment.",
+      description: "Glyph level adjustment",
       cost: 1e7
     },
     autosacrifice: {
       id: 1,
-      description: "Unlock automatic glyph sacrifice.",
+      description: "Automatic glyph sacrifice",
       cost: 2e8
     },
     autopicker: {
       id: 2,
-      description: "Unlock automatic glyph picker.",
+      description: "Automatic glyph picker",
       cost: 3e9
     },
     run: {
       id: 3,
-      description: "Unlock Effarig's reality.",
+      description: "Effarig's reality",
       cost: 1e12
     },
     infinity: {
       id: 4,
-      description: "Infinity: IP mults are capped at 1e50 in Effarig Reality; " +
-        "infinitied stat raises the replicanti cap and increases your max RG."
+      label: "Infinity",
+      description:
+        "Infinitied stat raises the replicanti cap\n" +
+        "Infinitied stat increases your max RG\n" +
+        "IP mults are capped at 1e50 in Effarig Reality"
     },
     eternity: {
       id: 5,
-      description: "Eternity: IP mults are no longer limited in Effarig Reality; " +
-        "eternitied stat generates infinitied stat, unlocks The Enslaved Ones."
+      label: "Eternity",
+      description: "Eternitied stat generates infinitied stat\n" +
+        "You have unlocked The Enslaved Ones\n" +
+        "IP mults are no longer limited in Effarig Reality"
     },
     reality: {
       id: 6,
-      description: "Reality: Unlocks Effarig Glyphs."
+      label: "Reality",
+      description: "You have unlocked Effarig Glyphs (You may equip at most one)"
     }
   }
 };

stylesheets/styles.css

@@ -4810,13 +4810,19 @@ screen and (max-width: 480px) {
 /* #region effarig tab */
 
 .o-effarig-shop-button {
-  padding: 17px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  line-height: 1.5;
+  width: 100%;
+  padding: 1rem;
   font-size: 2rem;
   background-color: #5151ec;
   color: white;
   border: none;
-  border-radius: 5px;
-  margin: 10px;
+  border-radius: 0.5rem;
+  margin: 1rem;
   cursor: pointer;
   transition-duration: 0.12s;
 }
@@ -4832,34 +4838,218 @@ screen and (max-width: 480px) {
   cursor: default;
 }
 
-.effarig-run-button {
-  width: 300px;
-}
-
-.o-effarig-slider {
-  font-size: 1.2rem;
-  background-color: #5151ec;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  width: 20rem;
-  cursor: default;
-  margin: 0.4rem;
-  padding: 0.5rem;
-}
-
-.l-effarig-glyph-settings {
+.l-effarig-run-button {
   display: flex;
-  justify-content: space-around;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 15rem;
+  height: 15rem;
+  border-radius: 50%;
+  border-style: none;
+  position: relative;
+  margin: 2rem;
 }
 
-.o-effarig-glyph-type {
-  padding: 12px;
+.c-effarig-run-button {
+  font-size: 10rem;
+  font-family: sans-serif;
+  font-weight: bold;
+}
+
+
+.c-effarig-run-button--not-running {
   background-color: #5151ec;
   color: white;
-  margin-bottom: 7px;
-  border-radius: 5px;
-  cursor: grab;
+  z-index: 0;
+  -webkit-animation: effarig-run-button--not-running-glow 2s ease-in-out infinite alternate;
+  -moz-animation: effarig-run-button--not-running-glow 2s ease-in-out infinite alternate;
+  animation: effarig-run-button--not-running-glow 2s ease-in-out infinite alternate;
+}
+
+.c-effarig-run-button--not-running:hover {
+  background-color: black;
+}
+
+@keyframes effarig-run-button--not-running-glow {
+  from {
+    text-shadow: 0 0 1rem #fff, 0 0 2rem #fff, 0 0 3rem #1000b0, 0 0 4rem #1000b0, 0 0 5rem #1000b0, 0 0 6rem #1000b0, 0 0 7rem #1000b0;
+    box-shadow: 0 0 .5rem #1000b0, 0 0 1rem #1000b0, 0 0 1.5rem #1000b0;
+  }
+  to {
+    text-shadow: 0 0 2rem #fff, 0 0 3rem #2512d0, 0 0 4rem #2512d0, 0 0 5rem #2512d0, 0 0 6rem #2512d0, 0 0 7rem #2512d0, 0 0 8rem #2512d0;
+    box-shadow: 0 0 .5rem #2512d0, 0 0 1rem #2512d0, 0 0 1.5rem #2512d0, 0 0 2rem #2512d0;
+  }
+}
+
+.c-effarig-run-button--running {
+  background: black;
+  z-index: 0;
+  -webkit-animation: effarig-run-button--running-glow 2s infinite alternate;
+  -moz-animation: effarig-run-button--running-glow 2s infinite alternate;
+  animation: effarig-run-button--running-glow 2s infinite alternate;
+}
+
+.c-effarig-run-button--running:hover {
+  background: #400000;
+}
+
+.c-effarig-run-button__inner--running {
+  background-image: url("../images/noise.png");
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: rgba(255, 0, 0, 0.5);
+  -webkit-animation: effarig-run-button--running-noise 15s infinite alternate;
+  -moz-animation: effarig-run-button--running-noise 15s infinite alternate;
+  animation: effarig-run-button--running-noise 15s infinite alternate;
+  position: relative;
+}
+
+
+.c-effarig-run-button__inner--running:after {
+  background: none;
+  content: attr(button-symbol);
+  z-index: -1;
+  position: absolute;
+  -webkit-animation: effarig-run-button__inner--running-glow 2s infinite alternate;
+  -moz-animation: effarig-run-button__inner--running-glow 2s infinite alternate;
+  animation: effarig-run-button__inner--running-glow 2s infinite alternate;
+  left: 0;
+  top: 0;
+}
+
+@keyframes effarig-run-button--running-noise {
+  0%   { -webkit-text-fill-color: rgba(255, 0, 0, 1);  }
+  20%  {
+    -webkit-text-fill-color: rgba(255, 0, 0, 1);
+    background-position: -50px 0;
+  }
+  22%  {
+    -webkit-text-fill-color: rgba(255, 0, 0, 0.5);
+    background-position: 100px -10px;
+  }
+  24%  {
+    -webkit-text-fill-color: rgba(255, 0, 0, 1);
+    background-position: 0 -150px;
+  }
+  50%  {
+    -webkit-text-fill-color: rgba(255, 0, 0, 1);
+    background-position: -50px 0;
+  }
+  51%  {
+    -webkit-text-fill-color: rgba(255, 0, 0, 0.5);
+    background-position: 100px -10px;
+  }
+  52%  {
+    -webkit-text-fill-color: rgba(255, 0, 0, 1);
+    background-position: 0 -150px;
+  }
+  54%  {
+    -webkit-text-fill-color: rgba(255, 0, 0, 1);
+    background-position: 50px 0;
+  }
+  56%  {
+    -webkit-text-fill-color: rgba(255, 0, 0, 0.5);
+    background-position: -100px 10px;
+  }
+  58%  {
+    -webkit-text-fill-color: rgba(255, 0, 0, 1);
+    background-position: 0 50px;
+  }
+  90%  {
+    -webkit-text-fill-color: rgba(255, 0, 0, 1);
+    background-position: 50px 50px;
+  }
+  91%  {
+    -webkit-text-fill-color: rgba(255, 0, 0, 0.5);
+    background-position: 100px -110px;
+  }
+  92%  {
+    -webkit-text-fill-color: rgba(255, 0, 0, 1);
+    background-position: 0 70px;
+  }
+  100% { -webkit-text-fill-color: rgba(255, 0, 0, 1); }
+}
+
+@keyframes effarig-run-button--running-glow {
+  from {
+    box-shadow: 0 0 .5rem #c20707 inset, 0 0 1rem #c20707 inset, 0 0 1.5rem #c20707 inset;
+  }
+  to {
+    box-shadow: 0 0 .5rem #e21717 inset, 0 0 1rem #e21717 inset, 0 0 1.5rem #e21717 inset, 0 0 2rem #e21717 inset;
+  }
+}
+
+@keyframes effarig-run-button__inner--running-glow {
+  from {
+    text-shadow: 0 0 0.5rem #a20707, 0 0 1rem #a20707, 0 0 1.5rem #a20707;
+  }
+  to {
+    text-shadow: 0 0 0.5rem #c21717, 0 0 1rem #c21717, 0 0 1.5rem #c21717, 0 0 2rem #c21717;
+  }
+}
+
+.l-effarig-run-button__bg {
+  position: absolute;
+  width: 80%;
+  height: 80%;
+}
+
+.l-effarig-run-button__fg {
+  position: relative;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.l-effarig-shop {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.l-effarig-shop-and-run {
+  margin-top: 2rem;
+  display: inline-flex;
+  flex-direction: row;
+}
+
+.l-effarig-run {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  margin-left: 3rem;
+  width: 500px;
+}
+
+.c-effarig-run-description {
+  font-size: larger;
+  margin-top: 1rem;
+}
+
+.l-effarig-tab__reward {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 0.5rem;
+}
+
+.c-effarig-tab__reward-label {
+  padding-right: 1rem;
+  font-weight: bold;
+}
+
+.c-effarig-tab__reward-symbol {
+  font-weight: bold;
+  margin-right: 0.5rem;
+}
+
+.l-effarig-tab__reward-descriptions {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.c-effarig-tab__reward-description {
+  text-align: left;
 }
 
 .sortable-drag {