initial version

2026-03-25 16:18:23 -04:00
parent aeec7cae36
commit 88595bee90
27 changed files with 7959 additions and 1 deletions
--- a/src/components/games/GamesView.tsx
+++ b/src/components/games/GamesView.tsx
@@ -0,0 +1,119 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import type { Game } from '@/types'
+import GameDetailModal from './GameDetailModal'
+
+interface Props {
+  libraryId: string
+}
+
+export default function GamesView({ libraryId }: Props) {
+  const [games, setGames] = useState<Game[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [selected, setSelected] = useState<Game | null>(null)
+
+  useEffect(() => {
+    fetch(`/api/games?libraryId=${encodeURIComponent(libraryId)}`)
+      .then((r) => r.json())
+      .then((data) => {
+        setGames(data)
+        setLoading(false)
+      })
+      .catch(() => {
+        setError('Failed to load games')
+        setLoading(false)
+      })
+  }, [libraryId])
+
+  if (loading) return <LoadingGrid />
+  if (error) return <ErrorMessage message={error} />
+  if (games.length === 0) return <EmptyState />
+
+  return (
+    <>
+      <div className="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+        {games.map((game) => (
+          <button
+            key={game.id}
+            onClick={() => setSelected(game)}
+            className="group text-left rounded-xl overflow-hidden border transition-all focus:outline-none focus-visible:ring-2"
+            style={{
+              borderColor: 'var(--border)',
+              backgroundColor: 'var(--surface)',
+            }}
+            onMouseEnter={(e) => {
+              ;(e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)'
+              ;(e.currentTarget as HTMLElement).style.transform = 'translateY(-2px)'
+            }}
+            onMouseLeave={(e) => {
+              ;(e.currentTarget as HTMLElement).style.borderColor = 'var(--border)'
+              ;(e.currentTarget as HTMLElement).style.transform = 'translateY(0)'
+            }}
+          >
+            <div className="aspect-[3/4] w-full relative overflow-hidden" style={{ backgroundColor: 'var(--border)' }}>
+              {game.coverUrl ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={game.coverUrl}
+                  alt={game.title}
+                  className="absolute inset-0 w-full h-full object-cover"
+                />
+              ) : (
+                <div className="absolute inset-0 flex items-center justify-center text-4xl">
+                  🎮
+                </div>
+              )}
+            </div>
+            <div className="p-2">
+              <p
+                className="text-xs font-medium truncate leading-tight"
+                style={{ color: 'var(--text-primary)' }}
+                title={game.title}
+              >
+                {game.title}
+              </p>
+            </div>
+          </button>
+        ))}
+      </div>
+
+      {selected && (
+        <GameDetailModal game={selected} libraryId={libraryId} onClose={() => setSelected(null)} />
+      )}
+    </>
+  )
+}
+
+function LoadingGrid() {
+  return (
+    <div className="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+      {Array.from({ length: 12 }).map((_, i) => (
+        <div key={i} className="rounded-xl overflow-hidden" style={{ backgroundColor: 'var(--surface)' }}>
+          <div className="aspect-[3/4] w-full animate-pulse" style={{ backgroundColor: 'var(--border)' }} />
+          <div className="p-2">
+            <div className="h-3 rounded animate-pulse" style={{ backgroundColor: 'var(--border)', width: '70%' }} />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function ErrorMessage({ message }: { message: string }) {
+  return (
+    <div className="rounded-lg border p-8 text-center" style={{ borderColor: 'var(--border)', color: 'var(--text-secondary)' }}>
+      {message}
+    </div>
+  )
+}
+
+function EmptyState() {
+  return (
+    <div className="rounded-lg border p-12 text-center" style={{ borderColor: 'var(--border)', color: 'var(--text-secondary)' }}>
+      <p className="text-lg mb-1">No games found</p>
+      <p className="text-sm">Each game should be a folder containing a .zip file.</p>
+    </div>
+  )
+}