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/GameDetailModal.tsx
+++ b/src/components/games/GameDetailModal.tsx
@@ -0,0 +1,97 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import type { Game } from '@/types'
+
+interface Props {
+  game: Game
+  libraryId: string
+  onClose: () => void
+}
+
+export default function GameDetailModal({ game, libraryId, onClose }: Props) {
+  const overlayRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleKey)
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.removeEventListener('keydown', handleKey)
+      document.body.style.overflow = ''
+    }
+  }, [onClose])
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === overlayRef.current) onClose()
+  }
+
+  const downloadHref = `/api/file?libraryId=${encodeURIComponent(libraryId)}&path=${encodeURIComponent(game.zipPath)}`
+
+  return (
+    <div
+      ref={overlayRef}
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      style={{ backgroundColor: 'rgba(0,0,0,0.75)' }}
+      onClick={handleOverlayClick}
+    >
+      <div
+        className="relative w-full max-w-lg rounded-2xl overflow-hidden shadow-2xl"
+        style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+      >
+        {/* Close button */}
+        <button
+          onClick={onClose}
+          className="absolute top-3 right-3 z-10 w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
+          style={{ backgroundColor: 'rgba(0,0,0,0.5)', color: 'var(--text-primary)' }}
+          onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.8)')}
+          onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.5)')}
+          aria-label="Close"
+        >
+          ✕
+        </button>
+
+        {/* Wide cover / cover hero */}
+        <div className="w-full" style={{ backgroundColor: 'var(--border)' }}>
+          {game.wideCoverUrl ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={game.wideCoverUrl}
+              alt={`${game.title} wide cover`}
+              className="w-full object-cover max-h-64"
+            />
+          ) : game.coverUrl ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={game.coverUrl}
+              alt={`${game.title} cover`}
+              className="w-full object-contain max-h-64"
+            />
+          ) : (
+            <div className="h-40 flex items-center justify-center text-5xl">🎮</div>
+          )}
+        </div>
+
+        {/* Info */}
+        <div className="p-5">
+          <h2 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
+            {game.title}
+          </h2>
+          <a
+            href={downloadHref}
+            download
+            className="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-lg font-medium text-sm transition-colors"
+            style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+            onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--accent-hover)')}
+            onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--accent)')}
+          >
+            <span>↓</span>
+            Download .zip
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}