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,142 @@
+<script setup lang="ts">
+import AppLayout from '@/Shared/Layouts/AppLayout.vue';
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import type { ConsoleData } from '@/types';
+import { ref } from 'vue';
+
+interface Props {
+    consoles: ConsoleData[];
+    user: {
+        name: string;
+        email: string;
+    };
+}
+
+defineProps<Props>();
+
+const form = useForm({
+    console_id: '',
+    rom_files: [] as File[],
+});
+
+const fileInput = ref<HTMLInputElement | null>(null);
+const isDragging = ref(false);
+
+const handleFileSelect = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    if (target.files) {
+        form.rom_files = Array.from(target.files);
+    }
+};
+
+const handleDrop = (e: DragEvent) => {
+    isDragging.value = false;
+    if (e.dataTransfer?.files) {
+        form.rom_files = Array.from(e.dataTransfer.files);
+    }
+};
+
+const submit = () => {
+    form.post(route('upload.store'), {
+        preserveScroll: true,
+        onSuccess: () => {
+            form.reset();
+        },
+    });
+};
+</script>
+
+<template>
+    <AppLayout title="Upload ROMs" :user="user">
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Upload ROMs</h2>
+        </template>
+
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
+                    <form @submit.prevent="submit" class="space-y-6">
+                        <!-- Console Selection -->
+                        <div>
+                            <label for="console" class="block text-sm font-medium text-gray-700">Select Console</label>
+                            <select
+                                id="console"
+                                v-model="form.console_id"
+                                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500"
+                                required
+                            >
+                                <option value="">Choose a console...</option>
+                                <option v-for="console in consoles" :key="console.id" :value="console.id">
+                                    {{ console.name }}
+                                </option>
+                            </select>
+                        </div>
+
+                        <!-- File Drop Zone -->
+                        <div
+                            @dragover.prevent="isDragging = true"
+                            @dragleave.prevent="isDragging = false"
+                            @drop.prevent="handleDrop"
+                            :class="[
+                                'border-2 border-dashed rounded-lg p-12 text-center transition-colors',
+                                isDragging ? 'border-purple-500 bg-purple-50' : 'border-gray-300 hover:border-gray-400'
+                            ]"
+                        >
+                            <div class="space-y-4">
+                                <div class="text-4xl">📁</div>
+                                <div class="text-gray-600">
+                                    <p class="text-lg">Drag & drop ROM files here</p>
+                                    <p class="text-sm text-gray-400">or click to browse</p>
+                                </div>
+                                <button
+                                    type="button"
+                                    @click="fileInput?.click()"
+                                    class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded"
+                                >
+                                    Select Files
+                                </button>
+                                <input
+                                    ref="fileInput"
+                                    type="file"
+                                    multiple
+                                    accept=".nes,.sfc,.smc,.n64,.v64,.z64,.gba,.nds,.md,.bin,.gen,.iso,.gcm,.cue,.gdi,.cdi,.cso"
+                                    @change="handleFileSelect"
+                                    class="hidden"
+                                />
+                            </div>
+                        </div>
+
+                        <!-- Selected Files -->
+                        <div v-if="form.rom_files.length > 0" class="space-y-2">
+                            <h4 class="font-medium">Selected Files ({{ form.rom_files.length }})</h4>
+                            <div
+                                v-for="(file, index) in form.rom_files"
+                                :key="index"
+                                class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
+                            >
+                                <span class="text-sm">{{ file.name }}</span>
+                                <button
+                                    type="button"
+                                    @click="form.rom_files.splice(index, 1)"
+                                    class="text-red-500 hover:text-red-700 text-sm"
+                                >
+                                    Remove
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="flex justify-end">
+                            <button
+                                type="submit"
+                                :disabled="form.processing || form.rom_files.length === 0"
+                                class="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 disabled:opacity-50"
+                            >
+                                {{ form.processing ? 'Uploading...' : 'Upload ROMs' }}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </AppLayout>
+</template>