From 9cf2a929717da1961f9b658e8f35da8fc3214b69 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <georges.antoine.assi@gmail.com>
Date: Sat, 13 May 2023 14:42:03 -0400
Subject: [PATCH 1/2] Populate homepage with platform cards and stats

---
 frontend/src/components/Drawer/Base.vue   |  30 +-
 frontend/src/components/Home/Platform.vue |  22 ++
 frontend/src/views/Home.vue               |  36 ++-
 poetry.lock                               | 334 +++++++++++++++++++++-
 pyproject.toml                            |   1 +
 5 files changed, 395 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/components/Home/Platform.vue

diff --git a/frontend/src/components/Drawer/Base.vue b/frontend/src/components/Drawer/Base.vue
index 1e2ef262a..5461f4834 100644
--- a/frontend/src/components/Drawer/Base.vue
+++ b/frontend/src/components/Drawer/Base.vue
@@ -4,7 +4,6 @@ import RailBtn from '@/components/Drawer/RailBtn.vue'
 import Platform from '@/components/Drawer/Platform.vue'
 import { storePlatforms } from '@/stores/platforms'
 
-
 // Props
 const platforms = storePlatforms()
 const drawer = ref(undefined)
@@ -18,35 +17,33 @@ emitter.on('toggleDrawerRail', () => { rail.value = !rail.value; localStorage.se
 </script>
 
 <template>
-
     <v-navigation-drawer v-model="drawer" :rail="rail" width="300" rail-width="145" elevation="0">
 
         <v-list v-model:opened="open">
             <router-link to="/">
                 <v-list-item class="justify-center pa-0">
-                    <v-img src="/assets/isotipo.svg" width="70" class="home-btn"/>
+                    <v-img src="/assets/isotipo.svg" width="70" class="home-btn" />
                 </v-list-item>
             </router-link>
 
             <v-divider></v-divider>
-            
+
             <v-list-group value="Platforms">
                 <template v-slot:activator="{ props }">
-                    <v-list-item
-                        v-bind="props">
+                    <v-list-item v-bind="props">
                         <span class="text-body-1 text-truncate">{{ rail ? '' : 'Platforms' }}</span>
                         <template v-slot:prepend>
                             <v-avatar :rounded="0" size="40"><v-icon>mdi-controller</v-icon></v-avatar>
                         </template>
                     </v-list-item>
                 </template>
-                <platform class="drawer-item" v-for="platform in platforms.value" :platform="platform" :rail="rail" :key="platform.slug"/>
+                <platform class="drawer-item" v-for="platform in platforms.value" :platform="platform" :rail="rail"
+                    :key="platform.slug" />
             </v-list-group>
 
             <v-list-group value="Library">
                 <template v-slot:activator="{ props }">
-                    <v-list-item
-                        v-bind="props">
+                    <v-list-item v-bind="props">
                         <span class="text-body-1 text-truncate">{{ rail ? '' : 'Library' }}</span>
                         <template v-slot:prepend>
                             <v-avatar :rounded="0" size="40"><v-icon>mdi-animation-outline</v-icon></v-avatar>
@@ -70,8 +67,7 @@ emitter.on('toggleDrawerRail', () => { rail.value = !rail.value; localStorage.se
 
             <v-list-group value="Settings">
                 <template v-slot:activator="{ props }">
-                    <v-list-item
-                        v-bind="props">
+                    <v-list-item v-bind="props">
                         <span class="text-body-1 text-truncate">{{ rail ? '' : 'Settings' }}</span>
                         <template v-slot:prepend>
                             <v-avatar :rounded="0" size="40"><v-icon>mdi-cog</v-icon></v-avatar>
@@ -87,23 +83,23 @@ emitter.on('toggleDrawerRail', () => { rail.value = !rail.value; localStorage.se
             </v-list-group>
 
         </v-list>
-        
+
         <template v-slot:append>
-            <v-divider class="border-opacity-25" :thickness="1"/>
-            <rail-btn :rail="rail"/>
+            <v-divider class="border-opacity-25" :thickness="1" />
+            <rail-btn :rail="rail" />
         </template>
 
     </v-navigation-drawer>
-
 </template>
 
 <style scoped>
-.home-btn{
+.home-btn {
     width: 100px;
     height: 100px;
     cursor: pointer;
 }
+
 .drawer-item {
     padding-inline-start: 30px !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/Home/Platform.vue b/frontend/src/components/Home/Platform.vue
new file mode 100644
index 000000000..716604fb4
--- /dev/null
+++ b/frontend/src/components/Home/Platform.vue
@@ -0,0 +1,22 @@
+<script setup>
+const props = defineProps(['platform', 'rail'])
+</script>
+
+<template>
+    <router-link style="text-decoration: none; color: inherit;" :to="`/platform/${platform.slug}`">
+        <v-hover v-slot="{ isHovering, props }">
+            <v-card v-bind="props" :class="{ 'on-hover': isHovering }" :elevation="isHovering ? 20 : 3">
+                <v-card-text>
+                    <v-avatar :rounded="0" size="100%">
+                        <v-img :src="'/assets/platforms/' + platform.slug + '.ico'"></v-img>
+                    </v-avatar>
+                    <v-chip class="bg-chip position-absolute" size="small" style="bottom: 1rem; right: 1rem" label>{{
+                        platform.n_roms }}</v-chip>
+                </v-card-text>
+            </v-card>
+        </v-hover>
+    </router-link>
+</template>
+
+<style scoped>
+</style>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index ac7a3b3f1..5b5b1fe42 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,24 +1,40 @@
 <script setup>
 import { ref } from 'vue'
 import { useDisplay } from "vuetify"
+import { views } from '@/utils/utils.js'
+import Platform from '@/components/Home/Platform.vue'
 import { storePlatforms } from '@/stores/platforms.js'
 
-// Props
 const platforms = storePlatforms()
 const totalGames = ref(platforms.value.reduce((count, p) => { return count + p.n_roms }, 0))
 const { lgAndUp } = useDisplay()
 </script>
 
 <template>
+    <v-col>
+        <v-card class="mx-auto mt-10" max-width="1000" variant="text">
+            <v-img :height="lgAndUp ? 220 : 95" src="/assets/romm_complete.svg" cover />
+        </v-card>
 
-    <v-card class="mx-auto mt-10" max-width="1000" variant="text">
-        <v-img
-        :height="lgAndUp ? 220 : 95"
-        src="/assets/romm_complete.svg"
-        cover/>
-        <v-card-text class="d-flex justify-center">
-            <span class="text-overline">Total games: {{ totalGames }}</span>
-        </v-card-text>
-    </v-card>
+        <v-row class="ml-2 mt-6" no-gutters>
+            <v-avatar :rounded="0" size="auto"><v-icon>mdi-controller</v-icon></v-avatar>
+            <span class="text-h6 ml-2">Platforms</span>
+        </v-row>
 
+        <v-row class="pa-1" no-gutters>
+            <v-col v-for="platform in platforms.value" class="pa-1" :key="platform.slug" :cols="views[1]['size-cols']"
+                :xs="views[1]['size-xs']" :sm="views[1]['size-sm']" :md="views[1]['size-md']" :lg="views[1]['size-lg']">
+                <platform :platform="platform" :key="platform.slug" />
+            </v-col>
+        </v-row>
+
+        <v-row no-gutters class="mt-4">
+            <v-chip class="ma-2" label>
+                <span class="text-overline">{{ platforms.value.length }} platforms</span>
+            </v-chip>
+            <v-chip class="ma-2" label>
+                <span class="text-overline">{{ totalGames }} games</span>
+            </v-chip>
+        </v-row>
+    </v-col>
 </template>
diff --git a/poetry.lock b/poetry.lock
index bc40f3ccd..7bb2da023 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -41,6 +41,48 @@ doc = ["packaging", "sphinx-autodoc-typehints (>=1.2.0)", "sphinx-rtd-theme"]
 test = ["contextlib2", "coverage[toml] (>=4.5)", "hypothesis (>=4.0)", "mock (>=4)", "pytest (>=7.0)", "pytest-mock (>=3.6.1)", "trustme", "uvloop (<0.15)", "uvloop (>=0.15)"]
 trio = ["trio (>=0.16,<0.22)"]
 
+[[package]]
+name = "appnope"
+version = "0.1.3"
+description = "Disable App Nap on macOS >= 10.9"
+category = "main"
+optional = false
+python-versions = "*"
+files = [
+    {file = "appnope-0.1.3-py2.py3-none-any.whl", hash = "sha256:265a455292d0bd8a72453494fa24df5a11eb18373a60c7c0430889f22548605e"},
+    {file = "appnope-0.1.3.tar.gz", hash = "sha256:02bd91c4de869fbb1e1c50aafc4098827a7a54ab2f39d9dcba6c9547ed920e24"},
+]
+
+[[package]]
+name = "asttokens"
+version = "2.2.1"
+description = "Annotate AST trees with source code positions"
+category = "main"
+optional = false
+python-versions = "*"
+files = [
+    {file = "asttokens-2.2.1-py2.py3-none-any.whl", hash = "sha256:6b0ac9e93fb0335014d382b8fa9b3afa7df546984258005da0b9e7095b3deb1c"},
+    {file = "asttokens-2.2.1.tar.gz", hash = "sha256:4622110b2a6f30b77e1473affaa97e711bc2f07d3f10848420ff1898edbe94f3"},
+]
+
+[package.dependencies]
+six = "*"
+
+[package.extras]
+test = ["astroid", "pytest"]
+
+[[package]]
+name = "backcall"
+version = "0.2.0"
+description = "Specifications for callback functions passed in to an API"
+category = "main"
+optional = false
+python-versions = "*"
+files = [
+    {file = "backcall-0.2.0-py2.py3-none-any.whl", hash = "sha256:fbbce6a29f263178a1f7915c1940bde0ec2b2a967566fe1c65c1dfb7422bd255"},
+    {file = "backcall-0.2.0.tar.gz", hash = "sha256:5cbdbf27be5e7cfadb448baf0aa95508f91f2bbc6c6437cd9cd06e2a4c215e1e"},
+]
+
 [[package]]
 name = "certifi"
 version = "2023.5.7"
@@ -165,6 +207,18 @@ files = [
     {file = "colorama-0.4.6.tar.gz", hash = "sha256:08695f5cb7ed6e0531a20572697297273c47b8cae5a63ffc6d6ed5c201be6e44"},
 ]
 
+[[package]]
+name = "decorator"
+version = "5.1.1"
+description = "Decorators for Humans"
+category = "main"
+optional = false
+python-versions = ">=3.5"
+files = [
+    {file = "decorator-5.1.1-py3-none-any.whl", hash = "sha256:b8c3f85900b9dc423225913c5aace94729fe1fa9763b38939a95226f02d37186"},
+    {file = "decorator-5.1.1.tar.gz", hash = "sha256:637996211036b6385ef91435e4fae22989472f9d571faba8927ba8253acbc330"},
+]
+
 [[package]]
 name = "emoji"
 version = "2.2.0"
@@ -179,6 +233,21 @@ files = [
 [package.extras]
 dev = ["coverage", "coveralls", "pytest"]
 
+[[package]]
+name = "executing"
+version = "1.2.0"
+description = "Get the currently executing AST node of a frame, and other information"
+category = "main"
+optional = false
+python-versions = "*"
+files = [
+    {file = "executing-1.2.0-py2.py3-none-any.whl", hash = "sha256:0314a69e37426e3608aada02473b4161d4caf5a4b244d1d0c48072b8fee7bacc"},
+    {file = "executing-1.2.0.tar.gz", hash = "sha256:19da64c18d2d851112f09c287f8d3dbbdf725ab0e569077efb6cdcbd3497c107"},
+]
+
+[package.extras]
+tests = ["asttokens", "littleutils", "pytest", "rich"]
+
 [[package]]
 name = "fastapi"
 version = "0.95.1"
@@ -299,6 +368,82 @@ files = [
     {file = "idna-3.4.tar.gz", hash = "sha256:814f528e8dead7d329833b91c5faa87d60bf71824cd12a7530b5526063d02cb4"},
 ]
 
+[[package]]
+name = "ipdb"
+version = "0.13.13"
+description = "IPython-enabled pdb"
+category = "main"
+optional = false
+python-versions = ">=2.7, !=3.0.*, !=3.1.*, !=3.2.*, !=3.3.*"
+files = [
+    {file = "ipdb-0.13.13-py3-none-any.whl", hash = "sha256:45529994741c4ab6d2388bfa5d7b725c2cf7fe9deffabdb8a6113aa5ed449ed4"},
+    {file = "ipdb-0.13.13.tar.gz", hash = "sha256:e3ac6018ef05126d442af680aad863006ec19d02290561ac88b8b1c0b0cfc726"},
+]
+
+[package.dependencies]
+decorator = {version = "*", markers = "python_version > \"3.6\""}
+ipython = {version = ">=7.31.1", markers = "python_version > \"3.6\""}
+tomli = {version = "*", markers = "python_version > \"3.6\" and python_version < \"3.11\""}
+
+[[package]]
+name = "ipython"
+version = "8.13.2"
+description = "IPython: Productive Interactive Computing"
+category = "main"
+optional = false
+python-versions = ">=3.9"
+files = [
+    {file = "ipython-8.13.2-py3-none-any.whl", hash = "sha256:ffca270240fbd21b06b2974e14a86494d6d29290184e788275f55e0b55914926"},
+    {file = "ipython-8.13.2.tar.gz", hash = "sha256:7dff3fad32b97f6488e02f87b970f309d082f758d7b7fc252e3b19ee0e432dbb"},
+]
+
+[package.dependencies]
+appnope = {version = "*", markers = "sys_platform == \"darwin\""}
+backcall = "*"
+colorama = {version = "*", markers = "sys_platform == \"win32\""}
+decorator = "*"
+jedi = ">=0.16"
+matplotlib-inline = "*"
+pexpect = {version = ">4.3", markers = "sys_platform != \"win32\""}
+pickleshare = "*"
+prompt-toolkit = ">=3.0.30,<3.0.37 || >3.0.37,<3.1.0"
+pygments = ">=2.4.0"
+stack-data = "*"
+traitlets = ">=5"
+
+[package.extras]
+all = ["black", "curio", "docrepr", "ipykernel", "ipyparallel", "ipywidgets", "matplotlib", "matplotlib (!=3.2.0)", "nbconvert", "nbformat", "notebook", "numpy (>=1.21)", "pandas", "pytest (<7)", "pytest (<7.1)", "pytest-asyncio", "qtconsole", "setuptools (>=18.5)", "sphinx (>=1.3)", "sphinx-rtd-theme", "stack-data", "testpath", "trio", "typing-extensions"]
+black = ["black"]
+doc = ["docrepr", "ipykernel", "matplotlib", "pytest (<7)", "pytest (<7.1)", "pytest-asyncio", "setuptools (>=18.5)", "sphinx (>=1.3)", "sphinx-rtd-theme", "stack-data", "testpath", "typing-extensions"]
+kernel = ["ipykernel"]
+nbconvert = ["nbconvert"]
+nbformat = ["nbformat"]
+notebook = ["ipywidgets", "notebook"]
+parallel = ["ipyparallel"]
+qtconsole = ["qtconsole"]
+test = ["pytest (<7.1)", "pytest-asyncio", "testpath"]
+test-extra = ["curio", "matplotlib (!=3.2.0)", "nbformat", "numpy (>=1.21)", "pandas", "pytest (<7.1)", "pytest-asyncio", "testpath", "trio"]
+
+[[package]]
+name = "jedi"
+version = "0.18.2"
+description = "An autocompletion tool for Python that can be used for text editors."
+category = "main"
+optional = false
+python-versions = ">=3.6"
+files = [
+    {file = "jedi-0.18.2-py2.py3-none-any.whl", hash = "sha256:203c1fd9d969ab8f2119ec0a3342e0b49910045abe6af0a3ae83a5764d54639e"},
+    {file = "jedi-0.18.2.tar.gz", hash = "sha256:bae794c30d07f6d910d32a7048af09b5a39ed740918da923c6b780790ebac612"},
+]
+
+[package.dependencies]
+parso = ">=0.8.0,<0.9.0"
+
+[package.extras]
+docs = ["Jinja2 (==2.11.3)", "MarkupSafe (==1.1.1)", "Pygments (==2.8.1)", "alabaster (==0.7.12)", "babel (==2.9.1)", "chardet (==4.0.0)", "commonmark (==0.8.1)", "docutils (==0.17.1)", "future (==0.18.2)", "idna (==2.10)", "imagesize (==1.2.0)", "mock (==1.0.1)", "packaging (==20.9)", "pyparsing (==2.4.7)", "pytz (==2021.1)", "readthedocs-sphinx-ext (==2.1.4)", "recommonmark (==0.5.0)", "requests (==2.25.1)", "six (==1.15.0)", "snowballstemmer (==2.1.0)", "sphinx (==1.8.5)", "sphinx-rtd-theme (==0.4.3)", "sphinxcontrib-serializinghtml (==1.1.4)", "sphinxcontrib-websupport (==1.2.4)", "urllib3 (==1.26.4)"]
+qa = ["flake8 (==3.8.3)", "mypy (==0.782)"]
+testing = ["Django (<3.1)", "attrs", "colorama", "docopt", "pytest (<7.0.0)"]
+
 [[package]]
 name = "mako"
 version = "1.2.4"
@@ -403,6 +548,21 @@ files = [
     {file = "MarkupSafe-2.1.2.tar.gz", hash = "sha256:abcabc8c2b26036d62d4c746381a6f7cf60aafcc653198ad678306986b09450d"},
 ]
 
+[[package]]
+name = "matplotlib-inline"
+version = "0.1.6"
+description = "Inline Matplotlib backend for Jupyter"
+category = "main"
+optional = false
+python-versions = ">=3.5"
+files = [
+    {file = "matplotlib-inline-0.1.6.tar.gz", hash = "sha256:f887e5f10ba98e8d2b150ddcf4702c1e5f8b3a20005eb0f74bfdbd360ee6f304"},
+    {file = "matplotlib_inline-0.1.6-py3-none-any.whl", hash = "sha256:f1f41aab5328aa5aaea9b16d083b128102f8712542f819fe7e6a420ff581b311"},
+]
+
+[package.dependencies]
+traitlets = "*"
+
 [[package]]
 name = "packaging"
 version = "23.1"
@@ -415,6 +575,91 @@ files = [
     {file = "packaging-23.1.tar.gz", hash = "sha256:a392980d2b6cffa644431898be54b0045151319d1e7ec34f0cfed48767dd334f"},
 ]
 
+[[package]]
+name = "parso"
+version = "0.8.3"
+description = "A Python Parser"
+category = "main"
+optional = false
+python-versions = ">=3.6"
+files = [
+    {file = "parso-0.8.3-py2.py3-none-any.whl", hash = "sha256:c001d4636cd3aecdaf33cbb40aebb59b094be2a74c556778ef5576c175e19e75"},
+    {file = "parso-0.8.3.tar.gz", hash = "sha256:8c07be290bb59f03588915921e29e8a50002acaf2cdc5fa0e0114f91709fafa0"},
+]
+
+[package.extras]
+qa = ["flake8 (==3.8.3)", "mypy (==0.782)"]
+testing = ["docopt", "pytest (<6.0.0)"]
+
+[[package]]
+name = "pexpect"
+version = "4.8.0"
+description = "Pexpect allows easy control of interactive console applications."
+category = "main"
+optional = false
+python-versions = "*"
+files = [
+    {file = "pexpect-4.8.0-py2.py3-none-any.whl", hash = "sha256:0b48a55dcb3c05f3329815901ea4fc1537514d6ba867a152b581d69ae3710937"},
+    {file = "pexpect-4.8.0.tar.gz", hash = "sha256:fc65a43959d153d0114afe13997d439c22823a27cefceb5ff35c2178c6784c0c"},
+]
+
+[package.dependencies]
+ptyprocess = ">=0.5"
+
+[[package]]
+name = "pickleshare"
+version = "0.7.5"
+description = "Tiny 'shelve'-like database with concurrency support"
+category = "main"
+optional = false
+python-versions = "*"
+files = [
+    {file = "pickleshare-0.7.5-py2.py3-none-any.whl", hash = "sha256:9649af414d74d4df115d5d718f82acb59c9d418196b7b4290ed47a12ce62df56"},
+    {file = "pickleshare-0.7.5.tar.gz", hash = "sha256:87683d47965c1da65cdacaf31c8441d12b8044cdec9aca500cd78fc2c683afca"},
+]
+
+[[package]]
+name = "prompt-toolkit"
+version = "3.0.38"
+description = "Library for building powerful interactive command lines in Python"
+category = "main"
+optional = false
+python-versions = ">=3.7.0"
+files = [
+    {file = "prompt_toolkit-3.0.38-py3-none-any.whl", hash = "sha256:45ea77a2f7c60418850331366c81cf6b5b9cf4c7fd34616f733c5427e6abbb1f"},
+    {file = "prompt_toolkit-3.0.38.tar.gz", hash = "sha256:23ac5d50538a9a38c8bde05fecb47d0b403ecd0662857a86f886f798563d5b9b"},
+]
+
+[package.dependencies]
+wcwidth = "*"
+
+[[package]]
+name = "ptyprocess"
+version = "0.7.0"
+description = "Run a subprocess in a pseudo terminal"
+category = "main"
+optional = false
+python-versions = "*"
+files = [
+    {file = "ptyprocess-0.7.0-py2.py3-none-any.whl", hash = "sha256:4b41f3967fce3af57cc7e94b888626c18bf37a083e3651ca8feeb66d492fef35"},
+    {file = "ptyprocess-0.7.0.tar.gz", hash = "sha256:5c5d0a3b48ceee0b48485e0c26037c0acd7d29765ca3fbb5cb3831d347423220"},
+]
+
+[[package]]
+name = "pure-eval"
+version = "0.2.2"
+description = "Safely evaluate AST nodes without side effects"
+category = "main"
+optional = false
+python-versions = "*"
+files = [
+    {file = "pure_eval-0.2.2-py3-none-any.whl", hash = "sha256:01eaab343580944bc56080ebe0a674b39ec44a945e6d09ba7db3cb8cec289350"},
+    {file = "pure_eval-0.2.2.tar.gz", hash = "sha256:2b45320af6dfaa1750f543d714b6d1c520a1688dec6fd24d339063ce0aaa9ac3"},
+]
+
+[package.extras]
+tests = ["pytest"]
+
 [[package]]
 name = "pydantic"
 version = "1.10.7"
@@ -468,6 +713,21 @@ typing-extensions = ">=4.2.0"
 dotenv = ["python-dotenv (>=0.10.4)"]
 email = ["email-validator (>=1.0.3)"]
 
+[[package]]
+name = "pygments"
+version = "2.15.1"
+description = "Pygments is a syntax highlighting package written in Python."
+category = "main"
+optional = false
+python-versions = ">=3.7"
+files = [
+    {file = "Pygments-2.15.1-py3-none-any.whl", hash = "sha256:db2db3deb4b4179f399a09054b023b6a586b76499d36965813c71aa8ed7b5fd1"},
+    {file = "Pygments-2.15.1.tar.gz", hash = "sha256:8ace4d3c1dd481894b2005f560ead0f9f19ee64fe983366be1a21e171d12775c"},
+]
+
+[package.extras]
+plugins = ["importlib-metadata"]
+
 [[package]]
 name = "python-dotenv"
 version = "1.0.0"
@@ -555,6 +815,18 @@ urllib3 = ">=1.21.1,<3"
 socks = ["PySocks (>=1.5.6,!=1.5.7)"]
 use-chardet-on-py3 = ["chardet (>=3.0.2,<6)"]
 
+[[package]]
+name = "six"
+version = "1.16.0"
+description = "Python 2 and 3 compatibility utilities"
+category = "main"
+optional = false
+python-versions = ">=2.7, !=3.0.*, !=3.1.*, !=3.2.*"
+files = [
+    {file = "six-1.16.0-py2.py3-none-any.whl", hash = "sha256:8abb2f1d86890a2dfb989f9a77cfcfd3e47c2a354b01111771326f8aa26e0254"},
+    {file = "six-1.16.0.tar.gz", hash = "sha256:1e61c37477a1626458e36f7b1d82aa5c9b094fa4802892072e49de9c60c4c926"},
+]
+
 [[package]]
 name = "sniffio"
 version = "1.3.0"
@@ -645,6 +917,26 @@ postgresql-psycopg2cffi = ["psycopg2cffi"]
 pymysql = ["pymysql"]
 sqlcipher = ["sqlcipher3-binary"]
 
+[[package]]
+name = "stack-data"
+version = "0.6.2"
+description = "Extract data from python stack frames and tracebacks for informative displays"
+category = "main"
+optional = false
+python-versions = "*"
+files = [
+    {file = "stack_data-0.6.2-py3-none-any.whl", hash = "sha256:cbb2a53eb64e5785878201a97ed7c7b94883f48b87bfb0bbe8b623c74679e4a8"},
+    {file = "stack_data-0.6.2.tar.gz", hash = "sha256:32d2dd0376772d01b6cb9fc996f3c8b57a357089dec328ed4b6553d037eaf815"},
+]
+
+[package.dependencies]
+asttokens = ">=2.1.0"
+executing = ">=1.2.0"
+pure-eval = "*"
+
+[package.extras]
+tests = ["cython", "littleutils", "pygments", "pytest", "typeguard"]
+
 [[package]]
 name = "starlette"
 version = "0.26.1"
@@ -663,6 +955,34 @@ anyio = ">=3.4.0,<5"
 [package.extras]
 full = ["httpx (>=0.22.0)", "itsdangerous", "jinja2", "python-multipart", "pyyaml"]
 
+[[package]]
+name = "tomli"
+version = "2.0.1"
+description = "A lil' TOML parser"
+category = "main"
+optional = false
+python-versions = ">=3.7"
+files = [
+    {file = "tomli-2.0.1-py3-none-any.whl", hash = "sha256:939de3e7a6161af0c887ef91b7d41a53e7c5a1ca976325f429cb46ea9bc30ecc"},
+    {file = "tomli-2.0.1.tar.gz", hash = "sha256:de526c12914f0c550d15924c62d72abc48d6fe7364aa87328337a31007fe8a4f"},
+]
+
+[[package]]
+name = "traitlets"
+version = "5.9.0"
+description = "Traitlets Python configuration system"
+category = "main"
+optional = false
+python-versions = ">=3.7"
+files = [
+    {file = "traitlets-5.9.0-py3-none-any.whl", hash = "sha256:9e6ec080259b9a5940c797d58b613b5e31441c2257b87c2e795c5228ae80d2d8"},
+    {file = "traitlets-5.9.0.tar.gz", hash = "sha256:f6cde21a9c68cf756af02035f72d5a723bf607e862e7be33ece505abf4a3bad9"},
+]
+
+[package.extras]
+docs = ["myst-parser", "pydata-sphinx-theme", "sphinx"]
+test = ["argcomplete (>=2.0)", "pre-commit", "pytest", "pytest-mock"]
+
 [[package]]
 name = "typing-extensions"
 version = "4.5.0"
@@ -724,7 +1044,19 @@ h11 = ">=0.8"
 [package.extras]
 standard = ["colorama (>=0.4)", "httptools (>=0.5.0)", "python-dotenv (>=0.13)", "pyyaml (>=5.1)", "uvloop (>=0.14.0,!=0.15.0,!=0.15.1)", "watchfiles (>=0.13)", "websockets (>=10.4)"]
 
+[[package]]
+name = "wcwidth"
+version = "0.2.6"
+description = "Measures the displayed width of unicode strings in a terminal"
+category = "main"
+optional = false
+python-versions = "*"
+files = [
+    {file = "wcwidth-0.2.6-py2.py3-none-any.whl", hash = "sha256:795b138f6875577cd91bba52baf9e445cd5118fd32723b460e30a0af30ea230e"},
+    {file = "wcwidth-0.2.6.tar.gz", hash = "sha256:a5220780a404dbe3353789870978e472cfe477761f06ee55077256e509b156d0"},
+]
+
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.10"
-content-hash = "75fdf927f51c8897cfc9bce522da9452e7b627c15b90d3fde523c100efd2a666"
+content-hash = "11cb1358cc5525cd1c4c00e67389cb3e06ecf39b4c5ac263c835c9a2708b048c"
diff --git a/pyproject.toml b/pyproject.toml
index 655cd02ff..779aa357d 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -17,6 +17,7 @@ PyYAML = "^6.0"
 Unidecode = "^1.3.6"
 emoji = "^2.2.0"
 python-dotenv = "^1.0.0"
+ipdb = "^0.13.13"
 
 
 [build-system]

From 7cefa59451025984a3fc650206d32491f758e393 Mon Sep 17 00:00:00 2001
From: zurdi zurdo <zurdizurdo25@gmail.com>
Date: Sun, 14 May 2023 02:30:28 +0200
Subject: [PATCH 2/2] added platforms slug to home page + default platform icon

---
 frontend/assets/platforms/default.ico     | Bin 0 -> 270622 bytes
 frontend/src/components/Home/Platform.vue |  22 +++++++++++++------
 frontend/src/views/Home.vue               |  25 +++++++++++-----------
 3 files changed, 29 insertions(+), 18 deletions(-)
 create mode 100644 frontend/assets/platforms/default.ico

diff --git a/frontend/assets/platforms/default.ico b/frontend/assets/platforms/default.ico
new file mode 100644
index 0000000000000000000000000000000000000000..86bda25c83217197359b14ea130c677d46077691
GIT binary patch
literal 270622
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
ZfCNZ@1W14cNPq-LfCNZ@1lo<j{{u4^1MUC-

literal 0
HcmV?d00001

diff --git a/frontend/src/components/Home/Platform.vue b/frontend/src/components/Home/Platform.vue
index 716604fb4..b9a865545 100644
--- a/frontend/src/components/Home/Platform.vue
+++ b/frontend/src/components/Home/Platform.vue
@@ -1,5 +1,9 @@
 <script setup>
-const props = defineProps(['platform', 'rail'])
+import { ref } from 'vue'
+
+const props = defineProps(['platform'])
+const platformIconUrl = ref('/assets/platforms/' + props.platform.slug + '.ico')
+const platformIconNotFound = () => { platformIconUrl.value = '/assets/platforms/default.ico' }
 </script>
 
 <template>
@@ -7,11 +11,17 @@ const props = defineProps(['platform', 'rail'])
         <v-hover v-slot="{ isHovering, props }">
             <v-card v-bind="props" :class="{ 'on-hover': isHovering }" :elevation="isHovering ? 20 : 3">
                 <v-card-text>
-                    <v-avatar :rounded="0" size="100%">
-                        <v-img :src="'/assets/platforms/' + platform.slug + '.ico'"></v-img>
-                    </v-avatar>
-                    <v-chip class="bg-chip position-absolute" size="small" style="bottom: 1rem; right: 1rem" label>{{
-                        platform.n_roms }}</v-chip>
+                    <v-row class="pa-1 justify-center bg-secondary">
+                        <span class="text-truncate text-overline">{{ platform.slug }}</span>
+                    </v-row>
+                    <v-row class="pa-1 justify-center">
+                        <v-avatar :rounded="0" size="100%" class="mt-2">
+                            <v-img :src="platformIconUrl" @error="platformIconNotFound"></v-img>
+                        </v-avatar>
+                        <v-chip class="bg-chip position-absolute" size="x-small" style="bottom: 1rem; right: 1rem" label>
+                            {{ platform.n_roms }}
+                        </v-chip>
+                    </v-row>
                 </v-card-text>
             </v-card>
         </v-hover>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 5b5b1fe42..cabc23a73 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -12,29 +12,30 @@ const { lgAndUp } = useDisplay()
 
 <template>
     <v-col>
-        <v-card class="mx-auto mt-10" max-width="1000" variant="text">
+        <v-card class="mx-auto mt-10 mb-10" max-width="1000" variant="text">
             <v-img :height="lgAndUp ? 220 : 95" src="/assets/romm_complete.svg" cover />
         </v-card>
 
-        <v-row class="ml-2 mt-6" no-gutters>
+        <v-row no-gutters class="mt-4">
+            <v-chip class="ma-2 bg-chip" label>
+                <span class="text-overline">{{ platforms.value.length }} platforms</span>
+            </v-chip>
+            <v-chip class="ma-2 bg-chip" label>
+                <span class="text-overline">{{ totalGames }} games</span>
+            </v-chip>
+        </v-row>
+
+        <v-row class="ml-3 mt-6" no-gutters>
             <v-avatar :rounded="0" size="auto"><v-icon>mdi-controller</v-icon></v-avatar>
             <span class="text-h6 ml-2">Platforms</span>
         </v-row>
 
         <v-row class="pa-1" no-gutters>
-            <v-col v-for="platform in platforms.value" class="pa-1" :key="platform.slug" :cols="views[1]['size-cols']"
-                :xs="views[1]['size-xs']" :sm="views[1]['size-sm']" :md="views[1]['size-md']" :lg="views[1]['size-lg']">
+            <v-col v-for="platform in platforms.value" class="pa-1" :key="platform.slug"
+                :cols="views[0]['size-cols']" :xs="views[0]['size-xs']" :sm="views[0]['size-sm']" :md="views[0]['size-md']" :lg="views[0]['size-lg']">
                 <platform :platform="platform" :key="platform.slug" />
             </v-col>
         </v-row>
 
-        <v-row no-gutters class="mt-4">
-            <v-chip class="ma-2" label>
-                <span class="text-overline">{{ platforms.value.length }} platforms</span>
-            </v-chip>
-            <v-chip class="ma-2" label>
-                <span class="text-overline">{{ totalGames }} games</span>
-            </v-chip>
-        </v-row>
     </v-col>
 </template>