feat: use codename instead of idx for unlocks

app/characters/page.tsx

@@ -11,6 +11,7 @@ import styles from '../../styles/Characters.module.css';
 
 type Character = {
 	idx: number;
+	codeName: string;
 	name: string;
 	iconFilePath: string;
 };
@@ -43,20 +44,20 @@ export default function CharactersPage() {
 		});
 	}, [characters, search, role]);
 
-	const handleToggle = (idx: number) => {
+	const handleToggle = (codeName: string) => {
-		store.toggleItem(idx.toString(), 'characters');
+		store.toggleItem(codeName, 'characters');
 	};
 
 	const handleUnlockAll = () => {
-		const ids = filtered.map((c) => c.idx.toString());
+		const ids = filtered.map((c) => c.codeName);
 		const outside = store.unlockedCharacters.filter(
-			(id) => !filtered.some((c) => c.idx.toString() === id)
+			(id) => !filtered.some((c) => c.codeName === id)
 		);
 		store.unlockAllInCategory('characters', [...outside, ...ids]);
 	};
 
 	const handleLockAll = () => {
-		const ids = filtered.map((c) => c.idx.toString());
+		const ids = filtered.map((c) => c.codeName);
 		const newUnlocked = store.unlockedCharacters.filter(
 			(id) => !ids.includes(id)
 		);
@@ -122,14 +123,14 @@ export default function CharactersPage() {
 				<div className={styles.grid}>
 					{filtered.map((char) => {
 						const unlocked = store.unlockedCharacters.includes(
-							char.idx.toString()
+							char.codeName
 						);
 						const killer = isKiller(char.idx);
 						return (
 							<div
-								key={char.idx}
+								key={char.codeName}
 								className={`${shared.card} ${unlocked ? shared.cardUnlocked : ''}`}
-								onClick={() => handleToggle(char.idx)}
+								onClick={() => handleToggle(char.codeName)}
 							>
 								<img
 									className={shared.cardIcon}