33e03d8f47
Moves ~530 lines of 3D card rendering into components/Card3D.js so the cards page god-component split can continue incrementally. Co-authored-by: Cursor <cursoragent@cursor.com>
974 lines
34 KiB
JavaScript
974 lines
34 KiB
JavaScript
import { useState, useEffect, useRef } from 'react';
|
||
import { useRouter } from 'next/router';
|
||
import Link from 'next/link';
|
||
import Layout from '../components/Layout';
|
||
import CardItem from '../components/CardItem';
|
||
import BulkSelectionToolbar from '../components/BulkSelectionToolbar';
|
||
import CollectionSelectionModal from '../components/CollectionSelectionModal';
|
||
import ProtectedRoute from '../components/ProtectedRoute';
|
||
import { ManaCost, ColorFilterSymbol } from '../components/ManaSymbols';
|
||
import ManaSymbolSettings from '../components/ManaSymbolSettings';
|
||
import { useAuth } from '../lib/use-auth';
|
||
import { VOCAB } from '../lib/collection-vocabulary.js';
|
||
|
||
// Public fallback component for non-authenticated users
|
||
function PublicCardsView() {
|
||
return (
|
||
<Layout user={null}>
|
||
<div className="p-6">
|
||
<div className="max-w-7xl mx-auto">
|
||
{/* Header with login prompt */}
|
||
<div className="mb-8 text-center">
|
||
<h1 className="text-4xl font-bold mb-4 gradient-text-flame">Browse Trading Cards</h1>
|
||
<p className="text-xl mb-6" style={{ color: 'var(--text-secondary)' }}>
|
||
Discover thousands of trading cards from popular TCGs
|
||
</p>
|
||
<div className="bg-gradient-to-r from-orange-50 to-red-50 dark:from-orange-900/20 dark:to-red-900/20 rounded-2xl p-6 border border-orange-200 dark:border-orange-800">
|
||
<h3 className="text-lg font-semibold mb-2 gradient-text-ember">Sign Up to Unlock Full Features</h3>
|
||
<p className="mb-4" style={{ color: 'var(--text-secondary)' }}>
|
||
Create lists, add cards to {VOCAB.MY_COLLECTION}, mark favorites, and more!
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
||
<Link
|
||
href="/signup"
|
||
className="px-6 py-3 font-medium rounded-xl transition-all duration-200 hover:opacity-90"
|
||
style={{
|
||
backgroundColor: 'var(--accent-ember)',
|
||
color: 'white'
|
||
}}
|
||
>
|
||
Create Free Account
|
||
</Link>
|
||
<Link
|
||
href="/login"
|
||
className="px-6 py-3 font-medium rounded-xl border-2 transition-all duration-200 hover:opacity-80"
|
||
style={{
|
||
color: 'var(--text-primary)',
|
||
borderColor: 'var(--accent-ember)'
|
||
}}
|
||
>
|
||
Sign In
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Basic card browser would go here - simplified version */}
|
||
<div className="text-center py-20">
|
||
<div className="w-16 h-16 mx-auto mb-4 rounded-2xl flex items-center justify-center" style={{ backgroundColor: 'var(--accent-ember)' }}>
|
||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||
</svg>
|
||
</div>
|
||
<h3 className="text-xl font-semibold mb-2 gradient-text-flame">Full Card Browser Coming Soon</h3>
|
||
<p style={{ color: 'var(--text-secondary)' }}>
|
||
Sign up now to get early access to our complete card database and list tools.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
}
|
||
|
||
function AuthenticatedCards() {
|
||
const router = useRouter();
|
||
const { user, loading: authLoading } = useAuth();
|
||
|
||
const [cards, setCards] = useState([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [loadingMore, setLoadingMore] = useState(false);
|
||
const [searchQuery, setSearchQuery] = useState('');
|
||
const [selectedTCG, setSelectedTCG] = useState('all');
|
||
const [selectedRarity, setSelectedRarity] = useState('all');
|
||
const [selectedSet, setSelectedSet] = useState('all');
|
||
const [selectedValueRange, setSelectedValueRange] = useState('all');
|
||
const [viewMode, setViewMode] = useState('grid'); // grid or list
|
||
const [pagination, setPagination] = useState({
|
||
page: 1,
|
||
limit: 50,
|
||
total: 0,
|
||
pages: 0
|
||
});
|
||
const [filters, setFilters] = useState({
|
||
games: [],
|
||
rarities: [],
|
||
sets: []
|
||
});
|
||
const [hasMore, setHasMore] = useState(true);
|
||
const loadingMoreRef = useRef(false);
|
||
const hasMoreRef = useRef(true);
|
||
|
||
// Bulk selection state
|
||
const [selectedCards, setSelectedCards] = useState([]);
|
||
const [favoritedCards, setFavoritedCards] = useState(new Set());
|
||
|
||
// Modal states
|
||
const [showCollectionModal, setShowCollectionModal] = useState(false);
|
||
const [cardsToAdd, setCardsToAdd] = useState([]);
|
||
|
||
// Mana symbol settings
|
||
const [manaSymbolSettings, setManaSymbolSettings] = useState({ useSVG: false });
|
||
|
||
// Fetch cards from database
|
||
const fetchCards = async (isLoadMore = false) => {
|
||
try {
|
||
if (isLoadMore) {
|
||
setLoadingMore(true);
|
||
loadingMoreRef.current = true;
|
||
} else {
|
||
setLoading(true);
|
||
}
|
||
|
||
const params = new URLSearchParams({
|
||
query: searchQuery,
|
||
game: selectedTCG,
|
||
rarity: selectedRarity,
|
||
set: selectedSet,
|
||
minPrice: selectedValueRange === 'under-50' ? '0' :
|
||
selectedValueRange === '50-100' ? '50' :
|
||
selectedValueRange === '100-500' ? '100' :
|
||
selectedValueRange === '500-1000' ? '500' :
|
||
selectedValueRange === 'over-1000' ? '1000' : '',
|
||
maxPrice: selectedValueRange === '50-100' ? '100' :
|
||
selectedValueRange === '100-500' ? '500' :
|
||
selectedValueRange === '500-1000' ? '1000' : '',
|
||
page: pagination.page.toString(),
|
||
limit: pagination.limit.toString()
|
||
});
|
||
|
||
const response = await fetch(`/api/cards/search?${params}`);
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
|
||
|
||
if (isLoadMore) {
|
||
setCards(prevCards => [...prevCards, ...data.cards]);
|
||
} else {
|
||
setCards(data.cards);
|
||
}
|
||
setPagination(data.pagination);
|
||
setFilters(data.filters);
|
||
const hasMoreCards = data.pagination.page < data.pagination.pages;
|
||
setHasMore(hasMoreCards);
|
||
hasMoreRef.current = hasMoreCards;
|
||
} else {
|
||
console.error('Failed to fetch cards:', data.error);
|
||
if (!isLoadMore) {
|
||
setCards([]);
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching cards:', error);
|
||
if (!isLoadMore) {
|
||
setCards([]);
|
||
}
|
||
} finally {
|
||
setLoading(false);
|
||
setLoadingMore(false);
|
||
loadingMoreRef.current = false;
|
||
}
|
||
};
|
||
|
||
// Load user's favorited cards
|
||
const loadFavoritedCards = async () => {
|
||
try {
|
||
const token = localStorage.getItem('auth_token');
|
||
if (!token) return;
|
||
|
||
const response = await fetch('/api/favorites?type=card', {
|
||
headers: {
|
||
'Authorization': `Bearer ${token}`
|
||
}
|
||
});
|
||
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
const favoriteIds = new Set(data.favorites.map(fav => parseInt(fav.item_id)));
|
||
setFavoritedCards(favoriteIds);
|
||
}
|
||
} catch (error) {
|
||
console.error('Error loading favorited cards:', error);
|
||
}
|
||
};
|
||
|
||
// Initial load
|
||
useEffect(() => {
|
||
/* eslint-disable react-hooks/set-state-in-effect -- reset list state when filters change, then fetch */
|
||
setPagination(prev => ({ ...prev, page: 1 }));
|
||
setCards([]);
|
||
setHasMore(true);
|
||
hasMoreRef.current = true;
|
||
fetchCards(false);
|
||
loadFavoritedCards(); // Load user's favorites
|
||
/* eslint-enable react-hooks/set-state-in-effect */
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps -- filter-driven reload; fetchCards closes over latest search state
|
||
}, [selectedTCG, selectedRarity, selectedSet, selectedValueRange]);
|
||
|
||
// Handle search with debounce
|
||
const [searchTimeout, setSearchTimeout] = useState(null);
|
||
|
||
const handleSearchChange = (value) => {
|
||
setSearchQuery(value);
|
||
|
||
// Clear existing timeout
|
||
if (searchTimeout) {
|
||
clearTimeout(searchTimeout);
|
||
}
|
||
|
||
// Set new timeout for search
|
||
const newTimeout = setTimeout(() => {
|
||
setPagination(prev => ({ ...prev, page: 1 }));
|
||
setCards([]);
|
||
setHasMore(true);
|
||
hasMoreRef.current = true;
|
||
fetchCards(false);
|
||
}, 500); // 500ms delay
|
||
|
||
setSearchTimeout(newTimeout);
|
||
};
|
||
|
||
// Cleanup timeout on unmount
|
||
useEffect(() => {
|
||
return () => {
|
||
if (searchTimeout) {
|
||
clearTimeout(searchTimeout);
|
||
}
|
||
};
|
||
}, [searchTimeout]);
|
||
|
||
// Load more cards
|
||
const loadMoreCards = async () => {
|
||
|
||
|
||
if (!loadingMoreRef.current && hasMoreRef.current) {
|
||
const nextPage = pagination.page + 1;
|
||
|
||
setPagination(prev => ({ ...prev, page: nextPage }));
|
||
|
||
// Use the next page number directly in the fetch
|
||
try {
|
||
setLoadingMore(true);
|
||
loadingMoreRef.current = true;
|
||
|
||
const params = new URLSearchParams({
|
||
query: searchQuery,
|
||
game: selectedTCG,
|
||
rarity: selectedRarity,
|
||
set: selectedSet,
|
||
minPrice: selectedValueRange === 'under-50' ? '0' :
|
||
selectedValueRange === '50-100' ? '50' :
|
||
selectedValueRange === '100-500' ? '100' :
|
||
selectedValueRange === '500-1000' ? '500' :
|
||
selectedValueRange === 'over-1000' ? '1000' : '',
|
||
maxPrice: selectedValueRange === '50-100' ? '100' :
|
||
selectedValueRange === '100-500' ? '500' :
|
||
selectedValueRange === '500-1000' ? '1000' : '',
|
||
page: nextPage.toString(),
|
||
limit: pagination.limit.toString()
|
||
});
|
||
|
||
const response = await fetch(`/api/cards/search?${params}`);
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
|
||
setCards(prevCards => [...prevCards, ...data.cards]);
|
||
setPagination(data.pagination);
|
||
setFilters(data.filters);
|
||
const hasMoreCards = data.pagination.page < data.pagination.pages;
|
||
setHasMore(hasMoreCards);
|
||
hasMoreRef.current = hasMoreCards;
|
||
} else {
|
||
console.error('Failed to fetch more cards:', data.error);
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching more cards:', error);
|
||
} finally {
|
||
setLoadingMore(false);
|
||
loadingMoreRef.current = false;
|
||
}
|
||
}
|
||
};
|
||
|
||
// Update refs when state changes
|
||
useEffect(() => {
|
||
hasMoreRef.current = hasMore;
|
||
loadingMoreRef.current = loadingMore;
|
||
}, [hasMore, loadingMore]);
|
||
|
||
// Intersection Observer for infinite scroll
|
||
useEffect(() => {
|
||
const observer = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting && hasMoreRef.current && !loadingMoreRef.current) {
|
||
loadMoreCards();
|
||
}
|
||
});
|
||
},
|
||
{
|
||
rootMargin: '50px',
|
||
threshold: 0.1
|
||
}
|
||
);
|
||
|
||
const setupObserver = () => {
|
||
const sentinel = document.getElementById('infinite-scroll-sentinel');
|
||
if (sentinel) {
|
||
observer.observe(sentinel);
|
||
} else {
|
||
setTimeout(setupObserver, 100);
|
||
}
|
||
};
|
||
|
||
setupObserver();
|
||
|
||
return () => {
|
||
const sentinel = document.getElementById('infinite-scroll-sentinel');
|
||
if (sentinel) {
|
||
observer.unobserve(sentinel);
|
||
}
|
||
};
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps -- observer setup once; loadMoreCards uses refs for latest state
|
||
}, []);
|
||
|
||
const getRarityColor = (rarity) => {
|
||
// Map database rarity values to colors
|
||
const rarityColorMap = {
|
||
'common': '#6B7280',
|
||
'uncommon': '#10B981',
|
||
'rare': '#F59E0B',
|
||
'mythic': '#FFD700',
|
||
'holographic': '#FF6B6B',
|
||
'enchanted': '#A855F7',
|
||
'secret rare': '#FF6B6B',
|
||
'ultra rare': '#A855F7'
|
||
};
|
||
return rarityColorMap[rarity?.toLowerCase()] || '#6B7280';
|
||
};
|
||
|
||
const tcgOptions = [
|
||
{ value: 'MTG', label: 'Magic: The Gathering', color: 'purple', icon: '🔮' },
|
||
{ value: 'Pokemon', label: 'Pokemon', color: 'blue', icon: '⚡' },
|
||
{ value: 'Lorcana', label: 'Disney Lorcana', color: 'pink', icon: '✨' }
|
||
];
|
||
|
||
const rarityOptions = [
|
||
{ value: 'all', label: 'All Rarities' },
|
||
{ value: 'common', label: 'Common' },
|
||
{ value: 'uncommon', label: 'Uncommon' },
|
||
{ value: 'rare', label: 'Rare' },
|
||
{ value: 'mythic', label: 'Mythic' },
|
||
{ value: 'enchanted', label: 'Enchanted' },
|
||
...filters.rarities.filter(rarity =>
|
||
!['all', 'common', 'uncommon', 'rare', 'mythic', 'enchanted'].includes(rarity)
|
||
).map(rarity => ({
|
||
value: rarity,
|
||
label: rarity,
|
||
color: getRarityColor(rarity)
|
||
}))
|
||
];
|
||
|
||
const setOptions = [
|
||
{ value: 'all', label: 'All Sets' },
|
||
...filters.sets.map(set => ({
|
||
value: set,
|
||
label: set
|
||
}))
|
||
];
|
||
|
||
const valueRangeOptions = [
|
||
{ value: 'all', label: 'All Values' },
|
||
{ value: 'under-50', label: 'Under $50' },
|
||
{ value: '50-100', label: '$50 - $100' },
|
||
{ value: '100-500', label: '$100 - $500' },
|
||
{ value: '500-1000', label: '$500 - $1,000' },
|
||
{ value: 'over-1000', label: 'Over $1,000' }
|
||
];
|
||
|
||
|
||
|
||
const formatCurrency = (amount) => {
|
||
return new Intl.NumberFormat('en-US', {
|
||
style: 'currency',
|
||
currency: 'USD'
|
||
}).format(amount);
|
||
};
|
||
|
||
const getRarityLabel = (rarity) => {
|
||
const rarityOption = rarityOptions.find(option => option.value === rarity);
|
||
return rarityOption ? rarityOption.label : rarity;
|
||
};
|
||
|
||
// Bulk selection handlers
|
||
const handleToggleSelect = (card) => {
|
||
setSelectedCards(prev => {
|
||
const isSelected = prev.some(c => c.id === card.id);
|
||
if (isSelected) {
|
||
return prev.filter(c => c.id !== card.id);
|
||
} else {
|
||
return [...prev, card];
|
||
}
|
||
});
|
||
};
|
||
|
||
const handleClearSelection = () => {
|
||
setSelectedCards([]);
|
||
};
|
||
|
||
const handleToggleFavorite = async (card) => {
|
||
try {
|
||
const isFavorited = favoritedCards.has(card.id);
|
||
const method = isFavorited ? 'DELETE' : 'POST';
|
||
|
||
const response = await fetch('/api/favorites', {
|
||
method,
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
|
||
},
|
||
body: JSON.stringify({
|
||
itemType: 'card',
|
||
itemId: card.id
|
||
})
|
||
});
|
||
|
||
if (response.ok) {
|
||
setFavoritedCards(prev => {
|
||
const newSet = new Set(prev);
|
||
if (isFavorited) {
|
||
newSet.delete(card.id);
|
||
} else {
|
||
newSet.add(card.id);
|
||
}
|
||
return newSet;
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('Error toggling favorite:', error);
|
||
}
|
||
};
|
||
|
||
// Bulk action handlers
|
||
const handleBulkAddToCollection = (cards) => {
|
||
setCardsToAdd(cards);
|
||
setShowCollectionModal(true);
|
||
};
|
||
|
||
const handleBulkAddToDeck = (cards) => {
|
||
console.log('Adding to deck:', cards);
|
||
alert(`Adding ${cards.length} cards to deck (functionality coming soon)`);
|
||
};
|
||
|
||
const handleBulkMarkAsOwned = async (cards) => {
|
||
try {
|
||
const token = localStorage.getItem('auth_token');
|
||
if (!token) {
|
||
alert(`Please log in to ${VOCAB.ADD_TO_MY_COLLECTION.toLowerCase()}`);
|
||
return;
|
||
}
|
||
|
||
let successCount = 0;
|
||
for (const card of cards) {
|
||
try {
|
||
const response = await fetch(`/api/cards/${card.id}/ownership`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Bearer ${token}`
|
||
},
|
||
body: JSON.stringify({ quantity: 1 })
|
||
});
|
||
|
||
if (response.ok) {
|
||
successCount++;
|
||
}
|
||
} catch (error) {
|
||
console.error(`Error marking card ${card.id} as owned:`, error);
|
||
}
|
||
}
|
||
|
||
if (successCount === cards.length) {
|
||
alert(`Successfully added ${cards.length} cards to ${VOCAB.MY_COLLECTION}!`);
|
||
} else {
|
||
alert(`Added ${successCount} out of ${cards.length} cards to ${VOCAB.MY_COLLECTION}. Some operations may have failed.`);
|
||
}
|
||
|
||
// Clear selection after successful operation
|
||
setSelectedCards([]);
|
||
} catch (error) {
|
||
console.error('Error in bulk mark as owned:', error);
|
||
alert(`Failed to add cards to ${VOCAB.MY_COLLECTION}. Please try again.`);
|
||
}
|
||
};
|
||
|
||
const handleBulkRemoveFromOwned = async (cards) => {
|
||
try {
|
||
const token = localStorage.getItem('auth_token');
|
||
if (!token) {
|
||
alert(`Please log in to ${VOCAB.REMOVE_FROM_MY_COLLECTION.toLowerCase()}`);
|
||
return;
|
||
}
|
||
|
||
let successCount = 0;
|
||
for (const card of cards) {
|
||
try {
|
||
const response = await fetch(`/api/cards/${card.id}/ownership`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Bearer ${token}`
|
||
},
|
||
body: JSON.stringify({ quantity: 0 })
|
||
});
|
||
|
||
if (response.ok) {
|
||
successCount++;
|
||
}
|
||
} catch (error) {
|
||
console.error(`Error removing card ${card.id} from owned:`, error);
|
||
}
|
||
}
|
||
|
||
if (successCount === cards.length) {
|
||
alert(`Successfully removed ${cards.length} cards from ${VOCAB.MY_COLLECTION}!`);
|
||
} else {
|
||
alert(`Removed ${successCount} out of ${cards.length} cards from ${VOCAB.MY_COLLECTION}. Some operations may have failed.`);
|
||
}
|
||
|
||
// Clear selection after successful operation
|
||
setSelectedCards([]);
|
||
} catch (error) {
|
||
console.error('Error in bulk remove from owned:', error);
|
||
alert(`Failed to remove cards from ${VOCAB.MY_COLLECTION}. Please try again.`);
|
||
}
|
||
};
|
||
|
||
const handleBulkFavorite = async (cards) => {
|
||
try {
|
||
for (const card of cards) {
|
||
if (!favoritedCards.has(card.id)) {
|
||
await fetch('/api/favorites', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
|
||
},
|
||
body: JSON.stringify({
|
||
itemType: 'card',
|
||
itemId: card.id
|
||
})
|
||
});
|
||
}
|
||
}
|
||
|
||
setFavoritedCards(prev => {
|
||
const newSet = new Set(prev);
|
||
cards.forEach(card => newSet.add(card.id));
|
||
return newSet;
|
||
});
|
||
|
||
alert(`Added ${cards.length} cards to favorites`);
|
||
} catch (error) {
|
||
console.error('Error bulk favoriting:', error);
|
||
}
|
||
};
|
||
|
||
const handleBulkDelete = (cards) => {
|
||
console.log('Bulk delete:', cards);
|
||
alert(`Bulk delete functionality coming soon for ${cards.length} cards`);
|
||
};
|
||
|
||
// Collection modal handlers
|
||
const handleAddToCollections = (results, selectedCollectionIds, cards) => {
|
||
const successCount = results.filter(r => r.success).length;
|
||
const totalAttempts = results.length;
|
||
|
||
if (successCount === totalAttempts) {
|
||
alert(`Successfully added ${cards.length} card${cards.length !== 1 ? 's' : ''} to ${selectedCollectionIds.length} list${selectedCollectionIds.length !== 1 ? 's' : ''}!`);
|
||
} else {
|
||
alert(`Added ${successCount} out of ${totalAttempts} cards. Some additions may have failed.`);
|
||
}
|
||
|
||
// Clear selection after successful addition
|
||
setSelectedCards([]);
|
||
};
|
||
|
||
if (loading && cards.length === 0) {
|
||
return (
|
||
<Layout user={user}>
|
||
<div className="flex items-center justify-center min-h-screen">
|
||
<div className="animate-spin rounded-full h-32 w-32 border-b-2" style={{ borderColor: 'var(--text-accent)' }}></div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Layout user={user}>
|
||
{/* 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}
|
||
/>
|
||
</Layout>
|
||
);
|
||
}
|
||
|
||
export default function Cards() {
|
||
return (
|
||
<ProtectedRoute
|
||
allowPublic={true}
|
||
publicFallback={<PublicCardsView />}
|
||
>
|
||
<AuthenticatedCards />
|
||
</ProtectedRoute>
|
||
);
|
||
}
|