Apply Design A: dark theme, type badges, code cleanup
ci/woodpecker/push/woodpecker Pipeline was successful
ci/woodpecker/push/woodpecker Pipeline was successful
Visual: - Dark theme throughout (#111 bg, #1c1c1c panels, #2a2a2a borders) - Type badges with color: Monster=orange, Spell=green, Trap=purple - Owned count shown as ×3 (highlighted) or — (dimmed) - Printing column headers in CardRow - Card detail panel: type badge, attribute, race, level stars Cleanup: - Replace index.css (was Vite boilerplate) with dark base + shared CSS classes (.card-row-header:hover, .filter-chip, .icon-btn, modal styles) - Clear App.css (Vite boilerplate, unused) - Remove Footer.css (modal styles consolidated into index.css) - Extract useDebounce to src/hooks/useDebounce.js - Remove react-window (installed but never used) - App.jsx: remove unnecessary wrapper div - gitignore: add mockups/ Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+93
-89
@@ -1,41 +1,43 @@
|
||||
import React, { useEffect, useState, useContext, useMemo, useCallback } from 'react';
|
||||
import { Virtuoso } from 'react-virtuoso';
|
||||
import { CardContext } from '../store/CardContext';
|
||||
import { fetchCards, fetchCardImage } from '../services/api';
|
||||
import { useDebounce } from '../hooks/useDebounce';
|
||||
import CardRow from '../components/CardRow/CardRow';
|
||||
import SearchBar from '../components/SearchBar/SearchBar';
|
||||
import FilterBar from '../components/FilterBar/FilterBar';
|
||||
import { CardContext } from '../store/CardContext';
|
||||
import { fetchCards, fetchCardImage } from '../services/api';
|
||||
import Footer from '../components/Footer/Footer';
|
||||
|
||||
function useDebouncedValue(value, delay = 250) {
|
||||
const [debounced, setDebounced] = useState(value);
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => setDebounced(value), delay);
|
||||
return () => clearTimeout(handler);
|
||||
}, [value, delay]);
|
||||
return debounced;
|
||||
const BADGE = {
|
||||
monster: { background: '#3a2000', color: '#d4820a' },
|
||||
spell: { background: '#002820', color: '#10a06a' },
|
||||
trap: { background: '#280020', color: '#c040a0' },
|
||||
other: { background: '#202020', color: '#666' },
|
||||
};
|
||||
function typeBadge(type) {
|
||||
const t = (type || '').toLowerCase();
|
||||
if (t.includes('monster')) return BADGE.monster;
|
||||
if (t.includes('spell')) return BADGE.spell;
|
||||
if (t.includes('trap')) return BADGE.trap;
|
||||
return BADGE.other;
|
||||
}
|
||||
|
||||
function HomePage() {
|
||||
const [cards, setCards] = useState([]);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [typeFilter, setTypeFilter] = useState('All');
|
||||
const [ownedOnly, setOwnedOnly] = useState(false);
|
||||
const [sortBy, setSortBy] = useState('name');
|
||||
|
||||
const { expandedCardId, cardImages, setCardImage, ownedAmounts } = useContext(CardContext);
|
||||
const debouncedSearchTerm = useDebouncedValue(searchTerm, 250);
|
||||
const { expandedCardId, setExpandedCardId, cardImages, setCardImage, ownedAmounts } = useContext(CardContext);
|
||||
const debouncedSearch = useDebounce(searchTerm, 250);
|
||||
|
||||
const loadCards = useCallback(() => {
|
||||
return fetchCards().then(data => setCards(data));
|
||||
}, []);
|
||||
const loadCards = useCallback(() => fetchCards().then(setCards), []);
|
||||
|
||||
useEffect(() => {
|
||||
loadCards()
|
||||
.catch(err => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
loadCards().catch(err => setError(err.message)).finally(() => setLoading(false));
|
||||
}, [loadCards]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -45,7 +47,7 @@ function HomePage() {
|
||||
.catch(err => console.error('Failed to load card image', err));
|
||||
}, [expandedCardId, cardImages, setCardImage]);
|
||||
|
||||
const getCardTotal = useCallback((card) =>
|
||||
const getTotal = useCallback((card) =>
|
||||
card.printings?.reduce((sum, p) => {
|
||||
const key = `${p.set_id}-${p.rarity_id}`;
|
||||
return sum + (ownedAmounts[card.id]?.[key] ?? p.amount_owned ?? 0);
|
||||
@@ -53,113 +55,115 @@ function HomePage() {
|
||||
, [ownedAmounts]);
|
||||
|
||||
const stats = useMemo(() => ({
|
||||
totalCards: cards.length,
|
||||
ownedUnique: cards.filter(c => getCardTotal(c) > 0).length,
|
||||
totalCopies: cards.reduce((sum, c) => sum + getCardTotal(c), 0),
|
||||
}), [cards, getCardTotal]);
|
||||
total: cards.length,
|
||||
uniqueOwned: cards.filter(c => getTotal(c) > 0).length,
|
||||
totalCopies: cards.reduce((s, c) => s + getTotal(c), 0),
|
||||
}), [cards, getTotal]);
|
||||
|
||||
const filteredCards = useMemo(() => {
|
||||
let result = cards;
|
||||
|
||||
if (debouncedSearchTerm) {
|
||||
const lower = debouncedSearchTerm.toLowerCase();
|
||||
result = result.filter(c => c.name.toLowerCase().includes(lower));
|
||||
if (debouncedSearch) {
|
||||
const q = debouncedSearch.toLowerCase();
|
||||
result = result.filter(c => c.name.toLowerCase().includes(q));
|
||||
}
|
||||
|
||||
if (typeFilter !== 'All') {
|
||||
const lower = typeFilter.toLowerCase();
|
||||
result = result.filter(c => c.type.toLowerCase().includes(lower));
|
||||
}
|
||||
|
||||
if (ownedOnly) {
|
||||
result = result.filter(c => getCardTotal(c) > 0);
|
||||
const q = typeFilter.toLowerCase();
|
||||
result = result.filter(c => c.type.toLowerCase().includes(q));
|
||||
}
|
||||
if (ownedOnly) result = result.filter(c => getTotal(c) > 0);
|
||||
|
||||
const sorted = [...result];
|
||||
if (sortBy === 'owned') {
|
||||
sorted.sort((a, b) => getCardTotal(b) - getCardTotal(a));
|
||||
} else {
|
||||
sorted.sort((a, b) => a.name.localeCompare(b.name));
|
||||
}
|
||||
|
||||
if (sortBy === 'owned') sorted.sort((a, b) => getTotal(b) - getTotal(a));
|
||||
else sorted.sort((a, b) => a.name.localeCompare(b.name));
|
||||
return sorted;
|
||||
}, [cards, debouncedSearchTerm, typeFilter, ownedOnly, sortBy, getCardTotal]);
|
||||
|
||||
if (loading) return <p style={{ padding: '1rem' }}>Loading cards...</p>;
|
||||
if (error) return <p style={{ padding: '1rem', color: 'red' }}>Error: {error}</p>;
|
||||
}, [cards, debouncedSearch, typeFilter, ownedOnly, sortBy, getTotal]);
|
||||
|
||||
const expandedCard = cards.find(c => c.id === expandedCardId);
|
||||
|
||||
if (loading) return <p style={{ padding: '1rem', color: '#666' }}>Loading cards…</p>;
|
||||
if (error) return <p style={{ padding: '1rem', color: '#c04040' }}>Error: {error}</p>;
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
||||
|
||||
{/* Stats bar */}
|
||||
<div style={{
|
||||
display: 'flex', gap: '2rem', padding: '0.4rem 1rem',
|
||||
background: '#f5f5f5', borderBottom: '1px solid #ddd',
|
||||
fontSize: '0.85rem', color: '#555', flexShrink: 0,
|
||||
display: 'flex', gap: '2rem', padding: '6px 16px', flexShrink: 0,
|
||||
background: '#1c1c1c', borderBottom: '1px solid #2a2a2a',
|
||||
fontSize: '12px', color: '#666',
|
||||
}}>
|
||||
<span><strong>{stats.totalCards.toLocaleString()}</strong> cards in DB</span>
|
||||
<span><strong>{stats.ownedUnique.toLocaleString()}</strong> unique owned</span>
|
||||
<span><strong>{stats.totalCopies.toLocaleString()}</strong> total copies</span>
|
||||
<span><strong style={{ color: '#e0e0e0' }}>{stats.total.toLocaleString()}</strong> cards in DB</span>
|
||||
<span><strong style={{ color: '#e0e0e0' }}>{stats.uniqueOwned.toLocaleString()}</strong> unique owned</span>
|
||||
<span><strong style={{ color: '#e0e0e0' }}>{stats.totalCopies.toLocaleString()}</strong> total copies</span>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
{/* Main panels */}
|
||||
<div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
|
||||
{/* Left panel */}
|
||||
<div style={{ flex: 2, borderRight: '1px solid #ccc', padding: '1rem', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||||
<SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
|
||||
<FilterBar
|
||||
typeFilter={typeFilter} setTypeFilter={setTypeFilter}
|
||||
ownedOnly={ownedOnly} setOwnedOnly={setOwnedOnly}
|
||||
sortBy={sortBy} setSortBy={setSortBy}
|
||||
/>
|
||||
<div style={{ fontSize: '0.8rem', color: '#999', marginBottom: '0.25rem' }}>
|
||||
|
||||
{/* Left — card list */}
|
||||
<div style={{ flex: 2, display: 'flex', flexDirection: 'column', borderRight: '1px solid #2a2a2a', overflow: 'hidden' }}>
|
||||
<div style={{ padding: '10px 16px', borderBottom: '1px solid #2a2a2a', flexShrink: 0 }}>
|
||||
<SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
|
||||
<FilterBar
|
||||
typeFilter={typeFilter} setTypeFilter={setTypeFilter}
|
||||
ownedOnly={ownedOnly} setOwnedOnly={setOwnedOnly}
|
||||
sortBy={sortBy} setSortBy={setSortBy}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ padding: '4px 16px', fontSize: '11px', color: '#444', flexShrink: 0, borderBottom: '1px solid #1a1a1a' }}>
|
||||
{filteredCards.length.toLocaleString()} cards
|
||||
</div>
|
||||
<Virtuoso
|
||||
style={{ flex: 1 }}
|
||||
data={filteredCards}
|
||||
itemContent={(index, card) => <CardRow key={card.id} card={card} />}
|
||||
itemContent={(_, card) => <CardRow card={card} />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right panel */}
|
||||
<div style={{ flex: 1, padding: '1rem', overflowY: 'auto' }}>
|
||||
{expandedCardId && expandedCard ? (
|
||||
{/* Right — card detail */}
|
||||
<div style={{ flex: 1, padding: '16px', overflowY: 'auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}>
|
||||
{expandedCard ? (
|
||||
<>
|
||||
{cardImages[expandedCardId] ? (
|
||||
<img
|
||||
src={cardImages[expandedCardId]}
|
||||
alt={expandedCard.name}
|
||||
style={{ maxWidth: '100%' }}
|
||||
/>
|
||||
<img src={cardImages[expandedCardId]} alt={expandedCard.name} style={{ maxWidth: '100%' }} />
|
||||
) : (
|
||||
<p>Loading image...</p>
|
||||
)}
|
||||
<h3 style={{ margin: '0.75rem 0 0.2rem' }}>{expandedCard.name}</h3>
|
||||
<p style={{ margin: '0.2rem 0', color: '#888', fontSize: '0.85rem' }}>
|
||||
{expandedCard.type}
|
||||
{expandedCard.race && ` · ${expandedCard.race}`}
|
||||
{expandedCard.attribute && ` · ${expandedCard.attribute}`}
|
||||
</p>
|
||||
{expandedCard.level != null && (
|
||||
<p style={{ margin: '0.2rem 0', fontSize: '0.85rem' }}>
|
||||
{'★'.repeat(Math.min(expandedCard.level, 13))} Lv.{expandedCard.level}
|
||||
</p>
|
||||
)}
|
||||
{expandedCard.link_val != null && (
|
||||
<p style={{ margin: '0.2rem 0', fontSize: '0.85rem' }}>
|
||||
Link {expandedCard.link_val}
|
||||
</p>
|
||||
<div style={{ color: '#444', fontSize: '12px', padding: '2rem' }}>Loading image…</div>
|
||||
)}
|
||||
<div style={{ width: '100%', borderTop: '1px solid #222', paddingTop: '10px', display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||||
<span style={{ fontSize: '15px', fontWeight: 600, color: '#e0e0e0' }}>{expandedCard.name}</span>
|
||||
<div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
|
||||
<span style={{ fontSize: '11px', padding: '2px 8px', borderRadius: '10px', fontWeight: 500, ...typeBadge(expandedCard.type) }}>
|
||||
{expandedCard.type}
|
||||
</span>
|
||||
{expandedCard.attribute && (
|
||||
<span style={{ fontSize: '11px', padding: '2px 8px', borderRadius: '10px', background: '#202020', color: '#888' }}>
|
||||
{expandedCard.attribute}
|
||||
</span>
|
||||
)}
|
||||
{expandedCard.race && (
|
||||
<span style={{ fontSize: '11px', padding: '2px 8px', borderRadius: '10px', background: '#202020', color: '#888' }}>
|
||||
{expandedCard.race}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{expandedCard.level != null && (
|
||||
<span style={{ fontSize: '12px', color: '#888' }}>
|
||||
{'★'.repeat(Math.min(expandedCard.level, 13))} Lv.{expandedCard.level}
|
||||
</span>
|
||||
)}
|
||||
{expandedCard.link_val != null && (
|
||||
<span style={{ fontSize: '12px', color: '#888' }}>Link {expandedCard.link_val}</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p style={{ color: '#aaa' }}>Click a card to see details</p>
|
||||
<span style={{ color: '#333', fontSize: '13px', marginTop: '2rem' }}>Click a card to see details</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
{/* Footer */}
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', flexShrink: 0 }}>
|
||||
<Footer onImportComplete={loadCards} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user