style: run format:apply
This commit is contained in:
+93
-73
@@ -8,92 +8,112 @@ import { Offering, OfferingRole, getOfferingIconUrl } from './types';
|
||||
import { randInRange } from '@/lib/utils';
|
||||
|
||||
type Props = {
|
||||
offerings: Offering[];
|
||||
quantities: Record<string, number>;
|
||||
randMin: number;
|
||||
randMax: number;
|
||||
onSetQty: (id: string, qty: number) => void;
|
||||
offerings: Offering[];
|
||||
quantities: Record<string, number>;
|
||||
randMin: number;
|
||||
randMax: number;
|
||||
onSetQty: (id: string, qty: number) => void;
|
||||
};
|
||||
|
||||
const ROLE_LABELS: Record<OfferingRole, string> = {
|
||||
all: 'All', shared: 'Shared', killer: 'Killer', survivor: 'Survivor',
|
||||
all: 'All',
|
||||
shared: 'Shared',
|
||||
killer: 'Killer',
|
||||
survivor: 'Survivor'
|
||||
};
|
||||
|
||||
const roleMatches = (offeringRole: number, filter: OfferingRole) => {
|
||||
if (filter === 'all') return true;
|
||||
if (filter === 'shared') return offeringRole === 0;
|
||||
if (filter === 'killer') return offeringRole === 1;
|
||||
if (filter === 'survivor') return offeringRole === 2;
|
||||
return true;
|
||||
if (filter === 'all') return true;
|
||||
if (filter === 'shared') return offeringRole === 0;
|
||||
if (filter === 'killer') return offeringRole === 1;
|
||||
if (filter === 'survivor') return offeringRole === 2;
|
||||
return true;
|
||||
};
|
||||
|
||||
export default function OfferingGrid({ offerings, quantities, randMin, randMax, onSetQty }: Props) {
|
||||
const [search, setSearch] = useState('');
|
||||
const [roleFilter, setRoleFilter] = useState<OfferingRole>('all');
|
||||
export default function OfferingGrid({
|
||||
offerings,
|
||||
quantities,
|
||||
randMin,
|
||||
randMax,
|
||||
onSetQty
|
||||
}: Props) {
|
||||
const [search, setSearch] = useState('');
|
||||
const [roleFilter, setRoleFilter] = useState<OfferingRole>('all');
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
return offerings.filter(o => {
|
||||
if (!roleMatches(o.role, roleFilter)) return false;
|
||||
if (search.trim() && !o.name.toLowerCase().includes(search.toLowerCase())) return false;
|
||||
return true;
|
||||
});
|
||||
}, [offerings, roleFilter, search]);
|
||||
const filtered = useMemo(() => {
|
||||
return offerings.filter((o) => {
|
||||
if (!roleMatches(o.role, roleFilter)) return false;
|
||||
if (search.trim() && !o.name.toLowerCase().includes(search.toLowerCase()))
|
||||
return false;
|
||||
return true;
|
||||
});
|
||||
}, [offerings, roleFilter, search]);
|
||||
|
||||
const handleGive100Visible = () => filtered.forEach(o => onSetQty(o.id, 100));
|
||||
const handleRandVisible = () => filtered.forEach(o => onSetQty(o.id, randInRange(randMin, randMax)));
|
||||
const handleLockVisible = () => filtered.forEach(o => onSetQty(o.id, 0));
|
||||
const handleGive100Visible = () =>
|
||||
filtered.forEach((o) => onSetQty(o.id, 100));
|
||||
const handleRandVisible = () =>
|
||||
filtered.forEach((o) => onSetQty(o.id, randInRange(randMin, randMax)));
|
||||
const handleLockVisible = () => filtered.forEach((o) => onSetQty(o.id, 0));
|
||||
|
||||
const activeCount = Object.values(quantities).filter(q => q > 0).length;
|
||||
const activeCount = Object.values(quantities).filter((q) => q > 0).length;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={shared.toolbar}>
|
||||
<input
|
||||
className={shared.searchInput}
|
||||
type="text"
|
||||
placeholder="Search offerings..."
|
||||
value={search}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
/>
|
||||
return (
|
||||
<>
|
||||
<div className={shared.toolbar}>
|
||||
<input
|
||||
className={shared.searchInput}
|
||||
type='text'
|
||||
placeholder='Search offerings...'
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
|
||||
<div className={shared.roleFilter}>
|
||||
{(Object.keys(ROLE_LABELS) as OfferingRole[]).map(r => (
|
||||
<button
|
||||
key={r}
|
||||
className={`${shared.roleBtn} ${roleFilter === r ? shared.roleBtnActive : ''}`}
|
||||
onClick={() => setRoleFilter(r)}
|
||||
>
|
||||
{ROLE_LABELS[r]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className={shared.roleFilter}>
|
||||
{(Object.keys(ROLE_LABELS) as OfferingRole[]).map((r) => (
|
||||
<button
|
||||
key={r}
|
||||
className={`${shared.roleBtn} ${roleFilter === r ? shared.roleBtnActive : ''}`}
|
||||
onClick={() => setRoleFilter(r)}
|
||||
>
|
||||
{ROLE_LABELS[r]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<span className={shared.spacer} />
|
||||
<span className={shared.resultCount}>{filtered.length} shown · {activeCount} active</span>
|
||||
<span className={shared.spacer} />
|
||||
<span className={shared.resultCount}>
|
||||
{filtered.length} shown · {activeCount} active
|
||||
</span>
|
||||
|
||||
<button className={shared.unlockAllBtn} onClick={handleGive100Visible}>Set all to 100</button>
|
||||
<button className={styles.randBtn} onClick={handleRandVisible}>Randomize</button>
|
||||
<button className={shared.lockAllBtn} onClick={handleLockVisible}>Remove all visible</button>
|
||||
</div>
|
||||
<button className={shared.unlockAllBtn} onClick={handleGive100Visible}>
|
||||
Set all to 100
|
||||
</button>
|
||||
<button className={styles.randBtn} onClick={handleRandVisible}>
|
||||
Randomize
|
||||
</button>
|
||||
<button className={shared.lockAllBtn} onClick={handleLockVisible}>
|
||||
Remove all visible
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{filtered.length === 0 ? (
|
||||
<div className={shared.empty}>No offerings match</div>
|
||||
) : (
|
||||
<div className={styles.grid}>
|
||||
{filtered.map(offering => (
|
||||
<QuantityCard
|
||||
key={offering.id}
|
||||
id={offering.id}
|
||||
name={offering.name}
|
||||
iconUrl={getOfferingIconUrl(offering.iconFilePath)}
|
||||
qty={quantities[offering.id] ?? 0}
|
||||
randMin={randMin}
|
||||
randMax={randMax}
|
||||
onSetQty={onSetQty}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
{filtered.length === 0 ? (
|
||||
<div className={shared.empty}>No offerings match</div>
|
||||
) : (
|
||||
<div className={styles.grid}>
|
||||
{filtered.map((offering) => (
|
||||
<QuantityCard
|
||||
key={offering.id}
|
||||
id={offering.id}
|
||||
name={offering.name}
|
||||
iconUrl={getOfferingIconUrl(offering.iconFilePath)}
|
||||
qty={quantities[offering.id] ?? 0}
|
||||
randMin={randMin}
|
||||
randMax={randMax}
|
||||
onSetQty={onSetQty}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user