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:
@@ -2,39 +2,76 @@ import React, { useContext } from 'react';
|
||||
import { CardContext } from '../../store/CardContext';
|
||||
import PrintingRow from '../PrintingRow/PrintingRow';
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
const PRINTING_COLS = '80px 1fr 150px 100px';
|
||||
|
||||
function CardRow({ card }) {
|
||||
const { expandedCardId, setExpandedCardId, ownedAmounts } = useContext(CardContext);
|
||||
const isExpanded = expandedCardId === card.id;
|
||||
|
||||
const toggleExpand = () => setExpandedCardId(isExpanded ? null : card.id);
|
||||
|
||||
// ✅ Calculate total owned across all printings using combined key
|
||||
const totalOwned = card.printings?.reduce((sum, p) => {
|
||||
const key = `${p.set_id}-${p.rarity_id}`;
|
||||
const owned = ownedAmounts[card.id]?.[key] ?? p.amount_owned ?? 0;
|
||||
return sum + owned;
|
||||
return sum + (ownedAmounts[card.id]?.[key] ?? p.amount_owned ?? 0);
|
||||
}, 0) ?? 0;
|
||||
|
||||
return (
|
||||
<div style={{ borderBottom: '1px solid #eee', padding: '0.5rem' }}>
|
||||
<div style={{ borderBottom: '1px solid #1e1e1e' }}>
|
||||
<div
|
||||
style={{ cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
|
||||
onClick={toggleExpand}
|
||||
className="card-row-header"
|
||||
onClick={() => setExpandedCardId(isExpanded ? null : card.id)}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: '12px',
|
||||
padding: '9px 16px',
|
||||
background: isExpanded ? '#1c1c1c' : 'transparent',
|
||||
}}
|
||||
>
|
||||
<span>{card.name}</span>
|
||||
<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
|
||||
<span>{card.type}</span>
|
||||
<span>Total owned: {totalOwned}</span>
|
||||
</div>
|
||||
<span style={{ flex: 1, fontSize: '13px', color: '#d8d8d8' }}>{card.name}</span>
|
||||
<span style={{
|
||||
fontSize: '11px', padding: '2px 8px', borderRadius: '10px',
|
||||
fontWeight: 500, whiteSpace: 'nowrap',
|
||||
...typeBadge(card.type),
|
||||
}}>
|
||||
{card.type}
|
||||
</span>
|
||||
<span style={{
|
||||
fontSize: '12px', whiteSpace: 'nowrap', minWidth: '48px', textAlign: 'right',
|
||||
color: totalOwned > 0 ? '#aaa' : '#444',
|
||||
}}>
|
||||
{totalOwned > 0 ? `×${totalOwned}` : '—'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{isExpanded && card.printings?.length > 0 && (
|
||||
<div style={{ marginTop: '0.5rem', paddingLeft: '1rem' }}>
|
||||
<div style={{ background: '#161616', paddingBottom: '6px' }}>
|
||||
<div style={{
|
||||
display: 'grid', gridTemplateColumns: PRINTING_COLS,
|
||||
gap: '8px', padding: '5px 16px 5px 32px',
|
||||
fontSize: '10px', color: '#444',
|
||||
textTransform: 'uppercase', letterSpacing: '0.05em',
|
||||
borderBottom: '1px solid #222',
|
||||
}}>
|
||||
<span>Code</span><span>Set</span><span>Rarity</span><span>Owned</span>
|
||||
</div>
|
||||
{card.printings.map(printing => (
|
||||
<PrintingRow
|
||||
key={`${card.id}-${printing.set_id}-${printing.rarity_id}`}
|
||||
card_id={card.id}
|
||||
printing={printing}
|
||||
cols={PRINTING_COLS}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@@ -43,4 +80,4 @@ function CardRow({ card }) {
|
||||
);
|
||||
}
|
||||
|
||||
export default CardRow;
|
||||
export default CardRow;
|
||||
|
||||
@@ -1,31 +1,28 @@
|
||||
import React from 'react';
|
||||
|
||||
const TYPES = ['All', 'Monster', 'Spell', 'Trap'];
|
||||
const CHIPS = [
|
||||
{ label: 'All', activeClass: 'active' },
|
||||
{ label: 'Monster', activeClass: 'active-m' },
|
||||
{ label: 'Spell', activeClass: 'active-s' },
|
||||
{ label: 'Trap', activeClass: 'active-t' },
|
||||
];
|
||||
|
||||
function FilterBar({ typeFilter, setTypeFilter, ownedOnly, setOwnedOnly, sortBy, setSortBy }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap', margin: '0.5rem 0' }}>
|
||||
<div style={{ display: 'flex', gap: '0.25rem' }}>
|
||||
{TYPES.map(t => (
|
||||
<div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap', margin: '8px 0' }}>
|
||||
<div style={{ display: 'flex', gap: '4px' }}>
|
||||
{CHIPS.map(({ label, activeClass }) => (
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => setTypeFilter(t)}
|
||||
style={{
|
||||
padding: '2px 10px',
|
||||
borderRadius: '12px',
|
||||
border: '1px solid #ccc',
|
||||
background: typeFilter === t ? '#444' : 'transparent',
|
||||
color: typeFilter === t ? '#fff' : '#666',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.8rem',
|
||||
}}
|
||||
key={label}
|
||||
className={`filter-chip ${typeFilter === label ? activeClass : ''}`}
|
||||
onClick={() => setTypeFilter(label)}
|
||||
>
|
||||
{t}
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', cursor: 'pointer', fontSize: '0.85rem', color: '#555' }}>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: '5px', cursor: 'pointer', fontSize: '12px', color: '#666' }}>
|
||||
<input type="checkbox" checked={ownedOnly} onChange={e => setOwnedOnly(e.target.checked)} />
|
||||
Owned only
|
||||
</label>
|
||||
@@ -33,7 +30,10 @@ function FilterBar({ typeFilter, setTypeFilter, ownedOnly, setOwnedOnly, sortBy,
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={e => setSortBy(e.target.value)}
|
||||
style={{ fontSize: '0.8rem', padding: '2px 4px', border: '1px solid #ccc', borderRadius: '4px', color: '#555' }}
|
||||
style={{
|
||||
background: '#1c1c1c', border: '1px solid #2a2a2a', color: '#666',
|
||||
fontSize: '12px', padding: '3px 6px', borderRadius: '4px',
|
||||
}}
|
||||
>
|
||||
<option value="name">Sort: A → Z</option>
|
||||
<option value="owned">Sort: Most owned</option>
|
||||
|
||||
@@ -1,55 +0,0 @@
|
||||
/* Modal overlay */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
backdrop-filter: blur(2px);
|
||||
z-index: 1000;
|
||||
animation: fadeIn 0.15s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Popup modal */
|
||||
.import-modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: var(--card-bg, #1e1e1e);
|
||||
color: var(--text-h, #f0f0f0);
|
||||
padding: 2rem 2.5rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border, #555);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
|
||||
z-index: 1001;
|
||||
max-width: 90%;
|
||||
min-width: 300px;
|
||||
text-align: center;
|
||||
animation: popIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
@keyframes popIn {
|
||||
from { opacity: 0; transform: translate(-50%, -48%) scale(0.92); }
|
||||
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
|
||||
}
|
||||
|
||||
.import-modal button {
|
||||
margin-top: 1.25rem;
|
||||
padding: 0.5rem 1.5rem;
|
||||
cursor: pointer;
|
||||
background: var(--accent-bg, #444);
|
||||
color: var(--accent, #fff);
|
||||
border: 1px solid var(--accent-border, #666);
|
||||
border-radius: 6px;
|
||||
font-size: 0.95rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.import-modal button:hover {
|
||||
background: var(--accent, #fff);
|
||||
color: var(--accent-bg, #444);
|
||||
}
|
||||
@@ -1,8 +1,6 @@
|
||||
// src/components/Footer/Footer.jsx
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { fetchDatabaseVersion, triggerFullImport } from '../../services/api';
|
||||
import './Footer.css';
|
||||
|
||||
function Footer({ onImportComplete }) {
|
||||
const [dbVersion, setDbVersion] = useState(null);
|
||||
@@ -13,11 +11,7 @@ function Footer({ onImportComplete }) {
|
||||
useEffect(() => {
|
||||
fetchDatabaseVersion()
|
||||
.then(data => setDbVersion(data.database_version))
|
||||
.catch(err => {
|
||||
setDbVersion('N/A');
|
||||
setModalMessage(`Failed to fetch DB version: ${err.message}`);
|
||||
setShowModal(true);
|
||||
});
|
||||
.catch(() => setDbVersion('N/A'));
|
||||
}, []);
|
||||
|
||||
const handleImport = async () => {
|
||||
@@ -27,47 +21,38 @@ function Footer({ onImportComplete }) {
|
||||
const data = await fetchDatabaseVersion();
|
||||
setDbVersion(data.database_version);
|
||||
setModalMessage(result.message || 'Import completed');
|
||||
setShowModal(true);
|
||||
if (onImportComplete) await onImportComplete();
|
||||
} catch (err) {
|
||||
setModalMessage(`Import failed: ${err.message}`);
|
||||
setShowModal(true);
|
||||
} finally {
|
||||
setImporting(false);
|
||||
setShowModal(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<footer className="footer" style={{
|
||||
border: '1px solid #666',
|
||||
borderBottom: 'none',
|
||||
borderRadius: '8px 8px 0 0',
|
||||
background: '#2a2a2a',
|
||||
marginRight: '1.5rem',
|
||||
padding: '0.6rem 1.25rem',
|
||||
gap: '2.5rem',
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: '16px',
|
||||
background: '#1c1c1c', border: '1px solid #2a2a2a',
|
||||
borderBottom: 'none', borderRadius: '8px 8px 0 0',
|
||||
padding: '7px 16px', marginRight: '20px',
|
||||
fontSize: '12px', color: '#666',
|
||||
}}>
|
||||
<span>DB Version: {dbVersion || 'Loading...'}</span>
|
||||
<span>DB Version: {dbVersion ?? 'Loading…'}</span>
|
||||
<button
|
||||
onClick={handleImport}
|
||||
disabled={importing}
|
||||
style={{
|
||||
background: '#3a3a3a',
|
||||
color: '#e0e0e0',
|
||||
border: '1px solid #666',
|
||||
borderRadius: '6px',
|
||||
padding: '4px 12px',
|
||||
fontSize: '0.85rem',
|
||||
background: '#2a2a2a', color: '#ccc', border: '1px solid #3a3a3a',
|
||||
borderRadius: '5px', padding: '4px 12px', fontSize: '12px',
|
||||
cursor: importing ? 'not-allowed' : 'pointer',
|
||||
opacity: importing ? 0.5 : 1,
|
||||
transition: 'background 0.2s, color 0.2s',
|
||||
marginLeft: '1.5rem',
|
||||
}}
|
||||
>
|
||||
{importing ? 'Importing...' : 'Full Import'}
|
||||
{importing ? 'Importing…' : 'Full Import'}
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
{showModal && createPortal(
|
||||
<>
|
||||
@@ -83,4 +68,4 @@ function Footer({ onImportComplete }) {
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
export default Footer;
|
||||
|
||||
@@ -2,21 +2,19 @@ import React, { useContext, useState } from 'react';
|
||||
import { CardContext } from '../../store/CardContext';
|
||||
import { updateCardAmount } from '../../services/api';
|
||||
|
||||
function PrintingRow({ card_id, printing }) {
|
||||
function PrintingRow({ card_id, printing, cols }) {
|
||||
const { ownedAmounts, updateAmount } = useContext(CardContext);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const key = `${printing.set_id}-${printing.rarity_id}`;
|
||||
const currentAmount = ownedAmounts[card_id]?.[key] ?? printing.amount_owned ?? 0;
|
||||
|
||||
const updateBackend = async (newAmount) => {
|
||||
const { set_id, rarity_id } = printing;
|
||||
if (card_id == null || set_id == null || rarity_id == null) return;
|
||||
const current = ownedAmounts[card_id]?.[key] ?? printing.amount_owned ?? 0;
|
||||
|
||||
const save = async (next) => {
|
||||
if (card_id == null || printing.set_id == null || printing.rarity_id == null) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
await updateCardAmount(card_id, set_id, rarity_id, newAmount);
|
||||
updateAmount(card_id, key, newAmount);
|
||||
await updateCardAmount(card_id, printing.set_id, printing.rarity_id, next);
|
||||
updateAmount(card_id, key, next);
|
||||
} catch (err) {
|
||||
console.error('Failed to update amount', err);
|
||||
} finally {
|
||||
@@ -24,39 +22,34 @@ function PrintingRow({ card_id, printing }) {
|
||||
}
|
||||
};
|
||||
|
||||
const increment = () => updateBackend(currentAmount + 1);
|
||||
const decrement = () => {
|
||||
if (currentAmount > 0) updateBackend(currentAmount - 1);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '80px 1fr 120px auto',
|
||||
gap: '0.5rem',
|
||||
padding: '0.25rem 0',
|
||||
alignItems: 'center',
|
||||
opacity: loading ? 0.6 : 1
|
||||
}}
|
||||
>
|
||||
{/* Column 1: Set code */}
|
||||
<span style={{ fontFamily: 'monospace' }}>{printing.set_code}</span>
|
||||
|
||||
{/* Column 2: Set name */}
|
||||
<span>{printing.set_name}</span>
|
||||
|
||||
{/* Column 3: Rarity */}
|
||||
<span>{printing.rarity_name}</span>
|
||||
|
||||
{/* Column 4: Amount controls */}
|
||||
<div>
|
||||
<button onClick={decrement} disabled={loading || currentAmount === 0}>–</button>
|
||||
<span style={{ margin: '0 0.5rem' }}>{currentAmount}</span>
|
||||
<button onClick={increment} disabled={loading}>+</button>
|
||||
<div style={{
|
||||
display: 'grid', gridTemplateColumns: cols,
|
||||
gap: '8px', padding: '5px 16px 5px 32px',
|
||||
alignItems: 'center', opacity: loading ? 0.5 : 1,
|
||||
}}>
|
||||
<span style={{ fontFamily: 'monospace', fontSize: '11px', color: '#555' }}>
|
||||
{printing.set_code}
|
||||
</span>
|
||||
<span style={{ fontSize: '12px', color: '#888' }}>{printing.set_name}</span>
|
||||
<span style={{ fontSize: '12px', color: '#aaa' }}>{printing.rarity_name}</span>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
|
||||
<button
|
||||
className="icon-btn"
|
||||
onClick={() => current > 0 && save(current - 1)}
|
||||
disabled={loading || current === 0}
|
||||
>−</button>
|
||||
<span style={{ minWidth: '20px', textAlign: 'center', color: '#e0e0e0', fontSize: '13px' }}>
|
||||
{current}
|
||||
</span>
|
||||
<button
|
||||
className="icon-btn"
|
||||
onClick={() => save(current + 1)}
|
||||
disabled={loading}
|
||||
>+</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(PrintingRow);
|
||||
export default React.memo(PrintingRow);
|
||||
|
||||
@@ -2,39 +2,38 @@ import React from 'react';
|
||||
|
||||
function SearchBar({ searchTerm, setSearchTerm }) {
|
||||
return (
|
||||
<div style={{ position: 'relative', width: '100%' }}>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by card name..."
|
||||
placeholder="Search by card name…"
|
||||
value={searchTerm}
|
||||
onChange={e => setSearchTerm(e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '0.5rem 2rem 0.5rem 0.5rem',
|
||||
borderRadius: '4px',
|
||||
border: '1px solid #ccc',
|
||||
boxSizing: 'border-box'
|
||||
padding: '8px 32px 8px 12px',
|
||||
background: '#1c1c1c',
|
||||
border: '1px solid #2a2a2a',
|
||||
borderRadius: '6px',
|
||||
color: '#e0e0e0',
|
||||
fontSize: '13px',
|
||||
outline: 'none',
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
onFocus={e => e.target.style.borderColor = '#444'}
|
||||
onBlur={e => e.target.style.borderColor = '#2a2a2a'}
|
||||
/>
|
||||
{searchTerm && (
|
||||
<span
|
||||
onClick={() => setSearchTerm('')}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '0.5rem',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
cursor: 'pointer',
|
||||
fontSize: '1rem',
|
||||
color: '#888',
|
||||
userSelect: 'none'
|
||||
position: 'absolute', right: '10px', top: '50%',
|
||||
transform: 'translateY(-50%)', cursor: 'pointer',
|
||||
fontSize: '16px', color: '#555', userSelect: 'none', lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
×
|
||||
</span>
|
||||
>×</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchBar;
|
||||
export default SearchBar;
|
||||
|
||||
Reference in New Issue
Block a user