Merge pull request #116 from NMSCD/dev

darkmode; link game IDs

.github/dependabot.yml

@@ -10,3 +10,9 @@ updates:
     target-branch: 'dev'
     schedule:
       interval: 'weekly'
+
+  - package-ecosystem: 'github-actions'
+    directory: '/'
+    target-branch: 'dev'
+    schedule:
+      interval: 'weekly'

package.json

@@ -5,25 +5,21 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check build-only",
+    "build": "vue-tsc && vite build",
     "preview": "vite preview",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
+    "format": "prettier --write src/"
   },
   "dependencies": {
-    "bulma": "^0.9.4",
+    "bulma": "^1.0.1",
     "pinia": "^2.1.7",
-    "sass": "^1.62.1",
-    "vue": "^3.3.13"
+    "vue": "^3.4.31"
   },
   "devDependencies": {
-    "@tsconfig/node20": "^20.1.2",
-    "@types/node": "^20.10.5",
-    "@vitejs/plugin-vue": "^5.0.0",
-    "@vue/tsconfig": "^0.5.1",
-    "npm-run-all": "^4.1.5",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10",
-    "vue-tsc": "^1.8.26"
+    "@types/node": "^20.14.10",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "prettier": "^3.3.3",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
+    "vue-tsc": "^2.0.26"
   }
 }

src/components/CopySection.vue

@@ -2,14 +2,14 @@
 import { computed, ref } from 'vue';
 
 const props = defineProps<{
-  section: HTMLPreElement | null;
+  data: string;
 }>();
 
 const isCopied = ref(false);
 
 function copySection() {
-  if (!props.section) return;
-  navigator.clipboard.writeText(props.section.innerText);
+  if (!props.data) return;
+  navigator.clipboard.writeText(props.data);
 
   isCopied.value = true;
   setTimeout(() => {
@@ -29,7 +29,7 @@ const icon = computed(() => (isCopied.value ? 'done' : 'content_copy'));
   </i>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .copy-icon {
   cursor: pointer;
   border-radius: 100%;

src/components/HelperButtons.vue

@@ -4,42 +4,47 @@ import HelpDialogue from './dialog/HelpDialogue.vue';
 import { useRewardStore } from '@/stores/reward';
 
 const rewardStore = useRewardStore();
+const reset = () => rewardStore.$reset();
 
-const isModalOpen = ref(false);
+const dialogElement = ref<HTMLDialogElement | null>(null);
 
-const switchModalVisibility = () => (isModalOpen.value = !isModalOpen.value);
-const reset = () => rewardStore.$reset();
+const openModal = () => dialogElement.value?.showModal();
+const closeModal = () => dialogElement.value?.close();
 </script>
 
 <template>
-  <HelpDialogue
-    :open="isModalOpen"
-    @close-modal="switchModalVisibility"
-  />
-  <div class="helper-buttons">
+  <dialog
+    class="modal-content box m-auto p-0"
+    ref="dialogElement"
+    @click.self="closeModal"
+  >
+    <HelpDialogue />
+  </dialog>
+  <div class="mb-4">
     <button
-      class="button"
-      id="explainBtn"
-      @click="switchModalVisibility"
+      class="button mr-4"
+      @click="openModal"
     >
       How to use
     </button>
     <button
-      id="reset"
-      class="button is-warning"
+      class="button is-warning mr-4"
       @click="reset"
     >
       Reset data
     </button>
   </div>
 </template>
 
-<style scoped lang="scss">
-.helper-buttons {
-  margin-block-end: 1em;
+<style scoped>
+dialog {
+  max-width: 640px;
+  display: none;
+  margin-block-start: 5vh !important;
+  border: 1px solid #80808080;
 
-  button {
-    margin-inline-end: 1em;
+  &[open] {
+    display: block;
   }
 }
 </style>

src/components/Navbar.vue

@@ -24,7 +24,7 @@
   </nav>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 nav {
   display: flex;
   flex-wrap: wrap;

src/components/PageHeader.vue

@@ -3,12 +3,6 @@ import HelperButtons from './HelperButtons.vue';
 </script>
 
 <template>
-  <h1 class="title is-3">Rewardtable Tools</h1>
+  <h1 class="title is-3 has-text-centered">Rewardtable Tools</h1>
   <HelperButtons />
 </template>
-
-<style scoped lang="scss">
-h1 {
-  text-align: center;
-}
-</style>

src/components/SectionHeader.vue

@@ -4,7 +4,7 @@
   </h2>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .section-header {
   padding-bottom: 5px;
   border-bottom: 1px solid lightgrey;

src/components/Tooltip.vue

@@ -10,7 +10,7 @@
   </span>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .tooltip {
   position: relative;
   margin-block-start: 2px;

src/components/dialog/CloseButton.vue

@@ -1,11 +1,5 @@
 <template>
   <form method="dialog">
-    <button
-      class="button"
-      autofocus
-      @click="$emit('closeModal')"
-    >
-      Close
-    </button>
+    <button class="button">Close</button>
   </form>
 </template>

src/components/dialog/HelpDialogue.vue

@@ -1,43 +1,19 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
 import CloseButton from './CloseButton.vue';
 
-const props = defineProps<{
-  open: boolean;
-}>();
-
-const dialogElement = ref<HTMLDialogElement | null>(null);
-
-watch(
-  () => props.open,
-  (newState) => {
-    if (newState === true && dialogElement.value) dialogElement.value.showModal();
-  }
-);
-
 const functionalities = [
-  {
-    text: 'Search the entire REWARDTABLE for a specific Product ID',
-  },
-  {
-    text: 'Search for a specific reward ID and display the chances of its individual rewards',
-  },
-  {
-    text: 'Paste an EXML snippet of a reward and get the chances of the individual rewards',
-  },
+  'Search the entire REWARDTABLE for a specific Product ID',
+  'Search for a specific reward ID and display the chances of its individual rewards',
+  'Paste an EXML snippet of a reward and get the chances of the individual rewards',
 ];
 </script>
 
 <template>
-  <dialog
-    ref="dialogElement"
-    id="explanation"
-    class="modal-content"
-  >
+  <div class="p-4">
     <p>This web app has multiple functionalities:</p>
     <ul>
       <li v-for="functionality in functionalities">
-        {{ functionality.text }}
+        {{ functionality }}
       </li>
     </ul>
     <p>
@@ -63,29 +39,22 @@ const functionalities = [
       >. On every item is a "&lt;&gt;" icon in the top left of the in-game icon. When clicked, it displays the "GameId".
     </p>
     <p>You don't need to upload the REWARDTABLE.EXML if you are using the "Paste EXML" input.</p>
-    <CloseButton @close-modal="$emit('closeModal')" />
-  </dialog>
+    <CloseButton />
+  </div>
 </template>
 
-<style scoped lang="scss">
-dialog {
-  margin-top: 5vh !important;
-  border-radius: 7px;
-  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
-  border: 1px solid lightgrey;
-
-  form {
-    display: flex;
-    justify-content: space-around;
-  }
+<style scoped>
+form {
+  display: flex;
+  justify-content: space-around;
+}
 
-  ul {
-    list-style: inside;
-    margin: 0.2em 0;
-  }
+ul {
+  list-style: inside;
+  margin: 0.2rem 0;
+}
 
-  p:not(:first-child) {
-    margin-bottom: 1em;
-  }
+p:not(:first-child) {
+  margin-bottom: 1rem;
 }
 </style>

src/components/inputs/FileInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useDocumentStore } from '@/stores/document';
+import { useRewardStore } from '@/stores/reward';
 import { ref } from 'vue';
 
 defineProps<{
@@ -10,7 +10,7 @@ const fileInput = ref<HTMLInputElement | null>(null);
 const fileName = ref('');
 const dragActive = ref(false);
 
-const documentStore = useDocumentStore();
+const rewardStore = useRewardStore();
 
 function updateLabel(file: File) {
   fileName.value = file.name;
@@ -20,7 +20,7 @@ function addFile(file: File | null = null) {
   const uploadedFile = file ?? fileInput.value?.files?.[0];
   if (!uploadedFile) return;
   updateLabel(uploadedFile);
-  documentStore.readFile(uploadedFile);
+  rewardStore.readFile(uploadedFile);
 }
 
 function dropFile(e: DragEvent) {
@@ -49,10 +49,10 @@ function dropFile(e: DragEvent) {
         @change="addFile()"
       />
       <span class="file-cta">
-        <span class="file-icon">
+        <span class="mr-0">
           <i class="material-icons file-icon-element">upload</i>
         </span>
-        <span class="file-label"> Choose a file... </span>
+        <span class="file-label">Choose a file...</span>
       </span>
       <span class="file-name">
         {{ fileName }}
@@ -61,23 +61,19 @@ function dropFile(e: DragEvent) {
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .file-label {
   * {
     pointer-events: none;
   }
 
   &.drag-active .file-cta,
   &:hover .file-cta {
-    background-color: #eeeeee;
+    background-color: #8080804a;
   }
 }
 
-.file-icon {
-  margin-right: 0;
-
-  .file-icon-element {
-    font-size: 2rem;
-  }
+.file-icon-element {
+  font-size: 2rem;
 }
 </style>

src/components/inputs/FileUpload.vue

@@ -17,7 +17,7 @@ import FileInput from './FileInput.vue';
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .label-tooltip {
   display: flex;
   gap: 0.25rem;