From e69e65059e270d2f08744bbf212305433c287887 Mon Sep 17 00:00:00 2001 From: Calli Date: Fri, 6 Oct 2023 19:40:54 +0300 Subject: [PATCH] Add color selection and save it to localStorage --- package-lock.json | 141 ++++++++++++++++++ package.json | 2 + .../PlanetaryInteraction/PlanetCard.tsx | 14 +- .../PlanetaryInteraction/PlanetTableRow.tsx | 10 +- .../PlanetaryInteraction/timeColors.ts | 4 +- .../components/Settings/SettingsButtons.tsx | 48 ++++-- .../components/Settings/SettingsDialog.tsx | 44 ------ src/app/context/Context.tsx | 32 ++-- src/app/page.tsx | 35 +++-- 9 files changed, 236 insertions(+), 94 deletions(-) delete mode 100644 src/app/components/Settings/SettingsDialog.tsx diff --git a/package-lock.json b/package-lock.json index 1916cde..493c1b4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "luxon": "^3.3.0", "next": "13.4.5", "react": "18.2.0", + "react-color": "^2.19.3", "react-countdown": "^2.3.5", "react-dom": "18.2.0", "sharp": "^0.32.1", @@ -33,6 +34,7 @@ "devDependencies": { "@types/crypto-js": "^4.1.1", "@types/luxon": "^3.3.0", + "@types/react-color": "^3.0.7", "@types/three": "^0.152.1", "eslint-plugin-prettier": "^5.0.0", "prettier": "3.0.3" @@ -397,6 +399,14 @@ "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz", "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==" }, + "node_modules/@icons/material": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", + "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/@mui/base": { "version": "5.0.0-beta.4", "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.4.tgz", @@ -922,6 +932,16 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-color": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.7.tgz", + "integrity": "sha512-IGZA7e8Oia0+Sb3/1KP0qTThGelZ9DRspfeLrFWQWv5vXHiYlJJQMC2kgQr75CtP4uL8/kvT8qBgrOVlxVoNTw==", + "dev": true, + "dependencies": { + "@types/react": "*", + "@types/reactcss": "*" + } + }, "node_modules/@types/react-dom": { "version": "18.2.5", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.5.tgz", @@ -946,6 +966,15 @@ "@types/react": "*" } }, + "node_modules/@types/reactcss": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.7.tgz", + "integrity": "sha512-MYPuVierMjIo0EDQnNauvBA94IOeB9lfjC619g+26u7ilsTtoFv6X7eQvaw79Fqqpi0yzoSMz0nUazeJlQUZnA==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.3", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", @@ -3302,6 +3331,16 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -3337,6 +3376,11 @@ "node": ">=12" } }, + "node_modules/material-colors": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", + "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" + }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -4001,6 +4045,23 @@ "node": ">=0.10.0" } }, + "node_modules/react-color": { + "version": "2.19.3", + "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz", + "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==", + "dependencies": { + "@icons/material": "^0.2.4", + "lodash": "^4.17.15", + "lodash-es": "^4.17.15", + "material-colors": "^1.2.1", + "prop-types": "^15.5.10", + "reactcss": "^1.2.0", + "tinycolor2": "^1.4.1" + }, + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-countdown": { "version": "2.3.5", "resolved": "https://registry.npmjs.org/react-countdown/-/react-countdown-2.3.5.tgz", @@ -4045,6 +4106,14 @@ "react-dom": ">=16.6.0" } }, + "node_modules/reactcss": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", + "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", + "dependencies": { + "lodash": "^4.0.1" + } + }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", @@ -4670,6 +4739,11 @@ "resolved": "https://registry.npmjs.org/three/-/three-0.154.0.tgz", "integrity": "sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug==" }, + "node_modules/tinycolor2": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz", + "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==" + }, "node_modules/titleize": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz", @@ -5242,6 +5316,12 @@ "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz", "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==" }, + "@icons/material": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", + "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==", + "requires": {} + }, "@mui/base": { "version": "5.0.0-beta.4", "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.4.tgz", @@ -5533,6 +5613,16 @@ "csstype": "^3.0.2" } }, + "@types/react-color": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.7.tgz", + "integrity": "sha512-IGZA7e8Oia0+Sb3/1KP0qTThGelZ9DRspfeLrFWQWv5vXHiYlJJQMC2kgQr75CtP4uL8/kvT8qBgrOVlxVoNTw==", + "dev": true, + "requires": { + "@types/react": "*", + "@types/reactcss": "*" + } + }, "@types/react-dom": { "version": "18.2.5", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.5.tgz", @@ -5557,6 +5647,15 @@ "@types/react": "*" } }, + "@types/reactcss": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.7.tgz", + "integrity": "sha512-MYPuVierMjIo0EDQnNauvBA94IOeB9lfjC619g+26u7ilsTtoFv6X7eQvaw79Fqqpi0yzoSMz0nUazeJlQUZnA==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/scheduler": { "version": "0.16.3", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", @@ -7185,6 +7284,16 @@ "p-locate": "^5.0.0" } }, + "lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -7211,6 +7320,11 @@ "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.3.0.tgz", "integrity": "sha512-An0UCfG/rSiqtAIiBPO0Y9/zAnHUZxAMiCpTd5h2smgsj7GGmcenvrvww2cqNA8/4A5ZrD1gJpHN2mIHZQF+Mg==" }, + "material-colors": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", + "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" + }, "merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -7637,6 +7751,20 @@ "loose-envify": "^1.1.0" } }, + "react-color": { + "version": "2.19.3", + "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz", + "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==", + "requires": { + "@icons/material": "^0.2.4", + "lodash": "^4.17.15", + "lodash-es": "^4.17.15", + "material-colors": "^1.2.1", + "prop-types": "^15.5.10", + "reactcss": "^1.2.0", + "tinycolor2": "^1.4.1" + } + }, "react-countdown": { "version": "2.3.5", "resolved": "https://registry.npmjs.org/react-countdown/-/react-countdown-2.3.5.tgz", @@ -7670,6 +7798,14 @@ "prop-types": "^15.6.2" } }, + "reactcss": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", + "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", + "requires": { + "lodash": "^4.0.1" + } + }, "readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", @@ -8071,6 +8207,11 @@ "resolved": "https://registry.npmjs.org/three/-/three-0.154.0.tgz", "integrity": "sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug==" }, + "tinycolor2": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz", + "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==" + }, "titleize": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz", diff --git a/package.json b/package.json index 01e7455..37dc01b 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "luxon": "^3.3.0", "next": "13.4.5", "react": "18.2.0", + "react-color": "^2.19.3", "react-countdown": "^2.3.5", "react-dom": "18.2.0", "sharp": "^0.32.1", @@ -35,6 +36,7 @@ "devDependencies": { "@types/crypto-js": "^4.1.1", "@types/luxon": "^3.3.0", + "@types/react-color": "^3.0.7", "@types/three": "^0.152.1", "eslint-plugin-prettier": "^5.0.0", "prettier": "3.0.3" diff --git a/src/app/components/PlanetaryInteraction/PlanetCard.tsx b/src/app/components/PlanetaryInteraction/PlanetCard.tsx index 5f3210b..9079ce1 100644 --- a/src/app/components/PlanetaryInteraction/PlanetCard.tsx +++ b/src/app/components/PlanetaryInteraction/PlanetCard.tsx @@ -31,7 +31,7 @@ const Transition = forwardRef(function Transition( props: TransitionProps & { children: React.ReactElement; }, - ref: React.Ref + ref: React.Ref, ) { return ; }); @@ -44,7 +44,7 @@ export const PlanetCard = ({ character: AccessToken; }) => { const [planetInfo, setPlanetInfo] = useState( - undefined + undefined, ); const [planetInfoUniverse, setPlanetInfoUniverse] = useState< @@ -71,7 +71,7 @@ export const PlanetCard = ({ []; const getPlanet = async ( character: AccessToken, - planet: Planet + planet: Planet, ): Promise => { const api = new Api(); const planetInfo = ( @@ -80,14 +80,14 @@ export const PlanetCard = ({ planet.planet_id, { token: character.access_token, - } + }, ) ).data; return planetInfo; }; const getPlanetUniverse = async ( - planet: Planet + planet: Planet, ): Promise => { const api = new Api(); const planetInfo = ( @@ -96,7 +96,7 @@ export const PlanetCard = ({ return planetInfo; }; - const colorContext = useContext(ColorContext) + const { colors } = useContext(ColorContext); useEffect(() => { getPlanet(character, planet).then(setPlanetInfo); @@ -144,7 +144,7 @@ export const PlanetCard = ({ return ( {e ? ( diff --git a/src/app/components/PlanetaryInteraction/PlanetTableRow.tsx b/src/app/components/PlanetaryInteraction/PlanetTableRow.tsx index f38fdc0..274304c 100644 --- a/src/app/components/PlanetaryInteraction/PlanetTableRow.tsx +++ b/src/app/components/PlanetaryInteraction/PlanetTableRow.tsx @@ -1,8 +1,4 @@ -import { - SessionContext, - ColorContext, - ColorContextType, -} from "@/app/context/Context"; +import { SessionContext, ColorContext } from "@/app/context/Context"; import { EXTRACTOR_TYPE_IDS, FACTORY_IDS, @@ -178,7 +174,7 @@ export const PlanetTableRow = ({ getPlanetUniverse(planet).then(setPlanetInfoUniverse); }, [planet, character]); - const colorContext = useContext(ColorContext); + const { colors } = useContext(ColorContext); return ( @@ -210,7 +206,7 @@ export const PlanetTableRow = ({ style={{ display: "flex" }} > diff --git a/src/app/components/PlanetaryInteraction/timeColors.ts b/src/app/components/PlanetaryInteraction/timeColors.ts index 1553b3b..ec0cf1d 100644 --- a/src/app/components/PlanetaryInteraction/timeColors.ts +++ b/src/app/components/PlanetaryInteraction/timeColors.ts @@ -1,9 +1,9 @@ -import { ColorContextType } from "@/app/context/Context"; +import { ColorSelectionType } from "@/app/context/Context"; import { DateTime } from "luxon"; export const timeColor = ( extractorDate: string | undefined, - colors: ColorContextType, + colors: ColorSelectionType, ): string => { if (!extractorDate) return colors.expiredColor; const dateExtractor = DateTime.fromISO(extractorDate); diff --git a/src/app/components/Settings/SettingsButtons.tsx b/src/app/components/Settings/SettingsButtons.tsx index bb3a549..2806106 100644 --- a/src/app/components/Settings/SettingsButtons.tsx +++ b/src/app/components/Settings/SettingsButtons.tsx @@ -1,10 +1,22 @@ -import { SessionContext } from "@/app/context/Context"; -import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField, Tooltip } from "@mui/material"; +import { + ColorContext, + ColorSelectionType, +} from "@/app/context/Context"; +import { + Button, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + Tooltip, + Typography, +} from "@mui/material"; +import { ColorChangeHandler, ColorResult, CompactPicker } from "react-color"; import React from "react"; import { useContext } from "react"; export const SettingsButton = () => { - const { compactMode, toggleCompactMode } = useContext(SessionContext); + const { colors, setColors } = useContext(ColorContext); const [open, setOpen] = React.useState(false); const handleClickOpen = () => { @@ -14,6 +26,14 @@ export const SettingsButton = () => { const handleClose = () => { setOpen(false); }; + const handleColorSelection = (key: string, currentColors: ColorSelectionType) => (selection: ColorResult) => { + console.log(key, selection.hex) + setColors({ + ...currentColors, + [key]: selection.hex + }) + }; + return ( <> @@ -27,17 +47,21 @@ export const SettingsButton = () => { {"Override default timer colors"} - - + + {Object.keys(colors).map((key) => { + return ( +
+ {key} + +
+ ); + })} - - + diff --git a/src/app/components/Settings/SettingsDialog.tsx b/src/app/components/Settings/SettingsDialog.tsx deleted file mode 100644 index c4307c5..0000000 --- a/src/app/components/Settings/SettingsDialog.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; -import Dialog from '@mui/material/Dialog'; -import DialogActions from '@mui/material/DialogActions'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogTitle from '@mui/material/DialogTitle'; -import { Button } from '@mui/material'; - -export default function AlertDialog({handleClickOpen}: ) { - const [open, setOpen] = React.useState(false); - - const handleClickOpen = () => { - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - }; - - return ( - - - {"Use Google's location service?"} - - - - Let Google help apps determine location. This means sending anonymous - location data to Google, even when no apps are running. - - - - - - - - ); -} diff --git a/src/app/context/Context.tsx b/src/app/context/Context.tsx index a029bb2..aa78545 100644 --- a/src/app/context/Context.tsx +++ b/src/app/context/Context.tsx @@ -36,8 +36,8 @@ export const SessionContext = createContext<{ planMode: false, togglePlanMode: () => {}, piPrices: undefined, -}) -export type ColorContextType = { +}); +export type ColorSelectionType = { defaultColor: string; expiredColor: string; twoHoursColor: string; @@ -46,16 +46,22 @@ export type ColorContextType = { twelveHoursColor: string; dayColor: string; twoDaysColor: string; +}; -} -export const ColorContext = createContext({ - defaultColor: '#006596', - expiredColor: '#AB324A', - twoHoursColor: '#9C4438', - fourHoursColor: '#765B21', - eightHoursColor: '#63620D', - twelveHoursColor: '#2C6C2F', - dayColor: '#2F695A', - twoDaysColor: '#2F695A', +export const defaultColors = { + defaultColor: "#006596", + expiredColor: "#AB324A", + twoHoursColor: "#9C4438", + fourHoursColor: "#765B21", + eightHoursColor: "#63620D", + twelveHoursColor: "#2C6C2F", + dayColor: "#2F695A", + twoDaysColor: "#2F695A", +}; +export const ColorContext = createContext<{ + colors: ColorSelectionType; + setColors: (colors: ColorSelectionType) => void; +}>({ + colors: defaultColors, + setColors: () => {} }); - diff --git a/src/app/page.tsx b/src/app/page.tsx index 0b841b0..0579440 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -7,7 +7,13 @@ import { memo, useCallback, useEffect, useState } from "react"; import { AccessToken, CharacterUpdate, Env } from "../types"; import { MainGrid } from "./components/MainGrid"; import { refreshToken } from "@/esi-sso"; -import { CharacterContext, SessionContext } from "./context/Context"; +import { + CharacterContext, + ColorContext, + ColorSelectionType, + SessionContext, + defaultColors, +} from "./context/Context"; import { useSearchParams } from "next/navigation"; import { EvePraisalResult, fetchAllPrices } from "@/eve-praisal"; @@ -18,9 +24,9 @@ const Home = () => { const [compactMode, setCompactMode] = useState(false); const [planMode, setPlanMode] = useState(false); const [piPrices, setPiPrices] = useState( - undefined + undefined, ); - + const [colors, setColors] = useState(defaultColors); const searchParams = useSearchParams(); const code = searchParams && searchParams.get("code"); @@ -28,7 +34,7 @@ const Home = () => { const deleteCharacter = (character: AccessToken) => { const charactersToSave = characters.filter( - (c) => character.character.characterId !== c.character.characterId + (c) => character.character.characterId !== c.character.characterId, ); setCharacters(charactersToSave); saveCharacters(charactersToSave); @@ -36,7 +42,7 @@ const Home = () => { const updateCharacter = ( character: AccessToken, - updates: CharacterUpdate + updates: CharacterUpdate, ) => { const charactersToSave = characters.map((c) => { if (c.character.characterId === character.character.characterId) @@ -56,7 +62,7 @@ const Home = () => { }; const handleCallback = async ( - characters: AccessToken[] + characters: AccessToken[], ): Promise => { if (code) { window.history.replaceState(null, "", "/"); @@ -89,19 +95,28 @@ const Home = () => { }; const togglePlanMode = () => { - setPlanMode(!planMode) - } + setPlanMode(!planMode); + }; useEffect(() => { const storedCompactMode = localStorage.getItem("compactMode"); if (!storedCompactMode) return; storedCompactMode === "true" ? setCompactMode(true) : false; }, []); + useEffect(() => { + const storedColors = localStorage.getItem("colors"); + if (!storedColors) return; + setColors(JSON.parse(storedColors)) + }, []); useEffect(() => { localStorage.setItem("compactMode", compactMode ? "true" : "false"); }, [compactMode]); + useEffect(() => { + localStorage.setItem("colors", JSON.stringify(colors)) + }, [colors]); + // Initialize EVE PI useEffect(() => { fetch("api/env") @@ -157,7 +172,9 @@ const Home = () => { restoreCharacters, }} > - + + + );