From c68cda350e79ad5a8eb0aa3cb2502885d482fdda Mon Sep 17 00:00:00 2001
From: Edd <edd.ddev@gmail.com>
Date: Sun, 21 Dec 2025 23:12:13 +0000
Subject: [PATCH] home page feature part 1

---
 api/.gitignore                                |   2 +
 frontend/components.json                      |   9 +-
 frontend/package-lock.json                    |  20 ++++
 frontend/package.json                         |   1 +
 frontend/src/components/ui/card/Card.vue      |  21 ++++
 .../src/components/ui/card/CardAction.vue     |  21 ++++
 .../src/components/ui/card/CardContent.vue    |  13 +++
 .../components/ui/card/CardDescription.vue    |  16 +++
 .../src/components/ui/card/CardFooter.vue     |  16 +++
 .../src/components/ui/card/CardHeader.vue     |  21 ++++
 frontend/src/components/ui/card/CardTitle.vue |  16 +++
 frontend/src/components/ui/card/index.js      |   7 ++
 frontend/src/index.css                        |   3 +
 frontend/src/lib/utils.js                     |   2 +-
 frontend/src/pages/home/HomePage.vue          | 110 ++++++++++++++++--
 15 files changed, 265 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/ui/card/Card.vue
 create mode 100644 frontend/src/components/ui/card/CardAction.vue
 create mode 100644 frontend/src/components/ui/card/CardContent.vue
 create mode 100644 frontend/src/components/ui/card/CardDescription.vue
 create mode 100644 frontend/src/components/ui/card/CardFooter.vue
 create mode 100644 frontend/src/components/ui/card/CardHeader.vue
 create mode 100644 frontend/src/components/ui/card/CardTitle.vue
 create mode 100644 frontend/src/components/ui/card/index.js

diff --git a/api/.gitignore b/api/.gitignore
index b71b1ea..827ebf2 100644
--- a/api/.gitignore
+++ b/api/.gitignore
@@ -22,3 +22,5 @@
 Homestead.json
 Homestead.yaml
 Thumbs.db
+
+composer.lock
\ No newline at end of file
diff --git a/frontend/components.json b/frontend/components.json
index 28910c9..ef4a241 100644
--- a/frontend/components.json
+++ b/frontend/components.json
@@ -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"
+}
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c5e0261..dd16361 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -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",
diff --git a/frontend/package.json b/frontend/package.json
index 869fd35..11ff168 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -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",
diff --git a/frontend/src/components/ui/card/Card.vue b/frontend/src/components/ui/card/Card.vue
new file mode 100644
index 0000000..16920e4
--- /dev/null
+++ b/frontend/src/components/ui/card/Card.vue
@@ -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>
diff --git a/frontend/src/components/ui/card/CardAction.vue b/frontend/src/components/ui/card/CardAction.vue
new file mode 100644
index 0000000..4c13362
--- /dev/null
+++ b/frontend/src/components/ui/card/CardAction.vue
@@ -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>
diff --git a/frontend/src/components/ui/card/CardContent.vue b/frontend/src/components/ui/card/CardContent.vue
new file mode 100644
index 0000000..f54f541
--- /dev/null
+++ b/frontend/src/components/ui/card/CardContent.vue
@@ -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>
diff --git a/frontend/src/components/ui/card/CardDescription.vue b/frontend/src/components/ui/card/CardDescription.vue
new file mode 100644
index 0000000..199875d
--- /dev/null
+++ b/frontend/src/components/ui/card/CardDescription.vue
@@ -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>
diff --git a/frontend/src/components/ui/card/CardFooter.vue b/frontend/src/components/ui/card/CardFooter.vue
new file mode 100644
index 0000000..a28c159
--- /dev/null
+++ b/frontend/src/components/ui/card/CardFooter.vue
@@ -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>
diff --git a/frontend/src/components/ui/card/CardHeader.vue b/frontend/src/components/ui/card/CardHeader.vue
new file mode 100644
index 0000000..cc387d1
--- /dev/null
+++ b/frontend/src/components/ui/card/CardHeader.vue
@@ -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>
diff --git a/frontend/src/components/ui/card/CardTitle.vue b/frontend/src/components/ui/card/CardTitle.vue
new file mode 100644
index 0000000..bb88bf0
--- /dev/null
+++ b/frontend/src/components/ui/card/CardTitle.vue
@@ -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>
diff --git a/frontend/src/components/ui/card/index.js b/frontend/src/components/ui/card/index.js
new file mode 100644
index 0000000..409685b
--- /dev/null
+++ b/frontend/src/components/ui/card/index.js
@@ -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";
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 7550e24..8620d9c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -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 {
diff --git a/frontend/src/lib/utils.js b/frontend/src/lib/utils.js
index 378ccef..b20bf01 100644
--- a/frontend/src/lib/utils.js
+++ b/frontend/src/lib/utils.js
@@ -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));
diff --git a/frontend/src/pages/home/HomePage.vue b/frontend/src/pages/home/HomePage.vue
index 939fae6..5c93924 100644
--- a/frontend/src/pages/home/HomePage.vue
+++ b/frontend/src/pages/home/HomePage.vue
@@ -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>