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:
@@ -1,5 +1,6 @@
|
||||
.env
|
||||
.env.local
|
||||
mockups/
|
||||
|
||||
# Logs
|
||||
logs
|
||||
|
||||
+1
-2
@@ -12,8 +12,7 @@
|
||||
"dependencies": {
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"react-virtuoso": "^4.18.3",
|
||||
"react-window": "^2.2.7"
|
||||
"react-virtuoso": "^4.18.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.4",
|
||||
|
||||
+1
-277
@@ -1,277 +1 @@
|
||||
.counter {
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.3s;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
|
||||
.base,
|
||||
.framework,
|
||||
.vite {
|
||||
inset-inline: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.base {
|
||||
width: 170px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.framework,
|
||||
.vite {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.framework {
|
||||
z-index: 1;
|
||||
top: 34px;
|
||||
height: 28px;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||
scale(1.4);
|
||||
}
|
||||
|
||||
.vite {
|
||||
z-index: 0;
|
||||
top: 107px;
|
||||
height: 26px;
|
||||
width: auto;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||
scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
#center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 32px 20px 24px;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps {
|
||||
display: flex;
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: left;
|
||||
|
||||
& > div {
|
||||
flex: 1 1 0;
|
||||
padding: 32px;
|
||||
@media (max-width: 1024px) {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-bottom: 16px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#docs {
|
||||
border-right: 1px solid var(--border);
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 32px 0 0;
|
||||
|
||||
.logo {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-h);
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
background: var(--social-bg);
|
||||
display: flex;
|
||||
padding: 6px 12px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.button-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
flex: 1 1 calc(50% - 8px);
|
||||
}
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#spacer {
|
||||
height: 88px;
|
||||
border-top: 1px solid var(--border);
|
||||
@media (max-width: 1024px) {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.ticks {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4.5px;
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
border-left-color: var(--border);
|
||||
}
|
||||
&::after {
|
||||
right: 0;
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
width: fit-content;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #2a2a2a;
|
||||
color: var(--text-h, #f0f0f0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
border-radius: 8px 8px 0 0;
|
||||
border: 1px solid #666 !important;
|
||||
border-bottom: none !important;
|
||||
margin-right: 1.5rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.footer button {
|
||||
background: var(--accent-bg, #444);
|
||||
color: var(--accent, #fff);
|
||||
border: 1px solid var(--accent-border, #666);
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.footer button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.footer button:hover:not(:disabled) {
|
||||
background: var(--accent, #fff);
|
||||
color: var(--accent-bg, #444);
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
/* unused – kept so Vite doesn't error if it's ever imported */
|
||||
|
||||
+1
-5
@@ -2,11 +2,7 @@ import React from 'react';
|
||||
import HomePage from './pages/HomePage';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<HomePage />
|
||||
</div>
|
||||
);
|
||||
return <HomePage />;
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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(
|
||||
<>
|
||||
|
||||
@@ -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,36 +22,31 @@ 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>
|
||||
);
|
||||
|
||||
@@ -2,36 +2,35 @@ 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>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export function useDebounce(value, delay = 250) {
|
||||
const [debounced, setDebounced] = useState(value);
|
||||
useEffect(() => {
|
||||
const id = setTimeout(() => setDebounced(value), delay);
|
||||
return () => clearTimeout(id);
|
||||
}, [value, delay]);
|
||||
return debounced;
|
||||
}
|
||||
+83
-99
@@ -1,110 +1,94 @@
|
||||
:root {
|
||||
--text: #6b6375;
|
||||
--text-h: #08060d;
|
||||
--bg: #fff;
|
||||
--border: #e5e4e7;
|
||||
--code-bg: #f4f3ec;
|
||||
--accent: #aa3bff;
|
||||
--accent-bg: rgba(170, 59, 255, 0.1);
|
||||
--accent-border: rgba(170, 59, 255, 0.5);
|
||||
--social-bg: rgba(244, 243, 236, 0.5);
|
||||
--shadow:
|
||||
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
--sans: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
--heading: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
--mono: ui-monospace, Consolas, monospace;
|
||||
|
||||
font: 18px/145% var(--sans);
|
||||
letter-spacing: 0.18px;
|
||||
color-scheme: light dark;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text: #9ca3af;
|
||||
--text-h: #f3f4f6;
|
||||
--bg: #16171d;
|
||||
--border: #2e303a;
|
||||
--code-bg: #1f2028;
|
||||
--accent: #c084fc;
|
||||
--accent-bg: rgba(192, 132, 252, 0.15);
|
||||
--accent-border: rgba(192, 132, 252, 0.5);
|
||||
--social-bg: rgba(47, 48, 58, 0.5);
|
||||
--shadow:
|
||||
rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
|
||||
}
|
||||
|
||||
#social .button-icon {
|
||||
filter: invert(1) brightness(2);
|
||||
}
|
||||
}
|
||||
html, body, #root { height: 100%; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
background: #111;
|
||||
color: #e0e0e0;
|
||||
font-size: 14px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
text-align: left; /* optional: better for layout apps */
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* Card row — :hover can't be done with inline styles */
|
||||
.card-row-header:hover { background: #1a1a1a !important; }
|
||||
|
||||
/* Filter chips */
|
||||
.filter-chip {
|
||||
padding: 3px 12px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #333;
|
||||
background: transparent;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
.filter-chip:hover { border-color: #555; color: #bbb; }
|
||||
.filter-chip.active { background: #e0e0e0; color: #111; border-color: #e0e0e0; }
|
||||
.filter-chip.active-m { background: #c07020; color: #fff; border-color: #c07020; }
|
||||
.filter-chip.active-s { background: #1a7a5e; color: #fff; border-color: #1a7a5e; }
|
||||
.filter-chip.active-t { background: #7a2060; color: #fff; border-color: #7a2060; }
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: var(--heading);
|
||||
font-weight: 500;
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
letter-spacing: -1.68px;
|
||||
margin: 32px 0;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 36px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
line-height: 118%;
|
||||
letter-spacing: -0.24px;
|
||||
margin: 0 0 8px;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code,
|
||||
.counter {
|
||||
font-family: var(--mono);
|
||||
display: inline-flex;
|
||||
/* Amount +/− buttons */
|
||||
.icon-btn {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 4px;
|
||||
color: var(--text-h);
|
||||
border: 1px solid #333;
|
||||
background: #222;
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
.icon-btn:hover:not(:disabled) { background: #2e2e2e; border-color: #444; }
|
||||
.icon-btn:disabled { opacity: 0.4; cursor: default; }
|
||||
|
||||
code {
|
||||
font-size: 15px;
|
||||
line-height: 135%;
|
||||
padding: 4px 8px;
|
||||
background: var(--code-bg);
|
||||
/* Import modal */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(2px);
|
||||
z-index: 1000;
|
||||
animation: fadeIn 0.15s ease;
|
||||
}
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
|
||||
.import-modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #1e1e1e;
|
||||
color: #e0e0e0;
|
||||
padding: 2rem 2.5rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #333;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
|
||||
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.4rem 1.4rem;
|
||||
cursor: pointer;
|
||||
background: #2a2a2a;
|
||||
color: #e0e0e0;
|
||||
border: 1px solid #444;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.import-modal button:hover { background: #333; }
|
||||
|
||||
+81
-77
@@ -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' }}>
|
||||
|
||||
{/* 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 style={{ fontSize: '0.8rem', color: '#999', marginBottom: '0.25rem' }}>
|
||||
</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>
|
||||
<div style={{ color: '#444', fontSize: '12px', padding: '2rem' }}>Loading image…</div>
|
||||
)}
|
||||
<h3 style={{ margin: '0.75rem 0 0.2rem' }}>{expandedCard.name}</h3>
|
||||
<p style={{ margin: '0.2rem 0', color: '#888', fontSize: '0.85rem' }}>
|
||||
<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}
|
||||
{expandedCard.race && ` · ${expandedCard.race}`}
|
||||
{expandedCard.attribute && ` · ${expandedCard.attribute}`}
|
||||
</p>
|
||||
</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 && (
|
||||
<p style={{ margin: '0.2rem 0', fontSize: '0.85rem' }}>
|
||||
<span style={{ fontSize: '12px', color: '#888' }}>
|
||||
{'★'.repeat(Math.min(expandedCard.level, 13))} Lv.{expandedCard.level}
|
||||
</p>
|
||||
</span>
|
||||
)}
|
||||
{expandedCard.link_val != null && (
|
||||
<p style={{ margin: '0.2rem 0', fontSize: '0.85rem' }}>
|
||||
Link {expandedCard.link_val}
|
||||
</p>
|
||||
<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