46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<template>
|
|
<div class="flex min-h-screen flex-col items-center justify-center gap-5">
|
|
<h1 class="mb-8 text-3xl font-bold">Select a collection to begin</h1>
|
|
<ul class="w-full max-w-md space-y-4">
|
|
<li
|
|
v-for="collection in cardStore.collections"
|
|
:key="collection.name"
|
|
class="flex items-center justify-between rounded p-4 shadow"
|
|
>
|
|
<span class="text-lg font-bold">{{ collection.name }}</span>
|
|
<!-- Large Play Button -->
|
|
<Button
|
|
icon="pi pi-play"
|
|
rounded
|
|
class="flex items-center justify-center bg-blue-600 text-white"
|
|
:class="{
|
|
'!h-32 !w-32': activeItem === collection,
|
|
'!h-16 !w-16': activeItem !== collection,
|
|
}"
|
|
style="
|
|
transition:
|
|
width 0.3s,
|
|
height 0.3s;
|
|
"
|
|
@click="play(collection.name)"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
<UploadView v-if="config.public.isUploadActive" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useCardStore } from "~/store/Card";
|
|
|
|
const config = useRuntimeConfig();
|
|
const cardStore = useCardStore();
|
|
|
|
cardStore.fetchCollections();
|
|
|
|
const activeItem = ref();
|
|
const play = (collection: string) => {
|
|
navigateTo({ path: "game", query: { collection: collection } });
|
|
};
|
|
</script>
|