added puzzle done

src/app/(game)/puzzle/page.tsx

@@ -87,8 +87,8 @@ function TicketRules() {
 }
 export default function Page() {
   const [active, setActive] = useState(0);
-
-  const finishedList = useFinished(useLocalStorage("token", "")[0]);
+  const [playerToken] = useLocalStorage("token", "");
+  const finishedList = useFinished(playerToken);
   function isActivityFinished(activity: ActivityType) {
     return finishedList.includes(activity.name);
   }
@@ -100,6 +100,19 @@ export default function Page() {
   const finishedN = data
     .filter((item) => isActivityFinished(item))
     .reduce(sum, 0);
+
+  const puzzle1 = Array.from({ length: 9 })
+    .map((_, i) => i + 1)
+    .sort((a, b) => playerToken.charCodeAt(a) - playerToken.charCodeAt(b));
+  const puzzle2 = Array.from({ length: 16 })
+    .map((_, i) => i + 1)
+    .sort((a, b) => playerToken.charCodeAt(a) - playerToken.charCodeAt(b));
+  const puzzle3 = Array.from({ length: 16 })
+    .map((_, i) => i + 1)
+    .sort((a, b) => playerToken.charCodeAt(b) - playerToken.charCodeAt(a));
+  const done1 = puzzle1.slice(0, finishedN);
+  const done2 = puzzle2.slice(0, Math.max(finishedN - 9, 0));
+  const done3 = puzzle3.slice(0, Math.max(finishedN - 9 - 16, 0));
   return (
     <div>
       <Menu
@@ -108,11 +121,11 @@ export default function Page() {
         setActive={setActive}
       />
       {active === 0 ? (
-        <Puzzle src="/meme/meme-1.jpg" done={[2, 4, 5, 7]} size="3x3" />
+        <Puzzle src="/meme/meme-1.jpg" done={done1} size="3x3" />
       ) : active === 1 ? (
-        <Puzzle src="/meme/meme-2.jpg" done={[3, 12, 9, 7]} size="4x4" />
+        <Puzzle src="/meme/meme-2.jpg" done={done2} size="4x4" />
       ) : active === 2 ? (
-        <Puzzle src="/meme/meme-3.jpg" done={[8, 16, 3, 4]} size="4x4" />
+        <Puzzle src="/meme/meme-3.jpg" done={done3} size="4x4" />
       ) : null}
       <div className="m-2">
         <div className="flex items-center justify-between">