style: run format:apply

2026-06-19 04:29:24 -03:00
parent f51a71a574
commit c2b94bec4a
36 changed files with 3251 additions and 2597 deletions
@@ -2,72 +2,87 @@

 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;
-    charCosmetics: Record<number, CustomizationItem[]>;
-    unlockedSet: Set<string>;
-    characterMap: Map<number, string>;
-    onBack: () => void;
-    onUnlockAll: () => void;
-    onLockAll: () => void;
-    onToggle: (id: string) => void;
+	charName: string;
+	charCosmetics: Record<number, CustomizationItem[]>;
+	unlockedSet: Set<string>;
+	characterMap: Map<number, string>;
+	onBack: () => void;
+	onUnlockAll: () => void;
+	onLockAll: () => void;
+	onToggle: (id: string) => void;
 };

 export default function CharacterCosmetics({
-    charName,
-    charCosmetics,
-    unlockedSet,
-    characterMap,
-    onBack,
-    onUnlockAll,
-    onLockAll,
-    onToggle,
+	charName,
+	charCosmetics,
+	unlockedSet,
+	characterMap,
+	onBack,
+	onUnlockAll,
+	onLockAll,
+	onToggle
 }: Props) {
-    const allItems = Object.values(charCosmetics).flat();
-    const unlockedCount = allItems.filter(i => unlockedSet.has(i.id)).length;
+	const allItems = Object.values(charCosmetics).flat();
+	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>
-                <span className={styles.cosmeticsCharName}>{charName}</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>
-            </div>
+	return (
+		<div className={styles.cosmeticsView}>
+			<div className={styles.cosmeticsHeader}>
+				<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.spacer} />
+				<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 => (
-                    <div key={cat} className={styles.categoryGroup}>
-                        <div className={styles.categoryTitle}>
-                            {CATEGORY_LABELS[cat] ?? `Category ${cat}`}
-                        </div>
-                        <div className={styles.gridInline}>
-                            {charCosmetics[cat].map(item => {
-                                const unlocked = unlockedSet.has(item.id);
-                                return (
-                                    <div
-                                        key={item.id}
-                                        className={`${shared.card} ${unlocked ? shared.cardUnlocked : ''}`}
-                                        onClick={() => onToggle(item.id)}
-                                    >
-                                        <img
-                                            className={shared.cardIcon}
-                                            src={getCosmeticIconUrl(item, characterMap)}
-                                            alt={item.name}
-                                            loading="lazy"
-                                        />
-                                        <span className={shared.cardName}>{item.name}</span>
-                                    </div>
-                                );
-                            })}
-                        </div>
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
+			<div className={styles.cosmeticsBody}>
+				{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) => {
+									const unlocked = unlockedSet.has(item.id);
+									return (
+										<div
+											key={item.id}
+											className={`${shared.card} ${unlocked ? shared.cardUnlocked : ''}`}
+											onClick={() => onToggle(item.id)}
+										>
+											<img
+												className={shared.cardIcon}
+												src={getCosmeticIconUrl(item, characterMap)}
+												alt={item.name}
+												loading='lazy'
+											/>
+											<span className={shared.cardName}>{item.name}</span>
+										</div>
+									);
+								})}
+							</div>
+						</div>
+					)
+				)}
+			</div>
+		</div>
+	);
 }