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

fix css

Browse Source
This commit is contained in:
TDLaouer 2025-07-14 14:23:56 +02:00
parent c692ab8b73
commit 527d4b0bfb
2 changed files with 45 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
components/CardView.vue
View File

@ -1,46 +1,50 @@
<template>
<motion.img
v-if="currentCard"
:src="currentCard?.image"
draggable="false"
class="h-[60cqh] max-h-[800px] w-[400px] origin-bottom rounded-lg object-cover hover:cursor-grab active:cursor-grabbing md:w-[600px]"
:style="{
gridRow: 1,
gridColumn: 1,
transition: '0.125s transform',
x,
opacity,
rotate,
boxShadow:
'0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5)',
}"
:alt="currentCard?.name"
drag="x"
:drag-constraints="{ left: 0, right: 0 }"
:on-drag-end="handleDragEnd"
/>
<h1 class="h-2 text-5xl">{{ currentCard?.name }}</h1>
<div class="flex min-h-screen flex-col items-center justify-center">
<div class="grid place-items-center">
<motion.img
v-if="currentCard"
:src="currentCard?.image"
draggable="false"
class="h-auto max-h-screen w-[400px] origin-bottom rounded-lg object-cover hover:cursor-grab active:cursor-grabbing md:w-[600px]"
:style="{
gridRow: 1,
gridColumn: 1,
transition: '0.125s transform',
x,
opacity,
rotate,
boxShadow:
'0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5)',
}"
:alt="currentCard?.name"
drag="x"
:drag-constraints="{ left: 0, right: 0 }"
:on-drag-end="handleDragEnd"
/>
</div>
<h1 class="my-5 text-5xl">{{ currentCard?.name }}</h1>
<div v-if="currentCard" class="flex justify-between">
<!-- Pass Button -->
<button
class="mx-12 flex h-24 w-42 flex-col items-center justify-center rounded-xl bg-violet-500 text-4xl text-white shadow-lg transition-colors duration-150 hover:bg-violet-600 focus:ring-4 focus:ring-violet-300 focus:outline-none"
aria-label="Pass"
type="button"
@click="swipeLeft"
>
<span class="text-base font-semibold">Pass</span>
</button>
<div v-if="currentCard" class="my-5 flex justify-between">
<!-- Pass Button -->
<button
class="mx-12 flex h-24 w-42 flex-col items-center justify-center rounded-xl bg-violet-500 text-4xl text-white shadow-lg transition-colors duration-150 hover:bg-violet-600 focus:ring-4 focus:ring-violet-300 focus:outline-none"
aria-label="Pass"
type="button"
@click="swipeLeft"
>
<span class="text-base font-semibold">Pass</span>
</button>
<!-- Smash Button -->
<button
class="mx-12 flex h-24 w-42 flex-col items-center justify-center rounded-xl bg-teal-500 text-4xl text-white shadow-lg transition-colors duration-150 hover:bg-teal-600 focus:ring-4 focus:ring-teal-300 focus:outline-none"
aria-label="Smash"
type="button"
@click="swipeRight"
>
<span class="text-base font-semibold">Smash</span>
</button>
<!-- Smash Button -->
<button
class="mx-12 flex h-24 w-42 flex-col items-center justify-center rounded-xl bg-teal-500 text-4xl text-white shadow-lg transition-colors duration-150 hover:bg-teal-600 focus:ring-4 focus:ring-teal-300 focus:outline-none"
aria-label="Smash"
type="button"
@click="swipeRight"
>
<span class="text-base font-semibold">Smash</span>
</button>
</div>
</div>
</template>

4
pages/game.vue
View File

@ -1,8 +1,6 @@
<template>
<div v-if="loading">Loading...</div>
<div v-else class="grid min-h-screen place-items-center">
<CardView :cards="cardStore.cards" @empty-list="showResults" />
</div>
<CardView v-else :cards="cardStore.cards" @empty-list="showResults" />
</template>
<script setup lang="ts">