style: run format:apply

app/characters/page.tsx

@@ -34,10 +34,11 @@ export default function CharactersPage() {
 	}, []);
 
 	const filtered = useMemo(() => {
-        return characters.filter(c => {
+		return characters.filter((c) => {
 			if (role === 'survivors' && isKiller(c.idx)) return false;
 			if (role === 'killers' && !isKiller(c.idx)) return false;
-            if (search.trim() && !c.name.toLowerCase().includes(search.toLowerCase())) return false;
+			if (search.trim() && !c.name.toLowerCase().includes(search.toLowerCase()))
+				return false;
 			return true;
 		});
 	}, [characters, search, role]);
@@ -47,16 +48,18 @@ export default function CharactersPage() {
 	};
 
 	const handleUnlockAll = () => {
-        const ids = filtered.map(c => c.idx.toString());
+		const ids = filtered.map((c) => c.idx.toString());
 		const outside = store.unlockedCharacters.filter(
-            id => !filtered.some(c => c.idx.toString() === id)
+			(id) => !filtered.some((c) => c.idx.toString() === id)
 		);
 		store.unlockAllInCategory('characters', [...outside, ...ids]);
 	};
 
 	const handleLockAll = () => {
-        const ids = filtered.map(c => c.idx.toString());
+		const ids = filtered.map((c) => c.idx.toString());
-        const newUnlocked = store.unlockedCharacters.filter(id => !ids.includes(id));
+		const newUnlocked = store.unlockedCharacters.filter(
+			(id) => !ids.includes(id)
+		);
 		store.unlockAllInCategory('characters', newUnlocked);
 	};
 
@@ -65,25 +68,28 @@ export default function CharactersPage() {
 	};
 	const unlockedCount = store.unlockedCharacters.length;
 
-    return (<div className={shared.container}>
+	return (
+		<div className={shared.container}>
 			<header className={shared.header}>
 				<div className={shared.headerLeft}>
 					<h1 className={shared.title}>Characters</h1>
-                <p className={shared.subtitle}>{unlockedCount} of {characters.length} unlocked</p>
+					<p className={shared.subtitle}>
+						{unlockedCount} of {characters.length} unlocked
+					</p>
 				</div>
 			</header>
 
 			<div className={shared.toolbar}>
 				<input
 					className={shared.searchInput}
-                type="text"
+					type='text'
-                placeholder="Search by name..."
+					placeholder='Search by name...'
 					value={search}
-                onChange={e => setSearch(e.target.value)}
+					onChange={(e) => setSearch(e.target.value)}
 				/>
 
 				<div className={shared.roleFilter}>
-                {(['all', 'survivors', 'killers'] as RoleFilter[]).map(r => (
+					{(['all', 'survivors', 'killers'] as RoleFilter[]).map((r) => (
 						<button
 							key={r}
 							className={`${shared.roleBtn} ${role === r ? shared.roleBtnActive : ''}`}
@@ -114,8 +120,10 @@ export default function CharactersPage() {
 				<div className={shared.empty}>No characters match</div>
 			) : (
 				<div className={styles.grid}>
-                {filtered.map(char => {
+					{filtered.map((char) => {
-                    const unlocked = store.unlockedCharacters.includes(char.idx.toString());
+						const unlocked = store.unlockedCharacters.includes(
+							char.idx.toString()
+						);
 						const killer = isKiller(char.idx);
 						return (
 							<div
@@ -127,10 +135,12 @@ export default function CharactersPage() {
 									className={shared.cardIcon}
 									src={getIconUrl(char.iconFilePath)}
 									alt={char.name}
-                                loading="lazy"
+									loading='lazy'
 								/>
 								<span className={shared.cardName}>{char.name}</span>
-                            <span className={`${shared.rolePip} ${killer ? shared.rolePipKiller : ''}`}>
+								<span
+									className={`${shared.rolePip} ${killer ? shared.rolePipKiller : ''}`}
+								>
 									{killer ? 'Killer' : 'Survivor'}
 								</span>
 							</div>
@@ -138,5 +148,6 @@ export default function CharactersPage() {
 					})}
 				</div>
 			)}
-    </div >)
+		</div>
+	);
 }

app/customizations/CharacterCosmetics.tsx

@@ -2,7 +2,12 @@
 
 import shared from '../../styles/shared.module.css';
 import styles from '../../styles/Customizations.module.css';
-import { CustomizationItem, CATEGORY_LABELS, CATEGORY_ORDER, getCosmeticIconUrl } from './types';
+import {
+	CustomizationItem,
+	CATEGORY_LABELS,
+	CATEGORY_ORDER,
+	getCosmeticIconUrl
+} from './types';
 
 type Props = {
 	charName: string;
@@ -23,30 +28,39 @@ export default function CharacterCosmetics({
 	onBack,
 	onUnlockAll,
 	onLockAll,
-    onToggle,
+	onToggle
 }: Props) {
 	const allItems = Object.values(charCosmetics).flat();
-    const unlockedCount = allItems.filter(i => unlockedSet.has(i.id)).length;
+	const unlockedCount = allItems.filter((i) => unlockedSet.has(i.id)).length;
 
 	return (
 		<div className={styles.cosmeticsView}>
 			<div className={styles.cosmeticsHeader}>
-                <button className={styles.backBtn} onClick={onBack}>← Back</button>
+				<button className={styles.backBtn} onClick={onBack}>
+					← Back
+				</button>
 				<span className={styles.cosmeticsCharName}>{charName}</span>
-                <span className={shared.resultCount}>{unlockedCount} / {allItems.length} unlocked</span>
+				<span className={shared.resultCount}>
+					{unlockedCount} / {allItems.length} unlocked
+				</span>
 				<span className={shared.spacer} />
-                <button className={shared.unlockAllBtn} onClick={onUnlockAll}>Unlock all</button>
+				<button className={shared.unlockAllBtn} onClick={onUnlockAll}>
-                <button className={shared.lockAllBtn} onClick={onLockAll}>Lock all</button>
+					Unlock all
+				</button>
+				<button className={shared.lockAllBtn} onClick={onLockAll}>
+					Lock all
+				</button>
 			</div>
 
 			<div className={styles.cosmeticsBody}>
-                {CATEGORY_ORDER.filter(cat => charCosmetics[cat]?.length > 0).map(cat => (
+				{CATEGORY_ORDER.filter((cat) => charCosmetics[cat]?.length > 0).map(
+					(cat) => (
 						<div key={cat} className={styles.categoryGroup}>
 							<div className={styles.categoryTitle}>
 								{CATEGORY_LABELS[cat] ?? `Category ${cat}`}
 							</div>
 							<div className={styles.gridInline}>
-                            {charCosmetics[cat].map(item => {
+								{charCosmetics[cat].map((item) => {
 									const unlocked = unlockedSet.has(item.id);
 									return (
 										<div
@@ -58,7 +72,7 @@ export default function CharacterCosmetics({
 												className={shared.cardIcon}
 												src={getCosmeticIconUrl(item, characterMap)}
 												alt={item.name}
-                                            loading="lazy"
+												loading='lazy'
 											/>
 											<span className={shared.cardName}>{item.name}</span>
 										</div>
@@ -66,7 +80,8 @@ export default function CharacterCosmetics({
 								})}
 							</div>
 						</div>
-                ))}
+					)
+				)}
 			</div>
 		</div>
 	);

app/customizations/CharacterPicker.tsx

@@ -31,20 +31,20 @@ export default function CharacterPicker({
 	onSearchChange,
 	onRoleChange,
 	onUnlockShownCosmetics,
-    onLockShownCosmetics,
+	onLockShownCosmetics
 }: Props) {
 	return (
 		<>
 			<div className={shared.toolbar}>
 				<input
 					className={shared.searchInput}
-                    type="text"
+					type='text'
-                    placeholder="Search character..."
+					placeholder='Search character...'
 					value={charSearch}
-                    onChange={e => onSearchChange(e.target.value)}
+					onChange={(e) => onSearchChange(e.target.value)}
 				/>
 				<div className={shared.roleFilter}>
-                    {(['all', 'survivors', 'killers'] as RoleFilter[]).map(r => (
+					{(['all', 'survivors', 'killers'] as RoleFilter[]).map((r) => (
 						<button
 							key={r}
 							className={`${shared.roleBtn} ${charRole === r ? shared.roleBtnActive : ''}`}
@@ -56,7 +56,10 @@ export default function CharacterPicker({
 				</div>
 				<span className={shared.spacer} />
 				<span className={shared.resultCount}>{filteredChars.length} shown</span>
-                <button className={shared.unlockAllBtn} onClick={onUnlockShownCosmetics}>
+				<button
+					className={shared.unlockAllBtn}
+					onClick={onUnlockShownCosmetics}
+				>
 					Unlock Shown Cosmetics
 				</button>
 				<button className={shared.lockAllBtn} onClick={onLockShownCosmetics}>
@@ -65,7 +68,7 @@ export default function CharacterPicker({
 			</div>
 
 			<div className={styles.charGrid}>
-                {filteredChars.map(char => {
+				{filteredChars.map((char) => {
 					const fullyUnlocked = charFullyUnlocked.get(char.idx) ?? false;
 					return (
 						<div
@@ -77,7 +80,7 @@ export default function CharacterPicker({
 								className={styles.charCardIcon}
 								src={getCharIconUrl(char.iconFilePath)}
 								alt={char.name}
-                                loading="lazy"
+								loading='lazy'
 							/>
 							<span className={styles.charCardName}>{char.name}</span>
 						</div>

app/customizations/FlatCategory.tsx

@@ -37,7 +37,7 @@ export default function FlatCategory({
 	onUnlockPage,
 	onLockPage,
 	onToggle,
-    onPageChange,
+	onPageChange
 }: Props) {
 	const buildPageNumbers = () => {
 		const pages: number[] = [];
@@ -52,13 +52,15 @@ export default function FlatCategory({
 			<div className={shared.toolbar}>
 				<input
 					className={shared.searchInput}
-                    type="text"
+					type='text'
 					placeholder={`Search ${tab}...`}
 					value={search}
-                    onChange={e => onSearchChange(e.target.value)}
+					onChange={(e) => onSearchChange(e.target.value)}
 				/>
 				<span className={shared.spacer} />
-                <span className={shared.resultCount}>{allFilteredItems.length} items</span>
+				<span className={shared.resultCount}>
+					{allFilteredItems.length} items
+				</span>
 				<button className={shared.unlockAllBtn} onClick={onUnlockAll}>
 					Unlock all ({allFilteredItems.length})
 				</button>
@@ -78,7 +80,7 @@ export default function FlatCategory({
 			) : (
 				<>
 					<div className={styles.grid}>
-                        {pagedItems.map(item => {
+						{pagedItems.map((item) => {
 							const unlocked = unlockedSet.has(item.id);
 							return (
 								<div
@@ -90,7 +92,7 @@ export default function FlatCategory({
 										className={shared.cardIcon}
 										src={getCosmeticIconUrl(item, characterMap)}
 										alt={item.name}
-                                        loading="lazy"
+										loading='lazy'
 									/>
 									<span className={shared.cardName}>{item.name}</span>
 								</div>
@@ -103,30 +105,42 @@ export default function FlatCategory({
 							<button
 								className={`${shared.pageBtn} ${page === 1 ? shared.pageBtnDisabled : ''}`}
 								onClick={() => onPageChange(1)}
-                            >«</button>
+							>
+								«
+							</button>
 							<button
 								className={`${shared.pageBtn} ${page === 1 ? shared.pageBtnDisabled : ''}`}
 								onClick={() => onPageChange(page - 1)}
-                            >‹</button>
+							>
+								‹
+							</button>
 
-                            {buildPageNumbers().map(n => (
+							{buildPageNumbers().map((n) => (
 								<button
 									key={n}
 									className={`${shared.pageBtn} ${n === page ? shared.pageBtnActive : ''}`}
 									onClick={() => onPageChange(n)}
-                                >{n}</button>
+								>
+									{n}
+								</button>
 							))}
 
 							<button
 								className={`${shared.pageBtn} ${page === totalPages ? shared.pageBtnDisabled : ''}`}
 								onClick={() => onPageChange(page + 1)}
-                            >›</button>
+							>
+								›
+							</button>
 							<button
 								className={`${shared.pageBtn} ${page === totalPages ? shared.pageBtnDisabled : ''}`}
 								onClick={() => onPageChange(totalPages)}
-                            >»</button>
+							>
+								»
+							</button>
 
-                            <span className={shared.pageInfo}>{page} / {totalPages}</span>
+							<span className={shared.pageInfo}>
+								{page} / {totalPages}
+							</span>
 						</div>
 					)}
 				</>

app/customizations/page.tsx

@@ -8,7 +8,14 @@ import styles from '../../styles/Customizations.module.css';
 
 import { getFileName, cleanFolderName, isKiller } from '../../lib/utils';
 import { fetchCharacters, fetchCustomizations } from '../../lib/db';
-import { Character, CustomizationItem, RoleFilter, Tab, TAB_CATEGORIES, CATEGORY_ORDER } from './types';
+import {
+	Character,
+	CustomizationItem,
+	RoleFilter,
+	Tab,
+	TAB_CATEGORIES,
+	CATEGORY_ORDER
+} from './types';
 import CharacterPicker from './CharacterPicker';
 import CharacterCosmetics from './CharacterCosmetics';
 import FlatCategory from './FlatCategory';
@@ -18,7 +25,6 @@ import FlatCategory from './FlatCategory';
 */
 const PAGE_SIZE = 60;
 
-
 export default function CustomizationsPage() {
 	const store = useInventoryStore();
 
@@ -32,21 +38,24 @@ export default function CustomizationsPage() {
 	const [page, setPage] = useState(1);
 
 	useEffect(() => {
-        Promise.all([fetchCustomizations(), fetchCharacters()])
+		Promise.all([fetchCustomizations(), fetchCharacters()]).then(
-            .then(([items, chars]) => {
+			([items, chars]) => {
 				setAllItems(items);
 				setCharacters(chars);
-            });
+			}
+		);
 	}, []);
 
-    useEffect(() => { setPage(1); }, [tab, search]);
+	useEffect(() => {
+		setPage(1);
+	}, [tab, search]);
 
 	/*
         derived data
     */
 	const characterMap = useMemo(() => {
 		const m = new Map<number, string>();
-        characters.forEach(c => m.set(c.idx, c.name));
+		characters.forEach((c) => m.set(c.idx, c.name));
 		return m;
 	}, [characters]);
 
@@ -57,9 +66,14 @@ export default function CustomizationsPage() {
 
 	const itemsByCharacter = useMemo(() => {
 		const map = new Map<number, CustomizationItem[]>();
-        allItems.forEach(item => {
+		allItems.forEach((item) => {
-            if (item.category >= 1 && item.category <= 7 && item.associatedCharacter > -1) {
+			if (
-                if (!map.has(item.associatedCharacter)) map.set(item.associatedCharacter, []);
+				item.category >= 1 &&
+				item.category <= 7 &&
+				item.associatedCharacter > -1
+			) {
+				if (!map.has(item.associatedCharacter))
+					map.set(item.associatedCharacter, []);
 				map.get(item.associatedCharacter)!.push(item);
 			}
 		});
@@ -68,18 +82,25 @@ export default function CustomizationsPage() {
 
 	const charFullyUnlocked = useMemo(() => {
 		const result = new Map<number, boolean>();
-        characters.forEach(char => {
+		characters.forEach((char) => {
 			const items = itemsByCharacter.get(char.idx) ?? [];
-            result.set(char.idx, items.length > 0 && items.every(i => unlockedSet.has(i.id)));
+			result.set(
+				char.idx,
+				items.length > 0 && items.every((i) => unlockedSet.has(i.id))
+			);
 		});
 		return result;
 	}, [characters, itemsByCharacter, unlockedSet]);
 
 	const filteredChars = useMemo(() => {
-        return characters.filter(c => {
+		return characters.filter((c) => {
 			if (charRole === 'survivors' && isKiller(c.idx)) return false;
 			if (charRole === 'killers' && !isKiller(c.idx)) return false;
-            if (charSearch.trim() && !c.name.toLowerCase().includes(charSearch.toLowerCase())) return false;
+			if (
+				charSearch.trim() &&
+				!c.name.toLowerCase().includes(charSearch.toLowerCase())
+			)
+				return false;
 			return true;
 		});
 	}, [characters, charRole, charSearch]);
@@ -88,9 +109,13 @@ export default function CustomizationsPage() {
 		if (tab === 'cosmetics') return [];
 		const cat = TAB_CATEGORIES[tab];
 		if (cat === undefined) return [];
-        return allItems.filter(item => {
+		return allItems.filter((item) => {
 			if (item.category !== cat) return false;
-            if (search.trim() && !item.name.toLowerCase().includes(search.toLowerCase())) return false;
+			if (
+				search.trim() &&
+				!item.name.toLowerCase().includes(search.toLowerCase())
+			)
+				return false;
 			return true;
 		});
 	}, [allItems, tab, search]);
@@ -105,8 +130,8 @@ export default function CustomizationsPage() {
 		if (selectedChar === null) return {};
 		const items = itemsByCharacter.get(selectedChar) ?? [];
 		const groups: Record<number, CustomizationItem[]> = {};
-        CATEGORY_ORDER.forEach(cat => {
+		CATEGORY_ORDER.forEach((cat) => {
-            const group = items.filter(i => i.category === cat);
+			const group = items.filter((i) => i.category === cat);
 			if (group.length > 0) groups[cat] = group;
 		});
 		return groups;
@@ -116,13 +141,17 @@ export default function CustomizationsPage() {
         lock/unlock helpers
     */
 	const mergeUnlock = (ids: string[]) => {
-        const merged = Array.from(new Set([...store.unlockedCustomizations, ...ids]));
+		const merged = Array.from(
+			new Set([...store.unlockedCustomizations, ...ids])
+		);
 		store.unlockAllInCategory('customizations', merged);
 	};
 
 	const removeLock = (ids: string[]) => {
 		const toRemove = new Set(ids);
-        const remaining = store.unlockedCustomizations.filter(id => !toRemove.has(id));
+		const remaining = store.unlockedCustomizations.filter(
+			(id) => !toRemove.has(id)
+		);
 		store.unlockAllInCategory('customizations', remaining);
 	};
 
@@ -132,27 +161,51 @@ export default function CustomizationsPage() {
 	const handleToggle = (id: string) => store.toggleItem(id, 'customizations');
 
 	const handleUnlockShownCosmetics = () => {
-        const charSet = new Set(filteredChars.map(c => c.idx));
+		const charSet = new Set(filteredChars.map((c) => c.idx));
 		mergeUnlock(
-            allItems.filter(i => charSet.has(i.associatedCharacter) && i.category >= 1 && i.category <= 7).map(i => i.id)
+			allItems
+				.filter(
+					(i) =>
+						charSet.has(i.associatedCharacter) &&
+						i.category >= 1 &&
+						i.category <= 7
+				)
+				.map((i) => i.id)
 		);
 	};
 
 	const handleLockShownCosmetics = () => {
-        const charSet = new Set(filteredChars.map(c => c.idx));
+		const charSet = new Set(filteredChars.map((c) => c.idx));
 		removeLock(
-            allItems.filter(i => charSet.has(i.associatedCharacter) && i.category >= 1 && i.category <= 7).map(i => i.id)
+			allItems
+				.filter(
+					(i) =>
+						charSet.has(i.associatedCharacter) &&
+						i.category >= 1 &&
+						i.category <= 7
+				)
+				.map((i) => i.id)
 		);
 	};
 
-    const handleUnlockCharCosmetics = () => mergeUnlock(Object.values(charCosmetics).flat().map(i => i.id));
+	const handleUnlockCharCosmetics = () =>
-    const handleLockCharCosmetics = () => removeLock(Object.values(charCosmetics).flat().map(i => i.id));
+		mergeUnlock(
+			Object.values(charCosmetics)
+				.flat()
+				.map((i) => i.id)
+		);
+	const handleLockCharCosmetics = () =>
+		removeLock(
+			Object.values(charCosmetics)
+				.flat()
+				.map((i) => i.id)
+		);
 
-    const handleUnlockAll = () => mergeUnlock(flatItems.map(i => i.id));
+	const handleUnlockAll = () => mergeUnlock(flatItems.map((i) => i.id));
-    const handleLockAll = () => removeLock(flatItems.map(i => i.id));
+	const handleLockAll = () => removeLock(flatItems.map((i) => i.id));
 
-    const handleUnlockPage = () => mergeUnlock(pagedItems.map(i => i.id));
+	const handleUnlockPage = () => mergeUnlock(pagedItems.map((i) => i.id));
-    const handleLockPage = () => removeLock(pagedItems.map(i => i.id));
+	const handleLockPage = () => removeLock(pagedItems.map((i) => i.id));
 
 	return (
 		<div className={shared.container}>
@@ -160,19 +213,28 @@ export default function CustomizationsPage() {
 				<div>
 					<h1 className={shared.title}>Customizations</h1>
 					<p className={shared.subtitle}>
-                        {store.unlockedCustomizations.length} of {allItems.length || '-'} unlocked
+						{store.unlockedCustomizations.length} of {allItems.length || '-'}{' '}
+						unlocked
 					</p>
 				</div>
-                <button className={shared.clearBtn} onClick={() => store.clearCategory('customizations')}>
+				<button
+					className={shared.clearBtn}
+					onClick={() => store.clearCategory('customizations')}
+				>
 					Clear All
 				</button>
 			</header>
 			<div className={styles.tabs}>
-                {(['cosmetics', 'charms', 'badges', 'banners', 'portraits'] as Tab[]).map(t => (
+				{(
+					['cosmetics', 'charms', 'badges', 'banners', 'portraits'] as Tab[]
+				).map((t) => (
 					<button
 						key={t}
 						className={`${styles.tab} ${tab === t ? styles.tabActive : ''}`}
-                        onClick={() => { setTab(t); setSelectedChar(null); }}
+						onClick={() => {
+							setTab(t);
+							setSelectedChar(null);
+						}}
 					>
 						{t === 'cosmetics' ? 'Character Cosmetics' : t}
 					</button>
@@ -223,5 +285,5 @@ export default function CustomizationsPage() {
 				/>
 			)}
 		</div>
-    )
+	);
 }

app/customizations/types.ts

@@ -16,14 +16,22 @@ export type Tab = 'cosmetics' | 'charms' | 'badges' | 'banners' | 'portraits';
 export type RoleFilter = 'all' | 'survivors' | 'killers';
 
 export const CATEGORY_LABELS: Record<number, string> = {
-  1: 'Heads', 2: 'Torsos', 3: 'Legs',
+	1: 'Heads',
-  4: 'Heads', 5: 'Bodies', 6: 'Weapons', 7: 'Outfits',
+	2: 'Torsos',
+	3: 'Legs',
+	4: 'Heads',
+	5: 'Bodies',
+	6: 'Weapons',
+	7: 'Outfits'
 };
 
 export const CATEGORY_ORDER = [7, 1, 4, 2, 3, 5, 6];
 
 export const TAB_CATEGORIES: Partial<Record<Tab, number>> = {
-  charms: 8, badges: 9, banners: 10, portraits: 11,
+	charms: 8,
+	badges: 9,
+	banners: 10,
+	portraits: 11
 };
 
 import { DB_BASE_URL } from '../../lib/db';
@@ -36,22 +44,34 @@ export const getCosmeticIconUrl = (
 	const base = DB_BASE_URL;
 
 	switch (item.category) {
-    case 8:  return `${base}/icons/customization/charms/${file}.png`;
+		case 8:
-    case 9:  return `${base}/icons/customization/badges/${file}.png`;
+			return `${base}/icons/customization/charms/${file}.png`;
-    case 10: return `${base}/icons/customization/banners/${file}.png`;
+		case 9:
-    case 11: return `${base}/icons/customization/portrait-backgrounds/${file}.png`;
+			return `${base}/icons/customization/badges/${file}.png`;
+		case 10:
+			return `${base}/icons/customization/banners/${file}.png`;
+		case 11:
+			return `${base}/icons/customization/portrait-backgrounds/${file}.png`;
 	}
 
 	const subfolder =
-    item.category === 1 || item.category === 4 ? 'heads'   :
+		item.category === 1 || item.category === 4
-    item.category === 2                         ? 'torsos'  :
+			? 'heads'
-    item.category === 3                         ? 'legs'    :
+			: item.category === 2
-    item.category === 5                         ? 'bodys'   :
+				? 'torsos'
-    item.category === 6                         ? 'weapons' : 'outfits';
+				: item.category === 3
+					? 'legs'
+					: item.category === 5
+						? 'bodys'
+						: item.category === 6
+							? 'weapons'
+							: 'outfits';
 
 	const charName = characterMap.get(item.associatedCharacter);
-  const charFolder = (charName ?? item.associatedCharacter.toString())
+	const charFolder = (charName ?? item.associatedCharacter.toString()).replace(
-    .replace(/[\\/:*?"<>|]/g, '_');
+		/[\\/:*?"<>|]/g,
+		'_'
+	);
 
 	return `${base}/icons/customization/characters/${charFolder}/${subfolder}/${file}.png`;
 };

app/dlcs/page.tsx

@@ -4,11 +4,22 @@ import { useState, useEffect, useMemo } from 'react';
 import { useInventoryStore } from '@/store/useInventoryStore';
 import shared from '../../styles/shared.module.css';
 import styles from '../../styles/Dlcs.module.css';
-import { PlatformFilter, isOnSteam, isOnEpic, isOnXbox, matchesPlatform, } from './types';
+import {
+	PlatformFilter,
+	isOnSteam,
+	isOnEpic,
+	isOnXbox,
+	matchesPlatform
+} from './types';
 import { DLC, isNamedDLC } from '@/lib/utils';
 import { fetchDLCs } from '@/lib/db';
 
-const PLATFORM_FILTER_LABELS: Record<PlatformFilter, string> = { all: 'All', steam: 'Steam', epic: 'Epic', xbox: 'Xbox' };
+const PLATFORM_FILTER_LABELS: Record<PlatformFilter, string> = {
+	all: 'All',
+	steam: 'Steam',
+	epic: 'Epic',
+	xbox: 'Xbox'
+};
 
 export default function DlcsPage() {
 	const store = useInventoryStore();
@@ -16,19 +27,26 @@ export default function DlcsPage() {
 	const [allDlcs, setAllDlcs] = useState<DLC[]>([]);
 	const [search, setSearch] = useState('');
 	const [platformFilter, setPlatformFilter] = useState<PlatformFilter>('all');
-    const [statusFilter, setStatusFilter] = useState<'all' | 'unlocked' | 'locked'>('all');
+	const [statusFilter, setStatusFilter] = useState<
+		'all' | 'unlocked' | 'locked'
+	>('all');
 
 	useEffect(() => {
-        fetchDLCs()
+		fetchDLCs().then((data: DLC[]) => setAllDlcs(data.filter(isNamedDLC)));
-            .then((data: DLC[]) => setAllDlcs(data.filter(isNamedDLC)));
 	}, []);
 
 	const filtered = useMemo(() => {
-        return allDlcs.filter(dlc => {
+		return allDlcs.filter((dlc) => {
 			if (!matchesPlatform(dlc, platformFilter)) return false;
-            if (search.trim() && !dlc.name!.toLowerCase().includes(search.toLowerCase())) return false;
+			if (
-            if (statusFilter === 'unlocked' && !store.unlockedDLCs.includes(dlc.id)) return false;
+				search.trim() &&
-            if (statusFilter === 'locked' && store.unlockedDLCs.includes(dlc.id)) return false;
+				!dlc.name!.toLowerCase().includes(search.toLowerCase())
+			)
+				return false;
+			if (statusFilter === 'unlocked' && !store.unlockedDLCs.includes(dlc.id))
+				return false;
+			if (statusFilter === 'locked' && store.unlockedDLCs.includes(dlc.id))
+				return false;
 			return true;
 		});
 	}, [allDlcs, search, platformFilter, statusFilter, store.unlockedDLCs]);
@@ -36,19 +54,22 @@ export default function DlcsPage() {
 	const handleToggle = (id: string) => store.toggleItem(id, 'dlcs');
 
 	const handleUnlockShown = () => {
-        const ids = filtered.map(d => d.id);
+		const ids = filtered.map((d) => d.id);
 		const merged = Array.from(new Set([...store.unlockedDLCs, ...ids]));
 		store.unlockAllInCategory('dlcs', merged);
 	};
 
 	const handleLockShown = () => {
-        const ids = new Set(filtered.map(d => d.id));
+		const ids = new Set(filtered.map((d) => d.id));
-        const remaining = store.unlockedDLCs.filter(id => !ids.has(id));
+		const remaining = store.unlockedDLCs.filter((id) => !ids.has(id));
 		store.unlockAllInCategory('dlcs', remaining);
 	};
 
 	const handleUnlockAll = () => {
-        store.unlockAllInCategory('dlcs', allDlcs.map(d => d.id));
+		store.unlockAllInCategory(
+			'dlcs',
+			allDlcs.map((d) => d.id)
+		);
 	};
 
 	return (
@@ -64,7 +85,10 @@ export default function DlcsPage() {
 					<button className={shared.unlockAllBtn} onClick={handleUnlockAll}>
 						Unlock All ({allDlcs.length})
 					</button>
-                    <button className={shared.clearBtn} onClick={() => store.clearCategory('dlcs')}>
+					<button
+						className={shared.clearBtn}
+						onClick={() => store.clearCategory('dlcs')}
+					>
 						Clear All
 					</button>
 				</div>
@@ -73,14 +97,15 @@ export default function DlcsPage() {
 			<div className={shared.toolbar}>
 				<input
 					className={shared.searchInput}
-                    type="text"
+					type='text'
-                    placeholder="Search DLCs..."
+					placeholder='Search DLCs...'
 					value={search}
-                    onChange={e => setSearch(e.target.value)}
+					onChange={(e) => setSearch(e.target.value)}
 				/>
 
 				<div className={shared.roleFilter}>
-                    {(Object.keys(PLATFORM_FILTER_LABELS) as PlatformFilter[]).map(p => (
+					{(Object.keys(PLATFORM_FILTER_LABELS) as PlatformFilter[]).map(
+						(p) => (
 							<button
 								key={p}
 								className={`${shared.roleBtn} ${platformFilter === p ? shared.roleBtnActive : ''}`}
@@ -88,11 +113,12 @@ export default function DlcsPage() {
 							>
 								{PLATFORM_FILTER_LABELS[p]}
 							</button>
-                    ))}
+						)
+					)}
 				</div>
 
 				<div className={shared.roleFilter}>
-                    {(['all', 'unlocked', 'locked'] as const).map(s => (
+					{(['all', 'unlocked', 'locked'] as const).map((s) => (
 						<button
 							key={s}
 							className={`${shared.roleBtn} ${statusFilter === s ? shared.roleBtnActive : ''}`}
@@ -118,7 +144,7 @@ export default function DlcsPage() {
 				<div className={shared.empty}>No DLCs match</div>
 			) : (
 				<div className={styles.grid}>
-                    {filtered.map(dlc => {
+					{filtered.map((dlc) => {
 						const unlocked = store.unlockedDLCs.includes(dlc.id);
 						return (
 							<div
@@ -128,9 +154,21 @@ export default function DlcsPage() {
 							>
 								<span className={styles.cardName}>{dlc.name}</span>
 								<div className={styles.platforms}>
-                                    <span className={`${styles.badge} ${isOnSteam(dlc) ? styles.badgeSteam : styles.badgeOff}`}>ST</span>
+									<span
-                                    <span className={`${styles.badge} ${isOnEpic(dlc) ? styles.badgeEpic : styles.badgeOff}`}>EP</span>
+										className={`${styles.badge} ${isOnSteam(dlc) ? styles.badgeSteam : styles.badgeOff}`}
-                                    <span className={`${styles.badge} ${isOnXbox(dlc) ? styles.badgeXbox : styles.badgeOff}`}>XB</span>
+									>
+										ST
+									</span>
+									<span
+										className={`${styles.badge} ${isOnEpic(dlc) ? styles.badgeEpic : styles.badgeOff}`}
+									>
+										EP
+									</span>
+									<span
+										className={`${styles.badge} ${isOnXbox(dlc) ? styles.badgeXbox : styles.badgeOff}`}
+									>
+										XB
+									</span>
 								</div>
 							</div>
 						);

app/dlcs/types.ts

@@ -1,4 +1,4 @@
-import { DLC } from "@/lib/utils";
+import { DLC } from '@/lib/utils';
 
 export type PlatformFilter = 'all' | 'steam' | 'epic' | 'xbox';
 

app/globals.css

@@ -1,6 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Roboto+Condensed:wght@400;700&display=swap');
 
-@import "tailwindcss";
+@import 'tailwindcss';
 
 * {
 	box-sizing: border-box;
@@ -15,7 +15,12 @@ body {
 	overflow: hidden;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
 	font-family: 'Oswald', sans-serif;
 }
 

app/items/AddonGrid.tsx

@@ -14,55 +14,93 @@ type Props = {
 	onSetQty: (id: string, qty: number) => void;
 };
 
-export default function AddonGrid({ addons, quantities, randMin, randMax, onSetQty }: Props) {
+export default function AddonGrid({
+	addons,
+	quantities,
+	randMin,
+	randMax,
+	onSetQty
+}: Props) {
 	const [search, setSearch] = useState('');
-    const [roleFilter, setRoleFilter] = useState<'all' | 'killer' | 'survivor'>('all');
+	const [roleFilter, setRoleFilter] = useState<'all' | 'killer' | 'survivor'>(
+		'all'
+	);
 
 	const filtered = useMemo(() => {
-        return addons.filter(addon => {
+		return addons.filter((addon) => {
 			if (roleFilter === 'killer' && addon.role !== 1) return false;
 			if (roleFilter === 'survivor' && addon.role !== 2) return false;
-            if (search.trim() && !addon.name.toLowerCase().includes(search.toLowerCase())) return false;
+			if (
+				search.trim() &&
+				!addon.name.toLowerCase().includes(search.toLowerCase())
+			)
+				return false;
 			return true;
 		});
 	}, [addons, search, roleFilter]);
 
-    const handleGive100Visible = () => filtered.forEach(a => onSetQty(a.id, 100));
+	const handleGive100Visible = () =>
-    const handleRandVisible = () => filtered.forEach(a => onSetQty(a.id, randInRange(randMin, randMax)));
+		filtered.forEach((a) => onSetQty(a.id, 100));
-    const handleLockVisible = () => filtered.forEach(a => onSetQty(a.id, 0));
+	const handleRandVisible = () =>
+		filtered.forEach((a) => onSetQty(a.id, randInRange(randMin, randMax)));
+	const handleLockVisible = () => filtered.forEach((a) => onSetQty(a.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"
+					type='text'
-                    placeholder="Search addons..."
+					placeholder='Search addons...'
 					value={search}
-                    onChange={e => setSearch(e.target.value)}
+					onChange={(e) => setSearch(e.target.value)}
 				/>
 
 				<div className={shared.roleFilter}>
-                    <button className={`${shared.roleBtn} ${roleFilter === 'all' ? shared.roleBtnActive : ''}`} onClick={() => setRoleFilter('all')}>All</button>
+					<button
-                    <button className={`${shared.roleBtn} ${roleFilter === 'survivor' ? shared.roleBtnActive : ''}`} onClick={() => setRoleFilter('survivor')}>Survivor</button>
+						className={`${shared.roleBtn} ${roleFilter === 'all' ? shared.roleBtnActive : ''}`}
-                    <button className={`${shared.roleBtn} ${roleFilter === 'killer' ? shared.roleBtnActive : ''}`} onClick={() => setRoleFilter('killer')}>Killer</button>
+						onClick={() => setRoleFilter('all')}
+					>
+						All
+					</button>
+					<button
+						className={`${shared.roleBtn} ${roleFilter === 'survivor' ? shared.roleBtnActive : ''}`}
+						onClick={() => setRoleFilter('survivor')}
+					>
+						Survivor
+					</button>
+					<button
+						className={`${shared.roleBtn} ${roleFilter === 'killer' ? shared.roleBtnActive : ''}`}
+						onClick={() => setRoleFilter('killer')}
+					>
+						Killer
+					</button>
 				</div>
 
 				<span className={shared.spacer} />
-                <span className={shared.resultCount}>{filtered.length} shown · {activeCount} active out of {addons.length} total</span>
+				<span className={shared.resultCount}>
+					{filtered.length} shown · {activeCount} active out of {addons.length}{' '}
+					total
+				</span>
 
-                <button className={shared.unlockAllBtn} onClick={handleGive100Visible}>Set all to 100</button>
+				<button className={shared.unlockAllBtn} onClick={handleGive100Visible}>
-                <button className={styles.randBtn} onClick={handleRandVisible}>Randomize</button>
+					Set all to 100
-                <button className={shared.lockAllBtn} onClick={handleLockVisible}>Remove all visible</button>
+				</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 addons match</div>
 			) : (
 				<div className={styles.grid}>
-                    {filtered.map(addon => (
+					{filtered.map((addon) => (
 						<QuantityCard
 							key={addon.id}
 							id={addon.id}

app/items/ItemGrid.tsx

@@ -4,7 +4,13 @@ import { useState, useMemo } from 'react';
 import shared from '../../styles/shared.module.css';
 import styles from '../../styles/Items.module.css';
 import QuantityCard from '../../components/QuantityCard';
-import { Item, ItemType, ITEM_TYPE_LABELS, getItemType, getItemIconUrl } from './types';
+import {
+	Item,
+	ItemType,
+	ITEM_TYPE_LABELS,
+	getItemType,
+	getItemIconUrl
+} from './types';
 import { randInRange } from '@/lib/utils';
 
 type Props = {
@@ -15,37 +21,50 @@ type Props = {
 	onSetQty: (id: string, qty: number) => void;
 };
 
-export default function ItemGrid({ items, quantities, randMin, randMax, onSetQty }: Props) {
+export default function ItemGrid({
+	items,
+	quantities,
+	randMin,
+	randMax,
+	onSetQty
+}: Props) {
 	const [search, setSearch] = useState('');
 	const [typeFilter, setTypeFilter] = useState<ItemType>('all');
 
 	const filtered = useMemo(() => {
-        return items.filter(item => {
+		return items.filter((item) => {
-            if (typeFilter !== 'all' && getItemType(item.id) !== typeFilter) return false;
+			if (typeFilter !== 'all' && getItemType(item.id) !== typeFilter)
-            if (search.trim() && !item.name.toLowerCase().includes(search.toLowerCase())) return false;
+				return false;
+			if (
+				search.trim() &&
+				!item.name.toLowerCase().includes(search.toLowerCase())
+			)
+				return false;
 			return true;
 		});
 	}, [items, typeFilter, search]);
 
-    const handleGive100Visible = () => filtered.forEach(i => onSetQty(i.id, 100));
+	const handleGive100Visible = () =>
-    const handleRandVisible = () => filtered.forEach(i => onSetQty(i.id, randInRange(randMin, randMax)));
+		filtered.forEach((i) => onSetQty(i.id, 100));
-    const handleLockVisible = () => filtered.forEach(i => onSetQty(i.id, 0));
+	const handleRandVisible = () =>
+		filtered.forEach((i) => onSetQty(i.id, randInRange(randMin, randMax)));
+	const handleLockVisible = () => filtered.forEach((i) => onSetQty(i.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"
+					type='text'
-                    placeholder="Search items..."
+					placeholder='Search items...'
 					value={search}
-                    onChange={e => setSearch(e.target.value)}
+					onChange={(e) => setSearch(e.target.value)}
 				/>
 
 				<div className={shared.roleFilter}>
-                    {(Object.keys(ITEM_TYPE_LABELS) as ItemType[]).map(t => (
+					{(Object.keys(ITEM_TYPE_LABELS) as ItemType[]).map((t) => (
 						<button
 							key={t}
 							className={`${shared.roleBtn} ${typeFilter === t ? shared.roleBtnActive : ''}`}
@@ -57,18 +76,26 @@ export default function ItemGrid({ items, quantities, randMin, randMax, onSetQty
 				</div>
 
 				<span className={shared.spacer} />
-                <span className={shared.resultCount}>{filtered.length} shown · {activeCount} active</span>
+				<span className={shared.resultCount}>
+					{filtered.length} shown · {activeCount} active
+				</span>
 
-                <button className={shared.unlockAllBtn} onClick={handleGive100Visible}>Set all to 100</button>
+				<button className={shared.unlockAllBtn} onClick={handleGive100Visible}>
-                <button className={styles.randBtn} onClick={handleRandVisible}>Randomize</button>
+					Set all to 100
-                <button className={shared.lockAllBtn} onClick={handleLockVisible}>Remove all visible</button>
+				</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 items match</div>
 			) : (
 				<div className={styles.grid}>
-                    {filtered.map(item => (
+					{filtered.map((item) => (
 						<QuantityCard
 							key={item.id}
 							id={item.id}

app/items/OfferingGrid.tsx

@@ -16,7 +16,10 @@ type Props = {
 };
 
 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) => {
@@ -27,37 +30,46 @@ const roleMatches = (offeringRole: number, filter: OfferingRole) => {
 	return true;
 };
 
-export default function OfferingGrid({ offerings, quantities, randMin, randMax, onSetQty }: Props) {
+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 => {
+		return offerings.filter((o) => {
 			if (!roleMatches(o.role, roleFilter)) return false;
-            if (search.trim() && !o.name.toLowerCase().includes(search.toLowerCase())) 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 handleGive100Visible = () =>
-    const handleRandVisible = () => filtered.forEach(o => onSetQty(o.id, randInRange(randMin, randMax)));
+		filtered.forEach((o) => onSetQty(o.id, 100));
-    const handleLockVisible = () => filtered.forEach(o => onSetQty(o.id, 0));
+	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"
+					type='text'
-                    placeholder="Search offerings..."
+					placeholder='Search offerings...'
 					value={search}
-                    onChange={e => setSearch(e.target.value)}
+					onChange={(e) => setSearch(e.target.value)}
 				/>
 
 				<div className={shared.roleFilter}>
-                    {(Object.keys(ROLE_LABELS) as OfferingRole[]).map(r => (
+					{(Object.keys(ROLE_LABELS) as OfferingRole[]).map((r) => (
 						<button
 							key={r}
 							className={`${shared.roleBtn} ${roleFilter === r ? shared.roleBtnActive : ''}`}
@@ -69,18 +81,26 @@ export default function OfferingGrid({ offerings, quantities, randMin, randMax,
 				</div>
 
 				<span className={shared.spacer} />
-                <span className={shared.resultCount}>{filtered.length} shown · {activeCount} active</span>
+				<span className={shared.resultCount}>
+					{filtered.length} shown · {activeCount} active
+				</span>
 
-                <button className={shared.unlockAllBtn} onClick={handleGive100Visible}>Set all to 100</button>
+				<button className={shared.unlockAllBtn} onClick={handleGive100Visible}>
-                <button className={styles.randBtn} onClick={handleRandVisible}>Randomize</button>
+					Set all to 100
-                <button className={shared.lockAllBtn} onClick={handleLockVisible}>Remove all visible</button>
+				</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 => (
+					{filtered.map((offering) => (
 						<QuantityCard
 							key={offering.id}
 							id={offering.id}

app/items/page.tsx

@@ -26,12 +26,13 @@ export default function ItemsPage() {
 	const [randMax, setRandMax] = useState(200);
 
 	useEffect(() => {
-        Promise.all([fetchItems(), fetchOfferings(), fetchAddons()])
+		Promise.all([fetchItems(), fetchOfferings(), fetchAddons()]).then(
-            .then(([i, o, a]) => {
+			([i, o, a]) => {
 				setItems(i);
 				setOfferings(o);
 				setAddons(a);
-            });
+			}
+		);
 	}, []);
 
 	const handleClearAll = () => {
@@ -40,9 +41,11 @@ export default function ItemsPage() {
 		store.clearCategory('addons');
 	};
 
-    const activeItems = Object.values(store.items).filter(q => q > 0).length;
+	const activeItems = Object.values(store.items).filter((q) => q > 0).length;
-    const activeOfferings = Object.values(store.offerings).filter(q => q > 0).length;
+	const activeOfferings = Object.values(store.offerings).filter(
-    const activeAddons = Object.values(store.addons).filter(q => q > 0).length;
+		(q) => q > 0
+	).length;
+	const activeAddons = Object.values(store.addons).filter((q) => q > 0).length;
 
 	return (
 		<div className={shared.container}>
@@ -50,7 +53,8 @@ export default function ItemsPage() {
 				<div>
 					<h1 className={shared.title}>Items & Offerings</h1>
 					<p className={shared.subtitle}>
-                        {activeItems} items · {activeOfferings} offerings · {activeAddons} addons
+						{activeItems} items · {activeOfferings} offerings · {activeAddons}{' '}
+						addons
 					</p>
 				</div>
 
@@ -58,28 +62,34 @@ export default function ItemsPage() {
 					<span className={styles.rangeLabel}>Rand range</span>
 					<input
 						className={styles.rangeInput}
-                        type="number"
+						type='number'
 						value={randMin}
 						min={0}
 						max={5000}
-                        onChange={e => setRandMin(Math.max(0, parseInt(e.target.value) || 0))}
+						onChange={(e) =>
+							setRandMin(Math.max(0, parseInt(e.target.value) || 0))
+						}
 					/>
 					<span className={styles.rangeSep}>–</span>
 					<input
 						className={styles.rangeInput}
-                        type="number"
+						type='number'
 						value={randMax}
 						min={0}
 						max={5000}
-                        onChange={e => setRandMax(Math.min(5000, parseInt(e.target.value) || 0))}
+						onChange={(e) =>
+							setRandMax(Math.min(5000, parseInt(e.target.value) || 0))
+						}
 					/>
 				</div>
 
-                <button className={shared.clearBtn} onClick={handleClearAll}>Clear All</button>
+				<button className={shared.clearBtn} onClick={handleClearAll}>
+					Clear All
+				</button>
 			</header>
 
 			<div className={styles.tabs}>
-                {(['items', 'offerings', 'addons'] as Tab[]).map(t => (
+				{(['items', 'offerings', 'addons'] as Tab[]).map((t) => (
 					<button
 						key={t}
 						className={`${styles.tab} ${tab === t ? styles.tabActive : ''}`}

app/items/types.ts

@@ -20,12 +20,24 @@ export type Addon = {
 	role: number;
 };
 
-export type ItemType = 'all' | 'toolbox' | 'flashlight' | 'medkit' | 'key' | 'map' | 'other';
+export type ItemType =
+	| 'all'
+	| 'toolbox'
+	| 'flashlight'
+	| 'medkit'
+	| 'key'
+	| 'map'
+	| 'other';
 export type OfferingRole = 'all' | 'shared' | 'killer' | 'survivor';
 
 export const ITEM_TYPE_LABELS: Record<ItemType, string> = {
-    all: 'All', toolbox: 'Toolbox', flashlight: 'Flashlight',
+	all: 'All',
-    medkit: 'Med-Kit', key: 'Key', map: 'Map', other: 'Other',
+	toolbox: 'Toolbox',
+	flashlight: 'Flashlight',
+	medkit: 'Med-Kit',
+	key: 'Key',
+	map: 'Map',
+	other: 'Other'
 };
 
 export const getItemType = (id: string): ItemType => {

app/layout.tsx

@@ -1,28 +1,26 @@
-import type { Metadata } from "next";
+import type { Metadata } from 'next';
-import Sidebar from "../components/Sidebar";
+import Sidebar from '../components/Sidebar';
-import styles from "../styles/Layout.module.css";
+import styles from '../styles/Layout.module.css';
-import "./globals.css";
+import './globals.css';
-import AppContainer from "@/components/Container";
+import AppContainer from '@/components/Container';
 
 export const metadata: Metadata = {
-  title: "Hex: Unlocked",
+	title: 'Hex: Unlocked',
-  description: "",
+	description: ''
 };
 
 export default function RootLayout({
-  children,
+	children
 }: Readonly<{
 	children: React.ReactNode;
 }>) {
 	return (
-    <html lang="en">
+		<html lang='en'>
 			<body>
 				<AppContainer>
 					<div className={styles.layoutContainer}>
 						<Sidebar />
-            <main className={styles.mainContent}>
+						<main className={styles.mainContent}>{children}</main>
-              {children}
-            </main>
 					</div>
 				</AppContainer>
 			</body>

app/page.tsx

@@ -4,7 +4,15 @@ import { useState, useEffect, useMemo } from 'react';
 import { useInventoryStore } from '@/store/useInventoryStore';
 import styles from '../styles/Home.module.css';
 import { isNamedDLC } from '@/lib/utils';
-import { fetchCharacters, fetchItems, fetchOfferings, fetchCustomizations, fetchDLCs, fetchAddons, fetchPerks } from '@/lib/db';
+import {
+	fetchCharacters,
+	fetchItems,
+	fetchOfferings,
+	fetchCustomizations,
+	fetchDLCs,
+	fetchAddons,
+	fetchPerks
+} from '@/lib/db';
 
 export default function Home() {
 	const store = useInventoryStore();
@@ -28,7 +36,8 @@ export default function Home() {
 			fetchDLCs(),
 			fetchAddons(),
 			fetchPerks()
-    ]).then(([chars, items, offerings, customizations, dlcs, addons, perks]) => {
+		]).then(
+			([chars, items, offerings, customizations, dlcs, addons, perks]) => {
 				setCharCount(chars.length);
 				setItemsCount(items.length);
 				setOfferingsCount(offerings.length);
@@ -36,7 +45,8 @@ export default function Home() {
 				setDlcsCount(dlcs.filter(isNamedDLC).length);
 				setAddonsCount(addons.length);
 				setPerksCount(perks.length);
-    });
+			}
+		);
 	}, []);
 
 	/*
@@ -57,7 +67,8 @@ export default function Home() {
 	};
 
 	const getExportText = () => {
-    return JSON.stringify({
+		return JSON.stringify(
+			{
 				unlockedCharacters: store.unlockedCharacters,
 				unlockedCustomizations: store.unlockedCustomizations,
 				unlockedDLCs: store.unlockedDLCs,
@@ -65,7 +76,10 @@ export default function Home() {
 				items: store.items,
 				offerings: store.offerings,
 				addons: store.addons
-    }, null, 2);
+			},
+			null,
+			2
+		);
 	};
 
 	const handleImport = async () => {
@@ -73,57 +87,98 @@ export default function Home() {
 			const parsed = JSON.parse(importText);
 			store.importProfile(parsed);
 		} catch (e) {
-      console.error("Invalid JSON", e);
+			console.error('Invalid JSON', e);
 		}
 	};
 
 	useEffect(() => {
 		setImportText(getExportText());
-  }, [store.unlockedCharacters, store.unlockedCustomizations, store.unlockedDLCs, store.unlockedPerks, store.items, store.offerings, store.addons]);
+	}, [
+		store.unlockedCharacters,
+		store.unlockedCustomizations,
+		store.unlockedDLCs,
+		store.unlockedPerks,
+		store.items,
+		store.offerings,
+		store.addons
+	]);
 
 	/*
     stats
   */
-  const unlockedItems = useMemo(() => Object.values(store.items).filter(qty => qty > 0).length, [store.items]);
+	const unlockedItems = useMemo(
-  const unlockedOfferings = useMemo(() => Object.values(store.offerings).filter(qty => qty > 0).length, [store.offerings]);
+		() => Object.values(store.items).filter((qty) => qty > 0).length,
-  const unlockedAddons = useMemo(() => Object.values(store.addons).filter(qty => qty > 0).length, [store.addons]);
+		[store.items]
+	);
+	const unlockedOfferings = useMemo(
+		() => Object.values(store.offerings).filter((qty) => qty > 0).length,
+		[store.offerings]
+	);
+	const unlockedAddons = useMemo(
+		() => Object.values(store.addons).filter((qty) => qty > 0).length,
+		[store.addons]
+	);
 	const unlockedPerks = store.unlockedPerks.length;
 
-  return (<div className={styles.container}>
+	return (
+		<div className={styles.container}>
 			<header className={styles.header}>
 				<h1 className={styles.title}>Dashboard</h1>
-      <p className={styles.subtitle}>Status overview and profile management</p>
+				<p className={styles.subtitle}>
+					Status overview and profile management
+				</p>
 			</header>
 
 			{/* stats cards */}
 			<section className={styles.statsGrid}>
 				<div className={styles.statCard}>
 					<div className={styles.statLabel}>Characters</div>
-        <div className={styles.statValue}>{store.unlockedCharacters.length} <span className={styles.statTotal}>/ {charCount || '-'}</span></div>
+					<div className={styles.statValue}>
+						{store.unlockedCharacters.length}{' '}
+						<span className={styles.statTotal}>/ {charCount || '-'}</span>
+					</div>
 				</div>
 				<div className={styles.statCard}>
 					<div className={styles.statLabel}>Customizations</div>
-        <div className={styles.statValue}>{store.unlockedCustomizations.length} <span className={styles.statTotal}>/ {custCount || '-'}</span></div>
+					<div className={styles.statValue}>
+						{store.unlockedCustomizations.length}{' '}
+						<span className={styles.statTotal}>/ {custCount || '-'}</span>
+					</div>
 				</div>
 				<div className={styles.statCard}>
 					<div className={styles.statLabel}>DLCs</div>
-        <div className={styles.statValue}>{store.unlockedDLCs.length} <span className={styles.statTotal}>/ {dlcsCount || '-'}</span></div>
+					<div className={styles.statValue}>
+						{store.unlockedDLCs.length}{' '}
+						<span className={styles.statTotal}>/ {dlcsCount || '-'}</span>
+					</div>
 				</div>
 				<div className={styles.statCard}>
 					<div className={styles.statLabel}>Items</div>
-        <div className={styles.statValue}>{unlockedItems} <span className={styles.statTotal}>/ {itemsCount || '-'}</span></div>
+					<div className={styles.statValue}>
+						{unlockedItems}{' '}
+						<span className={styles.statTotal}>/ {itemsCount || '-'}</span>
+					</div>
 				</div>
 				<div className={styles.statCard}>
 					<div className={styles.statLabel}>Offerings</div>
-        <div className={styles.statValue}>{unlockedOfferings} <span className={styles.statTotal}>/ {offeringsCount || '-'}</span></div>
+					<div className={styles.statValue}>
+						{unlockedOfferings}{' '}
+						<span className={styles.statTotal}>/ {offeringsCount || '-'}</span>
+					</div>
 				</div>
 				<div className={styles.statCard}>
 					<div className={styles.statLabel}>Addons</div>
-        <div className={styles.statValue}>{unlockedAddons} <span className={styles.statTotal}>/ {addonsCount || '-'}</span></div>
+					<div className={styles.statValue}>
+						{unlockedAddons}{' '}
+						<span className={styles.statTotal}>/ {addonsCount || '-'}</span>
+					</div>
 				</div>
 				<div className={styles.statCard}>
 					<div className={styles.statLabel}>Perks</div>
-        <div className={styles.statValue}>{unlockedPerks} <span className={styles.statTotal}>/ {perksCount || '-'}</span></div>
+					<div className={styles.statValue}>
+						{unlockedPerks}{' '}
+						<span className={styles.statTotal}>/ {perksCount || '-'}</span>
+					</div>
 				</div>
 			</section>
 
@@ -135,10 +190,18 @@ export default function Home() {
 					<div className={styles.toggleRow}>
 						<div className={styles.toggleInfo}>
 							<span className={styles.toggleLabel}>Item Spoofing</span>
-            <span className={styles.toggleDesc}>Spoof inventory items, addons, and offerings</span>
+							<span className={styles.toggleDesc}>
+								Spoof inventory items, addons, and offerings
+							</span>
 						</div>
 						<label className={styles.switch}>
-            <input type="checkbox" checked={store.spoofItems} onChange={(e) => store.setToggle('spoofItems', e.target.checked)} />
+							<input
+								type='checkbox'
+								checked={store.spoofItems}
+								onChange={(e) =>
+									store.setToggle('spoofItems', e.target.checked)
+								}
+							/>
 							<span className={styles.slider}></span>
 						</label>
 					</div>
@@ -146,10 +209,18 @@ export default function Home() {
 					<div className={styles.toggleRow}>
 						<div className={styles.toggleInfo}>
 							<span className={styles.toggleLabel}>Perk Spoofing</span>
-            <span className={styles.toggleDesc}>Unlock all perk slots and custom builds</span>
+							<span className={styles.toggleDesc}>
+								Unlock all perk slots and custom builds
+							</span>
 						</div>
 						<label className={styles.switch}>
-            <input type="checkbox" checked={store.spoofPerks} onChange={(e) => store.setToggle('spoofPerks', e.target.checked)} />
+							<input
+								type='checkbox'
+								checked={store.spoofPerks}
+								onChange={(e) =>
+									store.setToggle('spoofPerks', e.target.checked)
+								}
+							/>
 							<span className={styles.slider}></span>
 						</label>
 					</div>
@@ -157,10 +228,18 @@ export default function Home() {
 					<div className={styles.toggleRow}>
 						<div className={styles.toggleInfo}>
 							<span className={styles.toggleLabel}>Catalog Spoofing</span>
-            <span className={styles.toggleDesc}>Unlock cosmetics, characters, and outfits</span>
+							<span className={styles.toggleDesc}>
+								Unlock cosmetics, characters, and outfits
+							</span>
 						</div>
 						<label className={styles.switch}>
-            <input type="checkbox" checked={store.spoofCatalog} onChange={(e) => store.setToggle('spoofCatalog', e.target.checked)} />
+							<input
+								type='checkbox'
+								checked={store.spoofCatalog}
+								onChange={(e) =>
+									store.setToggle('spoofCatalog', e.target.checked)
+								}
+							/>
 							<span className={styles.slider}></span>
 						</label>
 					</div>
@@ -168,10 +247,16 @@ export default function Home() {
 					<div className={styles.toggleRow}>
 						<div className={styles.toggleInfo}>
 							<span className={styles.toggleLabel}>DLC Spoofing</span>
-            <span className={styles.toggleDesc}>Bypass Steam, Epic, and Xbox DLC ownership</span>
+							<span className={styles.toggleDesc}>
+								Bypass Steam, Epic, and Xbox DLC ownership
+							</span>
 						</div>
 						<label className={styles.switch}>
-            <input type="checkbox" checked={store.spoofDLCs} onChange={(e) => store.setToggle('spoofDLCs', e.target.checked)} />
+							<input
+								type='checkbox'
+								checked={store.spoofDLCs}
+								onChange={(e) => store.setToggle('spoofDLCs', e.target.checked)}
+							/>
 							<span className={styles.slider}></span>
 						</label>
 					</div>
@@ -198,8 +283,8 @@ export default function Home() {
 							Download file
 						</button>
 					</div>
-
 				</div>
 			</section>
-  </div>)
+		</div>
+	);
 }

app/perks/page.tsx

@@ -11,24 +11,37 @@ export default function PerksPage() {
 	const store = useInventoryStore();
 	const [perks, setPerks] = useState<Perk[]>([]);
 	const [search, setSearch] = useState('');
-    const [roleFilter, setRoleFilter] = useState<'all' | 'killer' | 'survivor'>('all');
+	const [roleFilter, setRoleFilter] = useState<'all' | 'killer' | 'survivor'>(
+		'all'
+	);
 
 	useEffect(() => {
 		fetchPerks().then(setPerks);
 	}, []);
 
 	const filtered = useMemo(() => {
-        return perks.filter(p => {
+		return perks.filter((p) => {
 			if (roleFilter === 'killer' && p.role !== 1) return false;
 			if (roleFilter === 'survivor' && p.role !== 2) return false;
-            if (search.trim() && !p.name.toLowerCase().includes(search.toLowerCase())) return false;
+			if (search.trim() && !p.name.toLowerCase().includes(search.toLowerCase()))
+				return false;
 			return true;
 		});
 	}, [perks, search, roleFilter]);
 
 	const handleClearAll = () => store.clearCategory('perks');
-    const handleUnlockVisible = () => store.unlockAllInCategory('perks', Array.from(new Set([...store.unlockedPerks, ...filtered.map(p => p.id)])));
+	const handleUnlockVisible = () =>
-    const handleLockVisible = () => store.unlockAllInCategory('perks', store.unlockedPerks.filter(id => !filtered.find(p => p.id === id)));
+		store.unlockAllInCategory(
+			'perks',
+			Array.from(
+				new Set([...store.unlockedPerks, ...filtered.map((p) => p.id)])
+			)
+		);
+	const handleLockVisible = () =>
+		store.unlockAllInCategory(
+			'perks',
+			store.unlockedPerks.filter((id) => !filtered.find((p) => p.id === id))
+		);
 
 	const activeCount = store.unlockedPerks.length;
 
@@ -37,28 +50,57 @@ export default function PerksPage() {
 			<header className={shared.header}>
 				<div>
 					<h1 className={shared.title}>Perks</h1>
-                    <p className={shared.subtitle}>{activeCount} active out of {perks.length} total</p>
+					<p className={shared.subtitle}>
+						{activeCount} active out of {perks.length} total
+					</p>
 				</div>
-                <button className={shared.clearBtn} onClick={handleClearAll}>Clear All</button>
+				<button className={shared.clearBtn} onClick={handleClearAll}>
+					Clear All
+				</button>
 			</header>
 
 			<div className={shared.toolbar}>
-                <input className={shared.searchInput} type="text" placeholder="Search perks..." value={search} onChange={e => setSearch(e.target.value)} />
+				<input
+					className={shared.searchInput}
+					type='text'
+					placeholder='Search perks...'
+					value={search}
+					onChange={(e) => setSearch(e.target.value)}
+				/>
 
 				<div className={shared.roleFilter}>
-                    <button className={`${shared.roleBtn} ${roleFilter === 'all' ? shared.roleBtnActive : ''}`} onClick={() => setRoleFilter('all')}>All</button>
+					<button
-                    <button className={`${shared.roleBtn} ${roleFilter === 'survivor' ? shared.roleBtnActive : ''}`} onClick={() => setRoleFilter('survivor')}>Survivor</button>
+						className={`${shared.roleBtn} ${roleFilter === 'all' ? shared.roleBtnActive : ''}`}
-                    <button className={`${shared.roleBtn} ${roleFilter === 'killer' ? shared.roleBtnActive : ''}`} onClick={() => setRoleFilter('killer')}>Killer</button>
+						onClick={() => setRoleFilter('all')}
+					>
+						All
+					</button>
+					<button
+						className={`${shared.roleBtn} ${roleFilter === 'survivor' ? shared.roleBtnActive : ''}`}
+						onClick={() => setRoleFilter('survivor')}
+					>
+						Survivor
+					</button>
+					<button
+						className={`${shared.roleBtn} ${roleFilter === 'killer' ? shared.roleBtnActive : ''}`}
+						onClick={() => setRoleFilter('killer')}
+					>
+						Killer
+					</button>
 				</div>
 
 				<span className={shared.spacer} />
 				<span className={shared.resultCount}>{filtered.length} shown</span>
-                <button className={shared.unlockAllBtn} onClick={handleUnlockVisible}>Unlock visible</button>
+				<button className={shared.unlockAllBtn} onClick={handleUnlockVisible}>
-                <button className={shared.lockAllBtn} onClick={handleLockVisible}>Lock visible</button>
+					Unlock visible
+				</button>
+				<button className={shared.lockAllBtn} onClick={handleLockVisible}>
+					Lock visible
+				</button>
 			</div>
 
 			<div className={styles.grid}>
-                {filtered.map(perk => {
+				{filtered.map((perk) => {
 					const unlocked = store.unlockedPerks.includes(perk.id);
 					const killer = perk.role === 1;
 					return (
@@ -71,10 +113,12 @@ export default function PerksPage() {
 								className={shared.cardIcon}
 								src={getPerkIconUrl(perk.iconFilePath)}
 								alt={perk.name}
-                                loading="lazy"
+								loading='lazy'
 							/>
 							<span className={shared.cardName}>{perk.name}</span>
-                            <span className={`${shared.rolePip} ${killer ? shared.rolePipKiller : ''}`}>
+							<span
+								className={`${shared.rolePip} ${killer ? shared.rolePipKiller : ''}`}
+							>
 								{killer ? 'Killer' : 'Survivor'}
 							</span>
 						</div>

app/perks/types.ts

@@ -1,4 +1,4 @@
-import { DB_BASE_URL } from "@/lib/db";
+import { DB_BASE_URL } from '@/lib/db';
 
 export type Perk = {
 	id: string;

components/Container.tsx

@@ -1,10 +1,14 @@
-"use client";
+'use client';
 
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
-import { useWebsocketStore } from "../store/useWebsocketStore";
+import { useWebsocketStore } from '../store/useWebsocketStore';
-import styles from "../styles/AppContainer.module.css";
+import styles from '../styles/AppContainer.module.css';
 
-export default function AppContainer({ children }: { children: React.ReactNode }) {
+export default function AppContainer({
+	children
+}: {
+	children: React.ReactNode;
+}) {
 	const { connect, isConnected } = useWebsocketStore();
 	const [showHelp, setShowHelp] = useState(false);
 
@@ -29,9 +33,19 @@ export default function AppContainer({ children }: { children: React.ReactNode }
 
 					{showHelp && (
 						<div className={styles.helpText}>
-                            <p style={{ marginBottom: '0.5rem' }}>Make sure the client is running.</p>
+							<p style={{ marginBottom: '0.5rem' }}>
+								Make sure the client is running.
+							</p>
 							<p>
-                                Don't have it? Download it <a href="https://git.neru.rip/neru/HexUnlocked" target="_blank" rel="noreferrer" className={styles.link}>here</a>
+								Don't have it? Download it{' '}
+								<a
+									href='https://git.neru.rip/neru/HexUnlocked'
+									target='_blank'
+									rel='noreferrer'
+									className={styles.link}
+								>
+									here
+								</a>
 							</p>
 						</div>
 					)}

components/QuantityCard.tsx

@@ -15,34 +15,57 @@ type Props = {
 
 const clamp = (v: number) => Math.min(32767, Math.max(0, v));
 
-export default function QuantityCard({ id, name, iconUrl, qty, randMin, randMax, onSetQty }: Props) {
+export default function QuantityCard({
+	id,
+	name,
+	iconUrl,
+	qty,
+	randMin,
+	randMax,
+	onSetQty
+}: Props) {
 	const active = qty > 0;
 
 	return (
 		<div className={`${styles.card} ${active ? styles.cardActive : ''}`}>
-            <img className={styles.icon} src={iconUrl} alt={name} loading="lazy" />
+			<img className={styles.icon} src={iconUrl} alt={name} loading='lazy' />
 			<span className={styles.name}>{name}</span>
 
 			{active ? (
 				<>
 					<div className={styles.qtyRow}>
-                        <button className={styles.qtyBtn} onClick={() => onSetQty(id, clamp(qty - 1))}>−</button>
+						<button
+							className={styles.qtyBtn}
+							onClick={() => onSetQty(id, clamp(qty - 1))}
+						>
+							−
+						</button>
 						<input
 							className={styles.qtyInput}
-                            type="number"
+							type='number'
 							value={qty}
 							min={0}
 							max={5000}
-                            onChange={e => {
+							onChange={(e) => {
 								const v = parseInt(e.target.value);
 								if (!isNaN(v)) onSetQty(id, clamp(v));
 							}}
 						/>
-                        <button className={styles.qtyBtn} onClick={() => onSetQty(id, clamp(qty + 1))}>+</button>
+						<button
+							className={styles.qtyBtn}
+							onClick={() => onSetQty(id, clamp(qty + 1))}
+						>
+							+
+						</button>
 					</div>
 
 					<div className={styles.quickRow}>
-                        <button className={styles.quickBtn} onClick={() => onSetQty(id, 100)}>100</button>
+						<button
+							className={styles.quickBtn}
+							onClick={() => onSetQty(id, 100)}
+						>
+							100
+						</button>
 						<button
 							className={`${styles.quickBtn} ${styles.quickBtnRand}`}
 							onClick={() => onSetQty(id, randInRange(randMin, randMax))}
@@ -58,7 +81,9 @@ export default function QuantityCard({ id, name, iconUrl, qty, randMin, randMax,
 					</div>
 				</>
 			) : (
-                <button className={styles.addBtn} onClick={() => onSetQty(id, 100)}>+ Add</button>
+				<button className={styles.addBtn} onClick={() => onSetQty(id, 100)}>
+					+ Add
+				</button>
 			)}
 		</div>
 	);

components/Sidebar.tsx

@@ -1,4 +1,4 @@
-import Link from "next/link";
+import Link from 'next/link';
 
 import styles from '../styles/Sidebar.module.css';
 
@@ -8,17 +8,27 @@ export default function Sidebar() {
 			<h1 className={styles.title}>Hex: Unlocked</h1>
 
 			<nav>
-        <Link href="/" className={styles.navLink}>Dashboard</Link>
+				<Link href='/' className={styles.navLink}>
-        <Link href="/characters" className={styles.navLink}>Characters</Link>
+					Dashboard
-        <Link href="/customizations" className={styles.navLink}>Customizations</Link>
+				</Link>
-        <Link href="/items" className={styles.navLink}>Items, offerings & addons</Link>
+				<Link href='/characters' className={styles.navLink}>
-        <Link href="/perks" className={styles.navLink}>Perks</Link>
+					Characters
-        <Link href="/dlcs" className={styles.navLink}>DLCs</Link>
+				</Link>
+				<Link href='/customizations' className={styles.navLink}>
+					Customizations
+				</Link>
+				<Link href='/items' className={styles.navLink}>
+					Items, offerings & addons
+				</Link>
+				<Link href='/perks' className={styles.navLink}>
+					Perks
+				</Link>
+				<Link href='/dlcs' className={styles.navLink}>
+					DLCs
+				</Link>
 			</nav>
 
-      <button className={styles.syncButton}>
+			<button className={styles.syncButton}>Synchronize</button>
-        Synchronize
-      </button>
 		</aside>
 	);
-};
+}

lib/db.ts

@@ -1,4 +1,5 @@
-export const DB_BASE_URL = process.env.NODE_ENV === 'development' ? '' : 'https://dbd-db.neru.rip';
+export const DB_BASE_URL =
+	process.env.NODE_ENV === 'development' ? '' : 'https://dbd-db.neru.rip';
 
 const _cache = new Map<string, Promise<any>>();
 
@@ -7,11 +8,11 @@ export function fetchDB<T = any>(path: string): Promise<T> {
 		_cache.set(
 			path,
 			fetch(`${DB_BASE_URL}${path}`)
-        .then(r => {
+				.then((r) => {
 					if (!r.ok) throw new Error(`[db] ${r.status} ${path}`);
 					return r.json();
 				})
-        .catch(err => {
+				.catch((err) => {
 					_cache.delete(path);
 					console.error(err);
 					return [];
@@ -22,7 +23,8 @@ export function fetchDB<T = any>(path: string): Promise<T> {
 }
 
 export const fetchCharacters = () => fetchDB('/data/characters.json');
-export const fetchCustomizations = () => fetchDB('/data/customization_items.json');
+export const fetchCustomizations = () =>
+	fetchDB('/data/customization_items.json');
 export const fetchItems = () => fetchDB('/data/items.json');
 export const fetchOfferings = () => fetchDB('/data/offerings.json');
 export const fetchDLCs = () => fetchDB('/data/dlcs.json');

lib/utils.ts

@@ -18,7 +18,8 @@ export const cleanFolderName = (name: string): string =>
 
 export const isKiller = (idx: number): boolean => idx >= 268435456;
 
-export const isNamedDLC = (dlc: DLC): dlc is DLC & { name: string } => !!dlc.name && !dlc.name.startsWith('@');
+export const isNamedDLC = (dlc: DLC): dlc is DLC & { name: string } =>
+	!!dlc.name && !dlc.name.startsWith('@');
 
 export const randInRange = (min: number, max: number) => {
 	const lo = Math.min(min, max);

store/useInventoryStore.ts

@@ -15,15 +15,48 @@ export interface InventoryState {
 	spoofCatalog: boolean;
 	spoofDLCs: boolean;
 
-    toggleItem: (id: string, category: 'characters' | 'customizations' | 'items' | 'offerings' | 'addons' | 'dlcs' | 'perks') => void;
+	toggleItem: (
+		id: string,
+		category:
+			| 'characters'
+			| 'customizations'
+			| 'items'
+			| 'offerings'
+			| 'addons'
+			| 'dlcs'
+			| 'perks'
+	) => void;
 	setItemQuantity: (id: string, qty: number) => void;
 	setOfferingQuantity: (id: string, qty: number) => void;
 	setAddonQuantity: (id: string, qty: number) => void;
-    setToggle: (key: 'spoofItems' | 'spoofPerks' | 'spoofCatalog' | 'spoofDLCs', val: boolean) => void;
+	setToggle: (
+		key: 'spoofItems' | 'spoofPerks' | 'spoofCatalog' | 'spoofDLCs',
+		val: boolean
+	) => void;
 	importToggles: (toggles: any) => void;
 
-    unlockAllInCategory: (category: 'characters' | 'customizations' | 'items' | 'offerings' | 'addons' | 'dlcs' | 'perks', allIds: string[], qty?: number) => void;
+	unlockAllInCategory: (
-    clearCategory: (category: 'characters' | 'customizations' | 'items' | 'offerings' | 'addons' | 'dlcs' | 'perks') => void;
+		category:
+			| 'characters'
+			| 'customizations'
+			| 'items'
+			| 'offerings'
+			| 'addons'
+			| 'dlcs'
+			| 'perks',
+		allIds: string[],
+		qty?: number
+	) => void;
+	clearCategory: (
+		category:
+			| 'characters'
+			| 'customizations'
+			| 'items'
+			| 'offerings'
+			| 'addons'
+			| 'dlcs'
+			| 'perks'
+	) => void;
 	clearAll: () => void;
 	importProfile: (profile: any) => void;
 }
@@ -46,85 +79,134 @@ export const useInventoryStore = create<InventoryState>()(
 
 			setToggle: (key, val) => set({ [key]: val }),
 
-            importToggles: (toggles) => set((state) => {
+			importToggles: (toggles) =>
+				set((state) => {
 					if (!toggles) return {};
 					return {
-                    spoofItems: typeof toggles.spoofItems === 'boolean' ? toggles.spoofItems : state.spoofItems,
+						spoofItems:
-                    spoofPerks: typeof toggles.spoofPerks === 'boolean' ? toggles.spoofPerks : state.spoofPerks,
+							typeof toggles.spoofItems === 'boolean'
-                    spoofCatalog: typeof toggles.spoofCatalog === 'boolean' ? toggles.spoofCatalog : state.spoofCatalog,
+								? toggles.spoofItems
-                    spoofDLCs: typeof toggles.spoofDLCs === 'boolean' ? toggles.spoofDLCs : state.spoofDLCs,
+								: state.spoofItems,
+						spoofPerks:
+							typeof toggles.spoofPerks === 'boolean'
+								? toggles.spoofPerks
+								: state.spoofPerks,
+						spoofCatalog:
+							typeof toggles.spoofCatalog === 'boolean'
+								? toggles.spoofCatalog
+								: state.spoofCatalog,
+						spoofDLCs:
+							typeof toggles.spoofDLCs === 'boolean'
+								? toggles.spoofDLCs
+								: state.spoofDLCs
 					};
 				}),
 
-            toggleItem: (id, category) => set((state) => {
+			toggleItem: (id, category) =>
+				set((state) => {
 					if (category === 'characters') {
 						const arr = state.unlockedCharacters;
-                    return { unlockedCharacters: arr.includes(id) ? arr.filter(i => i !== id) : [...arr, id] };
+						return {
+							unlockedCharacters: arr.includes(id)
+								? arr.filter((i) => i !== id)
+								: [...arr, id]
+						};
 					} else if (category === 'customizations') {
 						const arr = state.unlockedCustomizations;
-                    return { unlockedCustomizations: arr.includes(id) ? arr.filter(i => i !== id) : [...arr, id] };
+						return {
+							unlockedCustomizations: arr.includes(id)
+								? arr.filter((i) => i !== id)
+								: [...arr, id]
+						};
 					} else if (category === 'dlcs') {
 						const arr = state.unlockedDLCs;
-                    return { unlockedDLCs: arr.includes(id) ? arr.filter(i => i !== id) : [...arr, id] };
+						return {
+							unlockedDLCs: arr.includes(id)
+								? arr.filter((i) => i !== id)
+								: [...arr, id]
+						};
 					} else if (category === 'perks') {
 						const arr = state.unlockedPerks;
-                    return { unlockedPerks: arr.includes(id) ? arr.filter(i => i !== id) : [...arr, id] };
+						return {
+							unlockedPerks: arr.includes(id)
+								? arr.filter((i) => i !== id)
+								: [...arr, id]
+						};
 					} else if (category === 'items') {
 						const newItems = { ...state.items };
-                    if ((newItems[id] || 0) > 0) delete newItems[id]; else newItems[id] = 100;
+						if ((newItems[id] || 0) > 0) delete newItems[id];
+						else newItems[id] = 100;
 						return { items: newItems };
 					} else if (category === 'addons') {
 						const newAddons = { ...state.addons };
-                    if ((newAddons[id] || 0) > 0) delete newAddons[id]; else newAddons[id] = 100;
+						if ((newAddons[id] || 0) > 0) delete newAddons[id];
+						else newAddons[id] = 100;
 						return { addons: newAddons };
 					} else {
 						const newOfferings = { ...state.offerings };
-                    if ((newOfferings[id] || 0) > 0) delete newOfferings[id]; else newOfferings[id] = 100;
+						if ((newOfferings[id] || 0) > 0) delete newOfferings[id];
+						else newOfferings[id] = 100;
 						return { offerings: newOfferings };
 					}
 				}),
 
-            setItemQuantity: (id, qty) => set((state) => {
+			setItemQuantity: (id, qty) =>
+				set((state) => {
 					const newItems = { ...state.items };
-                if (qty <= 0) delete newItems[id]; else newItems[id] = Math.min(32767, Math.max(0, qty));
+					if (qty <= 0) delete newItems[id];
+					else newItems[id] = Math.min(32767, Math.max(0, qty));
 					return { items: newItems };
 				}),
 
-            setOfferingQuantity: (id, qty) => set((state) => {
+			setOfferingQuantity: (id, qty) =>
+				set((state) => {
 					const newOfferings = { ...state.offerings };
-                if (qty <= 0) delete newOfferings[id]; else newOfferings[id] = Math.min(32767, Math.max(0, qty));
+					if (qty <= 0) delete newOfferings[id];
+					else newOfferings[id] = Math.min(32767, Math.max(0, qty));
 					return { offerings: newOfferings };
 				}),
 
-            setAddonQuantity: (id, qty) => set((state) => {
+			setAddonQuantity: (id, qty) =>
+				set((state) => {
 					const newAddons = { ...state.addons };
-                if (qty <= 0) delete newAddons[id]; else newAddons[id] = Math.min(32767, Math.max(0, qty));
+					if (qty <= 0) delete newAddons[id];
+					else newAddons[id] = Math.min(32767, Math.max(0, qty));
 					return { addons: newAddons };
 				}),
 
-            unlockAllInCategory: (category, allIds, qty = 100) => set((state) => {
+			unlockAllInCategory: (category, allIds, qty = 100) =>
+				set((state) => {
 					if (category === 'characters') return { unlockedCharacters: allIds };
-                if (category === 'customizations') return { unlockedCustomizations: allIds };
+					if (category === 'customizations')
+						return { unlockedCustomizations: allIds };
 					if (category === 'dlcs') return { unlockedDLCs: allIds };
 					if (category === 'perks') return { unlockedPerks: allIds };
 					if (category === 'items') {
 						const newItems = { ...state.items };
-                    allIds.forEach(id => { newItems[id] = qty; });
+						allIds.forEach((id) => {
+							newItems[id] = qty;
+						});
 						return { items: newItems };
 					} else if (category === 'addons') {
 						const newAddons = { ...state.addons };
-                    allIds.forEach(id => { newAddons[id] = qty; });
+						allIds.forEach((id) => {
+							newAddons[id] = qty;
+						});
 						return { addons: newAddons };
 					} else {
 						const newOfferings = { ...state.offerings };
-                    allIds.forEach(id => { newOfferings[id] = qty; });
+						allIds.forEach((id) => {
+							newOfferings[id] = qty;
+						});
 						return { offerings: newOfferings };
 					}
 				}),
 
-            clearCategory: (category) => set(() => {
+			clearCategory: (category) =>
+				set(() => {
 					if (category === 'characters') return { unlockedCharacters: [] };
-                if (category === 'customizations') return { unlockedCustomizations: [] };
+					if (category === 'customizations')
+						return { unlockedCustomizations: [] };
 					if (category === 'dlcs') return { unlockedDLCs: [] };
 					if (category === 'perks') return { unlockedPerks: [] };
 					if (category === 'items') return { items: {} };
@@ -132,31 +214,52 @@ export const useInventoryStore = create<InventoryState>()(
 					return { offerings: {} };
 				}),
 
-            clearAll: () => set({
+			clearAll: () =>
+				set({
 					unlockedCharacters: [],
 					unlockedCustomizations: [],
 					unlockedDLCs: [],
 					unlockedPerks: [],
 					items: {},
 					offerings: {},
-                addons: {},
+					addons: {}
 				}),
 
-            importProfile: (profile) => set((state) => {
+			importProfile: (profile) =>
+				set((state) => {
 					if (!profile) return {};
 					return {
-                    unlockedCharacters: Array.isArray(profile.unlockedCharacters) ? profile.unlockedCharacters : state.unlockedCharacters,
+						unlockedCharacters: Array.isArray(profile.unlockedCharacters)
-                    unlockedCustomizations: Array.isArray(profile.unlockedCustomizations) ? profile.unlockedCustomizations : state.unlockedCustomizations,
+							? profile.unlockedCharacters
-                    unlockedDLCs: Array.isArray(profile.unlockedDLCs) ? profile.unlockedDLCs : state.unlockedDLCs,
+							: state.unlockedCharacters,
-                    unlockedPerks: Array.isArray(profile.unlockedPerks) ? profile.unlockedPerks : state.unlockedPerks,
+						unlockedCustomizations: Array.isArray(
-                    items: (profile.items && typeof profile.items === 'object') ? profile.items : state.items,
+							profile.unlockedCustomizations
-                    offerings: (profile.offerings && typeof profile.offerings === 'object') ? profile.offerings : state.offerings,
+						)
-                    addons: (profile.addons && typeof profile.addons === 'object') ? profile.addons : state.addons,
+							? profile.unlockedCustomizations
+							: state.unlockedCustomizations,
+						unlockedDLCs: Array.isArray(profile.unlockedDLCs)
+							? profile.unlockedDLCs
+							: state.unlockedDLCs,
+						unlockedPerks: Array.isArray(profile.unlockedPerks)
+							? profile.unlockedPerks
+							: state.unlockedPerks,
+						items:
+							profile.items && typeof profile.items === 'object'
+								? profile.items
+								: state.items,
+						offerings:
+							profile.offerings && typeof profile.offerings === 'object'
+								? profile.offerings
+								: state.offerings,
+						addons:
+							profile.addons && typeof profile.addons === 'object'
+								? profile.addons
+								: state.addons
 					};
 				})
 		}),
 		{
-            name: 'hex-unlocked-inventory',
+			name: 'hex-unlocked-inventory'
 		}
 	)
 );

store/useWebsocketStore.ts

@@ -1,5 +1,6 @@
 import { create } from 'zustand';
 import { useInventoryStore } from './useInventoryStore';
+import { mapStoreToSpooferConfig, mapSpooferConfigToStore } from './wsProtocol';
 
 interface WebsocketState {
 	socket: WebSocket | null;
@@ -7,6 +8,9 @@ interface WebsocketState {
 	connect: () => void;
 }
 
+let lastTogglesJson = '';
+let lastInventoryJson = '';
+
 export const useWebsocketStore = create<WebsocketState>((set, get) => ({
 	socket: null,
 	isConnected: false,
@@ -32,25 +36,83 @@ export const useWebsocketStore = create<WebsocketState>((set, get) => ({
 			ws.close();
 		};
 
-        ws.onmessage = (msg) => {
+		ws.onmessage = async (msg) => {
 			try {
 				const payload = JSON.parse(msg.data);
-                if (payload.action === 'init_config')
+
-                    useInventoryStore.getState().importProfile(payload.data);
+				// C++ sends action=0 (INIT_CONFIG) on WebSocket open
+				if (payload.action === 0) {
+					const mapped = await mapSpooferConfigToStore(payload.profile);
+
+					// Snapshot current state strings to prevent echo
+					lastInventoryJson = JSON.stringify({
+						unlockedCharacters: mapped.unlockedCharacters,
+						unlockedCustomizations: mapped.unlockedCustomizations,
+						unlockedDLCs: mapped.unlockedDLCs,
+						unlockedPerks: mapped.unlockedPerks,
+						items: mapped.items,
+						offerings: mapped.offerings,
+						addons: mapped.addons
+					});
+					lastTogglesJson = JSON.stringify({
+						spoofItems: payload.toggles?.spoofItems ?? false,
+						spoofPerks: payload.toggles?.spoofPerks ?? false,
+						spoofCatalog: payload.toggles?.spoofCatalog ?? false,
+						spoofDLCs: payload.toggles?.spoofDLCs ?? false
+					});
+
+					useInventoryStore.getState().importProfile(mapped);
+					useInventoryStore.getState().importToggles(payload.toggles);
+				}
 			} catch (e) {
-                console.error("Failed to parse WS message", e);
+				console.error('Failed to parse WS message', e);
 			}
 		};
 	}
 }));
 
-useInventoryStore.subscribe((newState) => {
+// Subscribe to store changes and sync to C++ client
+useInventoryStore.subscribe((state) => {
 	const { socket, isConnected } = useWebsocketStore.getState();
+	if (!isConnected || !socket || socket.readyState !== WebSocket.OPEN) return;
 
-    if (isConnected && socket) {
+	// --- Check toggles ---
-        socket.send(JSON.stringify({
+	const toggles = {
-            action: "sync_inventory",
+		spoofItems: state.spoofItems,
-            data: newState
+		spoofPerks: state.spoofPerks,
-        }));
+		spoofCatalog: state.spoofCatalog,
+		spoofDLCs: state.spoofDLCs
+	};
+	const togglesJson = JSON.stringify(toggles);
+	if (togglesJson !== lastTogglesJson) {
+		lastTogglesJson = togglesJson;
+		socket.send(JSON.stringify({ action: 2, toggles }));
+	}
+
+	// --- Check inventory ---
+	const inventory = {
+		unlockedCharacters: state.unlockedCharacters,
+		unlockedCustomizations: state.unlockedCustomizations,
+		unlockedDLCs: state.unlockedDLCs,
+		unlockedPerks: state.unlockedPerks,
+		items: state.items,
+		offerings: state.offerings,
+		addons: state.addons
+	};
+	const inventoryJson = JSON.stringify(inventory);
+	if (inventoryJson !== lastInventoryJson) {
+		lastInventoryJson = inventoryJson;
+
+		mapStoreToSpooferConfig(state).then((profile) => {
+			// Re-check connection in case it dropped during async mapping
+			const ws = useWebsocketStore.getState();
+			if (
+				ws.isConnected &&
+				ws.socket &&
+				ws.socket.readyState === WebSocket.OPEN
+			) {
+				ws.socket.send(JSON.stringify({ action: 1, profile }));
+			}
+		});
 	}
 });

store/wsProtocol.ts

@@ -1,4 +1,10 @@
-import { fetchDLCs, fetchItems, fetchOfferings, fetchAddons, fetchPerks } from '../lib/db';
+import {
+	fetchDLCs,
+	fetchItems,
+	fetchOfferings,
+	fetchAddons,
+	fetchPerks
+} from '../lib/db';
 import { DLC } from '../lib/utils';
 
 export interface SpooferConfig {
@@ -32,13 +38,9 @@ export async function mapStoreToSpooferConfig(state: {
 	offerings: Record<string, number>;
 	addons: Record<string, number>;
 }): Promise<SpooferConfig> {
-    const [dlcs, allItems, allOfferings, allAddons, allPerks] = await Promise.all([
+	const [dlcs, allItems, allOfferings, allAddons, allPerks] = await Promise.all(
-        fetchDLCs(),
+		[fetchDLCs(), fetchItems(), fetchOfferings(), fetchAddons(), fetchPerks()]
-        fetchItems(),
+	);
-        fetchOfferings(),
-        fetchAddons(),
-        fetchPerks()
-    ]);
 
 	const dlcMap = new Map<string, DLC>();
 	dlcs.forEach((d: DLC) => dlcMap.set(d.id, d));
@@ -47,7 +49,9 @@ export async function mapStoreToSpooferConfig(state: {
 	allItems.forEach((i: { id: string }) => itemIdSet.add(i.id));
 
 	const offeringMap = new Map<string, { role: number }>();
-    allOfferings.forEach((o: { id: string; role: number }) => offeringMap.set(o.id, o));
+	allOfferings.forEach((o: { id: string; role: number }) =>
+		offeringMap.set(o.id, o)
+	);
 
 	const addonMap = new Map<string, { role: number }>();
 	allAddons.forEach((a: { id: string; role: number }) => addonMap.set(a.id, a));
@@ -55,6 +59,7 @@ export async function mapStoreToSpooferConfig(state: {
 	const perkMap = new Map<string, { role: number }>();
 	allPerks.forEach((p: { id: string; role: number }) => perkMap.set(p.id, p));
 
+	// --- DLCs ---
 	const dlcListSteam: string[] = [];
 	const dlcListEGS: string[] = [];
 	const dlcListGRDK: string[] = [];
@@ -62,19 +67,33 @@ export async function mapStoreToSpooferConfig(state: {
 	for (const id of state.unlockedDLCs) {
 		const dlc = dlcMap.get(id);
 		if (!dlc?.dlcIds) continue;
-        if (dlc.dlcIds.steam && dlc.dlcIds.steam !== '0' && dlc.dlcIds.steam !== '-1')
+		if (
+			dlc.dlcIds.steam &&
+			dlc.dlcIds.steam !== '0' &&
+			dlc.dlcIds.steam !== '-1'
+		)
 			dlcListSteam.push(dlc.dlcIds.steam);
-        if (dlc.dlcIds.epic && dlc.dlcIds.epic !== 'FFFFFFFFFFFFFFFF' && dlc.dlcIds.epic !== '0')
+		if (
+			dlc.dlcIds.epic &&
+			dlc.dlcIds.epic !== 'FFFFFFFFFFFFFFFF' &&
+			dlc.dlcIds.epic !== '0'
+		)
 			dlcListEGS.push(dlc.dlcIds.epic);
-        if (dlc.dlcIds.grdk && dlc.dlcIds.grdk !== '9ZZZZZZZZZZZ' && dlc.dlcIds.grdk !== '0')
+		if (
+			dlc.dlcIds.grdk &&
+			dlc.dlcIds.grdk !== '9ZZZZZZZZZZZ' &&
+			dlc.dlcIds.grdk !== '0'
+		)
 			dlcListGRDK.push(dlc.dlcIds.grdk);
 	}
 
+	// --- Items ---
 	const camperItems: Record<string, number> = {};
-    for (const [id, qty] of Object.entries(state.items))
+	for (const [id, qty] of Object.entries(state.items)) {
 		if (qty > 0 && itemIdSet.has(id)) camperItems[id] = qty;
+	}
 
-
+	// --- Offerings ---
 	const camperOfferings: Record<string, number> = {};
 	const slasherOfferings: Record<string, number> = {};
 	const globalOfferings: Record<string, number> = {};
@@ -88,6 +107,7 @@ export async function mapStoreToSpooferConfig(state: {
 		else globalOfferings[id] = qty;
 	}
 
+	// --- Addons ---
 	const camperAddons: Record<string, number> = {};
 	const slasherAddons: Record<string, number> = {};
 
@@ -99,6 +119,7 @@ export async function mapStoreToSpooferConfig(state: {
 		else camperAddons[id] = qty;
 	}
 
+	// --- Perks ---
 	const camperPerks: string[] = [];
 	const slasherPerks: string[] = [];
 
@@ -121,7 +142,7 @@ export async function mapStoreToSpooferConfig(state: {
 		catalogItemIds: [...state.unlockedCustomizations],
 		dlcListSteam,
 		dlcListEGS,
-        dlcListGRDK,
+		dlcListGRDK
 	};
 }
 
@@ -131,26 +152,29 @@ export async function mapSpooferConfigToStore(profile: SpooferConfig) {
 	const unlockedDLCs: string[] = [];
 	for (const dlc of dlcs as DLC[]) {
 		if (!dlc.dlcIds) continue;
-        const hasSteam = dlc.dlcIds.steam && profile.dlcListSteam?.includes(dlc.dlcIds.steam);
+		const hasSteam =
-        const hasEpic = dlc.dlcIds.epic && profile.dlcListEGS?.includes(dlc.dlcIds.epic);
+			dlc.dlcIds.steam && profile.dlcListSteam?.includes(dlc.dlcIds.steam);
-        const hasGrdk = dlc.dlcIds.grdk && profile.dlcListGRDK?.includes(dlc.dlcIds.grdk);
+		const hasEpic =
+			dlc.dlcIds.epic && profile.dlcListEGS?.includes(dlc.dlcIds.epic);
+		const hasGrdk =
+			dlc.dlcIds.grdk && profile.dlcListGRDK?.includes(dlc.dlcIds.grdk);
 		if (hasSteam || hasEpic || hasGrdk) unlockedDLCs.push(dlc.id);
 	}
 
 	const offerings: Record<string, number> = {
 		...(profile.globalOfferings || {}),
 		...(profile.camperOfferings || {}),
-        ...(profile.slasherOfferings || {}),
+		...(profile.slasherOfferings || {})
 	};
 
 	const addons: Record<string, number> = {
 		...(profile.camperAddons || {}),
-        ...(profile.slasherAddons || {}),
+		...(profile.slasherAddons || {})
 	};
 
 	const unlockedPerks: string[] = [
 		...(profile.camperPerks || []),
-        ...(profile.slasherPerks || []),
+		...(profile.slasherPerks || [])
 	];
 
 	return {
@@ -160,6 +184,6 @@ export async function mapSpooferConfigToStore(profile: SpooferConfig) {
 		unlockedPerks,
 		items: profile.camperItems || {},
 		offerings,
-        addons,
+		addons
 	};
 }

styles/AppContainer.module.css

@@ -73,11 +73,19 @@
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
+	0% {
-  100% { transform: rotate(360deg); }
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; }
+	from {
-  to { opacity: 1; }
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
 }

styles/Home.module.css

@@ -231,7 +231,7 @@
 
 .slider:before {
 	position: absolute;
-  content: "";
+	content: '';
 	height: 16px;
 	width: 16px;
 	left: 3px;

styles/Items.module.css

@@ -23,7 +23,9 @@
 	transition: all 0.15s ease;
 }
 
-.tab:hover { color: #888888; }
+.tab:hover {
+	color: #888888;
+}
 
 .tabActive {
 	color: #ffffff;

styles/QuantityCard.module.css

@@ -9,7 +9,9 @@
 	align-items: center;
 	padding: 1rem 0.6rem 0.75rem;
 	gap: 0.5rem;
-  transition: border-color 0.15s ease, background 0.15s ease;
+	transition:
+		border-color 0.15s ease,
+		background 0.15s ease;
 	user-select: none;
 }
 

styles/Sidebar.module.css

@@ -18,7 +18,7 @@
 	margin-bottom: 2.5rem;
 	padding-bottom: 0.5rem;
 	border-bottom: 2px solid #330000;
-  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 .navLink {

styles/shared.module.css

@@ -274,7 +274,6 @@
 	filter: none;
 }
 
-
 .cardUnlocked .cardName {
 	color: #c9c9c9;
 }