Update RingSelect

- Changes rings from being an object to an array.
- Being an array means the index is 0-based not 1-based
- Ensured logic is correct, including what happens when to ring 4 when you unset ring 3

components/mastery/RingSelect/index.tsx

@@ -25,21 +25,21 @@ interface Props {
 
 const RingSelect = ({ gridCharacter, sendValues }: Props) => {
   // Ring value states
-  const [rings, setRings] = useState<CharacterOverMastery>({
+  const [rings, setRings] = useState<CharacterOverMastery>([
-    1: { ...emptyRing, modifier: 1 },
+    { ...emptyRing, modifier: 1 },
-    2: { ...emptyRing, modifier: 2 },
+    { ...emptyRing, modifier: 2 },
-    3: emptyRing,
+    emptyRing,
-    4: emptyRing,
+    emptyRing,
-  })
+  ])
 
   useEffect(() => {
     if (gridCharacter.over_mastery) {
-      setRings({
+      setRings([
-        1: gridCharacter.over_mastery[1],
+        gridCharacter.over_mastery[0],
-        2: gridCharacter.over_mastery[2],
+        gridCharacter.over_mastery[1],
-        3: gridCharacter.over_mastery[3],
+        gridCharacter.over_mastery[2],
-        4: gridCharacter.over_mastery[4],
+        gridCharacter.over_mastery[3],
-      })
+      ])
     }
   }, [gridCharacter])
 
@@ -64,13 +64,13 @@ const RingSelect = ({ gridCharacter, sendValues }: Props) => {
     }
 
     switch (index) {
-      case 1:
+      case 0:
         return overMastery.a ? [overMastery.a[0]] : []
-      case 2:
+      case 1:
         return overMastery.a ? [overMastery.a[1]] : []
-      case 3:
+      case 2:
         return overMastery.b ? [noValue, ...overMastery.b] : []
-      case 4:
+      case 3:
         return overMastery.c ? [noValue, ...overMastery.c] : []
       default:
         return []
@@ -78,72 +78,74 @@ const RingSelect = ({ gridCharacter, sendValues }: Props) => {
   }
 
   function receiveRingValues(index: number, left: number, right: number) {
-    // console.log(`Receiving values from ${index}: ${left} ${right}`)
+    if (index === 0 || index === 1) {
-    if (index == 1 || index == 2) {
+      // For rings 1 and 2 (indices 0 and 1), update using the synced function.
-      setSyncedRingValues(index, right)
+      setSyncedRingValues(index as 0 | 1, right)
-    } else if (index == 3 && left == 0) {
+    } else if (index === 2 && left === 0) {
-      setRings({
+      // If ring 3 (index 2) is being unset (left is 0), then also unset ring 4.
-        ...rings,
+      setRings((prev) => {
-        3: {
+        const newRings = [...prev]
-          modifier: 0,
+        newRings[2] = { modifier: 0, strength: 0 }
-          strength: 0,
+        newRings[3] = { modifier: 0, strength: 0 }
-        },
+        return newRings
-        4: {
-          modifier: 0,
-          strength: 0,
-        },
       })
     } else {
-      setRings({
+      // For any other case (including ring 4 being unset), update only that ring.
-        ...rings,
+      setRings((prev) => {
-        [index]: {
+        const newRings = [...prev]
-          modifier: left,
+        newRings[index] = { modifier: left, strength: right }
-          strength: right,
+        return newRings
-        },
       })
     }
   }
 
-  function setSyncedRingValues(index: 1 | 2, value: number) {
+  function setSyncedRingValues(changedIndex: 0 | 1, newStrength: number) {
-    // console.log(`Setting synced value for ${index} with value ${value}`)
+    // Assume dataSet(0) holds the attack-related data and dataSet(1) holds the HP-related data.
-    const atkValues = (dataSet(1)[0] as ItemSkill).values ?? []
+    // (Adjust these calls if your datasets are in different positions.)
-    const hpValues = (dataSet(2)[0] as ItemSkill).values ?? []
+    const attackItem = dataSet(0)[0] as ItemSkill
+    const hpItem = dataSet(1)[0] as ItemSkill
 
-    const found =
+    const attackValues: number[] = attackItem.values ?? []
-      index === 1 ? atkValues.indexOf(value) : hpValues.indexOf(value)
+    const hpValues: number[] = hpItem.values ?? []
-    const atkValue = atkValues[found] ?? 0
-    const hpValue = hpValues[found] ?? 0
 
-    setRings({
+    // Determine the index based on which ring changed:
-      ...rings,
+    const selectedIndex =
-      1: {
+      changedIndex === 0
-        modifier: 1,
+        ? attackValues.indexOf(newStrength)
-        strength: atkValue,
+        : hpValues.indexOf(newStrength)
-      },
+
-      2: {
+    // If the new strength value isn’t found, do nothing.
-        modifier: 2,
+    if (selectedIndex === -1) {
-        strength: hpValue,
+      return
-      },
+    }
+
+    // Get the corresponding values for both rings.
+    const newAttackValue = attackValues[selectedIndex] ?? 0
+    const newHpValue = hpValues[selectedIndex] ?? 0
+
+    // Update both ring values simultaneously.
+    setRings((prev) => {
+      const newRings = [...prev]
+      newRings[0] = { modifier: 1, strength: newAttackValue }
+      newRings[1] = { modifier: 2, strength: newHpValue }
+      return newRings
     })
   }
 
   return (
     <div className={styles.rings}>
-      {[...Array(4)].map((e, i) => {
+      {rings.map((ringStat, i) => {
-        const index = i + 1
-        const ringStat = rings[index]
-
         return (
           <ExtendedMasterySelect
-            name={`ring-${index}`}
+            name={`ring-${i}`}
             object="ring"
-            key={`ring-${index}`}
+            key={`ring-${i}`}
-            dataSet={dataSet(index)}
+            dataSet={dataSet(i)}
-            leftSelectDisabled={index === 1 || index === 2}
+            leftSelectDisabled={i === 0 || i === 1}
-            leftSelectValue={ringStat.modifier ? ringStat.modifier : 0}
+            leftSelectValue={ringStat?.modifier ?? 0}
-            rightSelectValue={ringStat.strength ? ringStat.strength : 0}
+            rightSelectValue={ringStat?.strength ?? 0}
             sendValues={(left: number, right: number) => {
-              receiveRingValues(index, left, right)
+              receiveRingValues(i, left, right)
             }}
           />
         )