mirror of
https://github.com/ceratic/MediaCollectorLibaryFrontend.git
synced 2026-05-13 23:56:45 +02:00
first commit
This commit is contained in:
Lars Behrends
412
src/pages/GamesPage.tsx
Normal file
412
src/pages/GamesPage.tsx
Normal file
@@ -0,0 +1,412 @@
|
||||
import { useState } from 'react'
|
||||
import React from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import {
|
||||
ComputerDesktopIcon as GamepadIcon,
|
||||
MagnifyingGlassIcon,
|
||||
AdjustmentsHorizontalIcon,
|
||||
TrophyIcon,
|
||||
PlayIcon,
|
||||
CheckCircleIcon,
|
||||
ChevronDownIcon,
|
||||
ListBulletIcon,
|
||||
Squares2X2Icon,
|
||||
PhotoIcon
|
||||
} from '@heroicons/react/24/outline'
|
||||
import GameCard, { GameItem } from '../components/GameCard'
|
||||
import { gamesApi } from '../services/api'
|
||||
|
||||
type ViewMode = 'grid' | 'list' | 'covers'
|
||||
type SortOption = 'title_asc' | 'title_desc' | 'year_asc' | 'year_desc' | 'playtime_desc' | 'rating_desc' | 'last_played_desc'
|
||||
|
||||
const sortOptions: { value: SortOption; label: string }[] = [
|
||||
{ value: 'title_asc', label: 'Title (A-Z)' },
|
||||
{ value: 'title_desc', label: 'Title (Z-A)' },
|
||||
{ value: 'year_asc', label: 'Release Year (Oldest First)' },
|
||||
{ value: 'year_desc', label: 'Release Year (Newest First)' },
|
||||
{ value: 'playtime_desc', label: 'Most Played' },
|
||||
{ value: 'rating_desc', label: 'Highest Rated' },
|
||||
{ value: 'last_played_desc', label: 'Last Played' }
|
||||
]
|
||||
|
||||
const categoryIcons = {
|
||||
BEATEN: TrophyIcon,
|
||||
PLAYING: PlayIcon,
|
||||
COMPLETED: CheckCircleIcon,
|
||||
UNPLAYED: GamepadIcon
|
||||
}
|
||||
|
||||
const categoryColors = {
|
||||
BEATEN: 'from-yellow-500 to-amber-600',
|
||||
PLAYING: 'from-blue-500 to-blue-600',
|
||||
COMPLETED: 'from-green-500 to-green-600',
|
||||
UNPLAYED: 'from-gray-500 to-gray-600'
|
||||
}
|
||||
|
||||
export default function GamesPage() {
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
|
||||
const [viewMode, setViewMode] = useState<ViewMode>('grid')
|
||||
const [sortBy, setSortBy] = useState<SortOption>('title_asc')
|
||||
const [showFilters, setShowFilters] = useState(false)
|
||||
const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set(['BEATEN', 'PLAYING']))
|
||||
|
||||
const { data: gamesData, isLoading, error } = useQuery({
|
||||
queryKey: ['games', searchTerm, sortBy],
|
||||
queryFn: () => gamesApi.getAll({ search: searchTerm, sort: sortBy }),
|
||||
enabled: !selectedCategory
|
||||
})
|
||||
|
||||
const { data: categoryData, isLoading: isLoadingCategory } = useQuery({
|
||||
queryKey: ['games', 'category', selectedCategory, searchTerm, sortBy],
|
||||
queryFn: () => gamesApi.getByCategory(selectedCategory!, { search: searchTerm, sort: sortBy }),
|
||||
enabled: !!selectedCategory
|
||||
})
|
||||
|
||||
const toggleCategory = (category: string) => {
|
||||
setExpandedCategories(prev => {
|
||||
const newSet = new Set(prev)
|
||||
if (newSet.has(category)) {
|
||||
newSet.delete(category)
|
||||
} else {
|
||||
newSet.add(category)
|
||||
}
|
||||
return newSet
|
||||
})
|
||||
}
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
const clearFilters = () => {
|
||||
setSearchTerm('')
|
||||
setSelectedCategory(null)
|
||||
setSortBy('title_asc')
|
||||
}
|
||||
|
||||
const activeFiltersCount = [
|
||||
searchTerm,
|
||||
selectedCategory,
|
||||
sortBy !== 'title_asc'
|
||||
].filter(Boolean).length
|
||||
|
||||
if (isLoading || isLoadingCategory) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<motion.div
|
||||
className="text-center"
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="w-16 h-16 border-4 border-green-200 rounded-full"></div>
|
||||
<motion.div
|
||||
className="absolute top-0 left-0 w-16 h-16 border-4 border-green-600 rounded-full border-t-transparent"
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
|
||||
/>
|
||||
</div>
|
||||
<motion.p
|
||||
className="mt-6 text-gray-600 text-lg"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
Loading games...
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<motion.div
|
||||
className="text-center max-w-md"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
>
|
||||
<GamepadIcon className="mx-auto h-20 w-20 text-gray-400 mb-6" />
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-3">Error Loading Games</h2>
|
||||
<p className="text-gray-600 mb-8 text-lg">Failed to load your game library. Please try again later.</p>
|
||||
<motion.button
|
||||
onClick={() => window.location.reload()}
|
||||
className="btn btn-primary"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
Try Again
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const categories = selectedCategory
|
||||
? [{ name: selectedCategory, count: categoryData?.count || 0, games: categoryData?.games || [] }]
|
||||
: gamesData?.data || []
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<div className="bg-white shadow-sm border-b border-gray-200">
|
||||
<div className="container mx-auto px-4 py-6">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-gradient-to-r from-green-500 to-emerald-600 rounded-xl">
|
||||
<GamepadIcon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Games Library</h1>
|
||||
</div>
|
||||
|
||||
{/* Search and Filters */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 flex-1 lg:max-w-2xl">
|
||||
<form onSubmit={handleSearch} className="flex-1">
|
||||
<div className="relative">
|
||||
<MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search games..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<motion.button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className={`px-4 py-2 rounded-xl border transition-all duration-200 flex items-center gap-2 ${
|
||||
activeFiltersCount > 0
|
||||
? 'border-green-500 bg-green-50 text-green-700'
|
||||
: 'border-gray-300 hover:border-gray-400'
|
||||
}`}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<AdjustmentsHorizontalIcon className="w-4 h-4" />
|
||||
Filters
|
||||
{activeFiltersCount > 0 && (
|
||||
<span className="bg-green-600 text-white text-xs px-2 py-1 rounded-full">
|
||||
{activeFiltersCount}
|
||||
</span>
|
||||
)}
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters Panel */}
|
||||
<AnimatePresence>
|
||||
{showFilters && (
|
||||
<motion.div
|
||||
className="mt-6 p-4 bg-gray-50 rounded-xl border border-gray-200"
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* Sort */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Sort By</label>
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value as SortOption)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
|
||||
>
|
||||
{sortOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* View Mode */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">View Mode</label>
|
||||
<div className="flex gap-2">
|
||||
{[
|
||||
{ mode: 'grid' as ViewMode, icon: Squares2X2Icon, label: 'Grid' },
|
||||
{ mode: 'list' as ViewMode, icon: ListBulletIcon, label: 'List' },
|
||||
{ mode: 'covers' as ViewMode, icon: PhotoIcon, label: 'Covers' }
|
||||
].map(({ mode, icon: Icon, label }) => (
|
||||
<motion.button
|
||||
key={mode}
|
||||
onClick={() => setViewMode(mode)}
|
||||
className={`flex-1 px-3 py-2 rounded-lg border transition-all duration-200 flex items-center justify-center gap-1 ${
|
||||
viewMode === mode
|
||||
? 'border-green-500 bg-green-50 text-green-700'
|
||||
: 'border-gray-300 hover:border-gray-400'
|
||||
}`}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
<span className="text-sm">{label}</span>
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Clear Filters */}
|
||||
<div className="flex items-end">
|
||||
<motion.button
|
||||
onClick={clearFilters}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-all duration-200"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
Clear All Filters
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Categories and Games */}
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
{/* Category Navigation */}
|
||||
{!selectedCategory && (
|
||||
<motion.div
|
||||
className="mb-8"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{categories.map((category: any) => {
|
||||
const Icon = categoryIcons[category.name as keyof typeof categoryIcons]
|
||||
return (
|
||||
<motion.button
|
||||
key={category.name}
|
||||
onClick={() => setSelectedCategory(category.name)}
|
||||
className="group relative px-6 py-3 bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200"
|
||||
whileHover={{ scale: 1.02, y: -2 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-2 bg-gradient-to-r ${categoryColors[category.name as keyof typeof categoryColors]} rounded-lg`}>
|
||||
<Icon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="font-semibold text-gray-900">{category.name}</div>
|
||||
<div className="text-sm text-gray-500">{category.count} games</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronDownIcon className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 group-hover:text-gray-600 transition-colors" />
|
||||
</motion.button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Back to Categories */}
|
||||
{selectedCategory && (
|
||||
<motion.div
|
||||
className="mb-6"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
>
|
||||
<motion.button
|
||||
onClick={() => setSelectedCategory(null)}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-white rounded-lg border border-gray-300 hover:bg-gray-50 transition-all duration-200"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<ChevronDownIcon className="w-4 h-4 rotate-90" />
|
||||
Back to Categories
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Games List */}
|
||||
<div className="space-y-8">
|
||||
{categories.map((category: any) => (
|
||||
<motion.div
|
||||
key={category.name}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
{/* Category Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-2 bg-gradient-to-r ${categoryColors[category.name as keyof typeof categoryColors]} rounded-lg`}>
|
||||
{React.createElement(categoryIcons[category.name as keyof typeof categoryIcons], {
|
||||
className: "w-5 h-5 text-white"
|
||||
})}
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
{category.name} ({category.count})
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{!selectedCategory && (
|
||||
<motion.button
|
||||
onClick={() => toggleCategory(category.name)}
|
||||
className="flex items-center gap-2 px-3 py-1 text-sm text-gray-600 hover:text-gray-900 transition-colors"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
{expandedCategories.has(category.name) ? 'Collapse' : 'Expand'}
|
||||
<ChevronDownIcon className={`w-4 h-4 transform transition-transform ${
|
||||
expandedCategories.has(category.name) ? 'rotate-180' : ''
|
||||
}`} />
|
||||
</motion.button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Games Grid/List */}
|
||||
<AnimatePresence>
|
||||
{(expandedCategories.has(category.name) || selectedCategory) && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{category.games.length === 0 ? (
|
||||
<div className="text-center py-12 bg-white rounded-xl border border-gray-200">
|
||||
<GamepadIcon className="mx-auto w-12 h-12 text-gray-400 mb-4" />
|
||||
<p className="text-gray-500">No games found in this category</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className={
|
||||
viewMode === 'grid'
|
||||
? 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6'
|
||||
: viewMode === 'list'
|
||||
? 'space-y-2'
|
||||
: 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6'
|
||||
}>
|
||||
{category.games.map((game: GameItem, index: number) => (
|
||||
<motion.div
|
||||
key={game.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
>
|
||||
<GameCard
|
||||
game={game}
|
||||
viewMode={viewMode}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user