implement title screen modal, might be totally useless

javascripts/core/app/modal.js

@@ -1,4 +1,5 @@
 import MessageModal from "@/components/modals/MessageModal";
+import TitleScreenModal from "@/components/modals/TitleScreenModal";
 import CelestialQuoteModal from "@/components/modals/CelestialQuoteModal";
 import CloudSaveConflictModal from "@/components/modals/cloud/CloudSaveConflictModal";
 import CloudLoadConflictModal from "@/components/modals/cloud/CloudLoadConflictModal";
@@ -145,6 +146,7 @@ Modal.enterSpeedrun = new Modal(SpeedrunModeModal);
 Modal.changeName = new Modal(ChangeNameModal);
 Modal.armageddon = new Modal(ArmageddonModal);
 
+Modal.titleScreenModal = new Modal(TitleScreenModal, true);
 Modal.confirmationOptions = new Modal(ConfirmationOptionsModal);
 Modal.infoDisplayOptions = new Modal(InfoDisplayOptionsModal);
 Modal.awayProgressOptions = new Modal(AwayProgressOptionsModal);

javascripts/core/storage/cloud-saving.js

@@ -128,6 +128,17 @@ export const Cloud = {
     return null;
   },
 
+  async getCloudAntimatters() {
+    const save = await this.load();
+    if (save === null) {
+      GameUI.notify.info(`No cloud save for user ${this.user.displayName}`);
+      return [10, 10, 10];
+    }
+
+    const root = GameSaveSerializer.deserialize(save);
+    return [0, 1, 2].map(id => root.saves[id]?.antimatter || 10);
+  },
+
   logout() {
     signOut(this.auth);
   },

javascripts/game.js

@@ -3,6 +3,7 @@ import { DC } from "./core/constants.js";
 import { SpeedrunMilestones } from "./core/speedrun.js";
 import TWEEN from "tween.js";
 import { deepmergeAll } from "@/utility/deepmerge";
+import { Modal } from "./core/globals.js";
 
 if (GlobalErrorHandler.handled) {
   throw new Error("Initialization failed");
@@ -1067,7 +1068,7 @@ window.onload = function() {
     if (kong.enabled) {
       playFabLogin();
     }
-    document.getElementById("loading").style.display = "none";
+    Modal.titleScreenModal.show();
     document.body.style.overflowY = "auto";
   }, 500);
 };

src/components/modals/TitleScreenModal.vue

@@ -0,0 +1,124 @@
+<script>
+import PrimaryButton from "@/components/PrimaryButton";
+
+export default {
+  name: "TitleScreenModal",
+  components: {
+    PrimaryButton
+  },
+  data() {
+    return {
+      loggedIn: false,
+      userName: "",
+      cloudAntimatters: [10, 10, 10]
+    };
+  },
+  computed: {
+    isSelected() {
+      return GameStorage.currentSlot === this.saveId;
+    },
+    saveAntimatters() {
+      return [0, 1, 2].map(id => {
+        const save = GameStorage.saves[id];
+        return new Decimal(save ? save.antimatter || save.money : 10);
+      });
+    }
+  },
+  methods: {
+    load(id) {
+      document.getElementById("loading").style.display = "none";
+      GameStorage.loadSlot(id - 1);
+    },
+    loadCloud(id) {
+      document.getElementById("loading").style.display = "none";
+      GameStorage.currentSlot = id - 1;
+      Cloud.loadCheck();
+    },
+    formatAntimatter(antimatter) {
+      return formatPostBreak(antimatter, 2, 1);
+    },
+    update() {
+      this.loggedIn = Cloud.loggedIn;
+      if (!this.loggedIn) return;
+      this.userName = Cloud.user.displayName;
+    },
+  },
+  watch: {
+    async loggedIn() {
+      this.cloudAntimatters = await Cloud.getCloudAntimatters();
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="c-modal l-modal title-screen-modal">
+    <h2>Are you ready to make antimatter?</h2>
+    <div class="panel-container">
+      <div class="cloud-panel">
+        <h3>Cloud saves</h3>
+        <div v-if="loggedIn">
+          <div
+            v-for="id in 3"
+            :key="id"
+            class="l-modal-options__save-record"
+          >
+            <PrimaryButton
+              class="load-button"
+              @click="loadCloud(id)"
+            >
+              Load Cloud Save #{{ id }}<br>
+              {{ formatAntimatter(cloudAntimatters[id - 1]) }} Antimatter
+            </PrimaryButton>
+          </div>
+          <h4>Logged in as {{ userName }}</h4>
+        </div>
+        <div v-else>
+          <h4>Not logged in</h4>
+          <PrimaryButton
+            class="load-button"
+            onclick="Cloud.login()"
+          >
+            Login with Google to enable Cloud Saving
+          </PrimaryButton>
+        </div>
+      </div>
+      <div class="local-panel">
+        <h3>Local saves</h3>
+        <div
+          v-for="id in 3"
+          :key="id"
+          class="l-modal-options__save-record"
+        >
+          <PrimaryButton
+            class="load-button"
+            @click="load(id)"
+          >
+            Load Save #{{ id }}<br>
+            {{ formatAntimatter(saveAntimatters[id - 1]) }} Antimatter
+          </PrimaryButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.title-screen-modal {
+  z-index: 1000;
+}
+
+.panel-container {
+  display: flex;
+  width: 50rem;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-top: 5rem;
+  padding: 2rem;
+}
+
+.load-button {
+  height: auto;
+  width: 20rem;
+}
+</style>