TDLaouer/sop-nuxt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
TDLaouer
2025-07-12 14:17:55 +02:00
commit f74eb98414
21 changed files with 8751 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
pages/game.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<div class="grid min-h-screen place-items-center">
<CardView
v-for="(card, index) in cardStore.cards"
:key="card.id"
:card="card"
:is-front="index === cardStore.cards.length - 1"
:z="index"
/>
</div>
</template>
<script setup lang="ts">
import CardView from "~/components/CardView.vue";
import { useCardStore } from "~/store/Card";
const route = useRoute();
const collection = route.query.collection;
const cardStore = useCardStore();
</script>

94
pages/index.vue Normal file
View File

@@ -0,0 +1,94 @@
<template>
<div class="flex min-h-screen flex-col items-center justify-center">
<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"
class="flex items-center justify-between rounded p-4 shadow"
>
<span class="text-lg font-medium">{{ collection }}</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)"
/>
</li>
</ul>
</div>
</template>
<script setup lang="ts">
import { useCardStore } from "~/store/Card";
const cardStore = useCardStore();
cardStore.collections = ["Test", "Test1"];
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>

68
pages/result.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<div class="flex min-h-screen flex-col items-center gap-10">
<div class="flex items-start justify-center space-x-8 p-8">
<!-- First Grid -->
<div class="w-1/2">
<h2 class="mb-4 text-xl font-bold">You smashed</h2>
<div
class="grid grid-cols-1 gap-2 lg:grid-cols-3 xl:grid-cols-5 xl:gap-4"
>
<div
v-for="(img, idx) in imagesListOne"
:key="idx"
class="flex items-center justify-center rounded p-2 shadow"
>
<img
:src="img"
alt="Image from Smash List"
class="h-32 w-full rounded object-cover"
/>
</div>
</div>
</div>
<!-- Second Grid -->
<div class="w-1/2">
<h2 class="mb-4 text-xl font-bold">You passed</h2>
<div
class="grid grid-cols-1 gap-2 lg:grid-cols-3 xl:grid-cols-5 xl:gap-4"
>
<div
v-for="(img, idx) in imagesListTwo"
:key="idx"
class="flex items-center justify-center rounded p-2 shadow"
>
<img
:src="img"
alt="Image from pass list"
class="h-32 w-full rounded object-cover"
/>
</div>
</div>
</div>
</div>
<Button label="Return" class="h-16 w-64" />
</div>
</template>
<script setup>
const imagesListOne = [
// Replace with your image URLs
"https://picsum.photos/id/1011/200/200",
"https://picsum.photos/id/1012/800/400",
"https://picsum.photos/id/1013/200/200",
"https://picsum.photos/id/1014/200/200",
"https://picsum.photos/id/1015/200/200",
"https://picsum.photos/id/1016/200/200",
// ...more images
];
const imagesListTwo = [
"https://picsum.photos/id/1021/200/200",
"https://picsum.photos/id/1022/200/200",
"https://picsum.photos/id/1023/200/200",
"https://picsum.photos/id/1024/200/200",
"https://picsum.photos/id/1025/200/200",
"https://picsum.photos/id/1026/200/200",
// ...more images
];
</script>