Tightly couple ATK and HP values

components/RingSelect/index.tsx

@@ -66,6 +66,9 @@ const RingSelect = (props: Props) => {
   }
 
   function receiveRingValues(index: number, left: number, right: number) {
+    if (index == 1 || index == 2) {
+      setSyncedRingValues(index, right)
+    } else {
       setRings({
         ...rings,
         [index]: {
@@ -74,6 +77,26 @@ const RingSelect = (props: Props) => {
         },
       })
     }
+  }
+
+  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,
+      1: {
+        modifier: rings[1].modifier,
+        strength: atkValues[found],
+      },
+      2: {
+        modifier: rings[2].modifier,
+        strength: hpValues[found],
+      },
+    })
+  }
 
   return (
     <div className="Rings">

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 (