roms gallery mock added

2026-02-18 00:27:41 +01:00 · 2023-03-09 17:56:04 +01:00
parent 03aac67f45
commit 6a69530b45
23 changed files with 210 additions and 672 deletions
--- a/2
+++ b/2
@@ -13,7 +13,7 @@ EXPOSE 5000
 # Copy frontend and install npm packages
 COPY frontend /frontend
 COPY frontend/package.json /frontend/package.json
-RUN ln -s /emulation /frontend/emulation
+RUN ln -s /emulation /frontend/src/assets/emulation
 WORKDIR  /frontend
 RUN npm install
 EXPOSE 5173
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,7 +1,7 @@
 version: "3"
 services:
  romm:
-    image: romm:latest
+    image: romm:dev-0.1
    container_name: romm
    environment:
      - DB_HOST=${DB_HOST}
--- a/frontend/src/assets/logo.png
+++ b/frontend/src/assets/logo.png
--- a/frontend/src/assets/logo.svg
+++ b/frontend/src/assets/logo.svg
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,12 +5,12 @@
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Welcome to Vuetify 3</title>
+  <title>Rom Manager</title>
 </head>

 <body>
  <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
+  <script type="module" src="/src/main.js"></script>
 </body>

 </html>
--- a/frontend/jsconfig.json
+++ b/frontend/jsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,23 +12,18 @@
        "axios": "^1.3.4",
        "core-js": "^3.8.3",
        "roboto-fontface": "*",
-        "vue": "^3.2.47",
+        "vue": "^3.2.13",
        "vue-router": "^4.0.0",
        "vuetify": "^3.0.0",
        "webfontloader": "^1.0.0"
      },
      "devDependencies": {
-        "@types/node": "^18.11.9",
-        "@types/webfontloader": "^1.6.35",
        "@vitejs/plugin-vue": "^3.0.3",
-        "@vue/eslint-config-typescript": "^11.0.0",
        "eslint": "^8.22.0",
        "eslint-plugin-vue": "^9.3.0",
        "sass": "^1.55.0",
-        "typescript": "^4.0.0",
-        "vite": "^3.0.9",
-        "vite-plugin-vuetify": "^1.0.0-alpha.12",
-        "vue-tsc": "^1.0.9"
+        "vite": "^3.1.9",
+        "vite-plugin-vuetify": "^1.0.0-alpha.12"
      }
    },
    "node_modules/@babel/parser": {
@@ -177,218 +172,6 @@
        "node": ">= 8"
      }
    },
-    "node_modules/@types/json-schema": {
-      "version": "7.0.11",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
-      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
-      "dev": true
-    },
-    "node_modules/@types/node": {
-      "version": "18.14.6",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.6.tgz",
-      "integrity": "sha512-93+VvleD3mXwlLI/xASjw0FzKcwzl3OdTCzm1LaRfqgS21gfFtK3zDXM5Op9TeeMsJVOaJ2VRDpT9q4Y3d0AvA==",
-      "devOptional": true
-    },
-    "node_modules/@types/semver": {
-      "version": "7.3.13",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
-      "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==",
-      "dev": true
-    },
-    "node_modules/@types/webfontloader": {
-      "version": "1.6.35",
-      "resolved": "https://registry.npmjs.org/@types/webfontloader/-/webfontloader-1.6.35.tgz",
-      "integrity": "sha512-IJlrsiDWq6KghQ7tPlL5tcwSUyOxLDceT+AFUY7Ylj0Fcv3/h3QkANqQxZ0B5mEpEKxhTw76vDmvrruSMV9n9Q==",
-      "dev": true
-    },
-    "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.54.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.54.1.tgz",
-      "integrity": "sha512-a2RQAkosH3d3ZIV08s3DcL/mcGc2M/UC528VkPULFxR9VnVPT8pBu0IyBAJJmVsCmhVfwQX1v6q+QGnmSe1bew==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/scope-manager": "5.54.1",
-        "@typescript-eslint/type-utils": "5.54.1",
-        "@typescript-eslint/utils": "5.54.1",
-        "debug": "^4.3.4",
-        "grapheme-splitter": "^1.0.4",
-        "ignore": "^5.2.0",
-        "natural-compare-lite": "^1.4.0",
-        "regexpp": "^3.2.0",
-        "semver": "^7.3.7",
-        "tsutils": "^3.21.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "@typescript-eslint/parser": "^5.0.0",
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/parser": {
-      "version": "5.54.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.54.1.tgz",
-      "integrity": "sha512-8zaIXJp/nG9Ff9vQNh7TI+C3nA6q6iIsGJ4B4L6MhZ7mHnTMR4YP5vp2xydmFXIy8rpyIVbNAG44871LMt6ujg==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/scope-manager": "5.54.1",
-        "@typescript-eslint/types": "5.54.1",
-        "@typescript-eslint/typescript-estree": "5.54.1",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.54.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.54.1.tgz",
-      "integrity": "sha512-zWKuGliXxvuxyM71UA/EcPxaviw39dB2504LqAmFDjmkpO8qNLHcmzlh6pbHs1h/7YQ9bnsO8CCcYCSA8sykUg==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "5.54.1",
-        "@typescript-eslint/visitor-keys": "5.54.1"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.54.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.54.1.tgz",
-      "integrity": "sha512-WREHsTz0GqVYLIbzIZYbmUUr95DKEKIXZNH57W3s+4bVnuF1TKe2jH8ZNH8rO1CeMY3U4j4UQeqPNkHMiGem3g==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/typescript-estree": "5.54.1",
-        "@typescript-eslint/utils": "5.54.1",
-        "debug": "^4.3.4",
-        "tsutils": "^3.21.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "*"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/types": {
-      "version": "5.54.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.54.1.tgz",
-      "integrity": "sha512-G9+1vVazrfAfbtmCapJX8jRo2E4MDXxgm/IMOF4oGh3kq7XuK3JRkOg6y2Qu1VsTRmWETyTkWt1wxy7X7/yLkw==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.54.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.54.1.tgz",
-      "integrity": "sha512-bjK5t+S6ffHnVwA0qRPTZrxKSaFYocwFIkZx5k7pvWfsB1I57pO/0M0Skatzzw1sCkjJ83AfGTL0oFIFiDX3bg==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "5.54.1",
-        "@typescript-eslint/visitor-keys": "5.54.1",
-        "debug": "^4.3.4",
-        "globby": "^11.1.0",
-        "is-glob": "^4.0.3",
-        "semver": "^7.3.7",
-        "tsutils": "^3.21.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/utils": {
-      "version": "5.54.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.54.1.tgz",
-      "integrity": "sha512-IY5dyQM8XD1zfDe5X8jegX6r2EVU5o/WJnLu/znLPWCBF7KNGC+adacXnt5jEYS9JixDcoccI6CvE4RCjHMzCQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.9",
-        "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.54.1",
-        "@typescript-eslint/types": "5.54.1",
-        "@typescript-eslint/typescript-estree": "5.54.1",
-        "eslint-scope": "^5.1.1",
-        "eslint-utils": "^3.0.0",
-        "semver": "^7.3.7"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      }
-    },
-    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.54.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.54.1.tgz",
-      "integrity": "sha512-q8iSoHTgwCfgcRJ2l2x+xCbu8nBlRAlsQ33k24Adj8eoVBE0f8dUeI+bAa8F84Mv05UGbAx57g2zrRsYIooqQg==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "5.54.1",
-        "eslint-visitor-keys": "^3.3.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
    "node_modules/@vitejs/plugin-vue": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz",
@@ -402,84 +185,6 @@
        "vue": "^3.2.25"
      }
    },
-    "node_modules/@volar/language-core": {
-      "version": "1.3.0-alpha.0",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.3.0-alpha.0.tgz",
-      "integrity": "sha512-W3uMzecHPcbwddPu4SJpUcPakRBK/y/BP+U0U6NiPpUX1tONLC4yCawt+QBJqtgJ+sfD6ztf5PyvPL3hQRqfOA==",
-      "dev": true,
-      "dependencies": {
-        "@volar/source-map": "1.3.0-alpha.0"
-      }
-    },
-    "node_modules/@volar/source-map": {
-      "version": "1.3.0-alpha.0",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.3.0-alpha.0.tgz",
-      "integrity": "sha512-jSdizxWFvDTvkPYZnO6ew3sBZUnS0abKCbuopkc0JrIlFbznWC/fPH3iPFIMS8/IIkRxq1Jh9VVG60SmtsdaMQ==",
-      "dev": true,
-      "dependencies": {
-        "muggle-string": "^0.2.2"
-      }
-    },
-    "node_modules/@volar/typescript": {
-      "version": "1.3.0-alpha.0",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.3.0-alpha.0.tgz",
-      "integrity": "sha512-5UItyW2cdH2mBLu4RrECRNJRgtvvzKrSCn2y3v/D61QwIDkGx4aeil6x8RFuUL5TFtV6QvVHXnsOHxNgd+sCow==",
-      "dev": true,
-      "dependencies": {
-        "@volar/language-core": "1.3.0-alpha.0"
-      }
-    },
-    "node_modules/@volar/vue-language-core": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@volar/vue-language-core/-/vue-language-core-1.2.0.tgz",
-      "integrity": "sha512-w7yEiaITh2WzKe6u8ZdeLKCUz43wdmY/OqAmsB/PGDvvhTcVhCJ6f0W/RprZL1IhqH8wALoWiwEh/Wer7ZviMQ==",
-      "dev": true,
-      "dependencies": {
-        "@volar/language-core": "1.3.0-alpha.0",
-        "@volar/source-map": "1.3.0-alpha.0",
-        "@vue/compiler-dom": "^3.2.47",
-        "@vue/compiler-sfc": "^3.2.47",
-        "@vue/reactivity": "^3.2.47",
-        "@vue/shared": "^3.2.47",
-        "minimatch": "^6.1.6",
-        "muggle-string": "^0.2.2",
-        "vue-template-compiler": "^2.7.14"
-      }
-    },
-    "node_modules/@volar/vue-language-core/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/@volar/vue-language-core/node_modules/minimatch": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-6.2.0.tgz",
-      "integrity": "sha512-sauLxniAmvnhhRjFwPNnJKaPFYyddAgbYdeUpHULtCT/GhzdCx/MDNy+Y40lBxTQUrMzDE8e0S43Z5uqfO0REg==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@volar/vue-typescript": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@volar/vue-typescript/-/vue-typescript-1.2.0.tgz",
-      "integrity": "sha512-zjmRi9y3J1EkG+pfuHp8IbHmibihrKK485cfzsHjiuvJMGrpkWvlO5WVEk8oslMxxeGC5XwBFE9AOlvh378EPA==",
-      "dev": true,
-      "dependencies": {
-        "@volar/typescript": "1.3.0-alpha.0",
-        "@volar/vue-language-core": "1.2.0"
-      }
-    },
    "node_modules/@vue/compiler-core": {
      "version": "3.2.47",
      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
@@ -531,30 +236,6 @@
      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
    },
-    "node_modules/@vue/eslint-config-typescript": {
-      "version": "11.0.2",
-      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-11.0.2.tgz",
-      "integrity": "sha512-EiKud1NqlWmSapBFkeSrE994qpKx7/27uCGnhdqzllYDpQZroyX/O6bwjEpeuyKamvLbsGdO6PMR2faIf+zFnw==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/eslint-plugin": "^5.0.0",
-        "@typescript-eslint/parser": "^5.0.0",
-        "vue-eslint-parser": "^9.0.0"
-      },
-      "engines": {
-        "node": "^14.17.0 || >=16.0.0"
-      },
-      "peerDependencies": {
-        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0",
-        "eslint-plugin-vue": "^9.0.0",
-        "typescript": "*"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/@vue/reactivity": {
      "version": "3.2.47",
      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz",
@@ -705,15 +386,6 @@
      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
      "dev": true
    },
-    "node_modules/array-union": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -918,12 +590,6 @@
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
    },
-    "node_modules/de-indent": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
-      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
-      "dev": true
-    },
    "node_modules/debug": {
      "version": "4.3.4",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -955,18 +621,6 @@
        "node": ">=0.4.0"
      }
    },
-    "node_modules/dir-glob": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-      "dev": true,
-      "dependencies": {
-        "path-type": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/doctrine": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -1407,16 +1061,16 @@
      }
    },
    "node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
+      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
      "dev": true,
      "dependencies": {
        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
+        "estraverse": "^5.2.0"
      },
      "engines": {
-        "node": ">=8.0.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
      }
    },
    "node_modules/eslint-utils": {
@@ -1455,28 +1109,6 @@
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
      }
    },
-    "node_modules/eslint/node_modules/eslint-scope": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
-      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
-      "dev": true,
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^5.2.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      }
-    },
-    "node_modules/eslint/node_modules/estraverse": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
    "node_modules/espree": {
      "version": "9.4.1",
      "resolved": "https://registry.npmjs.org/espree/-/espree-9.4.1.tgz",
@@ -1506,15 +1138,6 @@
        "node": ">=0.10"
      }
    },
-    "node_modules/esquery/node_modules/estraverse": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
    "node_modules/esrecurse": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
@@ -1527,7 +1150,7 @@
        "node": ">=4.0"
      }
    },
-    "node_modules/esrecurse/node_modules/estraverse": {
+    "node_modules/estraverse": {
      "version": "5.3.0",
      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
@@ -1536,15 +1159,6 @@
        "node": ">=4.0"
      }
    },
-    "node_modules/estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
    "node_modules/estree-walker": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -1565,34 +1179,6 @@
      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
      "dev": true
    },
-    "node_modules/fast-glob": {
-      "version": "3.2.12",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
    "node_modules/fast-json-stable-stringify": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -1794,26 +1380,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/globby": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-      "dev": true,
-      "dependencies": {
-        "array-union": "^2.1.0",
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.2.9",
-        "ignore": "^5.2.0",
-        "merge2": "^1.4.1",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
    "node_modules/grapheme-splitter": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
@@ -1841,15 +1407,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/he": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-      "dev": true,
-      "bin": {
-        "he": "bin/he"
-      }
-    },
    "node_modules/ignore": {
      "version": "5.2.4",
      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -2093,28 +1650,6 @@
        "semver": "bin/semver.js"
      }
    },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
-      "dependencies": {
-        "braces": "^3.0.2",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
    "node_modules/mime-db": {
      "version": "1.52.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -2152,12 +1687,6 @@
      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
      "devOptional": true
    },
-    "node_modules/muggle-string": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.2.2.tgz",
-      "integrity": "sha512-YVE1mIJ4VpUMqZObFndk9CJu6DBJR/GB13p3tXuNbwD4XExaI5EOuRl6BHeIDxIqXZVxSfAC+y6U1Z/IxCfKUg==",
-      "dev": true
-    },
    "node_modules/nanoid": {
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -2175,12 +1704,6 @@
      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
      "dev": true
    },
-    "node_modules/natural-compare-lite": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
-      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
-      "dev": true
-    },
    "node_modules/normalize-path": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -2312,15 +1835,6 @@
      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
      "devOptional": true
    },
-    "node_modules/path-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/picocolors": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -2652,15 +2166,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/source-map": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -2749,27 +2254,6 @@
        "node": ">=8.0"
      }
    },
-    "node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
-    },
-    "node_modules/tsutils": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^1.8.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      },
-      "peerDependencies": {
-        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
-      }
-    },
    "node_modules/type-check": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -2794,19 +2278,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "dev": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
    "node_modules/upath": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
@@ -2935,28 +2406,6 @@
        "eslint": ">=6.0.0"
      }
    },
-    "node_modules/vue-eslint-parser/node_modules/eslint-scope": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
-      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
-      "dev": true,
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^5.2.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      }
-    },
-    "node_modules/vue-eslint-parser/node_modules/estraverse": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
    "node_modules/vue-router": {
      "version": "4.1.6",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",
@@ -2971,32 +2420,6 @@
        "vue": "^3.2.0"
      }
    },
-    "node_modules/vue-template-compiler": {
-      "version": "2.7.14",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
-      "integrity": "sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==",
-      "dev": true,
-      "dependencies": {
-        "de-indent": "^1.0.2",
-        "he": "^1.2.0"
-      }
-    },
-    "node_modules/vue-tsc": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.2.0.tgz",
-      "integrity": "sha512-rIlzqdrhyPYyLG9zxsVRa+JEseeS9s8F2BbVVVWRRsTZvJO2BbhLEb2HW3MY+DFma0378tnIqs+vfTzbcQtRFw==",
-      "dev": true,
-      "dependencies": {
-        "@volar/vue-language-core": "1.2.0",
-        "@volar/vue-typescript": "1.2.0"
-      },
-      "bin": {
-        "vue-tsc": "bin/vue-tsc.js"
-      },
-      "peerDependencies": {
-        "typescript": "*"
-      }
-    },
    "node_modules/vuetify": {
      "version": "3.1.8",
      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.1.8.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,31 +4,26 @@
  "private": true,
  "scripts": {
    "dev": "vite --host",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "@mdi/font": "7.0.96",
-    "axios": "^1.3.4",
    "core-js": "^3.8.3",
    "roboto-fontface": "*",
-    "vue": "^3.2.47",
+    "vue": "^3.2.13",
    "vue-router": "^4.0.0",
    "vuetify": "^3.0.0",
-    "webfontloader": "^1.0.0"
+    "webfontloader": "^1.0.0",
+    "axios": "^1.3.4"
  },
  "devDependencies": {
-    "@types/node": "^18.11.9",
-    "@types/webfontloader": "^1.6.35",
    "@vitejs/plugin-vue": "^3.0.3",
-    "@vue/eslint-config-typescript": "^11.0.0",
    "eslint": "^8.22.0",
    "eslint-plugin-vue": "^9.3.0",
    "sass": "^1.55.0",
-    "typescript": "^4.0.0",
-    "vite": "^3.0.9",
-    "vite-plugin-vuetify": "^1.0.0-alpha.12",
-    "vue-tsc": "^1.0.9"
+    "vite": "^3.1.9",
+    "vite-plugin-vuetify": "^1.0.0-alpha.12"
  }
 }
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,7 +1,14 @@
 <template>
-  <router-view />
+  <v-app>
+    <platforms-bar />
+    <v-main>
+      <v-container fluid>
+        <router-view />
+      </v-container>
+    </v-main>
+</v-app>
 </template>

-<script lang="ts" setup>
-  //
+<script setup>
+import PlatformsBar from './components/PlatformsBar.vue'
 </script>
--- a/frontend/src/layouts/default/PlatformsBar.vue
+++ b/frontend/src/layouts/default/PlatformsBar.vue
@@ -27,23 +27,31 @@ export default {
                console.log(response.data)
                this.scaning = false
            })
+        },
+        getPlatformsSlug(slug) {
+            console.log(slug+' selected!')
+            this.currentPlatform = slug
        }
    }
 }
 </script>

 <template>
-    <v-layout>
-      <v-navigation-drawer thene="dark" class="transparent">
-
+    
+    <v-navigation-drawer theme="dark" width="250" >
        <v-list>
-          <v-list-item prepend-icon="mdi mdi-controller">Rom Manager</v-list-item>
+            <v-list-item prepend-icon="mdi mdi-controller">Rom Manager</v-list-item>
        </v-list>

-        <v-divider class="text-black"></v-divider>
+        <vdvider class="text-white"></vdvider>
+
+        <v-list nav v-if="platformsLoaded">
+            <v-list-item v-for="platform in platforms"
+                :title="platform.name" 
+                :value="platform.slug" 
+                :key="platform.slug" 
+                v-on:click="getPlatformsSlug(platform.slug)"/>
+        </v-list>
+    </v-navigation-drawer>

-        <v-list :items="platforms" item-title="name" item-value="slug" density="compact" nav v-if="platformsLoaded" />
-        
-      </v-navigation-drawer>
-    </v-layout>
 </template>
--- a/frontend/src/components/RomsGallery.vue
+++ b/frontend/src/components/RomsGallery.vue
@@ -0,0 +1,129 @@
+<script>
+import axios from 'axios'
+export default {
+    data() {
+        return {
+            cover_lazy: 'http://asgard:5173/assets/emulation/resources/placeholder/cover.png',
+            roms: [
+                {
+                    cover: 'http://asgard:5173/assets/emulation/resources/gba/pokemon fire red.png',
+                    name: "Pokemon Fire Red",
+                    link: "https://www.igdb.com/games/pokemon-firered"
+                },
+                {
+                    cover: 'http://asgard:5173/assets/emulation/resources/gba/castlevania - aria of sorrow.png',
+                    name: "Castlevania - Aria of Sorrow",
+                    link: "https://www.igdb.com/games/castlevania-aria-of-sorrow"
+                },
+                {
+                    cover: 'http://asgard:5173/assets/emulation/resources/gba/wario land 4.png',
+                    name: "Wario Land 4",
+                    link: "https://www.igdb.com/games/wario-land-4"
+                },
+                {
+                    cover: 'http://asgard:5173/assets/emulation/resources/gba/pokemon ruby.png',
+                    name: "Pokemon Ruby",
+                    link: "https://www.igdb.com/games/pokemon-ruby"
+                },
+                {
+                    cover: 'http://asgard:5173/assets/emulation/resources/gba/pokemon fire red.png',
+                    name: "Pokemon Fire Red",
+                    link: "https://www.igdb.com/games/pokemon-firered"
+                },
+                {
+                    cover: 'http://asgard:5173/assets/emulation/resources/gba/castlevania - aria of sorrow.png',
+                    name: "Castlevania - Aria of Sorrow",
+                    link: "https://www.igdb.com/games/castlevania-aria-of-sorrow"
+                },
+                {
+                    cover: 'http://asgard:5173/assets/emulation/resources/gba/wario land 4.png',
+                    name: "Wario Land 4",
+                    link: "https://www.igdb.com/games/wario-land-4"
+                },
+                {
+                    cover: 'http://asgard:5173/assets/emulation/resources/gba/pokemon ruby.png',
+                    name: "Pokemon Ruby",
+                    link: "https://www.igdb.com/games/pokemon-ruby"
+                },
+                {
+                    cover: 'http://asgard:5173/assets/emulation/resources/gba/pokemon fire red.png',
+                    name: "Pokemon Fire Red",
+                    link: "https://www.igdb.com/games/pokemon-firered"
+                },
+                {
+                    cover: 'http://asgard:5173/assets/emulation/resources/gba/castlevania - aria of sorrow.png',
+                    name: "Castlevania - Aria of Sorrow",
+                    link: "https://www.igdb.com/games/castlevania-aria-of-sorrow"
+                },
+                {
+                    cover: 'http://asgard:5173/assets/emulation/resources/gba/wario land 4.png',
+                    name: "Wario Land 4",
+                    link: "https://www.igdb.com/games/wario-land-4"
+                },
+                {
+                    cover: 'http://asgard:5173/assets/emulation/resources/gba/pokemon ruby.png',
+                    name: "Pokemon Ruby",
+                    link: "https://www.igdb.com/games/pokemon-ruby"
+                },
+                {
+                    cover: 'http://asgard:5173/assets/emulation/resources/gba/pokemon fire red.png',
+                    name: "Pokemon Fire Red",
+                    link: "https://www.igdb.com/games/pokemon-firered"
+                },
+                {
+                    cover: 'http://asgard:5173/assets/emulation/resources/gba/castlevania - aria of sorrow.png',
+                    name: "Castlevania - Aria of Sorrow",
+                    link: "https://www.igdb.com/games/castlevania-aria-of-sorrow"
+                },
+                {
+                    cover: 'http://asgard:5173/assets/emulation/resources/gba/wario land 4.png',
+                    name: "Wario Land 4",
+                    link: "https://www.igdb.com/games/wario-land-4"
+                },
+                {
+                    cover: 'http://asgard:5173/assets/emulation/resources/gba/pokemon ruby.png',
+                    name: "Pokemon Ruby",
+                    link: "https://www.igdb.com/games/pokemon-ruby"
+                }
+            ]
+        }
+    },
+    methods: {
+        downloadRom(name){
+            console.log("Downloading "+name)
+        }
+    }
+}
+</script>
+
+<template>
+    
+    <v-row>
+        <v-col v-for="rom in roms" :key="rom.name" cols="6" sm="4" md="2" lg="2">
+            <v-hover v-slot="{ isHovering, props }">
+                <v-card :elevation="isHovering ? 20 : 3" :class="{ 'on-hover': isHovering }" v-bind="props" >
+
+                    <v-img :src="rom.cover" :lazy-src="cover_lazy" cover >
+                        <template v-slot:placeholder>
+                            <div class="d-flex align-center justify-center fill-height">
+                                <v-progress-circular color="grey-lighten-4" indeterminate />
+                            </div>
+                        </template>
+                        <v-btn class="fill-height" color="transparent" block :href="rom.link"></v-btn>            
+                    </v-img>
+
+                    <v-card-text>
+                        <v-row>
+                            <div class="text-caption font-weight-bold d-flex align-center">
+                                <v-col>{{ rom.name }}</v-col>
+                                <v-btn size="small" variant="flat" icon="mdi-download" @click="downloadRom(rom.name)" />
+                            </div>
+                        </v-row>
+                    </v-card-text>
+
+                </v-card>
+            </v-hover>
+        </v-col>
+    </v-row>
+
+</template>
--- a/frontend/src/layouts/Home.vue
+++ b/frontend/src/layouts/Home.vue
@@ -0,0 +1,7 @@
+<script setup>
+import RomsGallery from '../components/RomsGallery.vue';
+</script>
+
+<template>
+    <RomsGallery />
+</template>
--- a/frontend/src/layouts/default/Home.vue
+++ b/frontend/src/layouts/default/Home.vue
@@ -1,7 +0,0 @@
-<template>
-  <platforms-bar />
-</template>
-
-<script lang="ts" setup>
-  import PlatformsBar from './PlatformsBar.vue'
-</script>
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,5 +1,5 @@
 /**
- * main.ts
+ * main.js
 *
 * Bootstraps Vuetify and other plugins then mounts the App`
 */
--- a/frontend/src/plugins/index.js
+++ b/frontend/src/plugins/index.js
@@ -1,7 +1,7 @@
 /**
- * plugins/index.ts
+ * plugins/index.js
 *
- * Automatically included in `./src/main.ts`
+ * Automatically included in `./src/main.js`
 */

 // Plugins
@@ -9,10 +9,7 @@ import { loadFonts } from './webfontloader'
 import vuetify from './vuetify'
 import router from '../router'

-// Types
-import type { App } from 'vue'
-
-export function registerPlugins (app: App) {
+export function registerPlugins (app) {
  loadFonts()
  app
    .use(vuetify)
--- a/frontend/src/plugins/vuetify.js
+++ b/frontend/src/plugins/vuetify.js
@@ -1,5 +1,5 @@
 /**
- * plugins/vuetify.ts
+ * plugins/vuetify.js
 *
 * Framework documentation: https://vuetifyjs.com`
 */
--- a/frontend/src/plugins/webfontloader.js
+++ b/frontend/src/plugins/webfontloader.js
@@ -1,5 +1,5 @@
 /**
- * plugins/webfontloader.ts
+ * plugins/webfontloader.js
 *
 * webfontloader documentation: https://github.com/typekit/webfontloader
 */
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -4,7 +4,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 const routes = [
  {
    path: '/',
-    component: () => import('@/layouts/default/Home.vue'),
+    component: () => import('@/layouts/Home.vue'),
    children: [
      {
        path: '',
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,5 +1,5 @@
 <template>
 </template>

-<script lang="ts" setup>
+<script setup>
 </script>
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -1,7 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,25 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "strict": true,
-    "jsx": "preserve",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "lib": ["ESNext", "DOM"],
-    "skipLibCheck": true,
-    "noEmit": true,
-    "paths": {
-      "@/*": [
-       "src/*"
-      ]
-     }
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }],
-  "exclude": ["node_modules"]
-}
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js