bump packages; fix incorrect text

.editorconfig

@@ -5,4 +5,5 @@ charset = utf-8
 indent_style = space
 indent_size = 2
 end_of_line = lf
-trim_trailing_whitespace = true
+insert_final_newline = true
+trim_trailing_whitespace = true

.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

@@ -2,6 +2,7 @@
   "name": "region-adjacency-checker",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check build-only",
@@ -11,21 +12,21 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@picocss/pico": "^1.5.10",
+    "@picocss/pico": "^2.0.0",
     "pinia": "^2.1.7",
-    "sass": "^1.69.5",
-    "vue": "^3.3.13",
-    "vue-i18n": "^9.8.0"
+    "sass": "^1.70.0",
+    "vue": "^3.4.18",
+    "vue-i18n": "^9.9.1"
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.2",
-    "@types/node": "^20.10.5",
-    "@vitejs/plugin-vue": "^5.0.0",
+    "@types/node": "^20.11.17",
+    "@vitejs/plugin-vue": "^5.0.4",
     "@vue/tsconfig": "^0.5.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.5",
     "typescript": "^5.3.3",
-    "vite": "^5.0.10",
+    "vite": "^5.1.1",
     "vue-tsc": "^1.8.27"
   }
 }

src/App.vue

@@ -3,7 +3,7 @@ import NavBar from './components/NavBar.vue';
 import { useRegionDataStore } from './stores/regionData';
 import { storeToRefs } from 'pinia';
 import GlyphInput from './components/GlyphInput.vue';
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useRegionAdjacency } from './composables/useRegionAdjacency';
 import { useI18n } from './hooks/useI18n';
 
@@ -24,10 +24,12 @@ function checkAdjacency() {
   } else if (distance === Math.sqrt(3)) {
     adjacency.value = t('translation.touchingonthecorner');
   } else {
-    adjacency.value = t('translation.touchingonthecorner');
+    adjacency.value = t('translation.nottouching');
   }
   isAdjacent.value = distance === 1 || distance === Math.sqrt(2) || distance === Math.sqrt(3);
 }
+
+const glyphInputLabels = computed(() => [t('translation.enterfirstregion'), t('translation.entersecondregion')]);
 </script>
 
 <template>
@@ -39,24 +41,21 @@ function checkAdjacency() {
   <main>
     <div class="input-wrapper">
       <GlyphInput
-        :index="0"
-        :label="t('translation.enterfirstregion')"
-        class="glyph-input"
-      />
-
-      <GlyphInput
-        :index="1"
-        :label="t('translation.entersecondregion')"
+        v-for="i in 2"
+        :index="i - 1"
+        :label="glyphInputLabels[i - 1]"
         class="glyph-input"
       />
     </div>
-    <button
-      :disabled="!glyphValues.length || glyphValues.some((gl) => gl.length !== 12)"
-      class="button"
-      @click="checkAdjacency"
-    >
-      {{ t('translation.check') }}
-    </button>
+    <div class="action-button-wrapper">
+      <button
+        :disabled="!glyphValues.length || glyphValues.some((gl) => gl.length !== 12)"
+        class="button"
+        @click="checkAdjacency"
+      >
+        {{ t('translation.check') }}
+      </button>
+    </div>
     <p
       v-show="adjacency"
       :class="{ 'is-success': isAdjacent, 'is-error': !isAdjacent }"
@@ -80,16 +79,16 @@ function checkAdjacency() {
   justify-content: space-evenly;
 }
 
-.button {
-  width: auto;
-  margin-inline: auto;
+.action-button-wrapper {
   margin-block-start: 2rem;
+  margin-block-end: 1rem;
+  text-align: center;
 }
 
 .output {
   text-align: center;
   padding: 1rem;
-  border-radius: var(--border-radius);
+  border-radius: var(--pico-border-radius);
 }
 
 .is-success {

src/components/GlyphInput.vue

@@ -108,6 +108,7 @@ const numberToGlyph = (n: number) => n.toString(16).toUpperCase(); // NoSonar th
   .button {
     line-height: 3rem;
     padding: 0;
+    margin: 0;
   }
 }
 

src/hooks/useI18n.ts

@@ -11,10 +11,11 @@ type Join<FirstType, SecondType> = FirstType extends string | number
 /**
  * Helper type that transforms an object tree into a union type of all possibles leaves.
  */
-type Leaves<ObjectType> = ObjectType extends Record<string, unknown>
-  ? // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    { [Key in keyof ObjectType]-?: Join<Key, Leaves<ObjectType[Key]>> }[keyof ObjectType]
-  : '';
+type Leaves<ObjectType> =
+  ObjectType extends Record<string, unknown>
+    ? // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      { [Key in keyof ObjectType]-?: Join<Key, Leaves<ObjectType[Key]>> }[keyof ObjectType]
+    : '';
 
 export type I18NLeaves = Leaves<(typeof messages)['Español']>;
 

src/i18n/index.ts

@@ -21,7 +21,8 @@ const languageMap = {
 const langEntries = Object.entries(languageMap);
 const preferredUserLang = navigator.language;
 
-const userLang = langEntries.find((lang) => lang[1].some((langCode) => langCode === preferredUserLang))?.[0] ?? 'English';
+const userLang =
+  langEntries.find((lang) => lang[1].some((langCode) => langCode === preferredUserLang))?.[0] ?? 'English';
 
 const localStorageLang = localStorage.getItem('lang');
 const preferredLang = localStorageLang ?? userLang;

tsconfig.app.json

@@ -1,14 +1,24 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"],
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+    "src/**/__tests__/*"
+  ],
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ESNext", "DOM"],
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
     "moduleResolution": "Node",
     "strict": true,
+    "verbatimModuleSyntax": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
@@ -18,9 +28,10 @@
     "noImplicitReturns": true,
     "skipLibCheck": true,
     "composite": true,
-    "baseUrl": "/Image-Compressor/",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   }
 }

tsconfig.node.json

@@ -11,6 +11,8 @@
     "composite": true,
     "module": "ESNext",
     "moduleResolution": "Bundler",
-    "types": ["node"]
+    "types": [
+      "node"
+    ]
   }
 }