Add default-on setting to force dark glyph BG

javascripts/core/app/modal.js

@@ -24,6 +24,7 @@ import SpeedrunModeModal from "@/components/modals/SpeedrunModeModal";
 import AnimationOptionsModal from "@/components/modals/options/AnimationOptionsModal";
 import AwayProgressOptionsModal from "@/components/modals/options/AwayProgressOptionsModal";
 import ConfirmationOptionsModal from "@/components/modals/options/ConfirmationOptionsModal";
+import GlyphDisplayOptionsModal from "@/components/modals/options/GlyphDisplayOptionsModal";
 import HiddenTabsModal from "@/components/modals/options/hidden-tabs/HiddenTabsModal";
 import HotkeysModal from "@/components/modals/options/HotkeysModal";
 import InfoDisplayOptionsModal from "@/components/modals/options/InfoDisplayOptionsModal";
@@ -203,6 +204,7 @@ Modal.armageddon = new Modal(ArmageddonModal, 1);
 Modal.confirmationOptions = new Modal(ConfirmationOptionsModal);
 Modal.infoDisplayOptions = new Modal(InfoDisplayOptionsModal);
 Modal.awayProgressOptions = new Modal(AwayProgressOptionsModal);
+Modal.glyphDisplayOptions = new Modal(GlyphDisplayOptionsModal);
 Modal.hotkeys = new Modal(HotkeysModal);
 Modal.newsOptions = new Modal(NewsOptionsModal);
 Modal.animationOptions = new Modal(AnimationOptionsModal);

javascripts/core/event-hub.js

@@ -77,6 +77,7 @@ window.GAME_EVENT = {
   GLYPHS_CHANGED: "GLYPHS_CHANGED",
   GLYPH_SACRIFICED: "GLYPH_SACRIFICED",
   GLYPH_SET_SAVE_CHANGE: "GLYPH_SET_SAVE_CHANGE",
+  GLYPH_VISUAL_CHANGE: "GLYPH_VISUAL_CHANGE",
 
   // Break Infinity
   BREAK_INFINITY: "BREAK_INFINITY",

javascripts/core/glyphs/glyph-core.js

@@ -722,7 +722,7 @@ export function getRarity(x) {
 }
 
 export function getColor(strength) {
-  return getRarity(strength)[Theme.current().isDark() ? "darkColor" : "lightColor"];
+  return getRarity(strength)[(player.options.forceDarkGlyphs || Theme.current().isDark()) ? "darkColor" : "lightColor"];
 }
 
 export function getAdjustedGlyphLevel(glyph, realityGlyphBoost = Glyphs.levelBoost, ignoreCelestialEffects = false) {

javascripts/core/player.js

@@ -785,6 +785,7 @@ window.player = {
     ignoreGlyphEffects: false,
     ignoreGlyphLevel: false,
     ignoreGlyphRarity: false,
+    forceDarkGlyphs: true,
     showHintText: {
       achievements: true,
       achievementUnlockStates: true,

public/stylesheets/glyphs.css

@@ -635,6 +635,7 @@
   height: 18rem;
   position: relative;
   background-color: rgba(0, 0, 0, 0%);
+  margin-bottom: 1rem;
 }
 
 .l-equipped-glyphs__dropzone {
@@ -682,12 +683,6 @@
   align-items: center;
 }
 
-.l-glyph-equip-button {
-  width: 100%;
-  height: 4rem;
-  margin: 0.5rem;
-}
-
 .l-glyph-set-save__header {
   margin-top: 1rem;
 }
@@ -868,7 +863,7 @@
 .c-current-glyph-effects {
   overflow: auto;
   width: 45rem;
-  height: 30rem;
+  height: 31rem;
   position: relative;
   color: var(--color-reality-dark);
   background: var(--color-background);
@@ -1266,7 +1261,7 @@
 .l-glyph-color-position__low {
   width: 0%;
   position: absolute;
-  top: 2.9rem;
+  top: 3.9rem;
   right: 22.5rem;
 }
 

src/components/GlyphComponent.vue

@@ -167,6 +167,9 @@ export default {
       const textShadow = this.isCursedGlyph
         ? `-0.04em 0.04em 0.08em ${this.cursedColor}`
         : `-0.04em 0.04em 0.08em ${rarityColor}`;
+      const defaultBG = player.options.forceDarkGlyphs || Theme.current().isDark()
+        ? "black"
+        : "white";
       return {
         width: `calc(${this.size} - 0.2rem)`,
         height: `calc(${this.size} - 0.2rem)`,
@@ -175,7 +178,7 @@ export default {
         "text-shadow": this.isBlobHeart ? undefined : textShadow,
         "border-radius": this.circular ? "50%" : "0",
         "padding-bottom": this.bottomPadding,
-        background: this.isCursedGlyph ? this.cursedColorInverted : undefined
+        background: this.isCursedGlyph ? this.cursedColorInverted : defaultBG
       };
     },
     mouseEventHandlers() {
@@ -265,6 +268,10 @@ export default {
     }
   },
   created() {
+    this.on$(GAME_EVENT.GLYPH_VISUAL_CHANGE, () => {
+      this.$recompute("innerStyle");
+      this.$recompute("showGlyphEffectDots");
+    });
     this.on$("tooltip-touched", () => this.hideTooltip());
   },
   beforeDestroy() {

src/components/modals/options/GlyphDisplayOptionsModal.vue

@@ -0,0 +1,63 @@
+<script>
+import ModalOptionsToggleButton from "@/components/ModalOptionsToggleButton";
+import ModalWrapperOptions from "@/components/modals/options/ModalWrapperOptions";
+
+export default {
+  name: "GlyphDisplayOptionsModal",
+  components: {
+    ModalOptionsToggleButton,
+    ModalWrapperOptions,
+  },
+  data() {
+    return {
+      newGlyphs: false,
+      glyphEffectDots: false,
+      forceDarkGlyphs: false
+    };
+  },
+  watch: {
+    newGlyphs(newValue) {
+      player.options.showNewGlyphIcon = newValue;
+      EventHub.dispatch(GAME_EVENT.GLYPH_VISUAL_CHANGE);
+    },
+    glyphEffectDots(newValue) {
+      player.options.showHintText.glyphEffectDots = newValue;
+      EventHub.dispatch(GAME_EVENT.GLYPH_VISUAL_CHANGE);
+    },
+    forceDarkGlyphs(newValue) {
+      player.options.forceDarkGlyphs = newValue;
+      EventHub.dispatch(GAME_EVENT.GLYPH_VISUAL_CHANGE);
+    },
+  },
+  methods: {
+    update() {
+      const options = player.options;
+      this.newGlyphs = options.showNewGlyphIcon;
+      this.glyphEffectDots = options.showHintText.glyphEffectDots;
+      this.forceDarkGlyphs = options.forceDarkGlyphs;
+    }
+  },
+};
+</script>
+
+<template>
+  <ModalWrapperOptions class="c-modal-options__large">
+    <template #header>
+      Glyph Display Options
+    </template>
+    <div class="c-modal-options__button-container">
+      <ModalOptionsToggleButton
+        v-model="newGlyphs"
+        text="New Glyph identifier:"
+      />
+      <ModalOptionsToggleButton
+        v-model="glyphEffectDots"
+        text="Always show Glyph effect dots:"
+      />
+      <ModalOptionsToggleButton
+        v-model="forceDarkGlyphs"
+        text="Force dark Glyph background:"
+      />
+    </div>
+  </ModalWrapperOptions>
+</template>

src/components/tabs/glyphs/EquippedGlyphs.vue

@@ -122,7 +122,7 @@ export default {
         drop: $event => this.drop($event, idx),
       };
     },
-    showModal() {
+    showEquippedModal() {
       // If there aren't any glyphs equipped, the array is full of nulls which get filtered out by x => x
       if (this.glyphs.filter(x => x).length === 0) return;
       Modal.glyphShowcasePanel.show({
@@ -131,6 +131,9 @@ export default {
         closeOn: GAME_EVENT.GLYPHS_EQUIPPED_CHANGED,
       });
     },
+    showOptionModal() {
+      Modal.glyphDisplayOptions.show();
+    },
     clickGlyph(glyph, idx, increaseSound = false) {
       if (glyph.symbol === "key266b") {
         const sound = idx + (increaseSound ? 6 : 1);
@@ -150,7 +153,7 @@ export default {
         class="l-glyph-set-preview"
         :style="glyphPositionStyle(idx)"
         v-on="dragEvents(idx)"
-        @click="showModal"
+        @click="showEquippedModal"
       >
         <!-- the drop zone is a bit larger than the glyph itself. -->
         <div class="l-equipped-glyphs__dropzone" />
@@ -174,7 +177,7 @@ export default {
     </div>
     <div class="l-equipped-glyphs__buttons">
       <button
-        class="l-glyph-equip-button c-reality-upgrade-btn"
+        class="l-glyph-equip-button-short c-reality-upgrade-btn"
         :style="glyphRespecStyle"
         :ach-tooltip="respecTooltip"
         @click="toggleRespec"
@@ -199,6 +202,12 @@ export default {
         <span v-if="respecIntoProtected">Protected slots</span>
         <span v-else>Main inventory</span>
       </button>
+      <button
+        class="l-glyph-equip-button-short c-reality-upgrade-btn"
+        @click="showOptionModal"
+      >
+        Open Glyph Visual Options
+      </button>
     </div>
   </div>
 </template>
@@ -207,4 +216,16 @@ export default {
 .c-equipped-glyph {
   -webkit-user-drag: none;
 }
+
+.l-glyph-equip-button {
+  width: 100%;
+  height: 3.5rem;
+  margin: 0.25rem 0.5rem;
+}
+
+.l-glyph-equip-button-short {
+  width: 100%;
+  height: 2.5rem;
+  margin: 0.25rem 0.5rem;
+}
 </style>