dave/eve-pi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor color selection to use context and extract assignation function

Browse Source
This commit is contained in:
Calli
2023-10-06 17:48:23 +03:00
parent 53c57a0383
commit 75b9eb8be1
6 changed files with 162 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/components/PlanetaryInteraction/PlanetCard.tsx
View File

@@ -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 (
<Typography
key={`${e}-${idx}-${character.character.characterId}`}
color={timeColor(e)}
color={timeColor(e, colorContext)}
fontSize={theme.custom.smallText}
>
{e ? (

53
src/app/components/PlanetaryInteraction/PlanetTableRow.tsx
View File

@@ -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<unknown>
ref: React.Ref<unknown>,
) {
return <Slide direction="up" ref={ref} {...props} />;
});
@@ -53,7 +58,7 @@ export const PlanetTableRow = ({
const { piPrices } = useContext(SessionContext);
const [planetInfo, setPlanetInfo] = useState<PlanetInfo | undefined>(
undefined
undefined,
);
const [planetInfoUniverse, setPlanetInfoUniverse] = useState<
@@ -62,7 +67,7 @@ export const PlanetTableRow = ({
const [extractors, setExtractors] = useState<PlanetInfo["pins"]>([]);
const [production, setProduction] = useState(
new Map<SchematicId, (typeof PI_SCHEMATICS)[number]>()
new Map<SchematicId, (typeof PI_SCHEMATICS)[number]>(),
);
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<PlanetInfo> => {
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<PlanetInfoUniverse> => {
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 (
<TableRow sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
<TableCell component="th" scope="row">
@@ -215,7 +210,7 @@ export const PlanetTableRow = ({
style={{ display: "flex" }}
>
<Typography
color={timeColor(e.expiry_time)}
color={timeColor(e.expiry_time, colorContext)}
fontSize={theme.custom.smallText}
paddingRight={1}
>

21
src/app/components/PlanetaryInteraction/timeColors.ts Normal file
View File

@@ -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;
};

46
src/app/components/Settings/SettingsButtons.tsx Normal file
View File

@@ -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 (
<Tooltip title="Toggle settings dialog">
<>
<Button onClick={handleClickOpen}>Settings</Button>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"Override default timer colors"}
</DialogTitle>
<DialogContent style={{ paddingTop: '1rem'}}>
<TextField
label="Required"
defaultValue="Hello World"
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Disagree</Button>
<Button onClick={handleClose} autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
</>
</Tooltip>
);
};

44
src/app/components/Settings/SettingsDialog.tsx Normal file
View File

@@ -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 (
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"Use Google's location service?"}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous
location data to Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Disagree</Button>
<Button onClick={handleClose} autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
);
}

22
src/app/context/Context.tsx
View File

@@ -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<ColorContextType>({
defaultColor: '#006596',
expiredColor: '#AB324A',
twoHoursColor: '#9C4438',
fourHoursColor: '#765B21',
eightHoursColor: '#63620D',
twelveHoursColor: '#2C6C2F',
dayColor: '#2F695A',
twoDaysColor: '#2F695A',
});