diff --git a/frontend/src/components/Details/BackgroundHeader.vue b/frontend/src/components/Details/BackgroundHeader.vue index e6004792a..252e71efe 100644 --- a/frontend/src/components/Details/BackgroundHeader.vue +++ b/frontend/src/components/Details/BackgroundHeader.vue @@ -3,9 +3,14 @@ import storeRoms from "@/stores/roms"; import { getMissingCoverImage, getUnmatchedCoverImage } from "@/utils/covers"; import { storeToRefs } from "pinia"; import { computed } from "vue"; +import { useRouter } from "vue-router"; +import { useDisplay } from "vuetify"; const romsStore = storeRoms(); -const { currentRom } = storeToRefs(romsStore); +const { currentRom, filteredRoms } = storeToRefs(romsStore); +const router = useRouter(); +const { smAndUp } = useDisplay(); + const missingCoverImage = computed(() => getMissingCoverImage( currentRom.value?.name || currentRom.value?.fs_name || "", @@ -16,6 +21,22 @@ const unmatchedCoverImage = computed(() => currentRom.value?.name || currentRom.value?.fs_name || "", ), ); + +const currentRomIndex = computed(() => + filteredRoms.value.findIndex((rom) => rom.id === currentRom.value?.id), +); + +function previousRom() { + if (currentRomIndex.value > 0) { + router.push(`/rom/${filteredRoms.value[currentRomIndex.value - 1].id}`); + } +} + +function nextRom() { + if (currentRomIndex.value < filteredRoms.value.length - 1) { + router.push(`/rom/${filteredRoms.value[currentRomIndex.value + 1].id}`); + } +} + + + mdi-arrow-left + + + mdi-arrow-right + + diff --git a/frontend/src/components/Details/Info/GameInfo.vue b/frontend/src/components/Details/Info/GameInfo.vue index 2c3d23a62..a7de8b490 100644 --- a/frontend/src/components/Details/Info/GameInfo.vue +++ b/frontend/src/components/Details/Info/GameInfo.vue @@ -1,8 +1,7 @@