refactor: cleanup codebase — remove hydration guards, extract constants, fix bugs

src/components/game/AttunementStatus.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useMemo } from 'react';
 import { useAttunementStore } from '@/lib/game/stores';
 import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
 import { Separator } from '@/components/ui/separator';
@@ -18,13 +19,17 @@ const SLOT_LABELS: Record<string, string> = {
 export function AttunementStatus() {
   const attunements = useAttunementStore((s) => s.attunements);
 
-  const activeAttunements = Object.entries(attunements)
-    .filter(([, state]) => state.active)
-    .sort(([, a], [, b]) => {
-      const orderA = Object.values(ATTUNEMENTS_DEF).findIndex(d => d.id === a.id);
-      const orderB = Object.values(ATTUNEMENTS_DEF).findIndex(d => d.id === b.id);
-      return orderA - orderB;
-    });
+  const attunementOrder = useMemo(() => {
+    const map = new Map<string, number>();
+    Object.values(ATTUNEMENTS_DEF).forEach((d, i) => map.set(d.id, i));
+    return map;
+  }, []);
+
+  const activeAttunements = useMemo(() => {
+    return Object.entries(attunements)
+      .filter(([, state]) => state.active)
+      .sort(([, a], [, b]) => (attunementOrder.get(a.id) ?? 0) - (attunementOrder.get(b.id) ?? 0));
+  }, [attunements, attunementOrder]);
 
   const xpForNext = (level: number) => {
     if (level <= 1) return 0;