feat: add DLC page

app/dlcs/page.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+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 { DLC, isNamedDLC } from '@/lib/utils';
+
+const PLATFORM_FILTER_LABELS: Record<PlatformFilter, string> = { all: 'All', steam: 'Steam', epic: 'Epic', xbox: 'Xbox' };
+
+export default function DlcsPage() {
+    const store = useInventoryStore();
+
+    const [allDlcs, setAllDlcs] = useState<DLC[]>([]);
+    const [search, setSearch] = useState('');
+    const [platformFilter, setPlatformFilter] = useState<PlatformFilter>('all');
+    const [statusFilter, setStatusFilter] = useState<'all' | 'unlocked' | 'locked'>('all');
+
+    useEffect(() => {
+        fetch('/data/dlcs.json')
+            .then(r => r.json())
+            .then((data: DLC[]) => setAllDlcs(data.filter(isNamedDLC)))
+            .catch(() => []);
+    }, []);
+
+    const filtered = useMemo(() => {
+        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;
+            return true;
+        });
+    }, [allDlcs, search, platformFilter, statusFilter, store.unlockedDLCs]);
+
+    const handleToggle = (id: string) => store.toggleItem(id, 'dlcs');
+
+    const handleUnlockShown = () => {
+        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));
+        store.unlockAllInCategory('dlcs', remaining);
+    };
+
+    const handleUnlockAll = () => {
+        store.unlockAllInCategory('dlcs', allDlcs.map(d => d.id));
+    };
+
+    return (
+        <div className={shared.container}>
+            <header className={shared.header}>
+                <div>
+                    <h1 className={shared.title}>DLCs</h1>
+                    <p className={shared.subtitle}>
+                        {store.unlockedDLCs.length} of {allDlcs.length || '-'} dlcs unlocked
+                    </p>
+                </div>
+                <div style={{ display: 'flex', gap: '0.75rem' }}>
+                    <button className={shared.unlockAllBtn} onClick={handleUnlockAll}>
+                        Unlock All ({allDlcs.length})
+                    </button>
+                    <button className={shared.clearBtn} onClick={() => store.clearCategory('dlcs')}>
+                        Clear All
+                    </button>
+                </div>
+            </header>
+
+            <div className={shared.toolbar}>
+                <input
+                    className={shared.searchInput}
+                    type="text"
+                    placeholder="Search DLCs..."
+                    value={search}
+                    onChange={e => setSearch(e.target.value)}
+                />
+
+                <div className={shared.roleFilter}>
+                    {(Object.keys(PLATFORM_FILTER_LABELS) as PlatformFilter[]).map(p => (
+                        <button
+                            key={p}
+                            className={`${shared.roleBtn} ${platformFilter === p ? shared.roleBtnActive : ''}`}
+                            onClick={() => setPlatformFilter(p)}
+                        >
+                            {PLATFORM_FILTER_LABELS[p]}
+                        </button>
+                    ))}
+                </div>
+
+                <div className={shared.roleFilter}>
+                    {(['all', 'unlocked', 'locked'] as const).map(s => (
+                        <button
+                            key={s}
+                            className={`${shared.roleBtn} ${statusFilter === s ? shared.roleBtnActive : ''}`}
+                            onClick={() => setStatusFilter(s)}
+                        >
+                            {s}
+                        </button>
+                    ))}
+                </div>
+
+                <span className={shared.spacer} />
+                <span className={shared.resultCount}>{filtered.length} shown</span>
+
+                <button className={shared.unlockAllBtn} onClick={handleUnlockShown}>
+                    Unlock Shown
+                </button>
+                <button className={shared.lockAllBtn} onClick={handleLockShown}>
+                    Lock Shown
+                </button>
+            </div>
+
+            {filtered.length === 0 ? (
+                <div className={shared.empty}>No DLCs match</div>
+            ) : (
+                <div className={styles.grid}>
+                    {filtered.map(dlc => {
+                        const unlocked = store.unlockedDLCs.includes(dlc.id);
+                        return (
+                            <div
+                                key={dlc.id}
+                                className={`${styles.card} ${unlocked ? styles.cardUnlocked : ''}`}
+                                onClick={() => handleToggle(dlc.id)}
+                            >
+                                <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>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+        </div>
+    );
+}

app/dlcs/types.ts

@@ -0,0 +1,20 @@
+import { DLC } from "@/lib/utils";
+
+export type PlatformFilter = 'all' | 'steam' | 'epic' | 'xbox';
+
+export const isOnSteam = (dlc: DLC) =>
+  dlc.dlcIds.steam !== '0' && dlc.dlcIds.steam !== '-1';
+
+export const isOnEpic = (dlc: DLC) =>
+  dlc.dlcIds.epic !== 'FFFFFFFFFFFFFFFF' && dlc.dlcIds.epic !== '0';
+
+export const isOnXbox = (dlc: DLC) =>
+  dlc.dlcIds.grdk !== '9ZZZZZZZZZZZ' && dlc.dlcIds.grdk !== '0';
+
+export const matchesPlatform = (dlc: DLC, filter: PlatformFilter) => {
+  if (filter === 'all')   return true;
+  if (filter === 'steam') return isOnSteam(dlc);
+  if (filter === 'epic')  return isOnEpic(dlc);
+  if (filter === 'xbox')  return isOnXbox(dlc);
+  return true;
+};

lib/utils.ts

@@ -1,3 +1,13 @@
+export type DLC = {
+  id: string;
+  name: string | null;
+  dlcIds: {
+    steam: string;
+    epic: string;
+    grdk: string;
+  };
+};
+
 export const getFileName = (iconFilePath: string): string => {
   const base = iconFilePath.split('/').pop() ?? '';
   return base.split('.')[0];
@@ -7,3 +17,6 @@ export const cleanFolderName = (name: string): string =>
   name.replace(/[\\/:*?"<>|]/g, '_');
 
 export const isKiller = (idx: number): boolean => idx >= 268435456;
+
+export const isNamedDLC = (dlc: DLC): dlc is DLC & { name: string } =>
+  !!dlc.name && !dlc.name.startsWith('@');

styles/Dlcs.module.css

@@ -0,0 +1,174 @@
+/*
+    toggles
+*/
+.overrideToggle {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.6rem 1rem;
+    border: 1px solid #1a1a1a;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    user-select: none;
+}
+
+.overrideToggle:hover {
+    border-color: #333333;
+}
+
+.overrideToggleActive {
+    border-color: #4a0000;
+    background: #0d0000;
+}
+
+.overrideToggleActive:hover {
+    border-color: #a30000;
+    box-shadow: 0 0 10px rgba(163, 0, 0, 0.2);
+}
+
+.overrideIndicator {
+    width: 10px;
+    height: 10px;
+    border: 1px solid #2a2a2a;
+    background: transparent;
+    flex-shrink: 0;
+    transition: all 0.15s ease;
+}
+
+.overrideToggleActive .overrideIndicator {
+    background: #a30000;
+    border-color: #ff0000;
+    box-shadow: 0 0 6px rgba(163, 0, 0, 0.6);
+}
+
+.overrideLabel {
+    font-family: 'Oswald', sans-serif;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #444444;
+    transition: color 0.15s ease;
+}
+
+.overrideToggleActive .overrideLabel {
+    color: #c9c9c9;
+}
+
+.overrideWarning {
+    font-size: 0.65rem;
+    color: #5a0000;
+    font-family: 'Roboto Condensed', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+
+.overrideToggleActive .overrideWarning {
+    color: #883333;
+}
+
+/*
+    grid
+*/
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 0.5rem;
+    overflow-y: auto;
+    flex: 1;
+    align-content: start;
+    padding-right: 0.5rem;
+}
+
+/*
+    cards
+*/
+.card {
+    background: #0d0d0d;
+    border: 1px solid #1a1a1a;
+    border-left: 3px solid #1a1a1a;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.85rem 1rem 0.85rem 1.1rem;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    user-select: none;
+}
+
+.card:hover {
+    background: #111111;
+    border-left-color: #330000;
+}
+
+.cardUnlocked {
+    border-left-color: #a30000;
+    background: #0d0000;
+}
+
+.cardUnlocked:hover {
+    background: #100000;
+    border-left-color: #cc0000;
+    box-shadow: -3px 0 12px rgba(163, 0, 0, 0.15);
+}
+
+.cardName {
+    flex: 1;
+    font-family: 'Oswald', sans-serif;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: #444444;
+    line-height: 1.3;
+    transition: color 0.15s ease;
+}
+
+.cardUnlocked .cardName {
+    color: #ffffff;
+}
+
+.card:hover .cardName {
+    color: #666666;
+}
+
+.cardUnlocked:hover .cardName {
+    color: #ffffff;
+}
+
+/*
+    platform badges
+*/
+.platforms {
+    display: flex;
+    gap: 0.3rem;
+    flex-shrink: 0;
+}
+
+.badge {
+    font-family: 'Oswald', sans-serif;
+    font-size: 0.6rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 0.15rem 0.4rem;
+    border: 1px solid;
+    line-height: 1.4;
+}
+
+.badgeOff {
+    color: #1e1e1e;
+    border-color: #181818;
+}
+
+.badgeSteam {
+    color: #5a9cc4;
+    border-color: #2a4a66;
+}
+
+.badgeEpic {
+    color: #888888;
+    border-color: #3a3a3a;
+}
+
+.badgeXbox {
+    color: #4a9e40;
+    border-color: #225520;
+}