66 lines
1.9 KiB
Vue
66 lines
1.9 KiB
Vue
<template>
|
|
<div class="flex h-screen w-screen bg-black text-white">
|
|
<!-- Sidebar -->
|
|
<Sidebar
|
|
:tags="tags"
|
|
:selectedTag="selectedTag"
|
|
@selectTag="store.selectTag"
|
|
@openOptions="optionsOpen = true"
|
|
/>
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex flex-col flex-1 overflow-hidden">
|
|
<div class="flex-1 overflow-hidden">
|
|
<GamePreview
|
|
:game="selectedGame"
|
|
@qr="store.showQr"
|
|
/>
|
|
</div>
|
|
<GameCarousel
|
|
:games="store.filteredGames"
|
|
:selectedGame="selectedGame"
|
|
:selectedTag="selectedTag"
|
|
:direction="transitionDirection"
|
|
@selectGame="store.selectGame"
|
|
/>
|
|
</div>
|
|
|
|
<OptionsModal v-if="optionsOpen" @close="optionsOpen = false" />
|
|
<QrModal v-if="qrLink" :link="qrLink" @close="qrLink = ''" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted } from 'vue';
|
|
import Sidebar from './components/Sidebar.vue';
|
|
import GamePreview from './components/GamePreview.vue';
|
|
import GameCarousel from './components/GameCarousel.vue';
|
|
import OptionsModal from './components/OptionsModal.vue';
|
|
import QrModal from './components/QrModal.vue';
|
|
import { useKeyboardNavigation } from './utils/use-keyboard-navigation';
|
|
import { fetchGames } from './services/game-service';
|
|
import { useAppStore } from "./stores/app-store";
|
|
import { storeToRefs } from "pinia";
|
|
import { KeyboardManager } from "./utils/keyboard-manager";
|
|
|
|
const store = useAppStore();
|
|
const { selectedTag, selectedGame, tags, games, transitionDirection, qrLink } = storeToRefs(store);
|
|
|
|
const optionsOpen = ref(false);
|
|
|
|
onMounted(async () => {
|
|
games.value = await fetchGames();
|
|
tags.value = [...new Set(games.value.flatMap(game => game.Genres.split(",")))];
|
|
store.selectTag(tags.value[0])
|
|
});
|
|
|
|
KeyboardManager.switchContext("sidebar")
|
|
useKeyboardNavigation();
|
|
</script>
|
|
|
|
<style scoped>
|
|
body {
|
|
overflow: hidden;
|
|
}
|
|
</style>
|