Custom LEDs - Add save color and apply gradient options (#61)

* Fix jumpy page when open/closing picker

* Allow saving colors

* Allow gradient selection

* Fix bug when saving color without selection

* Save gradient color selections

* Fix ALL button resetting gradient values

* Update led theme label on backup page

package.json

@@ -8,6 +8,7 @@
     "bootstrap": "^5.2.3",
     "crypto-js": "^4.1.1",
     "formik": "^2.2.9",
+    "javascript-color-gradient": "^2.4.4",
     "jsbn": "^1.1.0",
     "jsencrypt": "^3.3.2",
     "lodash": "^4.17.21",

src/App.js

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-import { AppContext } from './Contexts/AppContext';
+import { AppContextProvider } from './Contexts/AppContext';
 import Navigation from './Components/Navigation'
 
 import HomePage from './Pages/HomePage'
@@ -19,15 +19,8 @@ import { loadButtonLabels } from './Services/Storage';
 import './App.scss';
 
 const App = () => {
-	const [buttonLabels, setButtonLabels] = useState(loadButtonLabels() ?? 'gp2040');
-
-	const appData = {
-		buttonLabels,
-		setButtonLabels,
-	};
-
 	return (
-		<AppContext.Provider value={appData}>
+		<AppContextProvider>
 			<Router>
 				<Navigation />
 				<div className="container-fluid body-content">
@@ -46,7 +39,7 @@ const App = () => {
 					</Routes>
 				</div>
 			</Router>
-		</AppContext.Provider>
+		</AppContextProvider>
 	);
 }
 

src/Contexts/AppContext.js

@@ -1,7 +1,63 @@
-import { createContext } from 'react';
+import React, { createContext, useState } from 'react';
 
-export const defaultAppData = {
-	buttonLabels: 'gp2040',
-};
+export const AppContext = createContext(null);
+
+export const AppContextProvider = ({ children, ...props }) => {
+	const [buttonLabels, _setButtonLabels] = useState(localStorage.getItem('buttonLabels') || 'gp2040');
+	const setButtonLabels = (buttonLabels) => {
+		localStorage.setItem('buttonLabels', buttonLabels);
+		_setButtonLabels(buttonLabels);
+	};
+
+	const [savedColors, _setSavedColors] = useState(localStorage.getItem('savedColors') ? localStorage.getItem('savedColors').split(',') : []);
+	const setSavedColors = (savedColors) => {
+		localStorage.setItem('savedColors', savedColors);
+		_setSavedColors(savedColors);
+	};
+
+	const [gradientNormalColor1, _setGradientNormalColor1] = useState('#00ffff');
+	const setGradientNormalColor1 = (gradientNormalColor1) => {
+		localStorage.setItem('gradientNormalColor1', gradientNormalColor1);
+		_setGradientNormalColor1(gradientNormalColor1);
+	};
 
-export const AppContext = createContext(defaultAppData);
+	const [gradientNormalColor2, _setGradientNormalColor2] = useState('#ff00ff');
+	const setGradientNormalColor2 = (gradientNormalColor2) => {
+		localStorage.setItem('gradientNormalColor2', gradientNormalColor2);
+		_setGradientNormalColor1(gradientNormalColor2);
+	};
+
+	const [gradientPressedColor1, _setGradientPressedColor1] = useState('#ff00ff');
+	const setGradientPressedColor1 = (gradientPressedColor1) => {
+		localStorage.setItem('gradientPressedColor1', gradientPressedColor1);
+		_setGradientPressedColor1(gradientPressedColor1);
+	};
+
+	const [gradientPressedColor2, _setGradientPressedColor2] = useState('#00ffff');
+	const setGradientPressedColor2 = (gradientPressedColor2) => {
+		localStorage.setItem('gradientPressedColor2', gradientPressedColor2);
+		_setGradientPressedColor1(gradientPressedColor2);
+	};
+
+	return (
+		<AppContext.Provider
+			{...props}
+			value={{
+				buttonLabels,
+				gradientNormalColor1,
+				gradientNormalColor2,
+				gradientPressedColor1,
+				gradientPressedColor2,
+				savedColors,
+				setButtonLabels,
+				setGradientNormalColor1,
+				setGradientNormalColor2,
+				setGradientPressedColor1,
+				setGradientPressedColor2,
+				setSavedColors,
+			}}
+		>
+			{children}
+		</AppContext.Provider>
+	);
+};

src/Data/Buttons.js

@@ -135,3 +135,34 @@ export const BUTTONS = {
 
 export const AUX_BUTTONS = [ 'S1', 'S2', 'L3', 'R3', 'A1', 'A2' ];
 export const MAIN_BUTTONS = [ 'Up', 'Down', 'Left', 'Right', 'B1', 'B2', 'B3', 'B4', 'L1', 'R1', 'L2', 'R2' ];
+
+export const STICK_LAYOUT = [
+	[null, 'Left', null],
+	['Up', null, 'Down'],
+	[null, 'Right', null],
+	['B3', null, 'B1'],
+	['B4', null, 'B2'],
+	['R1', null, 'R2'],
+	['L1', null, 'L2'],
+];
+
+export const STICKLESS_LAYOUT = [
+	['Left', null, null],
+	['Down', null, null],
+	['Right', null, null],
+	[null, 'Up', null],
+	['B3', 'B1', null],
+	['B4', 'B2', null],
+	['R1', 'R2', null],
+	['L1', 'L2', null],
+];
+
+export const KEYBOARD_LAYOUT = [
+	[null, 'Left'],
+	['Up', 'Down'],
+	[null, 'Right'],
+	['B3', 'B1'],
+	['B4', 'B2'],
+	['R1', 'R2'],
+	['L1', 'L2'],
+];

src/Pages/BackupPage.js

@@ -10,7 +10,7 @@ const API_BINDING = {
 	"display":     {label: "Display",      get: WebApi.getDisplayOptions, set: WebApi.setDisplayOptions},
 	"gamepad":     {label: "Gamepad",      get: WebApi.getGamepadOptions, set: WebApi.setGamepadOptions},
 	"led":         {label: "LED",          get: WebApi.getLedOptions,     set: WebApi.setLedOptions},
-	"ledTheme":    {label: "Custom Theme", get: WebApi.getCustomTheme,    set: WebApi.setCustomTheme},
+	"ledTheme":    {label: "Custom LED Theme", get: WebApi.getCustomTheme,    set: WebApi.setCustomTheme},
 	"pinmappings": {label: "Pin Mappings", get: WebApi.getPinMappings,    set: WebApi.setPinMappings},
 	"addons":      {label: "Add-Ons",      get: WebApi.getAddonsOptions,  set: WebApi.setAddonsOptions},
 	// new api, add it here