build: initialize RetroHub with Laravel, Inertia, Vue, and Horizon

2026-08-10 13:45:18 +02:00
commit 717db65139
218 changed files with 28356 additions and 0 deletions
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import AppLayout from '@/Shared/Layouts/AppLayout.vue';
+import { Head, Link } from '@inertiajs/vue3';
+import type { ConsoleData } from '@/types';
+
+interface Props {
+    consoles: ConsoleData[];
+    user: {
+        name: string;
+        email: string;
+    };
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <AppLayout title="Consoles" :user="user">
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Consoles</h2>
+        </template>
+
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                    <Link
+                        v-for="console in consoles"
+                        :key="console.id"
+                        :href="route('consoles.show', console.slug)"
+                        class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6 hover:shadow-2xl transition-shadow"
+                    >
+                        <div class="text-center">
+                            <div class="w-20 h-20 mx-auto mb-4 bg-purple-100 rounded-full flex items-center justify-center">
+                                <span class="text-2xl">🎮</span>
+                            </div>
+                            <h3 class="font-semibold text-lg">{{ console.name }}</h3>
+                            <p class="text-gray-500 text-sm mt-1">{{ console.gamesCount }} games</p>
+                        </div>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    </AppLayout>
+</template>
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import AppLayout from '@/Shared/Layouts/AppLayout.vue';
+import { Head, Link } from '@inertiajs/vue3';
+import type { ConsoleData, GameData } from '@/types';
+
+interface PaginatedGames {
+    data: GameData[];
+    links: Array<{ url: string | null; label: string; active: boolean }>;
+}
+
+interface Props {
+    selectedConsole: ConsoleData;
+    games: PaginatedGames;
+    user: {
+        name: string;
+        email: string;
+    };
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <AppLayout :title="selectedConsole.name" :user="user">
+        <template #header>
+            <div class="flex items-center gap-2">
+                <Link :href="route('consoles.index')" class="text-purple-600 hover:underline">
+                    Consoles
+                </Link>
+                <span class="text-gray-400">/</span>
+                <h2 class="font-semibold text-xl text-gray-800 leading-tight">{{ selectedConsole.name }}</h2>
+            </div>
+        </template>
+
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                <div v-if="games.data.length === 0" class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-12 text-center">
+                    <p class="text-gray-500 text-lg">No games found for this console.</p>
+                    <Link
+                        :href="route('upload.index')"
+                        class="mt-4 inline-block bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded"
+                    >
+                        Upload ROMs
+                    </Link>
+                </div>
+
+                <div v-else class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+                    <Link
+                        v-for="game in games.data"
+                        :key="game.id"
+                        :href="route('games.show', game.slug)"
+                        class="bg-white overflow-hidden shadow-xl sm:rounded-lg overflow-hidden hover:shadow-2xl transition-shadow"
+                    >
+                        <div class="aspect-[3/4] bg-gray-200 flex items-center justify-center overflow-hidden">
+                            <img
+                                v-if="game.coverPath"
+                                :src="'/storage/' + game.coverPath"
+                                :alt="game.title"
+                                class="w-full h-full object-cover"
+                            />
+                            <span v-else class="text-gray-400 text-sm">No cover</span>
+                        </div>
+                        <div class="p-2">
+                            <div class="font-medium text-sm truncate">{{ game.title }}</div>
+                            <div class="text-xs text-gray-500">{{ game.romFiles?.length ?? 0 }} ROM(s)</div>
+                        </div>
+                    </Link>
+                </div>
+
+                <!-- Pagination -->
+                <div v-if="games.links.length > 3" class="mt-8 flex justify-center gap-2">
+                    <Link
+                        v-for="link in games.links"
+                        :key="link.label"
+                        :href="link.url || '#'"
+                        class="px-3 py-1 rounded text-sm"
+                        :class="{
+                            'bg-purple-600 text-white': link.active,
+                            'bg-white text-gray-700 hover:bg-gray-50': !link.active && link.url,
+                            'text-gray-300 cursor-not-allowed': !link.url,
+                        }"
+                        v-html="link.label"
+                    />
+                </div>
+            </div>
+        </div>
+    </AppLayout>
+</template>