router link added to gallery cards

2026-06-30 07:45:52 +00:00 · 2023-04-17 10:27:26 +02:00
parent eb2395067b
commit ad0abb4917
4 changed files with 64 additions and 83 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -49,7 +49,6 @@
      "cpu": [
        "arm"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "android"
@@ -65,7 +64,6 @@
      "cpu": [
        "loong64"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "linux"
@@ -384,7 +382,7 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
+      "devOptional": true,
      "dependencies": {
        "normalize-path": "^3.0.0",
        "picomatch": "^2.0.4"
@@ -424,7 +422,7 @@
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
+      "devOptional": true,
      "engines": {
        "node": ">=8"
      }
@@ -449,7 +447,7 @@
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
+      "devOptional": true,
      "dependencies": {
        "fill-range": "^7.0.1"
      },
@@ -486,7 +484,7 @@
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
+      "devOptional": true,
      "funding": [
        {
          "type": "individual",
@@ -513,7 +511,7 @@
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
+      "devOptional": true,
      "dependencies": {
        "is-glob": "^4.0.1"
      },
@@ -704,7 +702,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "android"
@@ -720,7 +717,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "android"
@@ -736,7 +732,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "darwin"
@@ -752,7 +747,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "darwin"
@@ -768,7 +762,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "freebsd"
@@ -784,7 +777,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "freebsd"
@@ -800,7 +792,6 @@
      "cpu": [
        "ia32"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "linux"
@@ -816,7 +807,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "linux"
@@ -832,7 +822,6 @@
      "cpu": [
        "arm"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "linux"
@@ -848,7 +837,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "linux"
@@ -864,7 +852,6 @@
      "cpu": [
        "mips64el"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "linux"
@@ -880,7 +867,6 @@
      "cpu": [
        "ppc64"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "linux"
@@ -896,7 +882,6 @@
      "cpu": [
        "riscv64"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "linux"
@@ -912,7 +897,6 @@
      "cpu": [
        "s390x"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "linux"
@@ -928,7 +912,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "netbsd"
@@ -944,7 +927,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "openbsd"
@@ -960,7 +942,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "sunos"
@@ -976,7 +957,6 @@
      "cpu": [
        "ia32"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "win32"
@@ -992,7 +972,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "win32"
@@ -1008,7 +987,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "optional": true,
      "os": [
        "win32"
@@ -1268,7 +1246,7 @@
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
+      "devOptional": true,
      "dependencies": {
        "to-regex-range": "^5.0.1"
      },
@@ -1370,7 +1348,6 @@
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
      "hasInstallScript": true,
      "optional": true,
      "os": [
@@ -1478,7 +1455,7 @@
      "version": "4.2.4",
      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz",
      "integrity": "sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==",
-      "dev": true
+      "devOptional": true
    },
    "node_modules/import-fresh": {
      "version": "3.3.0",
@@ -1524,7 +1501,7 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
+      "devOptional": true,
      "dependencies": {
        "binary-extensions": "^2.0.0"
      },
@@ -1548,7 +1525,7 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
+      "devOptional": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -1557,7 +1534,7 @@
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
+      "devOptional": true,
      "dependencies": {
        "is-extglob": "^2.1.1"
      },
@@ -1569,7 +1546,7 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
+      "devOptional": true,
      "engines": {
        "node": ">=0.12.0"
      }
@@ -1794,7 +1771,7 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
+      "devOptional": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -1935,7 +1912,7 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
+      "devOptional": true,
      "engines": {
        "node": ">=8.6"
      },
@@ -2109,7 +2086,7 @@
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
+      "devOptional": true,
      "dependencies": {
        "picomatch": "^2.2.1"
      },
@@ -2232,7 +2209,7 @@
      "version": "1.58.3",
      "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz",
      "integrity": "sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==",
-      "dev": true,
+      "devOptional": true,
      "dependencies": {
        "chokidar": ">=3.0.0 <4.0.0",
        "immutable": "^4.0.0",
@@ -2374,7 +2351,7 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+      "devOptional": true,
      "dependencies": {
        "is-number": "^7.0.0"
      },
--- a/frontend/src/components/GameGallery/Card/Cover.vue
+++ b/frontend/src/components/GameGallery/Card/Cover.vue
@@ -1,53 +1,51 @@
 <script setup>
-import { inject } from 'vue'
-import { useRouter } from 'vue-router'
-
 // Props
 const props = defineProps(['rom', 'isHovering', 'hoverProps', 'size'])
 const forceImgReload = Date.now()
-const router = useRouter()
-
-// Event listeners bus
-const emitter = inject('emitter')
 </script>

 <template>
-    <v-img 
-        :to="`/${$route.params.platform}/`"
-        v-bind="hoverProps"
-        :src="'/assets'+rom.path_cover_l+'?reload='+forceImgReload"
-        :lazy-src="'/assets'+rom.path_cover_s+'?reload='+forceImgReload"
-        class="cover"
-        cover>
-        <template v-slot:placeholder>
-            <div class="d-flex align-center justify-center fill-height">
-                <v-progress-circular color="secondary" indeterminate/>
-            </div>
-        </template>
-        <v-expand-transition>
-            <div 
-                v-if="isHovering || !rom.has_cover"
-                class="rom-title d-flex transition-fast-in-fast-out bg-tooltip text-caption">
-                <v-list-item>{{ rom.file_name }}</v-list-item>
-            </div>
-        </v-expand-transition>
-        <v-chip-group class="pl-1 pt-0">
-            <v-chip
-                v-show="rom.region"
-                size="x-small"
-                class="bg-chip"
-                label>
-                {{ rom.region }}
-            </v-chip>
-            <v-chip
-                v-show="rom.revision"
-                size="x-small"
-                class="bg-chip"
-                label>
-                {{ rom.revision }}
-            </v-chip>
-        </v-chip-group>
-    </v-img>
+    <router-link
+        style="text-decoration: none; color: inherit;"
+        :to="`/${$route.params.platform}/roms/${rom.file_name}`">
+        <v-img
+            :value="rom.file_name"
+            :key="rom.file_name"
+            v-bind="hoverProps"
+            :src="'/assets'+rom.path_cover_l+'?reload='+forceImgReload"
+            :lazy-src="'/assets'+rom.path_cover_s+'?reload='+forceImgReload"
+            class="cover"
+            cover>
+            <template v-slot:placeholder>
+                <div class="d-flex align-center justify-center fill-height">
+                    <v-progress-circular color="secondary" indeterminate/>
+                </div>
+            </template>
+            <v-expand-transition>
+                <div 
+                    v-if="isHovering || !rom.has_cover"
+                    class="rom-title d-flex transition-fast-in-fast-out bg-tooltip text-caption">
+                    <v-list-item>{{ rom.file_name }}</v-list-item>
+                </div>
+            </v-expand-transition>
+            <v-chip-group class="pl-1 pt-0">
+                <v-chip
+                    v-show="rom.region"
+                    size="x-small"
+                    class="bg-chip"
+                    label>
+                    {{ rom.region }}
+                </v-chip>
+                <v-chip
+                    v-show="rom.revision"
+                    size="x-small"
+                    class="bg-chip"
+                    label>
+                    {{ rom.revision }}
+                </v-chip>
+            </v-chip-group>
+        </v-img>
+    </router-link>
 </template>

 <style scoped>
--- a/frontend/src/views/Gallery.vue
+++ b/frontend/src/views/Gallery.vue
@@ -74,7 +74,7 @@ onBeforeRouteUpdate(async (to, from) => {
        <game-list-item v-for="rom in romsFiltered" :key="rom.file_name" :rom="rom"/>
    </v-list>
    
-    <no-roms :noRoms="noRoms" />
+    <no-roms :noRoms="noRoms"/>

    <v-dialog v-model="gettingRoms" scroll-strategy="none" width="auto" :scrim="false" persistent>
        <v-progress-circular color="secondary" :width="3" :size="70" indeterminate/>
--- a/package-lock.json
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "romm",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}