api/.gitignore

@@ -22,3 +22,5 @@
 Homestead.json
 Homestead.yaml
 Thumbs.db
+
+composer.lock

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"
+}

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",

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",

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>

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>

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>

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>

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>

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>

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>

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";

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 {

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));

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>