From 75b9eb8be197044ab85afdc7e3ae870ed46fb7e3 Mon Sep 17 00:00:00 2001 From: Calli Date: Fri, 6 Oct 2023 17:48:23 +0300 Subject: [PATCH] Refactor color selection to use context and extract assignation function --- .../PlanetaryInteraction/PlanetCard.tsx | 19 ++----- .../PlanetaryInteraction/PlanetTableRow.tsx | 53 +++++++++---------- .../PlanetaryInteraction/timeColors.ts | 21 ++++++++ .../components/Settings/SettingsButtons.tsx | 46 ++++++++++++++++ .../components/Settings/SettingsDialog.tsx | 44 +++++++++++++++ src/app/context/Context.tsx | 22 ++++++++ 6 files changed, 162 insertions(+), 43 deletions(-) create mode 100644 src/app/components/PlanetaryInteraction/timeColors.ts create mode 100644 src/app/components/Settings/SettingsButtons.tsx create mode 100644 src/app/components/Settings/SettingsDialog.tsx diff --git a/src/app/components/PlanetaryInteraction/PlanetCard.tsx b/src/app/components/PlanetaryInteraction/PlanetCard.tsx index 7c832f8..5f3210b 100644 --- a/src/app/components/PlanetaryInteraction/PlanetCard.tsx +++ b/src/app/components/PlanetaryInteraction/PlanetCard.tsx @@ -2,7 +2,7 @@ import { Stack, Typography, styled, useTheme } from "@mui/material"; import Image from "next/image"; import { AccessToken, Planet, PlanetInfo, PlanetInfoUniverse } from "@/types"; import { Api } from "@/esi-api"; -import React, { forwardRef, useEffect, useState } from "react"; +import React, { forwardRef, useContext, useEffect, useState } from "react"; import { DateTime } from "luxon"; import { EXTRACTOR_TYPE_IDS } from "@/const"; import Countdown from "react-countdown"; @@ -15,6 +15,8 @@ import Toolbar from "@mui/material/Toolbar"; import IconButton from "@mui/material/IconButton"; import CloseIcon from "@mui/icons-material/Close"; import Button from "@mui/material/Button"; +import { timeColor } from "./timeColors"; +import { ColorContext } from "@/app/context/Context"; const StackItem = styled(Stack)(({ theme }) => ({ ...theme.typography.body2, @@ -94,18 +96,7 @@ export const PlanetCard = ({ return planetInfo; }; - const timeColor = (extractorDate: string | undefined): string => { - if (!extractorDate) return "#AB324A"; - const dateExtractor = DateTime.fromISO(extractorDate); - const dateNow = DateTime.now(); - if (dateExtractor < dateNow) return "#AB324A"; - if (dateExtractor.minus({ hours: 2 }) < dateNow) return "#9C4438"; - if (dateExtractor.minus({ hours: 4 }) < dateNow) return "#765B21"; - if (dateExtractor.minus({ hours: 8 }) < dateNow) return "#63620D"; - if (dateExtractor.minus({ hours: 12 }) < dateNow) return "#2C6C2F"; - if (dateExtractor.minus({ hours: 24 }) < dateNow) return "#2F695A"; - return "#006596"; - }; + const colorContext = useContext(ColorContext) useEffect(() => { getPlanet(character, planet).then(setPlanetInfo); @@ -153,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 daca098..f38fdc0 100644 --- a/src/app/components/PlanetaryInteraction/PlanetTableRow.tsx +++ b/src/app/components/PlanetaryInteraction/PlanetTableRow.tsx @@ -1,4 +1,8 @@ -import { SessionContext } from "@/app/context/Context"; +import { + SessionContext, + ColorContext, + ColorContextType, +} from "@/app/context/Context"; import { EXTRACTOR_TYPE_IDS, FACTORY_IDS, @@ -22,12 +26,13 @@ import Image from "next/image"; import React, { forwardRef, useContext, useEffect, useState } from "react"; import Countdown from "react-countdown"; import PinsCanvas3D from "./PinsCanvas3D"; +import { timeColor } from "./timeColors"; const Transition = forwardRef(function Transition( props: TransitionProps & { children: React.ReactElement; }, - ref: React.Ref + ref: React.Ref, ) { return ; }); @@ -53,7 +58,7 @@ export const PlanetTableRow = ({ const { piPrices } = useContext(SessionContext); const [planetInfo, setPlanetInfo] = useState( - undefined + undefined, ); const [planetInfoUniverse, setPlanetInfoUniverse] = useState< @@ -62,7 +67,7 @@ export const PlanetTableRow = ({ const [extractors, setExtractors] = useState([]); const [production, setProduction] = useState( - new Map() + new Map(), ); const [imports, setImports] = useState< @@ -70,14 +75,14 @@ export const PlanetTableRow = ({ >([]); const [exports, setExports] = useState<{ typeId: number; amount: number }[]>( - [] + [], ); type SchematicId = number; const getPlanet = async ( character: AccessToken, - planet: Planet + planet: Planet, ): Promise => { const api = new Api(); const planetRes = await api.v3.getCharactersCharacterIdPlanetsPlanetId( @@ -85,15 +90,15 @@ export const PlanetTableRow = ({ planet.planet_id, { token: character.access_token, - } + }, ); const planetInfo = planetRes.data; setExtractors( planetInfo.pins.filter((p) => - EXTRACTOR_TYPE_IDS.some((e) => e === p.type_id) - ) + EXTRACTOR_TYPE_IDS.some((e) => e === p.type_id), + ), ); const localProduction = planetInfo.pins @@ -101,7 +106,7 @@ export const PlanetTableRow = ({ .reduce((acc, f) => { if (f.schematic_id) { const schematic = PI_SCHEMATICS.find( - (s) => s.schematic_id == f.schematic_id + (s) => s.schematic_id == f.schematic_id, ); if (schematic) acc.set(f.schematic_id, schematic); } @@ -127,18 +132,20 @@ export const PlanetTableRow = ({ .filter( (p) => ![...locallyProduced, ...locallyExcavated].some( - (lp) => lp === p.type_id - ) + (lp) => lp === p.type_id, + ), ); const localExports = locallyProduced .filter((p) => !locallyConsumed.some((lp) => lp === p)) .map((typeId) => { const outputs = PI_SCHEMATICS.flatMap((s) => s.outputs).find( - (s) => s.type_id === typeId + (s) => s.type_id === typeId, ); if (!outputs) return { typeId, amount: 0 }; - const cycleTime = PI_SCHEMATICS.find(s => s.schematic_id === outputs.schematic_id)?.cycle_time ?? 3600 + const cycleTime = + PI_SCHEMATICS.find((s) => s.schematic_id === outputs.schematic_id) + ?.cycle_time ?? 3600; const factoriesProducing = planetInfo.pins .filter((p) => FACTORY_IDS().some((e) => e.type_id === p.type_id)) .filter((f) => f.schematic_id === outputs?.schematic_id); @@ -157,7 +164,7 @@ export const PlanetTableRow = ({ }; const getPlanetUniverse = async ( - planet: Planet + planet: Planet, ): Promise => { const api = new Api(); const planetInfo = ( @@ -166,24 +173,12 @@ export const PlanetTableRow = ({ return planetInfo; }; - const timeColor = (extractorDate: string | undefined): string => { - if (!extractorDate) return "#AB324A"; - const dateExtractor = DateTime.fromISO(extractorDate); - const dateNow = DateTime.now(); - if (dateExtractor < dateNow) return "#AB324A"; - if (dateExtractor.minus({ hours: 2 }) < dateNow) return "#9C4438"; - if (dateExtractor.minus({ hours: 4 }) < dateNow) return "#765B21"; - if (dateExtractor.minus({ hours: 8 }) < dateNow) return "#63620D"; - if (dateExtractor.minus({ hours: 12 }) < dateNow) return "#2C6C2F"; - if (dateExtractor.minus({ hours: 24 }) < dateNow) return "#2F695A"; - return "#006596"; - }; - useEffect(() => { getPlanet(character, planet).then(setPlanetInfo); getPlanetUniverse(planet).then(setPlanetInfoUniverse); }, [planet, character]); + const colorContext = useContext(ColorContext); return ( @@ -215,7 +210,7 @@ export const PlanetTableRow = ({ style={{ display: "flex" }} > diff --git a/src/app/components/PlanetaryInteraction/timeColors.ts b/src/app/components/PlanetaryInteraction/timeColors.ts new file mode 100644 index 0000000..1553b3b --- /dev/null +++ b/src/app/components/PlanetaryInteraction/timeColors.ts @@ -0,0 +1,21 @@ +import { ColorContextType } from "@/app/context/Context"; +import { DateTime } from "luxon"; + +export const timeColor = ( + extractorDate: string | undefined, + colors: ColorContextType, +): string => { + if (!extractorDate) return colors.expiredColor; + const dateExtractor = DateTime.fromISO(extractorDate); + const dateNow = DateTime.now(); + if (dateExtractor < dateNow) return colors.expiredColor; + if (dateExtractor.minus({ hours: 2 }) < dateNow) return colors.twoHoursColor; + if (dateExtractor.minus({ hours: 4 }) < dateNow) return colors.fourHoursColor; + if (dateExtractor.minus({ hours: 8 }) < dateNow) + return colors.eightHoursColor; + if (dateExtractor.minus({ hours: 12 }) < dateNow) + return colors.twelveHoursColor; + if (dateExtractor.minus({ hours: 24 }) < dateNow) return colors.dayColor; + if (dateExtractor.minus({ hours: 48 }) < dateNow) return colors.twoDaysColor; + return colors.defaultColor; +}; diff --git a/src/app/components/Settings/SettingsButtons.tsx b/src/app/components/Settings/SettingsButtons.tsx new file mode 100644 index 0000000..bb3a549 --- /dev/null +++ b/src/app/components/Settings/SettingsButtons.tsx @@ -0,0 +1,46 @@ +import { SessionContext } from "@/app/context/Context"; +import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField, Tooltip } from "@mui/material"; +import React from "react"; +import { useContext } from "react"; + +export const SettingsButton = () => { + const { compactMode, toggleCompactMode } = useContext(SessionContext); + const [open, setOpen] = React.useState(false); + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + return ( + + <> + + + + {"Override default timer colors"} + + + + + + + + + + + + ); +}; diff --git a/src/app/components/Settings/SettingsDialog.tsx b/src/app/components/Settings/SettingsDialog.tsx new file mode 100644 index 0000000..c4307c5 --- /dev/null +++ b/src/app/components/Settings/SettingsDialog.tsx @@ -0,0 +1,44 @@ +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 966defe..a029bb2 100644 --- a/src/app/context/Context.tsx +++ b/src/app/context/Context.tsx @@ -36,4 +36,26 @@ export const SessionContext = createContext<{ planMode: false, togglePlanMode: () => {}, piPrices: undefined, +}) +export type ColorContextType = { + defaultColor: string; + expiredColor: string; + twoHoursColor: string; + fourHoursColor: string; + eightHoursColor: string; + 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', }); +