Make celestial cycle animation in Pelle quotes smoother

javascripts/core/celestials/quotes.js

@@ -31,16 +31,39 @@ export const Quote = {
   }
 };
 
-
-function celCycle(cels) {
+// Gives an array specifying proportions of celestials to blend together on the modal, as a function of time, to
+// provide a smoother transition between different celestials to reduce potential photosensitivity issues
+function blendCel(cels) {
   const totalTime = cels.map(cel => cel[1]).sum();
-  let tick = (Date.now() / 100) % totalTime;
-  let index = -1;
-  while (tick >= 0 && index < cels.length - 1) {
-    index++;
-    tick -= cels[index][1];
+  const tick = (Date.now() / 1000) % totalTime;
+
+  // Blend the first blendTime seconds with the previous celestial and the last blendTime seconds with the next;
+  // note that this results in a total transition time of 2*blendTime
+  const blendTime = 0.3;
+  let start = 0;
+  for (let index = 0; index < cels.length; index++) {
+    const prevCel = cels[(index + cels.length - 1) % cels.length], currCel = cels[index],
+      nextCel = cels[(index + 1) % cels.length];
+
+    // Durations of time from after last transition and after next transition. May be negative, which is how we
+    // check to see if we're in the correct time interval (last should be positive, next should be negative)
+    const lastTime = tick - start, nextTime = lastTime - currCel[1];
+    if (nextTime > 0) {
+      start += currCel[1];
+      continue;
+    }
+
+    if (lastTime < blendTime) {
+      const t = 0.5 * lastTime / blendTime;
+      return [[prevCel[0], 0.5 - t], [currCel[0], 0.5 + t]];
+    }
+    if (-nextTime < blendTime) {
+      const t = 0.5 * nextTime / blendTime;
+      return [[currCel[0], 0.5 - t], [nextCel[0], 0.5 + t]];
+    }
+    return [[currCel[0], 1]];
   }
-  return cels[index][0];
+  throw new Error("Could not blend celestial fractions in Quote modal");
 }
 
 class QuoteLine {
@@ -48,9 +71,9 @@ class QuoteLine {
     this._parent = parent;
     this._showCelestialName = line.showCelestialName ?? true;
 
-    this._celestial = line.background
-      ? () => celCycle(line.background)
-      : parent.celestial;
+    this._celestialArray = line.background
+      ? () => blendCel(line.background)
+      : [[parent.celestial, 1]];
 
     const replacementMatch = /\$(\d+)/gu;
 
@@ -64,12 +87,12 @@ class QuoteLine {
     return typeof this._line === "function" ? this._line() : this._line;
   }
 
-  get celestial() {
-    return typeof this._celestial === "function" ? this._celestial() : this._celestial;
+  get celestials() {
+    return typeof this._celestialArray === "function" ? this._celestialArray() : this._celestialArray;
   }
 
-  get celestialSymbol() {
-    return Celestials[this.celestial].symbol;
+  get celestialSymbols() {
+    return this.celestials.map(c => Celestials[c[0]].symbol);
   }
 
   get showCelestialName() {

javascripts/core/secret-formula/celestials/quotes/pelle.js

@@ -1,16 +1,18 @@
 import { GameDatabase } from "../../game-database";
 
+// These entries describe the special flash-between-celestial effect on some quotes, with the numbers being
+// durations of each celestial in seconds
 const flashCelestial = [
-  ["teresa", 5],
-  ["effarig", 5],
-  ["enslaved", 5],
-  ["v", 5],
-  ["ra", 5],
-  ["laitela", 5],
-  ["pelle", 5]
+  ["teresa", 0.7],
+  ["effarig", 0.7],
+  ["enslaved", 0.7],
+  ["v", 0.7],
+  ["ra", 0.7],
+  ["laitela", 0.7],
+  ["pelle", 0.7]
 ];
 /** @param {string} cel */
-const primaryBackground = cel => [["pelle", 15], [cel, 25]];
+const primaryBackground = cel => [["pelle", 1.5], [cel, 2.5]];
 
 /* eslint-disable no-multi-spaces */
 const destroyer =    ["False",         "Deity",         "Destroyer"];

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

@@ -140,7 +140,7 @@ GameDatabase.celestials.pelle.rifts = {
         description: () => `You gain ${formatPercents(0.01)} of your EP gained on Eternity per second`,
       },
     ],
-    galaxyGeneratorText: "The Galaxies/Reality you have are too fragmented, you must stabilize the $value"
+    galaxyGeneratorText: "The Galaxies/Realities you have are too fragmented, you must stabilize the $value"
   },
   recursion: {
     id: 4,

src/components/modals/celestial-quotes/CelestialQuoteBackground.vue

@@ -2,12 +2,14 @@
 export default {
   name: "CelestialQuoteBackground",
   props: {
-    celestialSymbol: {
-      type: String,
+    celestialSymbols: {
+      // Array elements are String
+      type: Array,
       required: true
     },
-    celestial: {
-      type: String,
+    celestials: {
+      // Array elements are [String, Number]
+      type: Array,
       required: true
     },
     primary: {
@@ -19,11 +21,24 @@ export default {
     modalClass() {
       return {
         "l-modal-celestial-quote": true,
-        "c-modal-celestial-quote": true,
-        [`c-modal-celestial-quote--${this.celestial}`]: true,
-        "c-modal-celestial-quote-primary": this.primary,
       };
-    }
+    },
+  },
+  methods: {
+    styleObject(celEntry, opac, isText) {
+      const baseCol = `var(--color-${celEntry[0]}--base)`;
+      if (celEntry[0] === "laitela") {
+        return {
+          color: `var(--color-${celEntry[0]}--accent)`,
+          background: isText ? undefined : baseCol,
+          opacity: opac * celEntry[1]
+        };
+      }
+      return {
+        color: baseCol,
+        opacity: opac * celEntry[1]
+      };
+    },
   },
 };
 </script>
@@ -31,18 +46,31 @@ export default {
 <template>
   <div :class="modalClass">
     <span
-      class="c-modal-celestial-quote__symbol"
-      v-html="celestialSymbol"
+      v-for="(celestial, index) in celestials"
+      :key="index"
+      class="c-modal-celestial-quote c-modal-celestial-quote__symbol"
+      :style="styleObject(celestial, 0.2, true)"
+      v-html="celestialSymbols[index]"
     />
-    <slot />
+    <span
+      v-for="(celestial, index) in celestials"
+      :key="index + 10"
+      class="c-modal-celestial-quote c-modal-celestial-quote__shadow"
+      :style="styleObject(celestial, 1, false)"
+    />
+    <span
+      v-for="(celestial, index) in celestials"
+      :key="index + 20"
+      class="c-modal-celestial-quote c-modal-celestial-quote__text"
+      :style="styleObject(celestial, 1, true)"
+    >
+      <slot />
+    </span>
   </div>
 </template>
 
 <style scoped>
 .l-modal-celestial-quote {
-  --scoped-quote-color: var(--color-text);
-  --scoped-quote-background: black;
-
   display: flex;
   flex-direction: row;
   width: 30rem;
@@ -52,66 +80,41 @@ export default {
   top: 50vh;
   /* stylelint-disable-next-line unit-allowed-list */
   left: 50vw;
-  z-index: 3;
   justify-content: space-between;
   align-items: center;
   border-radius: var(--var-border-radius, 1rem);
   transform: translate(-50%, -50%);
-}
-
-.c-modal-celestial-quote--teresa {
-  --scoped-quote-color: var(--color-teresa--base);
-}
-
-.c-modal-celestial-quote--effarig {
-  --scoped-quote-color: var(--color-effarig--base);
-}
-
-.c-modal-celestial-quote--enslaved {
-  --scoped-quote-color: var(--color-enslaved--base);
-}
-
-.c-modal-celestial-quote--v {
-  --scoped-quote-color: var(--color-v--base);
-}
-
-.c-modal-celestial-quote--ra {
-  --scoped-quote-color: var(--color-ra--base);
-}
-
-.c-modal-celestial-quote--laitela {
-  --scoped-quote-color: var(--color-laitela--accent);
-  --scoped-quote-background: var(--color-laitela--base);
-}
-
-.c-modal-celestial-quote--pelle {
-  --scoped-quote-color: var(--color-pelle--base);
+  background-color: black;
 }
 
 .c-modal-celestial-quote {
-  color: var(--scoped-quote-color);
-  background-color: var(--scoped-quote-background);
-}
-
-.c-modal-celestial-quote-primary {
-  box-shadow: 0 0 1.5rem 0.1rem var(--scoped-quote-color), 0 0 1rem 0.1rem var(--scoped-quote-color) inset;
-}
-
-.s-base--metro .c-modal-celestial-quote-primary {
-  box-shadow: 0 0 1rem 0.2rem var(--scoped-quote-color), 0 0 1rem 0.1rem var(--scoped-quote-color) inset
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  border-radius: var(--var-border-radius, 1rem);
 }
 
 .c-modal-celestial-quote__symbol {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  justify-content: center;
-  align-items: center;
+  z-index: 1;
   font-size: 25rem;
-  opacity: 0.2;
   text-shadow: 0 0 2rem;
-  pointer-events: none;
+}
+
+.c-modal-celestial-quote__shadow {
+  box-shadow: 0 0 1.5rem 0.1rem, 0 0 1rem 0.1rem inset;
+}
+
+.s-base--metro .c-modal-celestial-quote__shadow {
+  box-shadow: 0 0 1rem 0.2rem, 0 0 1rem 0.1rem inset
+}
+
+.c-modal-celestial-quote__text {
+  z-index: 2;
+  padding: 5rem;
 }
 </style>

src/components/modals/celestial-quotes/CelestialQuoteLine.vue

@@ -39,8 +39,8 @@ export default {
   data() {
     return {
       message: "",
-      celestialSymbol: "",
-      celestial: "",
+      celestialSymbols: [],
+      celestials: [],
       celestialName: ""
     };
   },
@@ -70,9 +70,9 @@ export default {
   methods: {
     update() {
       const line = this.line;
-      this.celestialSymbol = line.celestialSymbol;
+      this.celestialSymbols = line.celestialSymbols;
       this.message = line.line;
-      this.celestial = line.celestial;
+      this.celestials = line.celestials;
       this.celestialName = line.celestialName;
     }
   },
@@ -81,8 +81,8 @@ export default {
 
 <template>
   <CelestialQuoteBackground
-    :celestial-symbol="celestialSymbol"
-    :celestial="celestial"
+    :celestial-symbols="celestialSymbols"
+    :celestials="celestials"
     :primary="primary"
   >
     <span
@@ -128,6 +128,16 @@ export default {
   cursor: pointer;
 }
 
+.c-modal-celestial-quote__arrow-left {
+  position: absolute;
+  left: 1rem;
+}
+
+.c-modal-celestial-quote__arrow-right {
+  position: absolute;
+  right: 1rem;
+}
+
 .c-modal-celestial-quote__end {
   position: absolute;
   bottom: 1.5rem;