rom details view added

frontend/src/App.vue

@@ -1,17 +1,24 @@
 <script setup>
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 import { useTheme } from "vuetify";
 import PlatformsBar from '@/components/PlatformsBar.vue'
 
 
-const romsGalleryRef = ref(null)
+const router = useRouter()
+const viewComponent = ref(null)
 useTheme().global.name.value = localStorage.getItem('theme') || 'dark'
 
 
-function getRoms(platformSlug){
-  romsGalleryRef.value.getRoms(platformSlug)
+async function getRoms(platformSlug){
+  await router.push('/')
+  viewComponent.value.getRoms(platformSlug)
 }
 
+async function getRomDetails(rom) {
+  await router.push('/details')
+  viewComponent.value.getRomDetails(rom)
+}
 </script>
 
 <template>
@@ -21,7 +28,9 @@ function getRoms(platformSlug){
 
     <v-main>
       <v-container fluid>
-        <router-view v-slot="{ Component }"> <component ref="romsGalleryRef" :is="Component" /></router-view>
+        <router-view v-slot="{ Component }">
+          <component ref="viewComponent" :is="Component" @currentRom="(rom) => getRomDetails(rom)"/>
+        </router-view>
       </v-container>
     </v-main>
 

frontend/src/components/PlatformsBar.vue

@@ -46,7 +46,6 @@ function toggleTheme () {
     darkMode.value ? localStorage.setItem('theme', 'dark') : localStorage.setItem('theme', 'light')
 }
 
-
 getPlatforms()
 </script>
 

frontend/src/components/RomsDetail.vue

@@ -0,0 +1,23 @@
+<script setup>
+import axios from 'axios'
+import { ref } from "vue";
+
+
+const currentRom = ref("")
+
+
+function getRomDetails(rom){
+    currentRom.value = rom.name
+}
+
+defineExpose({ getRomDetails })
+</script>
+
+<template>
+    <v-row>
+        <h3>{{ currentRom }}</h3>
+    </v-row>
+</template>
+
+<style scoped>
+</style>

frontend/src/components/RomsGallery.vue

@@ -3,6 +3,7 @@ import axios from 'axios'
 import { ref, onMounted } from "vue";
 
 
+const emit = defineEmits(['currentRom'])
 const roms = ref([])
 const currentPlatformSlug = localStorage.getItem('currentPlatformSlug') || ""
 
@@ -24,6 +25,11 @@ function downloadSave(name) {
     console.log("Downloading "+name+" save file")
 }
 
+function selectRom(rom){    
+    console.log("Selected rom "+rom.name)
+    emit('currentRom', rom)
+}
+
 function editCover(rom) {
     console.log("Editing "+rom.name)
 }
@@ -47,6 +53,7 @@ onMounted(() => { if(currentPlatformSlug){ getRoms(currentPlatformSlug) } })
                             </div>
                         </template>
                         <div v-if="!rom.slug" class="d-flex align-center text-body-1 pt-2 pr-5 pb-2 pl-5 bg-secondary rom-title" >{{ rom.name }}</div>
+                        <v-btn class="d-flex align-center justify-center fill-height" color="transparent" @click="selectRom(rom)" block></v-btn>
                     </v-img>
 
                     <v-card-text>
@@ -63,7 +70,7 @@ onMounted(() => { if(currentPlatformSlug){ getRoms(currentPlatformSlug) } })
         </v-col>
     </v-row>
     <v-row v-if="roms.length == 0" class="d-flex align-center justify-center fill-height">
-        <div class="mt-16 pt-16 text-h6">Feels alone here <v-icon>mdi-emoticon-sad</v-icon></div>
+        <div class="mt-16 pt-16 text-h6">Feels cold here <v-icon>mdi-emoticon-sad</v-icon></div>
     </v-row>
 
 </template>
@@ -78,7 +85,6 @@ onMounted(() => { if(currentPlatformSlug){ getRoms(currentPlatformSlug) } })
 .rom-title:not(.on-hover) {
     opacity: 0.85;
 }
-
 .v-card.on-hover {
     opacity: 1;
 }

frontend/src/router/index.js

@@ -6,6 +6,10 @@ const routes = [
     path: '/',
     component: () => import('@/components/RomsGallery.vue')
   },
+  {
+    path: '/details',
+    component: () => import('@/components/RomsDetail.vue')
+  }
 ]
 
 const router = createRouter({