fix rgb order and change handler

mastercomfig · Jul 12, 2024 · 01aa0cd · 01aa0cd
1 parent a50f125
commit 01aa0cd
Showing 1 changed file with 40 additions and 8 deletions.
diff --git a/src/components/items/ItemsInner.tsx b/src/components/items/ItemsInner.tsx
@@ -389,6 +389,14 @@ export default function ItemsInner({ playerClass, items, setResetKey }) {
                               min={0}
                               max={255}
                               step={1}
+                              onChange={(e) => {
+                                const newVal = parseInt(e.target.value);
+                                setLiveCrosshairColor((old) => ({
+                                  ...currentCrosshairColor,
+                                  ...old,
+                                  r: newVal,
+                                }));
+                              }}
                               onBlur={(e) => {
                                 const newVal = parseInt(e.target.value);
                                 const color = {
@@ -407,17 +415,25 @@ export default function ItemsInner({ playerClass, items, setResetKey }) {
                           </Col>
                           <Col>
                             <Form.Control
-                              placeholder="Blue"
-                              value={currentCrosshairColor.b}
+                              placeholder="Green"
+                              value={currentCrosshairColor.g}
                               type="number"
                               min={0}
                               max={255}
                               step={1}
+                              onChange={(e) => {
+                                const newVal = parseInt(e.target.value);
+                                setLiveCrosshairColor((old) => ({
+                                  ...currentCrosshairColor,
+                                  ...old,
+                                  g: newVal,
+                                }));
+                              }}
                               onBlur={(e) => {
                                 const newVal = parseInt(e.target.value);
                                 const color = {
                                   ...currentCrosshairColor,
-                                  b: newVal,
+                                  g: newVal,
                                 };
                                 setCrosshairColor(
                                   playerClass === "All-Class"
@@ -427,21 +443,29 @@ export default function ItemsInner({ playerClass, items, setResetKey }) {
                                 );
                               }}
                             />
-                            <Form.Text>Blue</Form.Text>
+                            <Form.Text>Green</Form.Text>
                           </Col>
                           <Col>
                             <Form.Control
-                              placeholder="Green"
-                              value={currentCrosshairColor.g}
+                              placeholder="Blue"
+                              value={currentCrosshairColor.b}
                               type="number"
                               min={0}
                               max={255}
                               step={1}
+                              onChange={(e) => {
+                                const newVal = parseInt(e.target.value);
+                                setLiveCrosshairColor((old) => ({
+                                  ...currentCrosshairColor,
+                                  ...old,
+                                  b: newVal,
+                                }));
+                              }}
                               onBlur={(e) => {
                                 const newVal = parseInt(e.target.value);
                                 const color = {
                                   ...currentCrosshairColor,
-                                  g: newVal,
+                                  b: newVal,
                                 };
                                 setCrosshairColor(
                                   playerClass === "All-Class"
@@ -451,7 +475,7 @@ export default function ItemsInner({ playerClass, items, setResetKey }) {
                                 );
                               }}
                             />
-                            <Form.Text>Green</Form.Text>
+                            <Form.Text>Blue</Form.Text>
                           </Col>
                           <Col>
                             <Form.Control
@@ -461,6 +485,14 @@ export default function ItemsInner({ playerClass, items, setResetKey }) {
                               min={0}
                               max={1}
                               step={0.01}
+                              onChange={(e) => {
+                                const newVal = parseInt(e.target.value);
+                                setLiveCrosshairColor((old) => ({
+                                  ...currentCrosshairColor,
+                                  ...old,
+                                  a: newVal,
+                                }));
+                              }}
                               onBlur={(e) => {
                                 const newVal = parseFloat(e.target.value);
                                 const color = {