Improve glyph BG styling (fixes #3294)

src/components/GlyphTooltip.vue

@@ -98,7 +98,7 @@ export default {
     },
     descriptionStyle() {
       const color = GlyphAppearanceHandler.getRarityColor(this.strength);
-      const cursedColor = player.options.lightGlyphs ? "white" : "black";
+      const cursedColor = GlyphAppearanceHandler.isLightBG ? "white" : "black";
       return {
         color: this.type === "cursed" ? cursedColor : color,
         animation: this.type === "reality" ? "a-reality-glyph-name-cycle 10s infinite" : undefined
@@ -167,7 +167,7 @@ export default {
       const isCursed = this.type === "cursed";
       const isReality = this.type === "reality";
 
-      let color = Theme.current().isDark() ? this.rarityInfo.darkColor : this.rarityInfo.lightColor;
+      let color = GlyphAppearanceHandler.getRarityColor(this.strength);
       if (isCursed) color = this.textColor;
       if (this.type === "companion") color = GlyphAppearanceHandler.getBorderColor(this.type);
       return {

src/components/GlyphTooltipEffect.vue

@@ -76,7 +76,7 @@ export default {
         .replace("\n", "<br>")
         .replace("]", "</span>")
         .replace(
-          "[", `<span style="${player.options.lightGlyphs
+          "[", `<span style="${GlyphAppearanceHandler.isLightBG
             ? ""
             : "text-shadow: white 0 0 0.6rem;"}
             font-weight: bold;">`

src/components/modals/GlyphShowcasePanelEntry.vue

@@ -80,9 +80,10 @@ export default {
       };
     },
     rarityStyle() {
+      // Rarity is handled differently here than usual because this is in contrast with the theme BG, not the glyph BG
       const color = CosmeticGlyphTypes[this.glyph.type].ignoreRarityColor
         ? GlyphAppearanceHandler.getBorderColor(this.type)
-        : GlyphAppearanceHandler.getRarityColor(this.glyph.strength);
+        : getRarity(this.glyph.strength)[Theme.current().isDark() ? "darkColor" : "lightColor"];
       return {
         color,
         "font-weight": "bold"

src/components/modals/options/glyph-appearance/GlyphCustomizationSlidingWindow.vue

@@ -68,7 +68,7 @@ export default {
         this.isActive = player.reality.glyphs.cosmetics.active;
       }
       if (this.type === "reality" && !this.isSymbol) this.realityColor = GlyphAppearanceHandler.realityColor;
-      this.darkKeySwap = !player.options.lightGlyphs;
+      this.darkKeySwap = player.options.glyphBG;
     },
     select(option) {
       if (!this.isSingleGlyph && !this.isActive) return;

src/components/modals/options/glyph-appearance/GlyphDisplayOptionsModal.vue

@@ -19,7 +19,7 @@ export default {
     return {
       newGlyphs: false,
       glyphEffectDots: false,
-      lightGlyphs: false,
+      glyphBG: 0,
       glyphInfoType: 0,
       showGlyphInfoByDefault: false,
     };
@@ -28,6 +28,18 @@ export default {
     infoLabel() {
       return GlyphInfo.labels[this.glyphInfoType];
     },
+    glyphBGStr() {
+      switch (this.glyphBG) {
+        case GLYPH_BG_SETTING.AUTO:
+          return "AUTO";
+        case GLYPH_BG_SETTING.LIGHT:
+          return "Light";
+        case GLYPH_BG_SETTING.DARK:
+          return "Dark";
+        default:
+          throw new Error("Unrecognized Glyph BG setting");
+      }
+    }
   },
   watch: {
     newGlyphs(newValue) {
@@ -38,10 +50,6 @@ export default {
       player.options.showHintText.glyphEffectDots = newValue;
       EventHub.dispatch(GAME_EVENT.GLYPH_VISUAL_CHANGE);
     },
-    lightGlyphs(newValue) {
-      player.options.lightGlyphs = newValue;
-      EventHub.dispatch(GAME_EVENT.GLYPH_VISUAL_CHANGE);
-    },
     showGlyphInfoByDefault(newValue) {
       player.options.showHintText.showGlyphInfoByDefault = newValue;
       EventHub.dispatch(GAME_EVENT.GLYPH_VISUAL_CHANGE);
@@ -52,7 +60,7 @@ export default {
       const options = player.options;
       this.newGlyphs = options.showNewGlyphIcon;
       this.glyphEffectDots = options.showHintText.glyphEffectDots;
-      this.lightGlyphs = options.lightGlyphs;
+      this.glyphBG = player.options.glyphBG;
       this.glyphInfoType = options.showHintText.glyphInfoType;
       this.showGlyphInfoByDefault = options.showHintText.showGlyphInfoByDefault;
     },
@@ -62,6 +70,10 @@ export default {
         "background-color": "var(--color-disabled)",
       };
     },
+    cycleBG() {
+      player.options.glyphBG = (player.options.glyphBG + 1) % Object.keys(GLYPH_BG_SETTING).length;
+      EventHub.dispatch(GAME_EVENT.GLYPH_VISUAL_CHANGE);
+    },
   },
 };
 </script>
@@ -80,10 +92,12 @@ export default {
         v-model="glyphEffectDots"
         text="Always show Glyph effect dots:"
       />
-      <ModalOptionsToggleButton
-        v-model="lightGlyphs"
-        text="Light Glyph backgrounds:"
-      />
+      <button
+        class="o-primary-btn o-primary-btn--modal-option"
+        @click="cycleBG()"
+      >
+        Glyph BG color: {{ glyphBGStr }}
+      </button>
       <ExpandingControlBox
         class="o-primary-btn c-dropdown-btn"
       >

src/core/constants.js

@@ -226,7 +226,8 @@ window.TS171_MULTIPLIER = 1.25;
 // Used as drag and drop data type
 window.GLYPH_MIME_TYPE = "text/x-ivark-glyph";
 
-// These need to be in descending order for searching over them to work trivially
+// These need to be in descending order for searching over them to work trivially, and all need to be hex codes
+// in order for reality glyph color parsing to work properly in the cosmetic handler
 window.GlyphRarities = [
   {
     minStrength: 3.5,
@@ -266,11 +267,17 @@ window.GlyphRarities = [
   }, {
     minStrength: 1,
     name: "Common",
-    darkColor: "white",
-    lightColor: "black"
+    darkColor: "#ffffff",
+    lightColor: "#000000"
   },
 ];
 
+window.GLYPH_BG_SETTING = {
+  AUTO: 0,
+  LIGHT: 1,
+  DARK: 2,
+};
+
 window.GLYPH_TYPES = [
   "power",
   "infinity",

src/core/glyphs/glyph-cosmetics.js

@@ -26,7 +26,7 @@ class CosmeticGlyphType {
 
   get defaultColor() {
     const color = this.id === "reality" ? GlyphAppearanceHandler.realityColor : this._defaultColor;
-    const isNormallyDark = !player.options.lightGlyphs;
+    const isNormallyDark = !GlyphAppearanceHandler.isLightBG;
     return {
       border: color,
       bg: (isNormallyDark === (this.id === "cursed")) ? "white" : "black",
@@ -153,14 +153,25 @@ export const GlyphAppearanceHandler = {
     return ShopPurchaseData.singleCosmeticSet + player.records.fullGameCompletions;
   },
 
+  // Returns true for "light" BG glyphs and false for "dark" BG glyphs
+  get isLightBG() {
+    switch (player.options.glyphBG) {
+      case GLYPH_BG_SETTING.AUTO:
+        return !Theme.current().isDark();
+      case GLYPH_BG_SETTING.LIGHT:
+        return true;
+      case GLYPH_BG_SETTING.DARK:
+        return false;
+      default:
+        throw new Error("Unrecognized Glyph BG setting");
+    }
+  },
   getBorderColor(type) {
-    if (type === "cursed" && !CosmeticGlyphTypes.cursed.currentColor.str)
-      return player.options.lightGlyphs ? "white" : "black";
+    if (type === "cursed" && !CosmeticGlyphTypes.cursed.currentColor.str) return this.isLightBG ? "white" : "black";
     return CosmeticGlyphTypes[type].currentColor.border;
   },
   getRarityColor(strength) {
-    const isDarkBG = !player.options.lightGlyphs;
-    return getRarity(strength)[isDarkBG ? "darkColor" : "lightColor"];
+    return getRarity(strength)[this.isLightBG ? "lightColor" : "darkColor"];
   },
   getColorProps(colorStr) {
     // This condition is a bit odd - this specifically selects out the hybrid custom colors which have both a BG color
@@ -168,7 +179,7 @@ export const GlyphAppearanceHandler = {
     if (colorStr?.charAt(1) !== "#") {
       return {
         border: colorStr,
-        bg: player.options.lightGlyphs ? "white" : "black",
+        bg: this.isLightBG ? "white" : "black",
       };
     }
     return {
@@ -178,7 +189,7 @@ export const GlyphAppearanceHandler = {
   },
   // Only used to ensure readable glyph tooltips
   getBaseColor(isInverted) {
-    const isNormallyDark = !player.options.lightGlyphs;
+    const isNormallyDark = !this.isLightBG;
     if (isInverted) return isNormallyDark ? "white" : "black";
     return isNormallyDark ? "black" : "white";
   },

src/core/player.js

@@ -801,7 +801,7 @@ window.player = {
     ignoreGlyphEffects: false,
     ignoreGlyphLevel: false,
     ignoreGlyphRarity: false,
-    lightGlyphs: false,
+    glyphBG: GLYPH_BG_SETTING.AUTO,
     showHintText: {
       showPercentage: true,
       achievements: true,

src/core/storage/migrations.js

@@ -345,6 +345,10 @@ GameStorage.migrations = {
       };
       const allGlyphs = player.reality.glyphs.active.concat(player.reality.glyphs.inventory);
       for (const glyph of allGlyphs) glyph.effects = updateBitmask(glyph.effects);
+
+      // Glyph light/dark formatting was refactored as well; these values are in reference to the GLYPH_BG_SETTING enum
+      player.options.glyphBG = player.options.lightGlyphs ? 1 : 2;
+      delete player.options.lightGlyphs;
     },
   },