basic games page layout
This commit is contained in:
roormonger
360
src/components/GamesPage.tsx
Normal file
360
src/components/GamesPage.tsx
Normal file
@@ -0,0 +1,360 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { FocusContext, useFocusable, setFocus } from '@noriginmedia/norigin-spatial-navigation';
|
||||
import { rommApiClient, Platform, Game } from '../api/client';
|
||||
|
||||
interface FocusableItemProps {
|
||||
onFocus: () => void;
|
||||
onEnterPress?: () => void;
|
||||
children: (focused: boolean) => React.ReactNode;
|
||||
className?: string;
|
||||
focusKey?: string;
|
||||
scrollOptions?: ScrollIntoViewOptions;
|
||||
}
|
||||
|
||||
const FocusableItem = ({ onFocus, onEnterPress, children, className, focusKey, scrollOptions }: FocusableItemProps) => {
|
||||
const { ref, focused } = useFocusable({
|
||||
onFocus: () => {
|
||||
onFocus();
|
||||
if (scrollOptions) {
|
||||
ref.current?.scrollIntoView(scrollOptions);
|
||||
} else {
|
||||
ref.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
|
||||
}
|
||||
},
|
||||
onEnterPress,
|
||||
focusKey
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref={ref} className={`${className} ${focused ? 'focused' : ''}`}>
|
||||
{children(focused)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const PlatformItem = ({ platform, active, onSelect }: { platform: Platform, active: boolean, onSelect: () => void }) => (
|
||||
<FocusableItem
|
||||
onFocus={onSelect}
|
||||
className="shrink-0"
|
||||
>
|
||||
{(focused) => (
|
||||
<div className="flex flex-col items-center gap-2 group cursor-pointer w-[110px]">
|
||||
<div className={`w-[90px] h-[90px] rounded-[24px] transition-all duration-500 border flex items-center justify-center p-5
|
||||
${focused ? 'bg-[#2563eb] border-[#2563eb] scale-110 shadow-[0_15px_40px_rgba(37,99,235,0.4)]' :
|
||||
active ? 'bg-white/10 border-white/20' : 'bg-white/5 border-white/5 group-hover:border-white/20'}`}
|
||||
>
|
||||
{platform.iconUrl ? (
|
||||
<img
|
||||
src={platform.iconUrl}
|
||||
alt={platform.name}
|
||||
className={`w-full h-full object-contain transition-all duration-500 ${focused ? 'scale-110 brightness-100' : 'grayscale brightness-200 opacity-30 group-hover:opacity-60'}`}
|
||||
/>
|
||||
) : (
|
||||
<span className={`material-symbols-outlined text-3xl transition-colors ${focused ? 'text-white' : 'text-white/20'}`}>sports_esports</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={`text-[9px] font-black uppercase geist-mono tracking-widest text-center transition-all duration-300 w-full px-2 truncate
|
||||
${focused ? 'text-[#2563eb] translate-y-1' : active ? 'text-white' : 'text-white/20'}`}
|
||||
>
|
||||
{platform.name}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</FocusableItem>
|
||||
);
|
||||
|
||||
const GameListItem = ({ game, active, onFocus }: { game: Game, active: boolean, onFocus: () => void }) => (
|
||||
<FocusableItem
|
||||
onFocus={onFocus}
|
||||
className="w-full"
|
||||
focusKey={`GAME_${game.id}`}
|
||||
scrollOptions={{ behavior: 'smooth', block: 'nearest' }}
|
||||
>
|
||||
{(focused) => (
|
||||
<div className={`px-4 py-2.5 transition-all duration-300 flex items-center gap-4 cursor-pointer group border-r-2
|
||||
${focused ? 'bg-white/10 border-[#2563eb]' :
|
||||
active ? 'bg-white/5 border-transparent' : 'bg-transparent border-transparent hover:bg-white/5'}`}
|
||||
>
|
||||
<div className="w-8 h-11 bg-white/5 rounded-[4px] overflow-hidden shrink-0 border border-white/5 group-hover:border-white/20 transition-colors">
|
||||
<img src={game.coverUrl} alt="" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className={`text-xs font-bold truncate transition-colors ${focused || active ? 'text-white' : 'text-white/60 group-hover:text-white/80'}`}>
|
||||
{game.title}
|
||||
</div>
|
||||
<div className="text-[10px] text-white/40 font-medium geist-mono uppercase tracking-tight">
|
||||
{game.size}
|
||||
</div>
|
||||
</div>
|
||||
{focused && <div className="material-symbols-outlined text-[#2563eb] text-lg animate-pulse">chevron_right</div>}
|
||||
</div>
|
||||
)}
|
||||
</FocusableItem>
|
||||
);
|
||||
|
||||
const AlphabetScroller = ({
|
||||
letters,
|
||||
onLetterPress
|
||||
}: {
|
||||
letters: string[],
|
||||
onLetterPress: (letter: string) => void
|
||||
}) => {
|
||||
const { focusKey } = useFocusable({
|
||||
focusKey: 'ALPHABET_SCROLLER'
|
||||
});
|
||||
|
||||
return (
|
||||
<FocusContext.Provider value={focusKey}>
|
||||
<div className="w-10 flex flex-col items-center justify-center py-8 bg-black/40 border-l border-white/5 gap-2 select-none">
|
||||
{letters.map(letter => (
|
||||
<FocusableItem
|
||||
key={letter}
|
||||
onFocus={() => {}}
|
||||
onEnterPress={() => onLetterPress(letter)}
|
||||
className="w-full flex justify-center py-1"
|
||||
scrollOptions={{ behavior: 'smooth', block: 'center' }}
|
||||
>
|
||||
{(focused) => (
|
||||
<div className={`text-[13px] font-black geist-mono transition-all duration-200
|
||||
${focused ? 'text-[#2563eb] scale-125' : 'text-white/30 hover:text-white/70'}`}
|
||||
>
|
||||
{letter}
|
||||
</div>
|
||||
)}
|
||||
</FocusableItem>
|
||||
))}
|
||||
</div>
|
||||
</FocusContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const GamesPage = () => {
|
||||
const { ref: pageRef, focusKey: pageFocusKey } = useFocusable();
|
||||
const [selectedPlatformId, setSelectedPlatformId] = useState<number | null>(null);
|
||||
const [selectedGameId, setSelectedGameId] = useState<string | null>(null);
|
||||
|
||||
// Queries
|
||||
const platformsQuery = useQuery({
|
||||
queryKey: ['platforms'],
|
||||
queryFn: () => rommApiClient.fetchPlatforms()
|
||||
});
|
||||
|
||||
const gamesQuery = useQuery({
|
||||
queryKey: ['games', selectedPlatformId],
|
||||
queryFn: () => selectedPlatformId ? rommApiClient.fetchGamesByPlatform(selectedPlatformId) : Promise.resolve([]),
|
||||
enabled: !!selectedPlatformId
|
||||
});
|
||||
|
||||
const detailsQuery = useQuery({
|
||||
queryKey: ['gameDetails', selectedGameId],
|
||||
queryFn: () => selectedGameId ? rommApiClient.fetchGameDetails(selectedGameId) : Promise.resolve(null),
|
||||
enabled: !!selectedGameId
|
||||
});
|
||||
|
||||
const filteredPlatforms = React.useMemo(() =>
|
||||
platformsQuery.data?.filter(p => p.romCount > 0) || [],
|
||||
[platformsQuery.data]
|
||||
);
|
||||
|
||||
// Auto-select first items
|
||||
useEffect(() => {
|
||||
if (filteredPlatforms.length > 0 && selectedPlatformId === null) {
|
||||
setSelectedPlatformId(filteredPlatforms[0].id);
|
||||
}
|
||||
}, [filteredPlatforms, selectedPlatformId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (gamesQuery.data && gamesQuery.data.length > 0 && !selectedGameId) {
|
||||
setSelectedGameId(gamesQuery.data[0].id);
|
||||
}
|
||||
}, [gamesQuery.data, selectedGameId]);
|
||||
|
||||
const handlePlatformFocus = (id: number) => {
|
||||
setSelectedPlatformId(id);
|
||||
setSelectedGameId(null); // Reset game selection when platform changes
|
||||
};
|
||||
|
||||
// Alphabet Logic
|
||||
const activeLetters = React.useMemo(() => {
|
||||
if (!gamesQuery.data) return [];
|
||||
const letters = new Set<string>();
|
||||
gamesQuery.data.forEach(game => {
|
||||
const firstChar = game.title.charAt(0).toUpperCase();
|
||||
if (/[A-Z]/.test(firstChar)) {
|
||||
letters.add(firstChar);
|
||||
} else {
|
||||
letters.add('#');
|
||||
}
|
||||
});
|
||||
return Array.from(letters).sort();
|
||||
}, [gamesQuery.data]);
|
||||
|
||||
const handleLetterPress = (letter: string) => {
|
||||
if (!gamesQuery.data) return;
|
||||
const game = gamesQuery.data.find(g => {
|
||||
const firstChar = g.title.charAt(0).toUpperCase();
|
||||
return letter === '#' ? !/[A-Z]/.test(firstChar) : firstChar === letter;
|
||||
});
|
||||
if (game) {
|
||||
setSelectedGameId(game.id);
|
||||
setFocus(`GAME_${game.id}`);
|
||||
}
|
||||
};
|
||||
|
||||
if (platformsQuery.isLoading) return <div className="h-full flex items-center justify-center text-white/50 geist-mono uppercase">Initializing Archives...</div>;
|
||||
|
||||
return (
|
||||
<FocusContext.Provider value={pageFocusKey}>
|
||||
<div ref={pageRef} className="h-full flex flex-col bg-[#10131f] overflow-hidden">
|
||||
{/* Header / Platforms */}
|
||||
<div className="px-12 py-5 shrink-0 border-b border-white/5 bg-black/10">
|
||||
<div className="flex gap-6 overflow-x-auto no-scrollbar pb-2">
|
||||
{filteredPlatforms.map(p => (
|
||||
<PlatformItem
|
||||
key={p.id}
|
||||
platform={p}
|
||||
active={selectedPlatformId === p.id}
|
||||
onSelect={() => handlePlatformFocus(p.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Split Layout */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Left Column: Game List + Alphabet */}
|
||||
<div className="w-[500px] border-r border-white/5 flex overflow-hidden bg-black/20">
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{gamesQuery.isLoading ? (
|
||||
<div className="p-12 text-center text-white/20 geist-mono text-[10px] uppercase">Retrieving index...</div>
|
||||
) : (
|
||||
gamesQuery.data?.map(game => (
|
||||
<GameListItem
|
||||
key={game.id}
|
||||
game={game}
|
||||
active={selectedGameId === game.id}
|
||||
onFocus={() => setSelectedGameId(game.id)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{activeLetters.length > 0 && (
|
||||
<AlphabetScroller
|
||||
letters={activeLetters}
|
||||
onLetterPress={handleLetterPress}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right Column: Game Details */}
|
||||
<div className="flex-1 overflow-y-auto no-scrollbar relative">
|
||||
{detailsQuery.data ? (
|
||||
<div className="p-16 animate-in fade-in slide-in-from-right-8 duration-700">
|
||||
<div className="flex gap-12 items-start">
|
||||
{/* Poster */}
|
||||
<div className="w-[320px] rounded-[16px] overflow-hidden shadow-[0_20px_50px_rgba(0,0,0,0.5)] border border-white/10 shrink-0 sticky top-0 group">
|
||||
<img
|
||||
src={detailsQuery.data.coverUrl}
|
||||
className="w-full aspect-[2/3] object-cover transition-transform duration-1000 group-hover:scale-110"
|
||||
alt=""
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60"></div>
|
||||
</div>
|
||||
|
||||
{/* Info Pane */}
|
||||
<div className="flex-1 pt-4">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<span className="px-3 py-1 bg-[#2563eb] text-white text-[9px] font-black uppercase tracking-widest rounded-sm">PLAYABLE</span>
|
||||
<span className="text-white/40 text-[10px] geist-mono uppercase tracking-widest">ID: ROM-{detailsQuery.data.id}</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl font-black text-white mb-4 tracking-tighter leading-none">{detailsQuery.data.title}</h1>
|
||||
|
||||
<div className="flex flex-wrap gap-x-6 gap-y-2 mb-10 items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="material-symbols-outlined text-[16px] text-[#2563eb]">developer_board</span>
|
||||
<span className="text-[11px] font-bold text-white/80 uppercase geist-mono">{detailsQuery.data.developer || 'Unknown Dev'}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="material-symbols-outlined text-[16px] text-[#2563eb]">calendar_today</span>
|
||||
<span className="text-[11px] font-bold text-white/80 uppercase geist-mono">{detailsQuery.data.releaseDate || 'N/A'}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="material-symbols-outlined text-[16px] text-[#2563eb]">sports_esports</span>
|
||||
<span className="text-[11px] font-bold text-white/80 uppercase geist-mono">{detailsQuery.data.system}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 mb-12">
|
||||
<FocusableItem
|
||||
onFocus={() => {}}
|
||||
onEnterPress={() => console.log("Play Game", detailsQuery.data?.id)}
|
||||
className="shrink-0"
|
||||
>
|
||||
{(focused) => (
|
||||
<button className={`flex items-center gap-3 px-8 py-4 rounded-full font-black uppercase tracking-tighter transition-all duration-300 shadow-xl ${focused ? 'bg-[#2563eb] text-white scale-105 shadow-[#2563eb]/40' : 'bg-white text-black hover:bg-white/90'}`}>
|
||||
<span className="material-symbols-outlined filled">play_arrow</span>
|
||||
Start Game
|
||||
</button>
|
||||
)}
|
||||
</FocusableItem>
|
||||
|
||||
<FocusableItem
|
||||
onFocus={() => {}}
|
||||
onEnterPress={() => console.log("Download", detailsQuery.data?.id)}
|
||||
className="shrink-0"
|
||||
>
|
||||
{(focused) => (
|
||||
<button className={`flex items-center gap-3 px-8 py-4 rounded-full font-black uppercase tracking-tighter border-2 transition-all duration-300 ${focused ? 'border-[#2563eb] text-[#2563eb] bg-[#2563eb]/10 scale-105' : 'border-white/10 text-white hover:border-white/20 bg-white/5'}`}>
|
||||
<span className="material-symbols-outlined">download</span>
|
||||
Download
|
||||
</button>
|
||||
)}
|
||||
</FocusableItem>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8 max-w-2xl">
|
||||
<section>
|
||||
<h3 className="text-[10px] font-black text-[#2563eb] uppercase tracking-[0.4em] mb-4">Brief Summary</h3>
|
||||
<p className="text-white/60 text-sm leading-relaxed font-medium">
|
||||
{detailsQuery.data.summary || "This title does not have a comprehensive analysis in our local database yet. Our researchers are working to archive more metadata for this specific entry."}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{detailsQuery.data.genres && detailsQuery.data.genres.length > 0 && (
|
||||
<section>
|
||||
<h3 className="text-[10px] font-black text-[#2563eb] uppercase tracking-[0.4em] mb-4">Classifications</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{detailsQuery.data.genres.map(g => (
|
||||
<span key={g} className="px-3 py-1 bg-white/5 border border-white/5 rounded-full text-[9px] font-bold text-white/60 uppercase tracking-widest">{g}</span>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : selectedGameId ? (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="material-symbols-outlined text-4xl text-white/10 animate-spin mb-4">progress_activity</div>
|
||||
<div className="text-[10px] geist-mono text-white/20 uppercase tracking-widest">Hydrating Metadata...</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full flex items-center justify-center p-20 text-center opacity-20">
|
||||
<div>
|
||||
<span className="material-symbols-outlined text-6xl mb-6">videogame_asset</span>
|
||||
<p className="geist-mono uppercase tracking-[0.3em] font-black text-sm">Target selection required</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FocusContext.Provider>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user