Add corner icon for newly unequipped glyphs

public/stylesheets/glyphs.css

@@ -37,17 +37,6 @@
   background: var(--color-background);
 }
 
-.l-new-glyph {
-  position: absolute;
-  top: -0.8rem;
-  left: -0.8rem;
-  z-index: 5;
-  color: black;
-  background-color: #ffff00;
-  border-radius: var(--var-border-radius, 0.2rem);
-  padding: 0.2rem;
-}
-
 .l-glyph-info {
   position: absolute;
   right: -0.5rem;

src/components/GlyphComponent.vue

@@ -23,6 +23,11 @@ export default {
       required: false,
       default: false
     },
+    isUnequipped: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     showSacrifice: {
       type: Boolean,
       required: false,
@@ -395,7 +400,8 @@ export default {
     },
     showTooltip() {
       if (!this.tooltipEnabled) return;
-      Glyphs.removeNewFlag(this.glyph);
+      Glyphs.removeVisualFlag("unseen", this.glyph);
+      Glyphs.removeVisualFlag("unequipped", this.glyph);
       this.tooltipLoaded = true;
       this.$viewModel.tabs.reality.mouseoverGlyphInfo.inInventory = !this.circular;
       const glyphInfo = this.$viewModel.tabs.reality.mouseoverGlyphInfo;
@@ -587,10 +593,14 @@ export default {
     />
     <div
       v-if="isNew"
-      class="l-new-glyph"
+      class="l-corner-icon l-new-glyph"
     >
       New!
     </div>
+    <div
+      v-else-if="isUnequipped"
+      class="l-corner-icon l-unequipped-glyph fas fa-arrow-up-from-bracket"
+    />
     <div
       v-if="displayedInfo"
       class="l-glyph-info"
@@ -608,3 +618,27 @@ export default {
     />
   </div>
 </template>
+
+<style scoped>
+.l-corner-icon {
+  position: absolute;
+  z-index: 5;
+  color: black;
+  border-radius: var(--var-border-radius, 0.2rem);
+  padding: 0.2rem;
+}
+
+.l-new-glyph {
+  top: -0.7rem;
+  left: -0.7rem;
+  font-size: 1rem;
+  background-color: yellow;
+}
+
+.l-unequipped-glyph {
+  top: -0.5rem;
+  left: -0.5rem;
+  font-size: 1.2rem;
+  background-color: orange;
+}
+</style>

src/components/modals/options/InfoDisplayOptionsModal.vue

@@ -119,7 +119,7 @@ export default {
       <ModalOptionsToggleButton
         v-if="realityUnlocked"
         v-model="newGlyphs"
-        text="New Glyph identifier:"
+        text="New/Unequipped Glyph icons:"
       />
       <ModalOptionsToggleButton
         v-if="realityUnlocked"

src/components/tabs/glyphs/GlyphInventory.vue

@@ -10,6 +10,7 @@ export default {
     return {
       inventory: [],
       newGlyphs: [],
+      unequippedGlyphs: [],
       doubleClickTimeOut: null,
       clickedGlyphId: null,
       glyphSacrificeUnlocked: false,
@@ -30,6 +31,7 @@ export default {
       this.glyphSacrificeUnlocked = GlyphSacrificeHandler.canSacrifice;
       this.protectedRows = player.reality.glyphs.protectedRows;
       this.newGlyphs = Glyphs.unseen;
+      this.unequippedGlyphs = Glyphs.unequipped;
     },
     toIndex(row, col) {
       return (row - 1) * this.colCount + (col - 1);
@@ -76,6 +78,9 @@ export default {
     },
     isNew(index) {
       return player.options.showNewGlyphIcon && this.newGlyphs.includes(this.inventory[index].id);
+    },
+    isUnequipped(index) {
+      return player.options.showNewGlyphIcon && this.unequippedGlyphs.includes(this.inventory[index].id);
     }
   }
 };
@@ -101,6 +106,7 @@ export default {
           v-if="inventory[toIndex(row, col)]"
           :glyph="inventory[toIndex(row, col)]"
           :is-new="isNew(toIndex(row, col))"
+          :is-unequipped="isUnequipped(toIndex(row, col))"
           :is-inventory-glyph="true"
           :show-sacrifice="glyphSacrificeUnlocked"
           :draggable="true"

src/core/glyphs/glyph-core.js

@@ -29,6 +29,7 @@ export const Glyphs = {
   inventory: [],
   active: [],
   unseen: [],
+  unequipped: [],
   levelBoost: 0,
   factorsOpen: false,
   bestUndoGlyphCount: 0,
@@ -283,8 +284,9 @@ export const Glyphs = {
       }
       Modal.glyphReplace.show({ targetSlot, inventoryIndex: glyph.idx });
     }
-    // Loading glyph sets might choose NEW! glyphs, in which case the hover-over flag clearing never got triggered
-    this.removeNewFlag(glyph);
+    // Loading glyph sets might directly choose glyphs, bypassing the hover-over flag-clearing code
+    this.removeVisualFlag("unseen", glyph);
+    this.removeVisualFlag("unequipped", glyph);
   },
   unequipAll(forceToUnprotected = false) {
     const targetRegion = forceToUnprotected ? false : player.options.respecIntoProtected;
@@ -377,16 +379,18 @@ export const Glyphs = {
     player.records.bestReality.glyphStrength = Math.clampMin(player.records.bestReality.glyphStrength, glyph.strength);
 
     player.reality.glyphs.inventory.push(glyph);
-    if (requestedInventoryIndex === undefined && !isExistingGlyph) this.addNewFlag(glyph);
+    if (requestedInventoryIndex === undefined && !isExistingGlyph) this.addVisualFlag("unseen", glyph);
+    if (isExistingGlyph) this.addVisualFlag("unequipped", glyph);
     EventHub.dispatch(GAME_EVENT.GLYPHS_CHANGED);
     this.validate();
   },
-  addNewFlag(glyph) {
-    if (!this.unseen.includes(glyph.id)) this.unseen.push(glyph.id);
+  // These two visual flag functions update the corner tooltips for "New!" and unequipped glyphs
+  addVisualFlag(target, glyph) {
+    if (!this[target].includes(glyph.id)) this[target].push(glyph.id);
   },
-  removeNewFlag(glyph) {
-    const index = Glyphs.unseen.indexOf(glyph.id);
-    if (index > -1) Glyphs.unseen.splice(index, 1);
+  removeVisualFlag(target, glyph) {
+    const index = Glyphs[target].indexOf(glyph.id);
+    if (index > -1) Glyphs[target].splice(index, 1);
   },
   isMusicGlyph(glyph) {
     return glyph?.cosmetic === "music";

src/core/storage/storage.js

@@ -269,6 +269,7 @@ export const GameStorage = {
     GameEnd.additionalEnd = 0;
     Theme.set(Theme.currentName());
     Glyphs.unseen = [];
+    Glyphs.unequipped = [];
     Notations.find(player.options.notation).setAsCurrent(true);
     ADNotations.Settings.exponentCommas.show = player.options.commas;