mirror of
https://github.com/calli-eve/eve-pi.git
synced 2026-02-11 18:28:49 +01:00
547 lines
20 KiB
TypeScript
547 lines
20 KiB
TypeScript
import { ColorContext, SessionContext } from "@/app/context/Context";
|
|
import { PI_TYPES_MAP, STORAGE_IDS, STORAGE_CAPACITIES, PI_PRODUCT_VOLUMES, EVE_IMAGE_URL, PI_SCHEMATICS, LAUNCHPAD_IDS } from "@/const";
|
|
import { planetCalculations } from "@/planets";
|
|
import { AccessToken, PlanetWithInfo } from "@/types";
|
|
import { PlanetCalculations, StorageInfo } from "@/types/planet";
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
|
import { Button, Tooltip, Typography, useTheme, Menu, MenuItem, IconButton, Checkbox, FormControlLabel } from "@mui/material";
|
|
import AppBar from "@mui/material/AppBar";
|
|
import Dialog from "@mui/material/Dialog";
|
|
import Slide from "@mui/material/Slide";
|
|
import TableCell from "@mui/material/TableCell";
|
|
import TableRow from "@mui/material/TableRow";
|
|
import Toolbar from "@mui/material/Toolbar";
|
|
import { TransitionProps } from "@mui/material/transitions";
|
|
import { DateTime } from "luxon";
|
|
import Image from "next/image";
|
|
import React, { forwardRef, useContext, useState } from "react";
|
|
import Countdown from "react-countdown";
|
|
import { PlanetConfigDialog } from "../PlanetConfig/PlanetConfigDialog";
|
|
import PinsCanvas3D from "./PinsCanvas3D";
|
|
import { timeColor } from "./alerts";
|
|
import { ExtractionSimulationDisplay } from './ExtractionSimulationDisplay';
|
|
import { ExtractionSimulationTooltip } from './ExtractionSimulationTooltip';
|
|
import { Collapse, Box, Stack } from "@mui/material";
|
|
|
|
const Transition = forwardRef(function Transition(
|
|
props: TransitionProps & {
|
|
children: React.ReactElement;
|
|
},
|
|
ref: React.Ref<unknown>,
|
|
) {
|
|
return <Slide direction="up" ref={ref} {...props} />;
|
|
});
|
|
|
|
interface SchematicInput {
|
|
type_id: number;
|
|
quantity: number;
|
|
}
|
|
|
|
interface SchematicOutput {
|
|
type_id: number;
|
|
quantity: number;
|
|
}
|
|
|
|
export const PlanetTableRow = ({
|
|
planet,
|
|
character,
|
|
planetDetails,
|
|
}: {
|
|
planet: PlanetWithInfo;
|
|
character: AccessToken;
|
|
planetDetails: PlanetCalculations;
|
|
}) => {
|
|
const theme = useTheme();
|
|
const { showProductIcons, extractionTimeMode, alertMode } = useContext(SessionContext);
|
|
const { colors } = useContext(ColorContext);
|
|
|
|
const [planetRenderOpen, setPlanetRenderOpen] = useState(false);
|
|
const [planetConfigOpen, setPlanetConfigOpen] = useState(false);
|
|
const [simulationOpen, setSimulationOpen] = useState(false);
|
|
const [menuAnchorEl, setMenuAnchorEl] = useState<null | HTMLElement>(null);
|
|
|
|
const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
|
|
setMenuAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
const handleMenuClose = () => {
|
|
setMenuAnchorEl(null);
|
|
};
|
|
|
|
const handle3DrenderOpen = () => {
|
|
setPlanetRenderOpen(true);
|
|
};
|
|
|
|
const handle3DrenderClose = () => {
|
|
setPlanetRenderOpen(false);
|
|
};
|
|
|
|
const handlePlanetConfigOpen = () => {
|
|
setPlanetConfigOpen(true);
|
|
};
|
|
|
|
const handlePlanetConfigClose = () => {
|
|
setPlanetConfigOpen(false);
|
|
};
|
|
|
|
const { piPrices, updatePlanetConfig, readPlanetConfig } = useContext(SessionContext);
|
|
const planetInfo = planet.info;
|
|
const planetInfoUniverse = planet.infoUniverse;
|
|
const planetConfig = readPlanetConfig({
|
|
characterId: character.character.characterId,
|
|
planetId: planet.planet_id,
|
|
});
|
|
|
|
const handleExcludeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
updatePlanetConfig({
|
|
...planetConfig,
|
|
excludeFromTotals: event.target.checked,
|
|
});
|
|
};
|
|
|
|
// Check if there are any alerts
|
|
const hasAlerts = alertMode && (
|
|
planetDetails.expired ||
|
|
planetDetails.storageInfo.some(storage => storage.fillRate > 60) ||
|
|
planetDetails.importDepletionTimes.some(depletion => depletion.hoursUntilDepletion < 24) ||
|
|
planetDetails.hasLargeExtractorDifference
|
|
);
|
|
|
|
// If in alert mode and no alerts, hide the row
|
|
if (alertMode && !hasAlerts) {
|
|
return null;
|
|
}
|
|
|
|
const renderProductDisplay = (typeId: number, amount?: number) => {
|
|
if (!typeId || !PI_TYPES_MAP[typeId]) {
|
|
return (
|
|
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}>
|
|
<Typography fontSize={theme.custom.smallText} color="text.secondary">
|
|
No product
|
|
</Typography>
|
|
{amount !== undefined && (
|
|
<Typography fontSize={theme.custom.smallText} style={{ marginLeft: "5px", flexShrink: 0 }}>
|
|
{amount}
|
|
</Typography>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (showProductIcons) {
|
|
return (
|
|
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}>
|
|
<Image
|
|
src={`${EVE_IMAGE_URL}/types/${typeId}/icon?size=32`}
|
|
alt={PI_TYPES_MAP[typeId].name}
|
|
width={32}
|
|
height={32}
|
|
style={{ marginRight: "5px" }}
|
|
/>
|
|
{amount !== undefined && (
|
|
<Typography fontSize={theme.custom.smallText} style={{ marginLeft: "5px", flexShrink: 0 }}>
|
|
{amount}
|
|
</Typography>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}>
|
|
<Typography fontSize={theme.custom.smallText}>
|
|
{PI_TYPES_MAP[typeId].name}
|
|
</Typography>
|
|
{amount !== undefined && (
|
|
<Typography fontSize={theme.custom.smallText} style={{ marginLeft: "5px", flexShrink: 0 }}>
|
|
{amount}
|
|
</Typography>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<TableRow
|
|
style={{ visibility: planetDetails.visibility }}
|
|
sx={{
|
|
"&:last-child td, &:last-child th": { border: 0 },
|
|
cursor: 'pointer',
|
|
'&:hover': {
|
|
backgroundColor: 'action.hover'
|
|
}
|
|
}}
|
|
onClick={(e: React.MouseEvent<HTMLTableRowElement>) => {
|
|
if (!(e.target as HTMLElement).closest('.clickable-cell')) return;
|
|
setSimulationOpen(!simulationOpen);
|
|
}}
|
|
>
|
|
<TableCell component="th" scope="row" className="clickable-cell">
|
|
<Tooltip
|
|
title={`${
|
|
planet.planet_type.charAt(0).toUpperCase() +
|
|
planet.planet_type.slice(1)
|
|
} planet.`}
|
|
>
|
|
<div style={{ display: "flex", minWidth: "8em" }}>
|
|
<Image
|
|
src={`/${planet.planet_type}.png`}
|
|
alt=""
|
|
width={theme.custom.cardImageSize / 6}
|
|
height={theme.custom.cardImageSize / 6}
|
|
style={{ marginRight: "5px" }}
|
|
/>
|
|
<Tooltip
|
|
placement="right"
|
|
title={
|
|
planetDetails.extractors.length > 0 ? (
|
|
<ExtractionSimulationTooltip
|
|
extractors={planetDetails.extractors
|
|
.filter(e => e.extractor_details?.product_type_id && e.extractor_details?.qty_per_cycle)
|
|
.map(e => ({
|
|
typeId: e.extractor_details!.product_type_id!,
|
|
baseValue: e.extractor_details!.qty_per_cycle!,
|
|
cycleTime: e.extractor_details!.cycle_time || 3600,
|
|
installTime: e.install_time ?? "",
|
|
expiryTime: e.expiry_time ?? ""
|
|
}))}
|
|
/>
|
|
) : null
|
|
}
|
|
componentsProps={{
|
|
tooltip: {
|
|
sx: {
|
|
bgcolor: 'background.paper',
|
|
'& .MuiTooltip-arrow': {
|
|
color: 'background.paper',
|
|
},
|
|
maxWidth: 'none',
|
|
width: 'fit-content'
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<Stack spacing={0}>
|
|
<Typography
|
|
fontSize={theme.custom.smallText}
|
|
color={planetDetails.hasLargeExtractorDifference ? 'error' : 'inherit'}
|
|
>
|
|
{planetInfoUniverse?.name}
|
|
</Typography>
|
|
{planetDetails.hasLargeExtractorDifference && (
|
|
<Typography
|
|
fontSize={theme.custom.smallText}
|
|
color="error"
|
|
sx={{ opacity: 0.7 }}
|
|
>
|
|
off-balance
|
|
</Typography>
|
|
)}
|
|
</Stack>
|
|
</Tooltip>
|
|
</div>
|
|
</Tooltip>
|
|
</TableCell>
|
|
<TableCell className="clickable-cell">{planet.upgrade_level}</TableCell>
|
|
<TableCell className="clickable-cell">
|
|
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
{planetDetails.extractors.length === 0 &&<Typography fontSize={theme.custom.smallText}>No extractors</Typography>}
|
|
{planetDetails.extractors.map((e, idx) => {
|
|
return (
|
|
<div
|
|
key={`${e}-${idx}-${character.character.characterId}`}
|
|
style={{ display: "flex", alignItems: "center" }}
|
|
>
|
|
<Typography
|
|
color={timeColor(e.expiry_time, colors)}
|
|
fontSize={theme.custom.smallText}
|
|
paddingRight={1}
|
|
>
|
|
{e ? (
|
|
extractionTimeMode ? (
|
|
DateTime.fromISO(e.expiry_time ?? "").toFormat('yyyy-MM-dd HH:mm:ss')
|
|
) : (
|
|
<Countdown
|
|
overtime={true}
|
|
date={DateTime.fromISO(e.expiry_time ?? "").toMillis()}
|
|
/>
|
|
)
|
|
) : (
|
|
"STOPPED"
|
|
)}
|
|
</Typography>
|
|
{renderProductDisplay(e.extractor_details?.product_type_id ?? 0)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="clickable-cell">
|
|
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
{Array.from(planetDetails.localProduction).map((schematic, idx) => {
|
|
return (
|
|
<div
|
|
key={`prod-${character.character.characterId}-${planet.planet_id}-${idx}`}
|
|
style={{ display: "flex", alignItems: "center" }}
|
|
>
|
|
{renderProductDisplay(schematic[1].outputs[0].type_id)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="clickable-cell">
|
|
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
{planetDetails.localImports.map((i) => {
|
|
const depletionTime = planetDetails.importDepletionTimes.find(d => d.typeId === i.type_id);
|
|
return (
|
|
<div
|
|
key={`import-${character.character.characterId}-${planet.planet_id}-${i.type_id}`}
|
|
style={{ display: "flex", alignItems: "center" }}
|
|
>
|
|
<Tooltip title={
|
|
<>
|
|
<div>Will be depleted in {depletionTime?.hoursUntilDepletion.toFixed(1)} hours</div>
|
|
<div>Monthly cost: {depletionTime?.monthlyCost.toFixed(2)}M ISK</div>
|
|
</>
|
|
}>
|
|
<div style={{ display: "flex", alignItems: "center" }}>
|
|
{renderProductDisplay(i.type_id, i.quantity * i.factoryCount)}
|
|
{depletionTime && (
|
|
<Typography
|
|
fontSize={theme.custom.smallText}
|
|
color={depletionTime.hoursUntilDepletion < 24 ? 'error' : depletionTime.hoursUntilDepletion < 48 ? 'warning' : 'success'}
|
|
sx={{ ml: 1 }}
|
|
>
|
|
({depletionTime.hoursUntilDepletion.toFixed(1)}h)
|
|
</Typography>
|
|
)}
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="clickable-cell">
|
|
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
{planetDetails.localExports.map((exports) => (
|
|
<div
|
|
key={`export-${character.character.characterId}-${planet.planet_id}-${exports.type_id}`}
|
|
style={{ display: "flex", alignItems: "center" }}
|
|
>
|
|
{renderProductDisplay(exports.type_id, exports.quantity * exports.factoryCount)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
{planetDetails.localExports.map((exports) => (
|
|
<FormControlLabel
|
|
key={`export-excluded-${character.character.characterId}-${planet.planet_id}-${exports.type_id}`}
|
|
control={
|
|
<Checkbox
|
|
checked={planetConfig.excludeFromTotals}
|
|
onChange={handleExcludeChange}
|
|
size="small"
|
|
/>
|
|
}
|
|
label=""
|
|
/>
|
|
))}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="clickable-cell">
|
|
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
{planetDetails.localExports.map((exports) => (
|
|
<Typography
|
|
key={`export-uph-${character.character.characterId}-${planet.planet_id}-${exports.type_id}`}
|
|
fontSize={theme.custom.smallText}
|
|
>
|
|
{exports.quantity * exports.factoryCount}
|
|
</Typography>
|
|
))}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="clickable-cell">
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
minWidth: "4em",
|
|
textAlign: "end",
|
|
}}
|
|
>
|
|
{planetDetails.localExports.map((e) => {
|
|
const valueInMillions =
|
|
(((piPrices?.appraisal.items.find((a) => a.typeID === e.type_id)
|
|
?.prices.sell.min ?? 0) *
|
|
e.quantity * e.factoryCount) /
|
|
1000000) *
|
|
24 *
|
|
30;
|
|
const displayValue =
|
|
valueInMillions >= 1000
|
|
? `${(valueInMillions / 1000).toFixed(2)} B`
|
|
: `${valueInMillions.toFixed(2)} M`;
|
|
|
|
return (
|
|
<Typography
|
|
key={`export-praisal-${character.character.characterId}-${planet.planet_id}-${e.type_id}`}
|
|
fontSize={theme.custom.smallText}
|
|
>
|
|
{displayValue}
|
|
</Typography>
|
|
);
|
|
})}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="clickable-cell">
|
|
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
{planetDetails.storageInfo.length === 0 &&<Typography fontSize={theme.custom.smallText}>No storage</Typography>}
|
|
{planetDetails.storageInfo.map((storage: StorageInfo) => {
|
|
const isLaunchpad = LAUNCHPAD_IDS.includes(storage.type_id);
|
|
const fillRate = storage.fillRate;
|
|
const color = fillRate > 90 ? '#ff0000' : fillRate > 80 ? '#ffa500' : fillRate > 60 ? '#ffd700' : 'inherit';
|
|
|
|
return (
|
|
<div key={`storage-${character.character.characterId}-${planet.planet_id}-${storage.type}`} style={{ display: "flex", alignItems: "center" }}>
|
|
<Typography fontSize={theme.custom.smallText} style={{ marginRight: "5px" }}>
|
|
{isLaunchpad ? 'L' : 'S'}
|
|
</Typography>
|
|
<Typography fontSize={theme.custom.smallText} style={{ color }}>
|
|
{fillRate.toFixed(1)}%
|
|
</Typography>
|
|
{storage.value > 0 && (
|
|
<Typography fontSize={theme.custom.smallText} style={{ marginLeft: "5px" }}>
|
|
({Math.round(storage.value / 1000000)}M)
|
|
</Typography>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="menu-cell">
|
|
<IconButton
|
|
aria-label="more"
|
|
aria-controls="planet-menu"
|
|
aria-haspopup="true"
|
|
onClick={handleMenuOpen}
|
|
>
|
|
<MoreVertIcon />
|
|
</IconButton>
|
|
<Menu
|
|
id="planet-menu"
|
|
anchorEl={menuAnchorEl}
|
|
keepMounted
|
|
open={Boolean(menuAnchorEl)}
|
|
onClose={handleMenuClose}
|
|
>
|
|
<MenuItem onClick={() => {
|
|
handlePlanetConfigOpen();
|
|
handleMenuClose();
|
|
}}>
|
|
Configure Planet
|
|
</MenuItem>
|
|
<MenuItem onClick={() => {
|
|
handle3DrenderOpen();
|
|
handleMenuClose();
|
|
}}>
|
|
Show 3D View
|
|
</MenuItem>
|
|
</Menu>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell colSpan={6} style={{ paddingBottom: 0, paddingTop: 0, border: 'none' }}>
|
|
<Collapse in={simulationOpen} timeout="auto" unmountOnExit>
|
|
<Box sx={{ my: 2 }}>
|
|
<ExtractionSimulationDisplay
|
|
extractors={planetDetails.extractors
|
|
.filter(e => e.extractor_details?.product_type_id && e.extractor_details?.qty_per_cycle)
|
|
.map(e => ({
|
|
typeId: e.extractor_details!.product_type_id!,
|
|
baseValue: e.extractor_details!.qty_per_cycle!,
|
|
cycleTime: e.extractor_details!.cycle_time || 3600,
|
|
installTime: e.install_time ?? "",
|
|
expiryTime: e.expiry_time ?? ""
|
|
}))}
|
|
productionNodes={Array.from(planetDetails.localProduction).map(([schematicId, schematic]) => ({
|
|
schematicId: schematicId,
|
|
typeId: schematic.outputs[0].type_id,
|
|
name: schematic.name,
|
|
inputs: schematic.inputs.map((input: SchematicInput) => ({
|
|
typeId: input.type_id,
|
|
quantity: input.quantity
|
|
})),
|
|
outputs: schematic.outputs.map((output: SchematicOutput) => ({
|
|
typeId: output.type_id,
|
|
quantity: output.quantity
|
|
})),
|
|
cycleTime: schematic.cycle_time,
|
|
factoryCount: schematic.factoryCount || 1
|
|
}))}
|
|
/>
|
|
</Box>
|
|
</Collapse>
|
|
</TableCell>
|
|
</TableRow>
|
|
<Dialog
|
|
fullScreen
|
|
open={planetRenderOpen}
|
|
onClose={handle3DrenderClose}
|
|
TransitionComponent={Transition}
|
|
>
|
|
<AppBar sx={{ position: "relative" }}>
|
|
<Toolbar>
|
|
<IconButton
|
|
edge="start"
|
|
color="inherit"
|
|
onClick={handle3DrenderClose}
|
|
aria-label="close"
|
|
>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
|
|
{planetInfoUniverse?.name}
|
|
</Typography>
|
|
<Button autoFocus color="inherit" onClick={handle3DrenderClose}>
|
|
Close
|
|
</Button>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<PinsCanvas3D planetInfo={planetInfo} />
|
|
</Dialog>
|
|
<Dialog
|
|
fullScreen
|
|
open={planetConfigOpen}
|
|
onClose={handlePlanetConfigClose}
|
|
TransitionComponent={Transition}
|
|
>
|
|
<AppBar sx={{ position: "relative" }}>
|
|
<Toolbar>
|
|
<IconButton
|
|
edge="start"
|
|
color="inherit"
|
|
onClick={handlePlanetConfigClose}
|
|
aria-label="close"
|
|
>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
|
|
Planet configuration: {planetInfoUniverse?.name}
|
|
</Typography>
|
|
<Button autoFocus color="inherit" onClick={handlePlanetConfigClose}>
|
|
Close
|
|
</Button>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<PlanetConfigDialog planet={planet} character={character} />
|
|
</Dialog>
|
|
</>
|
|
);
|
|
};
|