Tightly couple ATK and HP values

components/RingSelect/index.tsx

@@ -66,11 +66,34 @@ const RingSelect = (props: Props) => {
   }
 
   function receiveRingValues(index: number, left: number, right: number) {
+    if (index == 1 || index == 2) {
+      setSyncedRingValues(index, right)
+    } else {
+      setRings({
+        ...rings,
+        [index]: {
+          modifier: left,
+          strength: right,
+        },
+      })
+    }
+  }
+
+  function setSyncedRingValues(index: 1 | 2, value: number) {
+    const atkValues = (dataSet(1)[0] as ItemSkill).values ?? []
+    const hpValues = (dataSet(2)[0] as ItemSkill).values ?? []
+
+    let found = index === 1 ? atkValues.indexOf(value) : hpValues.indexOf(value)
+
     setRings({
       ...rings,
-      [index]: {
-        modifier: left,
-        strength: right,
+      1: {
+        modifier: rings[1].modifier,
+        strength: atkValues[found],
+      },
+      2: {
+        modifier: rings[2].modifier,
+        strength: hpValues[found],
       },
     })
   }

components/SelectWithSelect/index.tsx

@@ -57,6 +57,10 @@ const SelectWithInput = ({
     setCurrentItemValue(rightSelectValue)
   }, [leftSelectValue, rightSelectValue])
 
+  useEffect(() => {
+    if (currentItemSkill) sendValues(currentItemSkill.id, currentItemValue)
+  }, [currentItemSkill, currentItemValue])
+
   // Methods: UI state management
   function changeOpen(side: 'left' | 'right') {
     if (side === 'left' && !leftSelectDisabled) {
@@ -111,13 +115,11 @@ const SelectWithInput = ({
     const skill = dataSet.find((sk) => sk.id === value)
     setCurrentItemSkill(skill)
     setCurrentItemValue(0)
-    sendValues(leftSelectValue, rightSelectValue)
   }
 
   function handleRightSelectChange(rawValue: string) {
     const value = parseFloat(rawValue)
     setCurrentItemValue(value)
-    sendValues(leftSelectValue, rightSelectValue)
   }
 
   return (