feat: port to nuxt3

.gitignore

@@ -0,0 +1,18 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+.DS_Store

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["vue.volar"]
+}

.vscode/settings.json

@@ -0,0 +1,14 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+  "[vue]": {
+    "editor.defaultFormatter": "Vue.volar"
+  },
+  "files.exclude": {
+    ".yarn": false,
+    "yarn.lock": false
+  },
+  "search.exclude": {
+    ".yarn": true,
+    "yarn.lock": true
+  }
+}

README.md

@@ -3,7 +3,7 @@
   <img src="https://user-images.githubusercontent.com/43356571/196006052-12910a6d-cb81-4349-92a9-8d108b3db876.png" width="700px" height="350px" align="center">
 </p>
 
-An easy to use PWA to edit your Cult of the Lamb Save File. Upload your save file, either encrypted of decrypted and start editing it to your liking. Save it and place the new downloaded file in your saves folder.
+An easy to use SPA to edit your Cult of the Lamb Save File. Upload your save file, either encrypted of decrypted and start editing it to your liking. Save it and place the new downloaded file in your saves folder.
 
 ## Features
 

app.vue

@@ -0,0 +1,13 @@
+<style lang="scss" src="~/assets/scss/global.scss" />
+
+<template>
+  <div>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import "source-map-support/register";
+</script>

assets/scss/global.scss

@@ -0,0 +1,69 @@
+@import "bootstrap/scss/bootstrap";
+@import "bootstrap-dark-5/dist/css/bootstrap-dark-plugin";
+@import "vanilla-jsoneditor/themes/jse-theme-dark.css";
+
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.1s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(0.5rem);
+}
+
+table,
+th,
+td {
+  border: 1px double;
+}
+
+h3 {
+  text-align: center;
+}
+
+table {
+  width: 100%;
+  display: table;
+  border-collapse: separate;
+  box-sizing: border-box;
+  text-indent: initial;
+  border-spacing: 2px;
+  text-align: center;
+}
+
+#form {
+  padding: 1rem;
+  margin-bottom: 5rem;
+}
+
+footer {
+  background-color: var(--bs-body-bg);
+}
+
+.center-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.image-inner {
+  object-fit: scale-down;
+}
+
+.large-size {
+  width: 256px;
+  height: 256px;
+}
+
+.small-size {
+  width: 64px;
+  height: 64px;
+}
+
+.tarot-card-size {
+  height: 80px;
+  width: 50px;
+}

components/DeathCatBeatenWarningModal.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="modal fade" id="DeathCatBeatenWarning" tabindex="-1" aria-labelledby="DeathCatBeatenWarningLabel"
+        aria-hidden="true" ref="warningModalElement">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="DeathCatBeatenWarningLabel">Warning</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <p>If you indoctrinate The One Who Waits, it will
+                        always have the ID "666". <span class="fw-bold text-danger">Having
+                            multiple followers with
+                            the
+                            same ID can lead to softlocks or save file
+                            corruption.</span> Make sure
+                        you have a back up of your save file and don't have more than
+                        one Follower sharing the same ID.
+                    </p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Got it
+                        boss</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { Modal } from "bootstrap";
+
+const warningModalElement = ref<HTMLDivElement>();
+const warningModal = ref<Modal>();
+
+onMounted(() => {
+    if (!warningModalElement.value) return;
+
+    warningModal.value = new Modal(warningModalElement.value, {
+        keyboard: false,
+        backdrop: "static",
+    });
+});
+
+defineExpose({
+    modal: warningModal
+})
+</script>

components/FileUploadModal.vue

@@ -0,0 +1,120 @@
+<template>
+    <div class="modal fade" ref="fileUploadModal" tabindex="-1" aria-labelledby="fileUploadModalLabel">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Upload your save file</h5>
+                    <NuxtImg loading="eager" src="https://cotl.xl0.org/v1/player/Lamb?format=apng&fps=60&animation=dance" alt="lamb" quality="100" width="64" height="64" />
+                </div>
+                <div class="modal-body">
+                    <h1 class="text-center">Cult of the Lamb - Save File Editor</h1>
+                    <p class="mb-4 text-muted text-center">
+                        Upload your save file below and start editing your save
+                        file to your
+                        liking.
+                        <span class="text-danger">Make sure you always backup your original save file.</span>
+                        After you are done, replace your old save file with the new one.
+                    </p>
+
+                    <form>
+                        <input type='file' class="form-control mb-5" ref="fileInputForm" />
+                    </form>
+
+                    <hr />
+
+                    <p class="mb-4 text-muted text-center">
+                        If you don't know where your save file is located, copy the below path and paste in your
+                        file explorer top bar or, if you are on Windows, hit Windows key + R and paste the path in
+                        the Run dialog box.
+                    </p>
+                    <label>Save file location Windows:</label>
+                    <div class="input-group mb-5">
+                        <input type="text" class="form-control"
+                            value="%USERPROFILE%\AppData\LocalLow\Massive Monster\Cult Of The Lamb\saves"
+                            aria-label="Windows Save File Location" disabled>
+                        <div class="input-group-append">
+                            <button class="btn btn-outline-secondary"
+                                @click="(event) => copyToClipboard(((event.target! as HTMLButtonElement).parentElement!.parentElement!.querySelector('input.form-control') as HTMLInputElement).value)"
+                                type="button">Copy</button>
+                        </div>
+                    </div>
+
+
+                    <label>Save file location macOS:</label>
+                    <div class="input-group mb-5">
+                        <input type="text" class="form-control"
+                            value="~/Library/Application Support/Massive Monster/Cult Of The Lamb/saves"
+                            aria-label="macOS Save File Location" disabled>
+                        <div class="input-group-append">
+                            <button class="btn btn-outline-secondary"
+                                @click="(event) => copyToClipboard(((event.target! as HTMLButtonElement).parentElement!.parentElement!.querySelector('input.form-control') as HTMLInputElement).value)"
+                                type="button">Copy</button>
+                        </div>
+                    </div>
+
+                    <hr />
+
+                    <div class="text-center">
+                        <p class="mb-4 text-muted text-center">
+                            If you don't have a save file, or want to try out the application first before editing
+                            your
+                            real save file,
+                            click the button below to load a test save file.
+                        </p>
+                        <button class="btn btn-outline-secondary" @click="$emit('testData')" type="button">Load test
+                            data</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { Modal } from "bootstrap";
+
+export type Data = {
+    name: string;
+    data: Uint8Array
+}
+
+const fileUploadModal = ref<HTMLDivElement>();
+const fileInputForm = ref<HTMLInputElement>();
+
+const emit = defineEmits<{
+    (e: 'data', data: Data): void
+    (e: 'testData'): void
+}>();
+
+const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+};
+
+let uploadModal = ref<Modal>();
+
+onMounted(() => {
+    if (!fileUploadModal.value || !fileInputForm.value) return;
+
+    uploadModal.value = new Modal(fileUploadModal.value, {
+        keyboard: false,
+        backdrop: "static",
+    });
+
+    fileUploadModal.value.onchange = (ev: Event) => {
+        const file = (ev.target as any).files[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.readAsArrayBuffer((ev.target as any).files[0]);
+
+        reader.onloadend = () => {
+            const data = new Uint8Array(reader.result as ArrayBuffer);
+            emit('data', { name: file.name, data });
+        };
+    };
+});
+
+defineExpose({
+    modal: uploadModal
+})
+</script>