2025-12-29 17:11:15 +00:00
15 changed files with 265 additions and 13 deletions
@@ -22,3 +22,5 @@
 Homestead.json
 Homestead.yaml
 Thumbs.db
+
+composer.lock
@@ -9,13 +9,12 @@
    "cssVariables": true,
    "prefix": ""
  },
-  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
+    "composables": "@/composables",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "composables": "@/composables"
+    "lib": "@/lib"
  },
-  "registries": {}
-}
+  "iconLibrary": "lucide"
+}
@@ -15,6 +15,7 @@
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "date-fns": "^4.1.0",
+        "lucide-react": "^0.562.0",
        "lucide-vue-next": "^0.554.0",
        "pinia": "^3.0.3",
        "reka-ui": "^2.6.0",
@@ -3984,6 +3985,15 @@
        "yallist": "^3.0.2"
      }
    },
+    "node_modules/lucide-react": {
+      "version": "0.562.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz",
+      "integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/lucide-vue-next": {
      "version": "0.554.0",
      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.554.0.tgz",
@@ -4369,6 +4379,16 @@
        "node": ">=6"
      }
    },
+    "node_modules/react": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
+      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/reka-ui": {
      "version": "2.7.0",
      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.7.0.tgz",
@@ -21,6 +21,7 @@
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "date-fns": "^4.1.0",
+    "lucide-react": "^0.562.0",
    "lucide-vue-next": "^0.554.0",
    "pinia": "^3.0.3",
    "reka-ui": "^2.6.0",
@@ -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>