71 lines
2.3 KiB
Vue
71 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, computed } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import { useStorage, useTitle } from "@vueuse/core";
|
|
import { gamesApiListEventSteamGames } from "./api";
|
|
import type { SteamGameOut } from "./api/types.gen";
|
|
import SteamLibraryCard from "./components/SteamLibraryCard.vue";
|
|
import SteamStoreCard from "./components/SteamStoreCard.vue";
|
|
|
|
interface Props {
|
|
eventPath: string;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const { t } = useI18n();
|
|
useTitle(computed(() => t("games.title")));
|
|
|
|
const games = ref<SteamGameOut[]>([]);
|
|
const loading = ref(true);
|
|
// Library (vertical covers) by default, the store cards show the prices
|
|
const showPrices = useStorage("games.showPrices", true);
|
|
|
|
onMounted(async () => {
|
|
const response = await gamesApiListEventSteamGames({
|
|
path: { event_path: props.eventPath },
|
|
});
|
|
if (response.data) {
|
|
games.value = response.data;
|
|
}
|
|
loading.value = false;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex-1 bg-base-300 flex justify-center px-4 py-12">
|
|
<div class="w-full max-w-7xl">
|
|
<!-- Header -->
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-5xl font-bold mb-4">{{ t("games.title") }}</h1>
|
|
<p class="text-xl text-base-content/70">{{ t("games.subtitle") }}</p>
|
|
</div>
|
|
|
|
<div class="flex justify-end mb-6">
|
|
<label class="label cursor-pointer gap-2">
|
|
<span>{{ t("games.showPrices") }}</span>
|
|
<input v-model="showPrices" type="checkbox" class="toggle toggle-primary" />
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Loading -->
|
|
<div v-if="loading" class="flex justify-center py-20">
|
|
<span class="loading loading-spinner loading-lg"></span>
|
|
</div>
|
|
|
|
<p v-else-if="!games.length" class="text-center text-base-content/50 py-20">
|
|
{{ t("games.empty") }}
|
|
</p>
|
|
|
|
<div v-else-if="showPrices" class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<SteamStoreCard v-for="game in games" :key="game.id" :game="game" />
|
|
</div>
|
|
|
|
<div v-else
|
|
class="grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] sm:grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-4 sm:gap-6">
|
|
<SteamLibraryCard v-for="game in games" :key="game.id" :game="game" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|