home page feature part 1

2025-12-21 23:12:13 +00:00
parent 8a6e0d0255
commit e8ccea4e42
16 changed files with 265 additions and 9405 deletions
@@ -0,0 +1,21 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    :class="
+      cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,21 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    data-slot="card-action"
+    :class="
+      cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,13 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div data-slot="card-content" :class="cn('px-6', props.class)">
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </p>
+</template>
@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    data-slot="card-footer"
+    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,21 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    data-slot="card-header"
+    :class="
+      cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <h3
+    data-slot="card-title"
+    :class="cn('leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </h3>
+</template>
@@ -0,0 +1,7 @@
+export { default as Card } from "./Card.vue";
+export { default as CardAction } from "./CardAction.vue";
+export { default as CardContent } from "./CardContent.vue";
+export { default as CardDescription } from "./CardDescription.vue";
+export { default as CardFooter } from "./CardFooter.vue";
+export { default as CardHeader } from "./CardHeader.vue";
+export { default as CardTitle } from "./CardTitle.vue";
@@ -39,6 +39,9 @@
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
 }

 :root {
@@ -1,5 +1,5 @@
 import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { twMerge } from "tailwind-merge"

 export function cn(...inputs) {
  return twMerge(clsx(inputs));
@@ -1,11 +1,107 @@
-<template>
-    <div>
-
-    </div>
-</template>
-
 <script setup>
+import { ref, onMounted } from 'vue'
+import { Button } from '@/components/ui/button'
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle
+} from '@/components/ui/card'

+//import { useRouter } from 'vue-router'
+
+//import { useGameStore } from '@/stores/game'
+import { useAPIStore } from '@/stores/api'
+
+//const gameStore = useGameStore()
+const apiStore = useAPIStore()
+
+const highScores = ref([])
+
+/* const startGame = () => {
+    gameStore.difficulty = selectedDifficulty.value
+    router.push({ name: 'singleplayer' })
+} */
+
+onMounted(async () => {
+    const response = await apiStore.getGames()
+
+    highScores.value = response.data.data
+        .map(item => ({
+            points: item.player1_points,
+            time: item.total_time,
+            username: item.player1?.name
+        }))
+        .sort((a, b) => a.time - b.time == 0 ? a.player1_points - b.player1_points : a.time - b.time)
+        .slice(0, 3)
+})
 </script>

-<style scoped></style>`
+<template>
+    <div class="flex flex-row justify-center items-stretch gap-5 mt-10">
+        <Card class="w-full max-w-md">
+            <CardHeader>
+                <CardTitle class="text-3xl font-bold text-center">
+                    Single Player
+                </CardTitle>
+                <CardDescription class="text-center">
+                    Test your memory by finding matching pairs!
+                </CardDescription>
+            </CardHeader>
+            <CardContent class="space-y-6">
+                <div class="space-y-2">
+                    <label class="text-sm font-medium">High Scores (local)</label>
+                    <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
+                        <div class="max-h-64 overflow-y-auto">
+                            <div v-if="highScores.length === 0" class="p-6 text-center text-sm text-muted-foreground">
+                                No high scores yet. Be the first!
+                            </div>
+                            <div v-else class="divide-y">
+                                <div v-for="(score, index) in highScores" :key="index"
+                                    class="flex items-center justify-between p-3 hover:bg-muted/50 transition-colors">
+                                    <div class="flex items-center gap-3">
+                                        <div class="flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold"
+                                            :class="{
+                                                'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300': index === 0,
+                                                'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300': index === 1,
+                                                'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300': index === 2,
+                                                'bg-muted text-muted-foreground': index > 2
+                                            }">
+                                            {{ index + 1 }}
+                                        </div>
+                                        <div>
+                                            <div class="font-medium text-sm">{{ score.player1_points }} Moves -- {{
+                                                score.username }}</div>
+                                            <div class="text-xs text-muted-foreground">{{ score.time }} /s</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex justify-center">
+                    <Button @click="startGame" size="lg" variant="secondary"
+                        class="hover:bg-purple-500 hover:text-slate-200">
+                        Start Game
+                    </Button>
+                </div>
+            </CardContent>
+        </Card>
+        <Card class="w-full max-w-md">
+            <CardHeader>
+                <CardTitle class="text-3xl font-bold text-center">
+                    MultiPlayer
+                </CardTitle>
+                <CardDescription class="text-center">
+                    Comming Soon!!
+                </CardDescription>
+            </CardHeader>
+            <CardContent class="space-y-6">
+
+            </CardContent>
+        </Card>
+    </div>
+</template>