404 lines
16 KiB
JavaScript
404 lines
16 KiB
JavaScript
|
import CardItem from './CardItem';
|
|||
|
|
import BulkSelectionToolbar from './BulkSelectionToolbar';
|
|||
|
|
import CollectionSelectionModal from './CollectionSelectionModal';
|
|||
|
|
|
|||
|
|
export default function CardsPageView(props) {
|
|||
|
|
const {
|
|||
|
|
cards,
|
|||
|
|
loadingMore,
|
|||
|
|
searchQuery,
|
|||
|
|
selectedTCG,
|
|||
|
|
setSelectedTCG,
|
|||
|
|
selectedRarity,
|
|||
|
|
setSelectedRarity,
|
|||
|
|
selectedSet,
|
|||
|
|
setSelectedSet,
|
|||
|
|
selectedValueRange,
|
|||
|
|
setSelectedValueRange,
|
|||
|
|
viewMode,
|
|||
|
|
setViewMode,
|
|||
|
|
hasMore,
|
|||
|
|
selectedCards,
|
|||
|
|
favoritedCards,
|
|||
|
|
showCollectionModal,
|
|||
|
|
setShowCollectionModal,
|
|||
|
|
cardsToAdd,
|
|||
|
|
handleSearchChange,
|
|||
|
|
fetchCards,
|
|||
|
|
loadMoreCards,
|
|||
|
|
hasMoreRef,
|
|||
|
|
setPagination,
|
|||
|
|
setCards,
|
|||
|
|
setHasMore,
|
|||
|
|
tcgOptions,
|
|||
|
|
rarityOptions,
|
|||
|
|
setOptions,
|
|||
|
|
valueRangeOptions,
|
|||
|
|
handleToggleSelect,
|
|||
|
|
handleClearSelection,
|
|||
|
|
handleToggleFavorite,
|
|||
|
|
handleBulkAddToCollection,
|
|||
|
|
handleBulkAddToDeck,
|
|||
|
|
handleBulkMarkAsOwned,
|
|||
|
|
handleBulkRemoveFromOwned,
|
|||
|
|
handleBulkFavorite,
|
|||
|
|
handleBulkDelete,
|
|||
|
|
handleAddToCollections,
|
|||
|
|
} = props;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
{/* Header */}
|
|||
|
|
<div className="p-4 sm:p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
|
|||
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|||
|
|
<div>
|
|||
|
|
<h1 className="text-2xl sm:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
|
|||
|
|
Cards
|
|||
|
|
</h1>
|
|||
|
|
<p className="text-base sm:text-lg" style={{ color: 'var(--text-secondary)' }}>
|
|||
|
|
Browse and manage your card collection
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex space-x-2 sm:space-x-4">
|
|||
|
|
<button
|
|||
|
|
onClick={() => setViewMode('grid')}
|
|||
|
|
className={`p-2 rounded-xl transition-all duration-200 ${
|
|||
|
|
viewMode === 'grid'
|
|||
|
|
? 'shadow-lg'
|
|||
|
|
: 'hover:shadow-md'
|
|||
|
|
}`}
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: viewMode === 'grid' ? 'var(--bg-tertiary)' : 'transparent',
|
|||
|
|
color: viewMode === 'grid' ? 'var(--text-primary)' : 'var(--text-secondary)'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setViewMode('list')}
|
|||
|
|
className={`p-2 rounded-xl transition-all duration-200 ${
|
|||
|
|
viewMode === 'list'
|
|||
|
|
? 'shadow-lg'
|
|||
|
|
: 'hover:shadow-md'
|
|||
|
|
}`}
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: viewMode === 'list' ? 'var(--bg-tertiary)' : 'transparent',
|
|||
|
|
color: viewMode === 'list' ? 'var(--text-primary)' : 'var(--text-secondary)'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Quick Filters */}
|
|||
|
|
<div className="p-4 sm:p-6" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
|||
|
|
<div className="mb-4">
|
|||
|
|
<h3 className="text-base sm:text-lg font-semibold mb-3" style={{ color: 'var(--text-primary)' }}>
|
|||
|
|
Quick Filters
|
|||
|
|
</h3>
|
|||
|
|
<div className="flex flex-wrap gap-2 sm:gap-3">
|
|||
|
|
<button
|
|||
|
|
onClick={() => setSelectedTCG('all')}
|
|||
|
|
className={`px-4 py-2 rounded-xl font-medium transition-all duration-200 ${
|
|||
|
|
selectedTCG === 'all'
|
|||
|
|
? 'shadow-lg'
|
|||
|
|
: 'hover:shadow-md'
|
|||
|
|
}`}
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: selectedTCG === 'all' ? 'var(--bg-tertiary)' : 'transparent',
|
|||
|
|
color: selectedTCG === 'all' ? 'var(--text-primary)' : 'var(--text-secondary)',
|
|||
|
|
border: '1px solid var(--border)'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
All Games
|
|||
|
|
</button>
|
|||
|
|
{tcgOptions.map(option => (
|
|||
|
|
<button
|
|||
|
|
key={option.value}
|
|||
|
|
onClick={() => setSelectedTCG(option.value)}
|
|||
|
|
className={`px-4 py-2 rounded-xl font-medium transition-all duration-200 flex items-center gap-2 ${
|
|||
|
|
selectedTCG === option.value
|
|||
|
|
? 'shadow-lg'
|
|||
|
|
: 'hover:shadow-md'
|
|||
|
|
}`}
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: selectedTCG === option.value ? 'var(--bg-tertiary)' : 'transparent',
|
|||
|
|
color: selectedTCG === option.value ? 'var(--text-primary)' : 'var(--text-secondary)',
|
|||
|
|
border: '1px solid var(--border)'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<span>{option.icon}</span>
|
|||
|
|
{option.label}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Advanced Filters */}
|
|||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|||
|
|
Search
|
|||
|
|
</label>
|
|||
|
|
<div className="relative">
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
placeholder="Search cards..."
|
|||
|
|
className="search-bar w-full pr-12"
|
|||
|
|
value={searchQuery}
|
|||
|
|
onChange={(e) => handleSearchChange(e.target.value)}
|
|||
|
|
onKeyPress={(e) => {
|
|||
|
|
if (e.key === 'Enter') {
|
|||
|
|
setPagination(prev => ({ ...prev, page: 1 }));
|
|||
|
|
setCards([]);
|
|||
|
|
setHasMore(true);
|
|||
|
|
hasMoreRef.current = true;
|
|||
|
|
fetchCards(false);
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setPagination(prev => ({ ...prev, page: 1 }));
|
|||
|
|
setCards([]);
|
|||
|
|
setHasMore(true);
|
|||
|
|
hasMoreRef.current = true;
|
|||
|
|
fetchCards(false);
|
|||
|
|
}}
|
|||
|
|
className="absolute right-2 top-1/2 transform -translate-y-1/2 p-2 rounded-lg hover:bg-opacity-20 transition-all duration-200"
|
|||
|
|
style={{ backgroundColor: 'var(--bg-tertiary)' }}
|
|||
|
|
>
|
|||
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|||
|
|
Rarity
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={selectedRarity}
|
|||
|
|
onChange={(e) => setSelectedRarity(e.target.value)}
|
|||
|
|
className="input-field w-full"
|
|||
|
|
>
|
|||
|
|
{rarityOptions.map(option => (
|
|||
|
|
<option key={option.value} value={option.value}>
|
|||
|
|
{option.label}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|||
|
|
Set
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={selectedSet}
|
|||
|
|
onChange={(e) => setSelectedSet(e.target.value)}
|
|||
|
|
className="input-field w-full"
|
|||
|
|
>
|
|||
|
|
{setOptions.map(option => (
|
|||
|
|
<option key={option.value} value={option.value}>
|
|||
|
|
{option.label}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
|||
|
|
Value Range
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={selectedValueRange}
|
|||
|
|
onChange={(e) => setSelectedValueRange(e.target.value)}
|
|||
|
|
className="input-field w-full"
|
|||
|
|
>
|
|||
|
|
{valueRangeOptions.map(option => (
|
|||
|
|
<option key={option.value} value={option.value}>
|
|||
|
|
{option.label}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Active Filters Display */}
|
|||
|
|
{(selectedTCG !== 'all' || selectedRarity !== 'all' || selectedSet !== 'all' || selectedValueRange !== 'all') && (
|
|||
|
|
<div className="mt-4">
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
{selectedTCG !== 'all' && (
|
|||
|
|
<span className="px-3 py-1 rounded-full text-sm font-medium" style={{
|
|||
|
|
backgroundColor: 'var(--bg-tertiary)',
|
|||
|
|
color: 'var(--text-primary)',
|
|||
|
|
border: '1px solid var(--border)'
|
|||
|
|
}}>
|
|||
|
|
{tcgOptions.find(opt => opt.value === selectedTCG)?.label}
|
|||
|
|
<button
|
|||
|
|
onClick={() => setSelectedTCG('all')}
|
|||
|
|
className="ml-2 hover:opacity-70"
|
|||
|
|
>
|
|||
|
|
×
|
|||
|
|
</button>
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
{selectedRarity !== 'all' && (
|
|||
|
|
<span className="px-3 py-1 rounded-full text-sm font-medium" style={{
|
|||
|
|
backgroundColor: 'var(--bg-tertiary)',
|
|||
|
|
color: 'var(--text-primary)',
|
|||
|
|
border: '1px solid var(--border)'
|
|||
|
|
}}>
|
|||
|
|
{rarityOptions.find(opt => opt.value === selectedRarity)?.label}
|
|||
|
|
<button
|
|||
|
|
onClick={() => setSelectedRarity('all')}
|
|||
|
|
className="ml-2 hover:opacity-70"
|
|||
|
|
>
|
|||
|
|
×
|
|||
|
|
</button>
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
{selectedSet !== 'all' && (
|
|||
|
|
<span className="px-3 py-1 rounded-full text-sm font-medium" style={{
|
|||
|
|
backgroundColor: 'var(--bg-tertiary)',
|
|||
|
|
color: 'var(--text-primary)',
|
|||
|
|
border: '1px solid var(--border)'
|
|||
|
|
}}>
|
|||
|
|
{setOptions.find(opt => opt.value === selectedSet)?.label}
|
|||
|
|
<button
|
|||
|
|
onClick={() => setSelectedSet('all')}
|
|||
|
|
className="ml-2 hover:opacity-70"
|
|||
|
|
>
|
|||
|
|
×
|
|||
|
|
</button>
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
{selectedValueRange !== 'all' && (
|
|||
|
|
<span className="px-3 py-1 rounded-full text-sm font-medium" style={{
|
|||
|
|
backgroundColor: 'var(--bg-tertiary)',
|
|||
|
|
color: 'var(--text-primary)',
|
|||
|
|
border: '1px solid var(--border)'
|
|||
|
|
}}>
|
|||
|
|
{valueRangeOptions.find(opt => opt.value === selectedValueRange)?.label}
|
|||
|
|
<button
|
|||
|
|
onClick={() => setSelectedValueRange('all')}
|
|||
|
|
className="ml-2 hover:opacity-70"
|
|||
|
|
>
|
|||
|
|
×
|
|||
|
|
</button>
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setSelectedTCG('all');
|
|||
|
|
setSelectedRarity('all');
|
|||
|
|
setSelectedSet('all');
|
|||
|
|
setSelectedValueRange('all');
|
|||
|
|
}}
|
|||
|
|
className="px-3 py-1 rounded-full text-sm font-medium hover:opacity-70" style={{
|
|||
|
|
color: 'var(--text-accent)',
|
|||
|
|
border: '1px solid var(--border)'
|
|||
|
|
}}>
|
|||
|
|
Clear All
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Cards Display */}
|
|||
|
|
<div className="p-6 pb-64">
|
|||
|
|
{cards.length === 0 ? (
|
|||
|
|
<div className="text-center py-12">
|
|||
|
|
<div className="text-6xl mb-4">🃏</div>
|
|||
|
|
<h3 className="text-xl font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
|
|||
|
|
No cards found
|
|||
|
|
</h3>
|
|||
|
|
<p className="mb-6" style={{ color: 'var(--text-secondary)' }}>
|
|||
|
|
Try adjusting your search or filters
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<div className={viewMode === 'grid' ? 'card-grid-container grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-3 sm:gap-4 lg:gap-6 p-3 sm:p-4 lg:p-6 xl:p-8' : 'space-y-4 p-6'}>
|
|||
|
|
{cards.map((card) => (
|
|||
|
|
<CardItem
|
|||
|
|
key={card.id}
|
|||
|
|
card={card}
|
|||
|
|
viewMode={viewMode}
|
|||
|
|
isSelected={selectedCards.some(c => c.id === card.id)}
|
|||
|
|
onToggleSelect={handleToggleSelect}
|
|||
|
|
onAddToCollection={(card) => handleBulkAddToCollection([card])}
|
|||
|
|
onAddToDeck={handleBulkAddToDeck}
|
|||
|
|
onToggleFavorite={handleToggleFavorite}
|
|||
|
|
isFavorited={favoritedCards.has(card.id)}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Infinite Scroll Loading Indicator */}
|
|||
|
|
{loadingMore && (
|
|||
|
|
<div className="flex justify-center py-8">
|
|||
|
|
<div className="flex items-center space-x-3">
|
|||
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2" style={{ borderColor: 'var(--text-accent)' }}></div>
|
|||
|
|
<span style={{ color: 'var(--text-secondary)' }}>Loading more cards...</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Infinite Scroll Sentinel */}
|
|||
|
|
<div id="infinite-scroll-sentinel" className="h-4 w-full" />
|
|||
|
|
|
|||
|
|
{/* Load More Button */}
|
|||
|
|
{hasMore && !loadingMore && (
|
|||
|
|
<div className="flex justify-center py-8">
|
|||
|
|
<button
|
|||
|
|
onClick={loadMoreCards}
|
|||
|
|
className="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl"
|
|||
|
|
>
|
|||
|
|
Load More Cards
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* End of results indicator */}
|
|||
|
|
{!hasMore && cards.length > 0 && (
|
|||
|
|
<div className="flex justify-center py-8">
|
|||
|
|
<span style={{ color: 'var(--text-secondary)' }}>No more cards to load</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Bulk Selection Toolbar */}
|
|||
|
|
<BulkSelectionToolbar
|
|||
|
|
selectedCards={selectedCards}
|
|||
|
|
onClearSelection={handleClearSelection}
|
|||
|
|
onAddToCollection={handleBulkAddToCollection}
|
|||
|
|
onAddToDeck={handleBulkAddToDeck}
|
|||
|
|
onMarkAsOwned={handleBulkMarkAsOwned}
|
|||
|
|
onRemoveFromOwned={handleBulkRemoveFromOwned}
|
|||
|
|
onBulkFavorite={handleBulkFavorite}
|
|||
|
|
onBulkDelete={handleBulkDelete}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* Collection Selection Modal */}
|
|||
|
|
<CollectionSelectionModal
|
|||
|
|
isOpen={showCollectionModal}
|
|||
|
|
onClose={() => setShowCollectionModal(false)}
|
|||
|
|
cards={cardsToAdd}
|
|||
|
|
onAddToCollections={handleAddToCollections}
|
|||
|
|
/>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|