neru/HexUnlockedWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: run format:apply

Browse Source
This commit is contained in:
neru
2026-06-19 04:29:24 -03:00
parent f51a71a574
commit c2b94bec4a
36 changed files with 3251 additions and 2597 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/characters/page.tsx
+28 -17
View File
@@ -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 newUnlocked = store.unlockedCharacters.filter(id => !ids.includes(id));
const ids = filtered.map((c) => c.idx.toString());
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"
placeholder="Search by name..."
type='text'
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 => {
const unlocked = store.unlockedCharacters.includes(char.idx.toString());
{filtered.map((char) => {
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
+26 -11
View File
@@ -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.lockAllBtn} onClick={onLockAll}>Lock all</button>
<button className={shared.unlockAllBtn} onClick={onUnlockAll}>
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
+11 -8
View File
@@ -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"
placeholder="Search character..."
type='text'
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
+27 -13
View File
@@ -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
+97 -35
View File
@@ -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()])
.then(([items, chars]) => {
Promise.all([fetchCustomizations(), fetchCharacters()]).then(
([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 => {
if (item.category >= 1 && item.category <= 7 && item.associatedCharacter > -1) {
if (!map.has(item.associatedCharacter)) map.set(item.associatedCharacter, []);
allItems.forEach((item) => {
if (
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 => {
const group = items.filter(i => i.category === cat);
CATEGORY_ORDER.forEach((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 handleLockCharCosmetics = () => removeLock(Object.values(charCosmetics).flat().map(i => i.id));
const handleUnlockCharCosmetics = () =>
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 handleLockAll = () => removeLock(flatItems.map(i => i.id));
const handleUnlockAll = () => mergeUnlock(flatItems.map((i) => i.id));
const handleLockAll = () => removeLock(flatItems.map((i) => i.id));
const handleUnlockPage = () => mergeUnlock(pagedItems.map(i => i.id));
const handleLockPage = () => removeLock(pagedItems.map(i => i.id));
const handleUnlockPage = () => mergeUnlock(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
+34 -14
View File
@@ -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',
4: 'Heads', 5: 'Bodies', 6: 'Weapons', 7: 'Outfits',
1: 'Heads',
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 9: 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`;
case 8:
return `${base}/icons/customization/charms/${file}.png`;
case 9:
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 === 2 ? 'torsos' :
item.category === 3 ? 'legs' :
item.category === 5 ? 'bodys' :
item.category === 6 ? 'weapons' : 'outfits';
item.category === 1 || item.category === 4
? 'heads'
: item.category === 2
? 'torsos'
: 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())
.replace(/[\\/:*?"<>|]/g, '_');
const charFolder = (charName ?? item.associatedCharacter.toString()).replace(
/[\\/:*?"<>|]/g,
'_'
);
return `${base}/icons/customization/characters/${charFolder}/${subfolder}/${file}.png`;
};
app/dlcs/page.tsx
+62 -24
View File
@@ -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()
.then((data: DLC[]) => setAllDlcs(data.filter(isNamedDLC)));
fetchDLCs().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 (statusFilter === 'unlocked' && !store.unlockedDLCs.includes(dlc.id)) return false;
if (statusFilter === 'locked' && store.unlockedDLCs.includes(dlc.id)) return false;
if (
search.trim() &&
!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 remaining = store.unlockedDLCs.filter(id => !ids.has(id));
const ids = new Set(filtered.map((d) => d.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"
placeholder="Search DLCs..."
type='text'
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 className={`${styles.badge} ${isOnEpic(dlc) ? styles.badgeEpic : styles.badgeOff}`}>EP</span>
<span className={`${styles.badge} ${isOnXbox(dlc) ? styles.badgeXbox : styles.badgeOff}`}>XB</span>
<span
className={`${styles.badge} ${isOnSteam(dlc) ? styles.badgeSteam : styles.badgeOff}`}
>
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 -1
View File
@@ -1,4 +1,4 @@
import { DLC } from "@/lib/utils";
import { DLC } from '@/lib/utils';
export type PlatformFilter = 'all' | 'steam' | 'epic' | 'xbox';
app/globals.css
+7 -2
View File
@@ -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
+57 -19
View File
@@ -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 handleRandVisible = () => filtered.forEach(a => onSetQty(a.id, randInRange(randMin, randMax)));
const handleLockVisible = () => filtered.forEach(a => onSetQty(a.id, 0));
const handleGive100Visible = () =>
filtered.forEach((a) => onSetQty(a.id, 100));
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"
placeholder="Search addons..."
type='text'
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 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>
<button
className={`${shared.roleBtn} ${roleFilter === 'all' ? shared.roleBtnActive : ''}`}
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={styles.randBtn} onClick={handleRandVisible}>Randomize</button>
<button className={shared.lockAllBtn} onClick={handleLockVisible}>Remove all visible</button>
<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 addons match</div>
) : (
<div className={styles.grid}>
{filtered.map(addon => (
{filtered.map((addon) => (
<QuantityCard
key={addon.id}
id={addon.id}
app/items/ItemGrid.tsx
+45 -18
View File
@@ -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 => {
if (typeFilter !== 'all' && getItemType(item.id) !== typeFilter) return false;
if (search.trim() && !item.name.toLowerCase().includes(search.toLowerCase())) return false;
return items.filter((item) => {
if (typeFilter !== 'all' && getItemType(item.id) !== typeFilter)
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 handleRandVisible = () => filtered.forEach(i => onSetQty(i.id, randInRange(randMin, randMax)));
const handleLockVisible = () => filtered.forEach(i => onSetQty(i.id, 0));
const handleGive100Visible = () =>
filtered.forEach((i) => onSetQty(i.id, 100));
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"
placeholder="Search items..."
type='text'
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={styles.randBtn} onClick={handleRandVisible}>Randomize</button>
<button className={shared.lockAllBtn} onClick={handleLockVisible}>Remove all visible</button>
<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 items match</div>
) : (
<div className={styles.grid}>
{filtered.map(item => (
{filtered.map((item) => (
<QuantityCard
key={item.id}
id={item.id}
app/items/OfferingGrid.tsx
+37 -17
View File
@@ -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 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..."
type='text'
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={styles.randBtn} onClick={handleRandVisible}>Randomize</button>
<button className={shared.lockAllBtn} onClick={handleLockVisible}>Remove all visible</button>
<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 => (
{filtered.map((offering) => (
<QuantityCard
key={offering.id}
id={offering.id}
app/items/page.tsx
+23 -13
View File
@@ -26,12 +26,13 @@ export default function ItemsPage() {
const [randMax, setRandMax] = useState(200);
useEffect(() => {
Promise.all([fetchItems(), fetchOfferings(), fetchAddons()])
.then(([i, o, a]) => {
Promise.all([fetchItems(), fetchOfferings(), fetchAddons()]).then(
([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 activeOfferings = Object.values(store.offerings).filter(q => q > 0).length;
const activeAddons = Object.values(store.addons).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 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
+15 -3
View File
@@ -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',
medkit: 'Med-Kit', key: 'Key', map: 'Map', other: 'Other',
all: 'All',
toolbox: 'Toolbox',
flashlight: 'Flashlight',
medkit: 'Med-Kit',
key: 'Key',
map: 'Map',
other: 'Other'
};
export const getItemType = (id: string): ItemType => {
app/layout.tsx
+10 -12
View File
@@ -1,28 +1,26 @@
import type { Metadata } from "next";
import Sidebar from "../components/Sidebar";
import styles from "../styles/Layout.module.css";
import "./globals.css";
import AppContainer from "@/components/Container";
import type { Metadata } from 'next';
import Sidebar from '../components/Sidebar';
import styles from '../styles/Layout.module.css';
import './globals.css';
import AppContainer from '@/components/Container';
export const metadata: Metadata = {
title: "Hex: Unlocked",
description: "",
title: 'Hex: Unlocked',
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}>
{children}
</main>
<main className={styles.mainContent}>{children}</main>
</div>
</AppContainer>
</body>
app/page.tsx
+114 -29
View File
@@ -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 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 unlockedItems = useMemo(
() => Object.values(store.items).filter((qty) => qty > 0).length,
[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
+60 -16
View File
@@ -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 handleLockVisible = () => store.unlockAllInCategory('perks', store.unlockedPerks.filter(id => !filtered.find(p => p.id === id)));
const handleUnlockVisible = () =>
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 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>
<button
className={`${shared.roleBtn} ${roleFilter === 'all' ? shared.roleBtnActive : ''}`}
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.lockAllBtn} onClick={handleLockVisible}>Lock visible</button>
<button className={shared.unlockAllBtn} onClick={handleUnlockVisible}>
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 -1
View File
@@ -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
+21 -7
View File
@@ -1,10 +1,14 @@
"use client";
'use client';
import { useEffect, useState } from "react";
import { useWebsocketStore } from "../store/useWebsocketStore";
import styles from "../styles/AppContainer.module.css";
import { useEffect, useState } from 'react';
import { useWebsocketStore } from '../store/useWebsocketStore';
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
+33 -8
View File
@@ -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
+21 -11
View File
@@ -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="/characters" className={styles.navLink}>Characters</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>
<Link href='/' className={styles.navLink}>
Dashboard
</Link>
<Link href='/characters' className={styles.navLink}>
Characters
</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}>
Synchronize
</button>
<button className={styles.syncButton}>Synchronize</button>
</aside>
);
};
}
lib/db.ts
+6 -4
View File
@@ -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
+2 -1
View File
@@ -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
+144 -41
View File
@@ -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;
clearCategory: (category: 'characters' | 'customizations' | 'items' | 'offerings' | 'addons' | 'dlcs' | 'perks') => void;
unlockAllInCategory: (
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,
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,
spoofItems:
typeof toggles.spoofItems === 'boolean'
? toggles.spoofItems
: 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,
unlockedCustomizations: Array.isArray(profile.unlockedCustomizations) ? 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,
unlockedCharacters: Array.isArray(profile.unlockedCharacters)
? profile.unlockedCharacters
: state.unlockedCharacters,
unlockedCustomizations: Array.isArray(
profile.unlockedCustomizations
)
? 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
+72 -10
View File
@@ -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) {
socket.send(JSON.stringify({
action: "sync_inventory",
data: newState
}));
// --- Check toggles ---
const toggles = {
spoofItems: state.spoofItems,
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
+46 -22
View File
@@ -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([
fetchDLCs(),
fetchItems(),
fetchOfferings(),
fetchAddons(),
fetchPerks()
]);
const [dlcs, allItems, allOfferings, allAddons, allPerks] = await Promise.all(
[fetchDLCs(), 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 hasEpic = dlc.dlcIds.epic && profile.dlcListEGS?.includes(dlc.dlcIds.epic);
const hasGrdk = dlc.dlcIds.grdk && profile.dlcListGRDK?.includes(dlc.dlcIds.grdk);
const hasSteam =
dlc.dlcIds.steam && profile.dlcListSteam?.includes(dlc.dlcIds.steam);
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
+12 -4
View File
@@ -73,11 +73,19 @@
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
styles/Home.module.css
+1 -1
View File
@@ -231,7 +231,7 @@
.slider:before {
position: absolute;
content: "";
content: '';
height: 16px;
width: 16px;
left: 3px;
styles/Items.module.css
+3 -1
View File
@@ -23,7 +23,9 @@
transition: all 0.15s ease;
}
.tab:hover { color: #888888; }
.tab:hover {
color: #888888;
}
.tabActive {
color: #ffffff;
styles/QuantityCard.module.css
+3 -1
View File
@@ -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/shared.module.css
-1
View File
@@ -274,7 +274,6 @@
filter: none;
}
.cardUnlocked .cardName {
color: #c9c9c9;
}