830 lines
42 KiB
PHP
830 lines
42 KiB
PHP
@extends('layouts.app')
|
|
@php use Illuminate\Support\Str; @endphp
|
|
|
|
@section('title', $game->title . ' — GameLog')
|
|
@section('description', $game->summary ? Str::limit($game->summary, 155) : 'Track ' . $game->title . ' on GameLog.')
|
|
@section('og_title', $game->title . ' — GameLog')
|
|
@section('og_description', $game->summary ? Str::limit($game->summary, 155) : 'Track ' . $game->title . ' on GameLog.')
|
|
@section('og_image', $game->cover_url ?? asset('images/og-default.jpg'))
|
|
@section('og_type', 'game')
|
|
|
|
@section('content')
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
|
|
|
{{-- Main Info --}}
|
|
<div class="flex flex-col md:flex-row gap-8">
|
|
|
|
{{-- Cover --}}
|
|
<div class="flex-shrink-0">
|
|
<div class="w-48 md:w-56 rounded-xl overflow-hidden bg-[#16161d] shadow-2xl shadow-black/50 mx-auto md:mx-0">
|
|
@if($game->cover_url)
|
|
<img src="{{ $game->cover_url }}" alt="{{ $game->title }}" class="w-full">
|
|
@else
|
|
<div class="aspect-[3/4] flex items-center justify-center">
|
|
<svg class="w-16 h-16 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
|
d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/>
|
|
</svg>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Details --}}
|
|
<div class="flex-1 min-w-0">
|
|
|
|
{{-- Title & Year --}}
|
|
<div class="mb-2">
|
|
@if($game->release_year)
|
|
<span class="text-sm text-slate-500 font-medium">{{ $game->release_year }}</span>
|
|
@endif
|
|
<h1 class="text-3xl sm:text-4xl font-bold text-white leading-tight mt-1">{{ $game->title }}</h1>
|
|
</div>
|
|
|
|
{{-- Rating --}}
|
|
<div class="flex items-center gap-4 mb-6">
|
|
@if($game->rating_avg)
|
|
<div class="flex items-center gap-1.5 bg-[#16161d] px-3 py-1.5 rounded-lg border border-white/10">
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
|
</svg>
|
|
<span class="text-white font-bold">{{ number_format($game->rating_avg, 1) }}</span>
|
|
<span class="text-slate-500 text-sm">/ 10</span>
|
|
</div>
|
|
<span class="text-sm text-slate-500">{{ number_format($game->rating_count) }} {{ Str::plural('rating', $game->rating_count) }}</span>
|
|
@else
|
|
<span class="text-sm text-slate-500">No ratings yet</span>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Genres & Platforms --}}
|
|
@if($game->genres->isNotEmpty())
|
|
<div class="flex flex-wrap gap-2 mb-3">
|
|
@foreach($game->genres as $genre)
|
|
<a href="{{ route('games.index', ['genre' => $genre->id]) }}"
|
|
class="px-2.5 py-1 text-xs bg-purple-900/30 text-purple-300 border border-purple-700/30 rounded-full hover:bg-purple-900/50 transition-colors">
|
|
{{ $genre->name }}
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
@if($game->platforms->isNotEmpty())
|
|
<div class="flex flex-wrap gap-2 mb-5">
|
|
@foreach($game->platforms as $platform)
|
|
<a href="{{ route('games.index', ['platform' => $platform->id]) }}"
|
|
class="px-2.5 py-1 text-xs bg-[#16161d] text-slate-400 border border-white/10 rounded-full hover:text-slate-200 transition-colors">
|
|
{{ $platform->name }}
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Add to Library --}}
|
|
<div class="mb-3" x-data="libraryWidget({{ $game->id }}, '{{ $userGame?->status }}', {{ $userGame?->rating ?? 'null' }})">
|
|
|
|
@if($userGame)
|
|
{{-- Already in library --}}
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<div class="relative" x-data="{ open: false }">
|
|
<button @click="open = !open"
|
|
class="flex items-center gap-2 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium rounded-lg transition-colors">
|
|
<span x-text="statusLabel(status)"></span>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</button>
|
|
<div x-show="open" @click.outside="open = false" x-transition
|
|
class="absolute left-0 mt-2 w-44 bg-[#16161d] border border-white/10 rounded-lg shadow-xl overflow-hidden z-10">
|
|
@foreach(['playing' => 'Playing', 'played' => 'Played', 'want_to_play' => 'Want to Play', 'on_hold' => 'On Hold', 'dropped' => 'Dropped'] as $s => $label)
|
|
<button @click="updateStatus('{{ $s }}', {{ $userGame->id }}); open = false"
|
|
class="w-full text-left px-4 py-2.5 text-sm hover:bg-white/5 transition-colors"
|
|
:class="status === '{{ $s }}' ? 'text-purple-400' : 'text-slate-300'">
|
|
{{ $label }}
|
|
</button>
|
|
@endforeach
|
|
<div class="border-t border-white/5"></div>
|
|
<button @click="removeFromLibrary({{ $userGame->id }})"
|
|
class="w-full text-left px-4 py-2.5 text-sm text-red-400 hover:bg-white/5 transition-colors">
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Rating --}}
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm text-slate-400">Your rating:</span>
|
|
<input type="number" min="1" max="10" x-model="rating"
|
|
@change="updateRating({{ $userGame->id }})"
|
|
class="w-16 bg-[#16161d] border border-white/10 rounded-lg px-2 py-1.5 text-sm text-center text-slate-200 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500"
|
|
placeholder="—">
|
|
<span class="text-slate-500 text-sm">/ 10</span>
|
|
</div>
|
|
</div>
|
|
@else
|
|
@auth
|
|
<div class="space-y-3">
|
|
{{-- Step 1: pick a status --}}
|
|
<div x-show="!pendingStatus">
|
|
<div class="relative" x-data="{ open: false }">
|
|
<button @click="open = !open"
|
|
class="flex items-center gap-2 px-5 py-2.5 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg transition-colors">
|
|
+ Add to Library
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</button>
|
|
<div x-show="open" @click.outside="open = false" x-transition
|
|
class="absolute left-0 mt-2 w-44 bg-[#16161d] border border-white/10 rounded-lg shadow-xl overflow-hidden z-10">
|
|
@foreach(['playing' => 'Playing', 'played' => 'Played', 'want_to_play' => 'Want to Play', 'on_hold' => 'On Hold', 'dropped' => 'Dropped'] as $s => $label)
|
|
<button @click="pendingStatus = '{{ $s }}'; open = false"
|
|
class="w-full text-left px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
|
|
{{ $label }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Step 2: optional rating + save --}}
|
|
<div x-show="pendingStatus" x-transition
|
|
class="flex flex-wrap items-center gap-3 bg-[#16161d] border border-white/10 rounded-lg px-4 py-3">
|
|
<span class="text-sm text-slate-300">Adding as <strong x-text="statusLabel(pendingStatus)" class="text-purple-400 font-semibold"></strong></span>
|
|
<div class="flex items-center gap-2">
|
|
<label class="text-sm text-slate-400">Rate it (optional):</label>
|
|
<input type="number" min="1" max="10" x-model="pendingRating"
|
|
class="w-16 bg-[#0f0f13] border border-white/10 rounded px-2 py-1 text-sm text-center text-slate-200 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500"
|
|
placeholder="—">
|
|
<span class="text-slate-500 text-sm">/10</span>
|
|
</div>
|
|
<button @click="addToLibraryWithRating()"
|
|
class="px-3 py-1.5 bg-purple-600 hover:bg-purple-700 text-white text-sm font-semibold rounded-lg transition-colors">
|
|
Save
|
|
</button>
|
|
<button @click="pendingStatus = null; pendingRating = null"
|
|
class="px-3 py-1.5 text-slate-400 hover:text-slate-200 text-sm transition-colors">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<a href="{{ route('login') }}"
|
|
class="inline-flex items-center gap-2 px-5 py-2.5 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg transition-colors">
|
|
Log in to Add to Library
|
|
</a>
|
|
@endauth
|
|
@endif
|
|
|
|
{{-- Toast notification --}}
|
|
<div x-show="toast" x-transition
|
|
class="fixed bottom-4 right-4 z-50 bg-purple-600 text-white px-4 py-3 rounded-lg shadow-lg text-sm font-medium"
|
|
style="display:none;">
|
|
<span x-text="toast"></span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Add to List --}}
|
|
@auth
|
|
<div class="mb-6" x-data="addToListWidget({{ $game->id }}, {{ $userLists->toJson() }})">
|
|
<button @click="open = !open"
|
|
class="flex items-center gap-2 px-4 py-2 bg-[#16161d] border border-white/10 hover:border-purple-500/50 text-slate-300 hover:text-white text-sm rounded-lg transition-all">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
|
</svg>
|
|
Add to List
|
|
</button>
|
|
<div x-show="open" @click.outside="open = false" x-transition
|
|
class="mt-1 w-56 bg-[#16161d] border border-white/10 rounded-lg shadow-xl overflow-hidden z-10"
|
|
style="display:none;">
|
|
<template x-if="lists.length === 0">
|
|
<div class="px-4 py-3 text-sm text-slate-500">
|
|
No lists yet.
|
|
<a href="{{ route('lists.index') }}" class="text-purple-400 hover:text-purple-300">Create one</a>
|
|
</div>
|
|
</template>
|
|
<template x-for="list in lists" :key="list.slug">
|
|
<button type="button" @click="toggleList(list.slug)"
|
|
class="w-full flex items-center gap-2 px-4 py-2.5 text-sm hover:bg-white/5 transition-colors"
|
|
:class="added[list.slug] ? 'text-purple-400' : 'text-slate-300'">
|
|
<svg x-show="added[list.slug]" class="w-4 h-4 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
<span x-show="!added[list.slug]" class="w-4 h-4 flex-shrink-0"></span>
|
|
<span x-text="list.title" class="truncate"></span>
|
|
</button>
|
|
</template>
|
|
<template x-if="lists.length > 0">
|
|
<div class="border-t border-white/5 px-4 py-2">
|
|
<a href="{{ route('lists.index') }}" class="text-xs text-slate-500 hover:text-slate-300 transition-colors">Manage lists →</a>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="mb-6"></div>
|
|
@endauth
|
|
|
|
{{-- Companies --}}
|
|
@if($game->companies->isNotEmpty())
|
|
<div class="text-sm text-slate-500 space-y-1">
|
|
@php
|
|
$developers = $game->companies->where('pivot.role', 'developer');
|
|
$publishers = $game->companies->where('pivot.role', 'publisher');
|
|
@endphp
|
|
@if($developers->isNotEmpty())
|
|
<div><span class="text-slate-400">Developer:</span> {{ $developers->pluck('name')->join(', ') }}</div>
|
|
@endif
|
|
@if($publishers->isNotEmpty())
|
|
<div><span class="text-slate-400">Publisher:</span> {{ $publishers->pluck('name')->join(', ') }}</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Summary --}}
|
|
@if($game->summary)
|
|
<div class="mt-10 pt-8 border-t border-white/5">
|
|
<h2 class="text-lg font-semibold text-white mb-3">Summary</h2>
|
|
<p class="text-slate-400 leading-relaxed max-w-3xl">{{ $game->summary }}</p>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Screenshots --}}
|
|
@if($game->screenshots->isNotEmpty())
|
|
<div class="mt-10 pt-8 border-t border-white/5"
|
|
x-data="{
|
|
open: false,
|
|
current: 0,
|
|
screenshots: {{ $game->screenshots->map(fn($s) => ['url' => $s->url, 'thumb' => $s->thumb_url ?? $s->url])->toJson() }},
|
|
openAt(i) { this.current = i; this.open = true; },
|
|
prev() { this.current = (this.current - 1 + this.screenshots.length) % this.screenshots.length; },
|
|
next() { this.current = (this.current + 1) % this.screenshots.length; },
|
|
}"
|
|
@keydown.escape.window="open = false"
|
|
@keydown.arrow-left.window="if (open) prev()"
|
|
@keydown.arrow-right.window="if (open) next()">
|
|
<h2 class="text-lg font-semibold text-white mb-4">Screenshots</h2>
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
|
@foreach($game->screenshots as $i => $shot)
|
|
<button @click="openAt({{ $i }})" class="block w-full rounded-lg overflow-hidden bg-[#16161d] hover:ring-1 hover:ring-purple-500 transition-all">
|
|
<img src="{{ $shot->thumb_url ?? $shot->url }}" alt="Screenshot" class="w-full aspect-video object-cover">
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
|
|
{{-- Lightbox overlay --}}
|
|
<div x-show="open"
|
|
x-transition:enter="transition ease-out duration-150"
|
|
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-100"
|
|
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
|
|
@click.self="open = false"
|
|
style="display:none;">
|
|
|
|
{{-- Close --}}
|
|
<button @click="open = false" class="absolute top-4 right-4 text-white/70 hover:text-white transition-colors">
|
|
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
|
|
{{-- Counter --}}
|
|
<div class="absolute top-4 left-1/2 -translate-x-1/2 text-sm text-white/60">
|
|
<span x-text="current + 1"></span> / <span x-text="screenshots.length"></span>
|
|
</div>
|
|
|
|
{{-- Prev --}}
|
|
<button @click="prev()" class="absolute left-4 top-1/2 -translate-y-1/2 text-white/70 hover:text-white transition-colors p-2">
|
|
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
|
|
</svg>
|
|
</button>
|
|
|
|
{{-- Full-size image --}}
|
|
<img :src="screenshots[current]?.url" alt="Screenshot" class="max-h-[85vh] max-w-[90vw] rounded-lg shadow-2xl object-contain">
|
|
|
|
{{-- Next --}}
|
|
<button @click="next()" class="absolute right-4 top-1/2 -translate-y-1/2 text-white/70 hover:text-white transition-colors p-2">
|
|
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Comments --}}
|
|
@php
|
|
$commentsData = $comments->map(fn($c) => [
|
|
'id' => $c->id,
|
|
'body' => $c->body,
|
|
'user' => ['name' => $c->user->name, 'username' => $c->user->username],
|
|
'user_id' => $c->user_id,
|
|
'created_at' => $c->created_at->diffForHumans(),
|
|
'replies' => $c->replies->map(fn($r) => [
|
|
'id' => $r->id,
|
|
'body' => $r->body,
|
|
'user' => ['name' => $r->user->name, 'username' => $r->user->username],
|
|
'user_id' => $r->user_id,
|
|
'created_at' => $r->created_at->diffForHumans(),
|
|
])->values()->all(),
|
|
])->values()->all();
|
|
@endphp
|
|
<div class="mt-10 pt-8 border-t border-white/5" id="comments"
|
|
x-data="commentsWidget({{ Js::from($commentsData) }}, '{{ route('games.comments.store', $game) }}', {{ auth()->id() ?? 'null' }})">
|
|
|
|
<h2 class="text-lg font-semibold text-white mb-4">Discussion</h2>
|
|
<div class="max-w-3xl">
|
|
|
|
{{-- New comment form (auth only) --}}
|
|
@auth
|
|
<div class="mb-6 bg-[#16161d] border border-white/10 rounded-lg p-4">
|
|
<textarea x-model="body" rows="3"
|
|
placeholder="Share your thoughts…"
|
|
class="w-full bg-[#0f0f13] border border-white/10 rounded-lg px-4 py-3 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500 resize-none transition mb-3"></textarea>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-xs text-slate-600" x-text="body.length + ' / 1000'"></span>
|
|
<button @click="submitComment()"
|
|
:disabled="!body.trim() || submitting"
|
|
class="px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:opacity-40 disabled:cursor-not-allowed text-white text-sm font-semibold rounded-lg transition-colors">
|
|
Post Comment
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="mb-6 bg-[#16161d] border border-white/10 rounded-lg p-4 text-center">
|
|
<p class="text-slate-400 text-sm">
|
|
<a href="{{ route('login') }}" class="text-purple-400 hover:text-purple-300 transition-colors">Log in</a>
|
|
to join the discussion.
|
|
</p>
|
|
</div>
|
|
@endauth
|
|
|
|
{{-- Comment list --}}
|
|
<div class="space-y-4">
|
|
<template x-if="comments.length === 0">
|
|
<p class="text-slate-500 text-sm">No comments yet. Be the first!</p>
|
|
</template>
|
|
<template x-for="comment in comments" :key="comment.id">
|
|
<div class="bg-[#16161d] rounded-lg p-4 border border-white/5">
|
|
{{-- Comment header --}}
|
|
<div class="flex items-start justify-between gap-2 mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-7 h-7 rounded-full bg-purple-700 flex items-center justify-center text-xs font-bold text-white flex-shrink-0"
|
|
x-text="comment.user.name.charAt(0).toUpperCase()"></div>
|
|
<span class="text-sm font-medium text-slate-300" x-text="comment.user.username || comment.user.name"></span>
|
|
<span class="text-xs text-slate-600" x-text="comment.created_at"></span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
@auth
|
|
<button x-show="comment.user_id === authUserId"
|
|
@click="deleteComment(comment)"
|
|
class="text-xs text-red-500 hover:text-red-400 transition-colors">Delete</button>
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
{{-- Body --}}
|
|
<p class="text-slate-400 text-sm leading-relaxed mb-3" x-text="comment.body"></p>
|
|
|
|
{{-- Replies --}}
|
|
<div class="ml-6 space-y-3 mb-3">
|
|
<template x-for="reply in comment.replies" :key="reply.id">
|
|
<div class="bg-[#0f0f13] rounded-lg p-3 border border-white/5">
|
|
<div class="flex items-start justify-between gap-2 mb-1">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-5 h-5 rounded-full bg-purple-800 flex items-center justify-center text-xs font-bold text-white flex-shrink-0"
|
|
x-text="reply.user.name.charAt(0).toUpperCase()"></div>
|
|
<span class="text-xs font-medium text-slate-300" x-text="reply.user.username || reply.user.name"></span>
|
|
<span class="text-xs text-slate-600" x-text="reply.created_at"></span>
|
|
</div>
|
|
@auth
|
|
<button x-show="reply.user_id === authUserId"
|
|
@click="deleteReply(reply, comment)"
|
|
class="text-xs text-red-500 hover:text-red-400 transition-colors">Delete</button>
|
|
@endauth
|
|
</div>
|
|
<p class="text-slate-400 text-xs leading-relaxed" x-text="reply.body"></p>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
{{-- Reply toggle --}}
|
|
@auth
|
|
<div>
|
|
<button @click="comment.showReply = !comment.showReply"
|
|
class="text-xs text-slate-500 hover:text-purple-400 transition-colors">
|
|
<span x-text="comment.showReply ? 'Cancel' : 'Reply'"></span>
|
|
</button>
|
|
<div x-show="comment.showReply" x-transition class="mt-2">
|
|
<textarea x-model="comment.replyBody" rows="2"
|
|
placeholder="Write a reply…"
|
|
class="w-full bg-[#0f0f13] border border-white/10 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500 resize-none transition mb-2"></textarea>
|
|
<button @click="submitReply(comment)"
|
|
:disabled="!comment.replyBody?.trim()"
|
|
class="px-3 py-1.5 bg-purple-600 hover:bg-purple-700 disabled:opacity-40 disabled:cursor-not-allowed text-white text-xs font-semibold rounded-lg transition-colors">
|
|
Post Reply
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endauth
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Reviews --}}
|
|
<div class="mt-10 pt-8 border-t border-white/5" id="reviews">
|
|
<h2 class="text-lg font-semibold text-white mb-4">Reviews</h2>
|
|
<div class="max-w-3xl">
|
|
|
|
{{-- Review List --}}
|
|
<div id="review-list" class="space-y-4 mb-8">
|
|
@forelse($game->reviews->take(10) as $review)
|
|
<div class="bg-[#16161d] rounded-lg p-5 border border-white/5" id="review-{{ $review->id }}">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-7 h-7 rounded-full bg-purple-700 flex items-center justify-center text-xs font-bold text-white">
|
|
{{ strtoupper(substr($review->user->name, 0, 1)) }}
|
|
</div>
|
|
<span class="text-sm font-medium text-slate-300">{{ $review->user->username ?? $review->user->name }}</span>
|
|
@if($review->has_spoilers)
|
|
<span class="px-1.5 py-0.5 text-xs bg-yellow-900/40 text-yellow-400 border border-yellow-700/30 rounded">Spoilers</span>
|
|
@endif
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
@if($review->rating)
|
|
<div class="flex items-center gap-1">
|
|
<svg class="w-3.5 h-3.5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
|
</svg>
|
|
<span class="text-sm font-bold text-white">{{ $review->rating }}</span>
|
|
<span class="text-slate-500 text-xs">/10</span>
|
|
</div>
|
|
@endif
|
|
@auth
|
|
@if(auth()->id() === $review->user_id)
|
|
<button onclick="deleteReview({{ $review->id }})"
|
|
class="text-xs text-red-500 hover:text-red-400 transition-colors">Delete</button>
|
|
@endif
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
<p class="text-slate-400 text-sm leading-relaxed">{{ $review->body }}</p>
|
|
</div>
|
|
@empty
|
|
<p class="text-slate-500" id="no-reviews-msg">No reviews yet. Be the first!</p>
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- Write / Edit Review Form --}}
|
|
@auth
|
|
<div x-data="reviewForm(
|
|
'{{ route('reviews.store', ['game' => $game->slug]) }}',
|
|
{{ $userReview ? $userReview->id : 'null' }},
|
|
{{ $userReview ? json_encode($userReview->body) : 'null' }},
|
|
{{ $userReview ? ($userReview->rating ?? 'null') : 'null' }},
|
|
{{ $userReview ? ($userReview->has_spoilers ? 'true' : 'false') : 'false' }}
|
|
)"
|
|
class="bg-[#16161d] border border-white/10 rounded-lg p-5">
|
|
|
|
<h3 class="text-sm font-semibold text-white mb-4" x-text="reviewId ? 'Your Review' : 'Write a Review'"></h3>
|
|
|
|
<div x-show="!reviewId || editing">
|
|
<textarea x-model="body" rows="5" placeholder="Share your thoughts (minimum 50 characters)…"
|
|
class="w-full bg-[#0f0f13] border border-white/10 rounded-lg px-4 py-3 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500 resize-none transition"></textarea>
|
|
<p class="text-xs text-slate-500 mt-1 mb-3" x-text="body.length + ' | minimum 50 characters'"></p>
|
|
|
|
<div class="flex flex-wrap items-center gap-4 mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<label class="text-sm text-slate-400">Rating (optional):</label>
|
|
<input type="number" min="1" max="10" x-model="rating"
|
|
class="w-16 bg-[#0f0f13] border border-white/10 rounded-lg px-2 py-1.5 text-sm text-center text-slate-200 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500"
|
|
placeholder="—">
|
|
<span class="text-slate-500 text-sm">/10</span>
|
|
</div>
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox" x-model="hasSpoilers" class="w-4 h-4 accent-purple-600">
|
|
<span class="text-sm text-slate-400">Contains spoilers</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<button @click="submitReview()"
|
|
:disabled="body.length < 50"
|
|
class="px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:opacity-40 disabled:cursor-not-allowed text-white text-sm font-semibold rounded-lg transition-colors"
|
|
x-text="reviewId ? 'Update Review' : 'Submit Review'"></button>
|
|
<button x-show="reviewId" @click="editing = false"
|
|
class="px-4 py-2 text-slate-400 hover:text-slate-200 text-sm transition-colors">Cancel</button>
|
|
<span x-show="error" class="text-sm text-red-400" x-text="error"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div x-show="reviewId && !editing" class="flex items-center gap-3">
|
|
<p class="text-sm text-slate-400">You've already reviewed this game.</p>
|
|
<button @click="editing = true" class="text-sm text-purple-400 hover:text-purple-300 transition-colors">Edit</button>
|
|
<button @click="deleteMyReview()" class="text-sm text-red-400 hover:text-red-300 transition-colors">Delete</button>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="bg-[#16161d] border border-white/10 rounded-lg p-5 text-center">
|
|
<p class="text-slate-400 text-sm">
|
|
<a href="{{ route('login') }}" class="text-purple-400 hover:text-purple-300 transition-colors">Log in</a>
|
|
to write a review.
|
|
</p>
|
|
</div>
|
|
@endauth
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script type="application/ld+json">
|
|
{
|
|
"@@context": "https://schema.org",
|
|
"@@type": "VideoGame",
|
|
"name": {{ json_encode($game->title) }},
|
|
"description": {{ json_encode($game->summary ?? '') }},
|
|
"url": {{ json_encode(route('games.show', $game)) }}
|
|
@if($game->genres->isNotEmpty())
|
|
,"genre": {{ json_encode($game->genres->pluck('name')->values()) }}
|
|
@endif
|
|
@if($game->platforms->isNotEmpty())
|
|
,"gamePlatform": {{ json_encode($game->platforms->pluck('name')->values()) }}
|
|
@endif
|
|
@if($game->rating_count > 0)
|
|
,"aggregateRating": {
|
|
"@@type": "AggregateRating",
|
|
"ratingValue": {{ $game->rating_avg }},
|
|
"ratingCount": {{ $game->rating_count }},
|
|
"bestRating": 10,
|
|
"worstRating": 1
|
|
}
|
|
@endif
|
|
}
|
|
</script>
|
|
<script>
|
|
function libraryWidget(gameId, initialStatus, initialRating) {
|
|
return {
|
|
gameId,
|
|
status: initialStatus,
|
|
rating: initialRating,
|
|
toast: null,
|
|
pendingStatus: null,
|
|
pendingRating: null,
|
|
|
|
statusLabel(s) {
|
|
const labels = {
|
|
playing: 'Playing',
|
|
played: 'Played',
|
|
want_to_play: 'Want to Play',
|
|
on_hold: 'On Hold',
|
|
dropped: 'Dropped',
|
|
};
|
|
return labels[s] || 'In Library';
|
|
},
|
|
|
|
showToast(message) {
|
|
this.toast = message;
|
|
setTimeout(() => { this.toast = null; }, 2500);
|
|
},
|
|
|
|
async addToLibraryWithRating() {
|
|
const res = await fetch('/library', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json',
|
|
},
|
|
body: JSON.stringify({ game_id: this.gameId, status: this.pendingStatus, rating: this.pendingRating || null }),
|
|
});
|
|
if (res.ok) {
|
|
this.showToast('Added to library!');
|
|
setTimeout(() => window.location.reload(), 1000);
|
|
}
|
|
},
|
|
|
|
async updateStatus(status, userGameId) {
|
|
const res = await fetch(`/library/${userGameId}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json',
|
|
},
|
|
body: JSON.stringify({ status }),
|
|
});
|
|
if (res.ok) this.status = status;
|
|
},
|
|
|
|
async updateRating(userGameId) {
|
|
await fetch(`/library/${userGameId}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json',
|
|
},
|
|
body: JSON.stringify({ rating: this.rating }),
|
|
});
|
|
},
|
|
|
|
async removeFromLibrary(userGameId) {
|
|
const res = await fetch(`/library/${userGameId}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json',
|
|
},
|
|
});
|
|
if (res.ok) window.location.reload();
|
|
},
|
|
};
|
|
}
|
|
|
|
function reviewForm(storeUrl, initialReviewId, initialBody, initialRating, initialSpoilers) {
|
|
return {
|
|
storeUrl,
|
|
reviewId: initialReviewId,
|
|
body: initialBody || '',
|
|
rating: initialRating,
|
|
hasSpoilers: initialSpoilers || false,
|
|
editing: false,
|
|
error: null,
|
|
|
|
async submitReview() {
|
|
this.error = null;
|
|
const isEdit = !!this.reviewId;
|
|
const url = isEdit ? `/reviews/${this.reviewId}` : this.storeUrl;
|
|
const method = isEdit ? 'PUT' : 'POST';
|
|
|
|
const res = await fetch(url, {
|
|
method,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
body: this.body,
|
|
rating: this.rating || null,
|
|
has_spoilers: this.hasSpoilers,
|
|
}),
|
|
});
|
|
|
|
if (res.status === 409) {
|
|
this.error = 'You already have a review for this game.';
|
|
return;
|
|
}
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}));
|
|
this.error = data.message || 'Something went wrong.';
|
|
return;
|
|
}
|
|
|
|
window.location.reload();
|
|
},
|
|
|
|
async deleteMyReview() {
|
|
if (!confirm('Delete your review?')) return;
|
|
const res = await fetch(`/reviews/${this.reviewId}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json',
|
|
},
|
|
});
|
|
if (res.ok) window.location.reload();
|
|
},
|
|
};
|
|
}
|
|
|
|
function deleteReview(id) {
|
|
if (!confirm('Delete this review?')) return;
|
|
fetch(`/reviews/${id}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json',
|
|
},
|
|
}).then(r => { if (r.ok) window.location.reload(); });
|
|
}
|
|
|
|
function commentsWidget(initialComments, storeUrl, authUserId) {
|
|
return {
|
|
comments: initialComments.map(c => ({ ...c, showReply: false, replyBody: '' })),
|
|
body: '',
|
|
submitting: false,
|
|
authUserId,
|
|
|
|
async submitComment() {
|
|
if (!this.body.trim() || this.submitting) return;
|
|
this.submitting = true;
|
|
const res = await fetch(storeUrl, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json',
|
|
},
|
|
body: JSON.stringify({ body: this.body }),
|
|
});
|
|
if (res.ok) {
|
|
const comment = await res.json();
|
|
this.comments.unshift({ ...comment, replies: [], showReply: false, replyBody: '' });
|
|
this.body = '';
|
|
}
|
|
this.submitting = false;
|
|
},
|
|
|
|
async submitReply(parentComment) {
|
|
if (!parentComment.replyBody?.trim()) return;
|
|
const res = await fetch(storeUrl, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json',
|
|
},
|
|
body: JSON.stringify({ body: parentComment.replyBody, parent_id: parentComment.id }),
|
|
});
|
|
if (res.ok) {
|
|
const reply = await res.json();
|
|
parentComment.replies.push(reply);
|
|
parentComment.showReply = false;
|
|
parentComment.replyBody = '';
|
|
}
|
|
},
|
|
|
|
async deleteComment(comment) {
|
|
if (!confirm('Delete this comment?')) return;
|
|
const res = await fetch(`/comments/${comment.id}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json',
|
|
},
|
|
});
|
|
if (res.ok) {
|
|
this.comments = this.comments.filter(c => c.id !== comment.id);
|
|
}
|
|
},
|
|
|
|
async deleteReply(reply, parentComment) {
|
|
if (!confirm('Delete this reply?')) return;
|
|
const res = await fetch(`/comments/${reply.id}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json',
|
|
},
|
|
});
|
|
if (res.ok) {
|
|
parentComment.replies = parentComment.replies.filter(r => r.id !== reply.id);
|
|
}
|
|
},
|
|
};
|
|
}
|
|
|
|
function addToListWidget(gameId, lists) {
|
|
return {
|
|
gameId,
|
|
lists,
|
|
open: false,
|
|
added: {},
|
|
|
|
async toggleList(listSlug) {
|
|
const isAdded = this.added[listSlug];
|
|
const url = isAdded
|
|
? `/lists/${listSlug}/games/${this.gameId}`
|
|
: `/lists/${listSlug}/games`;
|
|
const method = isAdded ? 'DELETE' : 'POST';
|
|
|
|
const res = await fetch(url, {
|
|
method,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json',
|
|
},
|
|
body: method === 'POST' ? JSON.stringify({ game_id: this.gameId }) : null,
|
|
});
|
|
|
|
if (res.ok) {
|
|
this.added[listSlug] = !isAdded;
|
|
}
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
@endpush
|
|
|
|
@endsection
|