96 lines
3.0 KiB
Vue
96 lines
3.0 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 />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useCardStore } from "~/store/Card";
|
|
|
|
const cardStore = useCardStore();
|
|
|
|
cardStore.fetchCollections();
|
|
/*
|
|
cardStore.cards = [
|
|
{
|
|
id: 1,
|
|
name: "Pipi",
|
|
url: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
|
},
|
|
|
|
{
|
|
id: 2,
|
|
name: "Pipi",
|
|
url: "https://images.unsplash.com/photo-1512374382149-233c42b6a83b?q=80&w=2235&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
|
},
|
|
|
|
{
|
|
id: 3,
|
|
name: "Pipi",
|
|
url: "https://images.unsplash.com/photo-1539185441755-769473a23570?q=80&w=2342&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
|
},
|
|
|
|
{
|
|
id: 4,
|
|
name: "Pipi",
|
|
url: "https://images.unsplash.com/photo-1549298916-b41d501d3772?q=80&w=2224&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
|
},
|
|
|
|
{
|
|
id: 5,
|
|
name: "Pipi",
|
|
url: "https://images.unsplash.com/photo-1516478177764-9fe5bd7e9717?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
|
},
|
|
|
|
{
|
|
id: 6,
|
|
name: "Pipi",
|
|
url: "https://images.unsplash.com/photo-1570464197285-9949814674a7?q=80&w=2273&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
|
},
|
|
|
|
{
|
|
id: 7,
|
|
name: "Pipi",
|
|
url: "https://images.unsplash.com/photo-1578608712688-36b5be8823dc?q=80&w=2187&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
|
},
|
|
|
|
{
|
|
id: 8,
|
|
name: "Pipi",
|
|
url: "https://images.unsplash.com/photo-1505784045224-1247b2b29cf3?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
|
},
|
|
]; */
|
|
|
|
const activeItem = ref();
|
|
|
|
const play = (collection: string) => {
|
|
navigateTo({ path: "game", query: { collection: collection } });
|
|
};
|
|
</script>
|