build: initialize RetroHub with Laravel, Inertia, Vue, and Horizon
This commit is contained in:
@@ -0,0 +1,148 @@
|
||||
<script setup lang="ts">
|
||||
import AppLayout from '@/Shared/Layouts/AppLayout.vue';
|
||||
import { Head, Link, useForm } from '@inertiajs/vue3';
|
||||
import type { GameData, ConsoleData } from '@/types';
|
||||
|
||||
interface Props {
|
||||
game: GameData;
|
||||
consoles: ConsoleData[];
|
||||
user: {
|
||||
name: string;
|
||||
email: string;
|
||||
};
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const form = useForm({
|
||||
title: props.game.title,
|
||||
description: props.game.description || '',
|
||||
release_year: props.game.releaseYear || '',
|
||||
developer: props.game.developer || '',
|
||||
publisher: props.game.publisher || '',
|
||||
genre: props.game.genre || '',
|
||||
rating: props.game.rating || '',
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
form.put(route('games.update', props.game.slug));
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout :title="'Edit ' + game.title" :user="user">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<Link :href="route('games.show', game.slug)" class="text-purple-600 hover:underline">
|
||||
{{ game.title }}
|
||||
</Link>
|
||||
<span class="text-gray-400">/</span>
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Edit</h2>
|
||||
</div>
|
||||
</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">
|
||||
<div>
|
||||
<label for="title" class="block text-sm font-medium text-gray-700">Title</label>
|
||||
<input
|
||||
id="title"
|
||||
v-model="form.title"
|
||||
type="text"
|
||||
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500"
|
||||
/>
|
||||
<div v-if="form.errors.title" class="text-red-500 text-sm mt-1">{{ form.errors.title }}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="description" class="block text-sm font-medium text-gray-700">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
v-model="form.description"
|
||||
rows="4"
|
||||
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="release_year" class="block text-sm font-medium text-gray-700">Release Year</label>
|
||||
<input
|
||||
id="release_year"
|
||||
v-model="form.release_year"
|
||||
type="number"
|
||||
min="1970"
|
||||
max="2030"
|
||||
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="rating" class="block text-sm font-medium text-gray-700">Rating (0-10)</label>
|
||||
<input
|
||||
id="rating"
|
||||
v-model="form.rating"
|
||||
type="number"
|
||||
min="0"
|
||||
max="10"
|
||||
step="0.1"
|
||||
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="developer" class="block text-sm font-medium text-gray-700">Developer</label>
|
||||
<input
|
||||
id="developer"
|
||||
v-model="form.developer"
|
||||
type="text"
|
||||
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="publisher" class="block text-sm font-medium text-gray-700">Publisher</label>
|
||||
<input
|
||||
id="publisher"
|
||||
v-model="form.publisher"
|
||||
type="text"
|
||||
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="genre" class="block text-sm font-medium text-gray-700">Genre</label>
|
||||
<input
|
||||
id="genre"
|
||||
v-model="form.genre"
|
||||
type="text"
|
||||
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<Link
|
||||
:href="route('games.show', game.slug)"
|
||||
class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300"
|
||||
>
|
||||
Cancel
|
||||
</Link>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="form.processing"
|
||||
class="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 disabled:opacity-50"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,164 @@
|
||||
<script setup lang="ts">
|
||||
import AppLayout from '@/Shared/Layouts/AppLayout.vue';
|
||||
import { Head, Link, router } from '@inertiajs/vue3';
|
||||
import type { GameData } from '@/types';
|
||||
import { ref } from 'vue';
|
||||
|
||||
interface Props {
|
||||
game: GameData;
|
||||
user: {
|
||||
name: string;
|
||||
email: string;
|
||||
};
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const showDeleteModal = ref(false);
|
||||
|
||||
const deleteGame = () => {
|
||||
router.delete(route('games.destroy', props.game.slug));
|
||||
};
|
||||
|
||||
const formatFileSize = (bytes: number) => {
|
||||
if (bytes < 1024) return bytes + ' B';
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout :title="game.title" :user="user">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<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>
|
||||
<Link :href="route('consoles.show', game.console?.slug)" class="text-purple-600 hover:underline">
|
||||
{{ game.console?.name }}
|
||||
</Link>
|
||||
<span class="text-gray-400">/</span>
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">{{ game.title }}</h2>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Link
|
||||
:href="route('games.edit', game.slug)"
|
||||
class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded"
|
||||
>
|
||||
Edit
|
||||
</Link>
|
||||
<button
|
||||
@click="showDeleteModal = true"
|
||||
class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<div class="flex gap-6">
|
||||
<!-- Cover -->
|
||||
<div class="w-48 h-64 bg-gray-200 rounded-lg overflow-hidden flex-shrink-0">
|
||||
<img
|
||||
v-if="game.coverPath"
|
||||
:src="'/storage/' + game.coverPath"
|
||||
:alt="game.title"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<div v-else class="w-full h-full flex items-center justify-center text-gray-400">
|
||||
No cover
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Details -->
|
||||
<div class="flex-1">
|
||||
<h1 class="text-2xl font-bold mb-4">{{ game.title }}</h1>
|
||||
|
||||
<dl class="grid grid-cols-2 gap-4">
|
||||
<div v-if="game.releaseYear">
|
||||
<dt class="text-gray-500 text-sm">Release Year</dt>
|
||||
<dd class="font-medium">{{ game.releaseYear }}</dd>
|
||||
</div>
|
||||
<div v-if="game.developer">
|
||||
<dt class="text-gray-500 text-sm">Developer</dt>
|
||||
<dd class="font-medium">{{ game.developer }}</dd>
|
||||
</div>
|
||||
<div v-if="game.publisher">
|
||||
<dt class="text-gray-500 text-sm">Publisher</dt>
|
||||
<dd class="font-medium">{{ game.publisher }}</dd>
|
||||
</div>
|
||||
<div v-if="game.genre">
|
||||
<dt class="text-gray-500 text-sm">Genre</dt>
|
||||
<dd class="font-medium">{{ game.genre }}</dd>
|
||||
</div>
|
||||
<div v-if="game.rating">
|
||||
<dt class="text-gray-500 text-sm">Rating</dt>
|
||||
<dd class="font-medium">{{ game.rating }}/10</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div v-if="game.description" class="mt-4">
|
||||
<dt class="text-gray-500 text-sm mb-1">Description</dt>
|
||||
<dd class="text-gray-700">{{ game.description }}</dd>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ROM Files -->
|
||||
<div v-if="game.romFiles?.length" class="mt-6 border-t pt-6">
|
||||
<h3 class="text-lg font-semibold mb-4">ROM Files</h3>
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
v-for="rom in game.romFiles"
|
||||
:key="rom.id"
|
||||
class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
|
||||
>
|
||||
<div>
|
||||
<div class="font-medium">{{ rom.fileName }}</div>
|
||||
<div class="text-sm text-gray-500">{{ formatFileSize(rom.fileSize) }}</div>
|
||||
</div>
|
||||
<Link
|
||||
:href="route('games.download', { game: game.slug, romFile: rom.id })"
|
||||
class="bg-purple-600 hover:bg-purple-700 text-white text-sm py-1 px-3 rounded"
|
||||
>
|
||||
Download
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Modal -->
|
||||
<teleport to="body">
|
||||
<div v-if="showDeleteModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
|
||||
<h3 class="text-lg font-bold mb-4">Delete Game</h3>
|
||||
<p class="text-gray-600 mb-6">
|
||||
Are you sure you want to delete "{{ game.title }}"? This will also delete all associated ROM files.
|
||||
</p>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button
|
||||
@click="showDeleteModal = false"
|
||||
class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="deleteGame"
|
||||
class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</AppLayout>
|
||||
</template>
|
||||
Reference in New Issue
Block a user