create setRgbColor on frontend

aarron-lee · Nov 27, 2023 · 9260df2 · 9260df2
1 parent 23783b4
commit 9260df2
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/src/components/ControllerLightingPanel.tsx b/src/components/ControllerLightingPanel.tsx
@@ -44,6 +44,7 @@ const ControllerLightingPanel: VFC<{ serverAPI: ServerAPI }> = ({
     setIsLeftRgbOn,
     setLeftColor,
     setLeftLedBrightness
+    // _setLeftRgbColor
   ] = useRgb('LEFT');
 
   const [
@@ -57,6 +58,7 @@ const ControllerLightingPanel: VFC<{ serverAPI: ServerAPI }> = ({
     setIsRightRgbOn,
     setRightColor,
     setRightLedBrightness
+    // _setLeftRgbColor
   ] = useRgb('RIGHT');
 
   const TPadToggleChange = (value: boolean) => {

diff --git a/src/hooks/rgb.tsx b/src/hooks/rgb.tsx
@@ -53,6 +53,13 @@ export const useRgb = (controller: ControllerType) => {
     return dispatch(rgbSlice.actions.setColor({ controller, color, value }));
   };
 
+  // usage: setRgbColor(255, 255, 255)
+  const setRgbColor = (red: number, green: number, blue: number) => {
+    return dispatch(
+      rgbSlice.actions.setRgbColor({ controller, red, green, blue })
+    );
+  };
+
   const setEnabled = (enabled: boolean) => {
     return dispatch(rgbSlice.actions.setEnabled({ controller, enabled }));
   };
@@ -61,5 +68,11 @@ export const useRgb = (controller: ControllerType) => {
     return dispatch(rgbSlice.actions.setBrightness({ controller, brightness }));
   };
 
-  return [rgbInfo, setEnabled, updateColor, updateBrightness] as any;
+  return [
+    rgbInfo,
+    setEnabled,
+    updateColor,
+    updateBrightness,
+    setRgbColor
+  ] as any;
 };
diff --git a/src/redux-modules/rgbSlice.tsx b/src/redux-modules/rgbSlice.tsx
@@ -110,6 +110,27 @@ export const rgbSlice = createSlice({
         state.rgbProfiles['default'][controller][color] = value;
       }
     },
+    setRgbColor: (
+      state,
+      action: PayloadAction<{
+        controller: ControllerType;
+        red: number;
+        green: number;
+        blue: number;
+      }>
+    ) => {
+      const { controller, red, green, blue } = action.payload;
+      const currentGameId = extractCurrentGameId();
+      if (state.perGameProfilesEnabled) {
+        state.rgbProfiles[currentGameId][controller].red = red;
+        state.rgbProfiles[currentGameId][controller].green = green;
+        state.rgbProfiles[currentGameId][controller].blue = blue;
+      } else {
+        state.rgbProfiles['default'][controller].red = red;
+        state.rgbProfiles['default'][controller].green = green;
+        state.rgbProfiles['default'][controller].blue = blue;
+      }
+    },
     setEnabled: (
       state,
       action: PayloadAction<{
@@ -214,6 +235,7 @@ const mutatingActionTypes = [
   rgbSlice.actions.setEnabled.type,
   rgbSlice.actions.setPerGameProfilesEnabled.type,
   rgbSlice.actions.setRgbMode.type,
+  rgbSlice.actions.setRgbColor.type,
   rgbSlice.actions.setBrightness.type
 ];