Implement import/export for glyph filter

src/components/modals/ImportFilterModal.vue

@@ -0,0 +1,98 @@
+<script>
+import ModalWrapperChoice from "@/components/modals/ModalWrapperChoice";
+import PrimaryButton from "@/components/PrimaryButton";
+
+export default {
+  name: "ImportFilterModal",
+  components: {
+    ModalWrapperChoice,
+    PrimaryButton
+  },
+  data() {
+    return {
+      input: "",
+    };
+  },
+  computed: {
+    inputIsValid() {
+      let decoded;
+      try {
+        decoded = GameSaveSerializer.decodeText(this.input, "glyph filter");
+        return decoded.length > 0 && decoded.match(/^[0-9,.|]*$/u) !== null;
+      } catch {
+        return false;
+      }
+    },
+  },
+  mounted() {
+    this.$refs.input.select();
+  },
+  methods: {
+    importFilter() {
+      if (!this.inputIsValid) return;
+      this.emitClose();
+
+      const decoded = GameSaveSerializer.decodeText(this.input, "glyph filter");
+      const parts = decoded.split("|");
+      player.reality.glyphs.filter.select = Number(parts[0]);
+      player.reality.glyphs.filter.simple = Number(parts[1]);
+      player.reality.glyphs.filter.trash = Number(parts[2]);
+
+      const typeInfo = {};
+      let partIndex = 3;
+      for (const type of ALCHEMY_BASIC_GLYPH_TYPES) {
+        if (!type) continue;
+        const subparts = parts[partIndex].split(",");
+        typeInfo[type] = {
+          rarity: Number(subparts[0]),
+          score: Number(subparts[1]),
+          effectCount: Number(subparts[2]),
+          specifiedMask: Number(subparts[3]),
+          effectScores: subparts[4].split(".").map(s => Number(s)),
+        };
+        partIndex++;
+      }
+      player.reality.glyphs.filter.types = typeInfo;
+    },
+  },
+};
+</script>
+
+<template>
+  <ModalWrapperChoice
+    :show-cancel="!inputIsValid"
+    :show-confirm="false"
+  >
+    <template #header>
+      Import Glyph filter settings
+    </template>
+    Note: Importing Glyph filter options will overwrite settings
+    <br>
+    in all filter modes, not just the currently-selected one.
+    <input
+      ref="input"
+      v-model="input"
+      type="text"
+      class="c-modal-input c-modal-import__input"
+      @keyup.enter="importSave"
+      @keyup.esc="emitClose"
+    >
+    <div class="c-modal-import__save-info">
+      <div v-if="!input" />
+      <div v-else-if="inputIsValid">
+        PLACEHOLDER FOR BEFORE/AFTER FILTER INFO
+      </div>
+      <div v-else>
+        Not a valid Glyph filter string
+      </div>
+    </div>
+
+    <PrimaryButton
+      v-if="inputIsValid"
+      class="o-primary-btn--width-medium c-modal-message__okay-btn c-modal__confirm-btn"
+      @click="importFilter"
+    >
+      Import
+    </PrimaryButton>
+  </ModalWrapperChoice>
+</template>

src/components/tabs/glyphs/sidebar/GlyphFilterPanel.vue

@@ -182,6 +182,18 @@ export default {
     },
     getSymbol(type) {
       return CosmeticGlyphTypes[type].currentSymbol.symbol;
+    },
+    exportFilterSettings() {
+      const filter = player.reality.glyphs.filter;
+      const serializeType = settings => [settings.rarity, settings.score, settings.effectCount,
+        settings.specifiedMask, settings.effectScores.join(".")].join(",");
+      const simpleData = [filter.select, filter.simple, filter.trash].join("|");
+      const typeData = ALCHEMY_BASIC_GLYPH_TYPES.map(t => serializeType(filter.types[t])).join("|");
+      copyToClipboard(GameSaveSerializer.encodeText(`${simpleData}|${typeData}`, "glyph filter"));
+      GameUI.notify.info("Filter settings copied to clipboard");
+    },
+    importFilterSettings() {
+      Modal.importFilter.show();
     }
   }
 };
@@ -199,6 +211,18 @@ export default {
           ?
         </div>
       </div>
+      <div class="c-glyph-filter-export">
+        <i
+          v-tooltip="'Export filter settings'"
+          class="fas fa-file-export o-clickable l-glyph-filter-export-btn"
+          @click="exportFilterSettings"
+        />
+        <i
+          v-tooltip="'Import filter settings'"
+          class="fas fa-file-import o-clickable l-glyph-filter-export-btn"
+          @click="importFilterSettings"
+        />
+      </div>
       Current Filter Mode:
       <br>
       {{ filterMode(mode) }}
@@ -368,4 +392,22 @@ export default {
 .o-clickable {
   cursor: pointer;
 }
+
+.c-glyph-filter-export {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  top: 0;
+  right: calc(100% - 8rem);
+  z-index: 2;
+  font-size: 1.3rem;
+  color: var(--color-reality-dark);
+}
+
+.l-glyph-filter-export-btn {
+  border: solid 0.1rem;
+  width: 3rem;
+  margin: 0.5rem;
+  padding: 0.5rem;
+}
 </style>

src/core/app/modal.js

@@ -59,6 +59,7 @@ import GlyphSetSaveDeleteModal from "@/components/modals/GlyphSetSaveDeleteModal
 import GlyphShowcasePanelModal from "@/components/modals/GlyphShowcasePanelModal";
 import H2PModal from "@/components/modals/H2PModal";
 import ImportAutomatorDataModal from "@/components/modals/ImportAutomatorDataModal";
+import ImportFilterModal from "@/components/modals/ImportFilterModal";
 import ImportSaveModal from "@/components/modals/ImportSaveModal";
 import ImportTimeStudyConstants from "@/components/modals/ImportTimeStudyConstants";
 import InformationModal from "@/components/modals/InformationModal";
@@ -248,6 +249,7 @@ Modal.changelog = new Modal(ChangelogModal, 1);
 Modal.awayProgress = new Modal(AwayProgressModal);
 Modal.loadGame = new Modal(LoadGameModal);
 Modal.import = new Modal(ImportSaveModal);
+Modal.importFilter = new Modal(ImportFilterModal);
 Modal.importScriptData = new Modal(ImportAutomatorDataModal);
 Modal.automatorScriptDelete = new Modal(DeleteAutomatorScriptModal);
 Modal.automatorScriptTemplate = new Modal(AutomatorScriptTemplate);

src/core/storage/serializer.js

@@ -42,13 +42,15 @@ export const GameSaveSerializer = {
   startingString: {
     savefile: "AntimatterDimensionsSavefileFormat",
     "automator script": "AntimatterDimensionsAutomatorScriptFormat",
-    "automator data": "AntimatterDimensionsAutomatorDataFormat"
+    "automator data": "AntimatterDimensionsAutomatorDataFormat",
+    "glyph filter": "AntimatterDimensionsGlyphFilterFormat",
   },
   // The ending strings aren't as verbose so that we can save a little space.
   endingString: {
     savefile: "EndOfSavefile",
     "automator script": "EndOfAutomatorScript",
-    "automator data": "EndOfAutomatorData"
+    "automator data": "EndOfAutomatorData",
+    "glyph filter": "EndOfGlyphFilter",
   },
   // This should always be three characters long, and should ideally go AAA, AAB, AAC, etc.
   // so that we can do inequality tests on it to compare versions (though skipping a version