home page feature part 1

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>