Add naming function for saves

Solve #2851

javascripts/core/secret-formula/h2p.js

@@ -42,7 +42,7 @@ In addition to importing and exporting to your clipboard, you can also import an
 <br>
 You can use the "Choose save" button to pick between three separate saves on your browser. These saves are, for most
 intents and purposes, completely separate from each other. Importing and exporting will only affect the current save
-slot. The only exception is clearing your broswer data, in which case all three saves will be reset.
+slot. <b>The only exception is clearing your broswer data, in which case all three saves will be completely reset.</b>
 <br>
 <br>
 The game automatically saves periodically, by default once every ${formatInt(30)} seconds, and it will notify you in

javascripts/core/storage/storage.js

@@ -166,13 +166,15 @@ export const GameStorage = {
   exportAsFile() {
     player.options.exportedFileCount++;
     this.save(true);
+    const saveFileName = player.options.saveFileName ? ` ${player.options.saveFileName}` : "";
     const dateObj = new Date();
     const y = dateObj.getFullYear();
     const m = dateObj.getMonth() + 1;
     const d = dateObj.getDate();
     const segmented = player.speedrun.isSegmented;
     Speedrun.setSegmented(true);
-    download(`AD Save ${GameStorage.currentSlot + 1} #${player.options.exportedFileCount} (${y}-${m}-${d}).txt`,
+    download(
+      `AD Save ${GameStorage.currentSlot + 1}${saveFileName} #${player.options.exportedFileCount} (${y}-${m}-${d}).txt`,
       GameSaveSerializer.serialize(player));
     Speedrun.setSegmented(segmented);
     GameUI.notify.info("Successfully downloaded current save file to your computer");

public/stylesheets/styles.css

@@ -1655,6 +1655,10 @@ br {
   margin: 0.2rem;
 }
 
+.o-primary-btn--input {
+  cursor: default;
+}
+
 .o-primary-btn--slider {
   cursor: default;
 }

src/components/modals/ImportSaveModal.vue

@@ -26,6 +26,9 @@ export default {
     progress() {
       return PlayerProgress.of(this.player);
     },
+    fileName() {
+      return this.player.options.saveFileName;
+    },
     antimatter() {
       return this.player.antimatter || this.player.money;
     },
@@ -82,6 +85,9 @@ export default {
         ???
       </div>
       <template v-else-if="inputIsValidSave">
+        <div v-if="fileName">
+          File name: {{ fileName }}
+        </div>
         <div>Antimatter: {{ formatPostBreak(antimatter, 2, 1) }}</div>
         <div v-if="progress.isInfinityUnlocked">
           Infinities: {{ formatPostBreak(infinities, 2) }}

src/components/modals/LoadGameEntry.vue

@@ -15,7 +15,8 @@ export default {
   data() {
     const save = GameStorage.saves[this.saveId];
     return {
-      antimatter: new Decimal(save ? save.antimatter || save.money : 10)
+      antimatter: new Decimal(save ? save.antimatter || save.money : 10),
+      fileName: save ? save.options.saveFileName : ""
     };
   },
   computed: {
@@ -42,6 +43,7 @@ export default {
 <template>
   <div class="l-modal-options__save-record">
     <h3>Save #{{ saveId + 1 }}:<span v-if="isSelected"> (selected)</span></h3>
+    <span v-if="fileName">File name: {{ fileName }}</span>
     <span>Antimatter: {{ formatAntimatter(antimatter) }}</span>
     <PrimaryButton
       class="o-primary-btn--width-medium"

src/components/modals/LoadGameModal.vue

@@ -20,6 +20,20 @@ export default {
       v-for="id in 3"
       :key="id"
       :save-id="id - 1"
+      class="c-entry-border"
     />
   </ModalWrapperOptions>
 </template>
+
+<style scoped>
+.c-entry-border {
+  border-bottom: 0.1rem solid var(--color-text);
+  width: 28rem;
+  padding-bottom: 1rem;
+}
+
+.c-entry-border:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+</style>

src/components/tabs/options-saving/OptionsSavingTab.vue

@@ -3,14 +3,16 @@ import AutosaveIntervalSlider from "./AutosaveIntervalSlider";
 import OpenModalHotkeysButton from "@/components/OpenModalHotkeysButton";
 import OptionsButton from "@/components/OptionsButton";
 import PrimaryToggleButton from "@/components/PrimaryToggleButton";
+import SaveFileName from "./SaveFileName";
 
 export default {
   name: "OptionsSavingTab",
   components: {
-    PrimaryToggleButton,
+    AutosaveIntervalSlider,
     OpenModalHotkeysButton,
     OptionsButton,
-    AutosaveIntervalSlider
+    PrimaryToggleButton,
+    SaveFileName
   },
   data() {
     return {
@@ -109,11 +111,10 @@ export default {
           label="Display time since save:"
         />
       </div>
-      <div
-        v-if="canSpeedrun"
-        class="l-options-grid__row"
-      >
+      <div class="l-options-grid__row">
+        <SaveFileName />
         <OptionsButton
+          v-if="canSpeedrun"
           class="o-primary-btn--option_font-x-large"
           onclick="Modal.enterSpeedrun.show()"
         >

src/components/tabs/options-saving/SaveFileName.vue

@@ -0,0 +1,52 @@
+<script>
+export default {
+  name: "SaveFileName",
+  components: {
+  },
+  data() {
+    return {
+      saveFileName: ""
+    };
+  },
+  methods: {
+    update() {
+      this.saveFileName = player.options.saveFileName;
+    },
+    removeNotAvailableCharacters(input) {
+      return input.replace(/[^a-zA-Z0-9 .()_-]/gu, "");
+    },
+    handleChange(event) {
+      const newName = this.removeNotAvailableCharacters(event.target.value.trim());
+      player.options.saveFileName = newName;
+      event.target.value = newName;
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="o-primary-btn o-primary-btn--option o-primary-btn--input l-options-grid__button">
+    <b>Save file name:</b>
+    <span ach-tooltip="Set a custom name (up to 16 characters)">
+      <input
+        class="c-custom-save-name__input"
+        type="text"
+        maxlength="16"
+        placeholder="Custom save name"
+        :value="saveFileName"
+        @change="handleChange"
+      >
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.c-custom-save-name__input {
+  text-align: center;
+  font-family: Typewriter;
+  font-size: 1.3rem;
+  font-weight: bold;
+  border: 0.1rem solid black;
+  border-radius: var(--var-border-radius, 0.3rem);
+}
+</style>