CORPORATION: remove TA modals and integrate into sell modal (#796)

This commit is contained in:
Caldwell 2023-09-12 11:30:45 +02:00 committed by GitHub
parent 99e5c5e6b0
commit b6eafce563
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 116 additions and 197 deletions

@ -6,7 +6,6 @@ import { CityName, CorpUnlockName } from "@enums";
import { Material } from "../Material";
import { Warehouse } from "../Warehouse";
import { ExportModal } from "./modals/ExportModal";
import { MaterialMarketTaModal } from "./modals/MaterialMarketTaModal";
import { SellMaterialModal } from "./modals/SellMaterialModal";
import { PurchaseMaterialModal } from "./modals/PurchaseMaterialModal";
import { formatBigNumber, formatCorpStat, formatMoney, formatQuality } from "../../ui/formatNumber";
@ -29,7 +28,6 @@ export function MaterialElem(props: IMaterialProps): React.ReactElement {
const [purchaseMaterialOpen, setPurchaseMaterialOpen] = useState(false);
const [exportOpen, setExportOpen] = useState(false);
const [sellMaterialOpen, setSellMaterialOpen] = useState(false);
const [materialMarketTaOpen, setMaterialMarketTaOpen] = useState(false);
const [limitProductionOpen, setLimitProductionOpen] = useState(false);
const warehouse = props.warehouse;
@ -159,18 +157,12 @@ export function MaterialElem(props: IMaterialProps): React.ReactElement {
>
{sellButtonText}
</Button>
<SellMaterialModal mat={mat} open={sellMaterialOpen} onClose={() => setSellMaterialOpen(false)} />
{division.hasResearch("Market-TA.I") && (
<>
<Button onClick={() => setMaterialMarketTaOpen(true)}>Market-TA</Button>
<MaterialMarketTaModal
mat={mat}
open={materialMarketTaOpen}
onClose={() => setMaterialMarketTaOpen(false)}
/>
</>
)}
<SellMaterialModal
mat={mat}
div={division}
open={sellMaterialOpen}
onClose={() => setSellMaterialOpen(false)}
/>
<Button color={tutorial ? "error" : "primary"} onClick={() => setLimitProductionOpen(true)}>
{limitMaterialButtonText}
</Button>

@ -6,7 +6,6 @@ import { Product } from "../Product";
import { DiscontinueProductModal } from "./modals/DiscontinueProductModal";
import { LimitProductProductionModal } from "./modals/LimitProductProductionModal";
import { SellProductModal } from "./modals/SellProductModal";
import { ProductMarketTaModal } from "./modals/ProductMarketTaModal";
import { CancelProductModal } from "./modals/CancelProductModal";
import { formatBigNumber, formatMoney, formatPercent } from "../../ui/formatNumber";
@ -29,7 +28,6 @@ export function ProductElem(props: IProductProps): React.ReactElement {
const [limitOpen, setLimitOpen] = useState(false);
const [discontinueOpen, setDiscontinueOpen] = useState(false);
const [cancelOpen, setCancelOpen] = useState(false);
const [marketTaOpen, setMarketTaOpen] = useState(false);
const city = props.city;
const product = props.product;
@ -166,7 +164,13 @@ export function ProductElem(props: IProductProps): React.ReactElement {
{(hasUpgradeDashboard || product.finished) && (
<>
<Button onClick={() => setSellOpen(true)}>{sellButtonText}</Button>
<SellProductModal product={product} city={city} open={sellOpen} onClose={() => setSellOpen(false)} />
<SellProductModal
product={product}
div={division}
city={city}
open={sellOpen}
onClose={() => setSellOpen(false)}
/>
<br />
<Button onClick={() => setLimitOpen(true)}>{limitProductionButtonText}</Button>
<LimitProductProductionModal
@ -175,12 +179,6 @@ export function ProductElem(props: IProductProps): React.ReactElement {
open={limitOpen}
onClose={() => setLimitOpen(false)}
/>
{division.hasResearch("Market-TA.I") && (
<>
<Button onClick={() => setMarketTaOpen(true)}>Market-TA</Button>
<ProductMarketTaModal product={product} open={marketTaOpen} onClose={() => setMarketTaOpen(false)} />
</>
)}
</>
)}
</Paper>

@ -1,84 +0,0 @@
import React, { useState } from "react";
import { formatMoney } from "../../../ui/formatNumber";
import { Material } from "../../Material";
import { Modal } from "../../../ui/React/Modal";
import { useDivision } from "../Context";
import Typography from "@mui/material/Typography";
import FormControlLabel from "@mui/material/FormControlLabel";
import Switch from "@mui/material/Switch";
import { useRerender } from "../../../ui/React/hooks";
interface IMarketTA2Props {
mat: Material;
}
function MarketTA2(props: IMarketTA2Props): React.ReactElement {
const rerender = useRerender();
const division = useDivision();
if (!division.hasResearch("Market-TA.II")) return <></>;
function onMarketTA2(event: React.ChangeEvent<HTMLInputElement>): void {
props.mat.marketTa2 = event.target.checked;
rerender();
}
return (
<>
<Typography variant="h4">Market-TA.II</Typography>
<Typography>
If this is enabled, then this Material will automatically be sold at the optimal price such that the amount sold
matches the amount produced. (i.e. the highest possible price, while still ensuring that all produced materials
will be sold)
</Typography>
<br />
<FormControlLabel
control={<Switch checked={props.mat.marketTa2} onChange={onMarketTA2} />}
label={<Typography>Use Market-TA.II for Auto-Sale Price</Typography>}
/>
</>
);
}
interface IProps {
open: boolean;
onClose: () => void;
mat: Material;
}
// Create a popup that lets the player use the Market TA research for Materials
export function MaterialMarketTaModal(props: IProps): React.ReactElement {
const setRerender = useState(false)[1];
function rerender(): void {
setRerender((old) => !old);
}
const markupLimit = props.mat.getMarkupLimit();
function onMarketTA1(event: React.ChangeEvent<HTMLInputElement>): void {
props.mat.marketTa1 = event.target.checked;
rerender();
}
return (
<Modal open={props.open} onClose={props.onClose}>
<>
<Typography variant="h4">Market-TA.I</Typography>
<Typography>
The maximum sale price you can mark this up to is {formatMoney(props.mat.marketPrice + markupLimit)}. This
means that if you set the sale price higher than this, you will begin to experience a loss in number of sales
<br></br>
<br></br>
If this is enabled, then this Material will automatically be sold at the price identified by Market-TA.I (i.e.
the price shown above)
</Typography>
<FormControlLabel
control={<Switch checked={props.mat.marketTa1} onChange={onMarketTA1} />}
label={<Typography>Use Market-TA.I for Auto-Sale Price</Typography>}
/>
</>
<MarketTA2 mat={props.mat} />
</Modal>
);
}

@ -1,86 +0,0 @@
import React, { useState } from "react";
import { formatMoney } from "../../../ui/formatNumber";
import { Product } from "../../Product";
import { Modal } from "../../../ui/React/Modal";
import { useDivision } from "../Context";
import Typography from "@mui/material/Typography";
import FormControlLabel from "@mui/material/FormControlLabel";
import Switch from "@mui/material/Switch";
import { useRerender } from "../../../ui/React/hooks";
interface ITa2Props {
product: Product;
}
function MarketTA2(props: ITa2Props): React.ReactElement {
const rerender = useRerender();
const division = useDivision();
if (!division.hasResearch("Market-TA.II")) return <></>;
function onCheckedChange(event: React.ChangeEvent<HTMLInputElement>): void {
props.product.marketTa2 = event.target.checked;
rerender();
}
return (
<>
<Typography variant="h4">Market-TA.II</Typography>
<br />
<Typography>
If this is enabled, then this product will automatically be sold at the optimal price such that the amount sold
matches the amount produced. (i.e. the highest possible price, while still ensuring that all produced materials
will be sold)
</Typography>
<br />
<FormControlLabel
control={<Switch checked={props.product.marketTa2} onChange={onCheckedChange} />}
label={<Typography>Use Market-TA.II for Auto-Sale Price</Typography>}
/>
</>
);
}
interface IProps {
open: boolean;
onClose: () => void;
product: Product;
}
// Create a popup that lets the player use the Market TA research for Products
export function ProductMarketTaModal(props: IProps): React.ReactElement {
const markupLimit = props.product.rating / props.product.markup;
const setRerender = useState(false)[1];
function rerender(): void {
setRerender((old) => !old);
}
function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
props.product.marketTa1 = event.target.checked;
rerender();
}
return (
<Modal open={props.open} onClose={props.onClose}>
<>
<Typography variant="h4">Market-TA.I</Typography>
<Typography>
The maximum sale price you can mark this up to is {formatMoney(props.product.productionCost + markupLimit)}.
This means that if you set the sale price higher than this, you will begin to experience a loss in number of
sales
<br></br>
<br></br>
If this is enabled, then this product will automatically be sold at the price identified by Market-TA.I (i.e.
the price shown above)
</Typography>
<FormControlLabel
control={<Switch checked={props.product.marketTa1} onChange={onChange} />}
label={<Typography>Use Market-TA.I for Auto-Sale Price</Typography>}
/>
</>
<MarketTA2 product={props.product} />
</Modal>
);
}

@ -3,11 +3,11 @@ import { dialogBoxCreate } from "../../../ui/React/DialogBox";
import { Material } from "../../Material";
import { SellMaterial } from "../../Actions";
import { Modal } from "../../../ui/React/Modal";
import Typography from "@mui/material/Typography";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import { KEY } from "../../../utils/helpers/keyCodes";
import { Typography, FormControlLabel, Switch, Tooltip } from "@mui/material";
import { Division } from "src/Corporation/Division";
function initialPrice(mat: Material): string {
let val = mat.desiredSellPrice ? mat.desiredSellPrice + "" : "";
if (mat.marketTa2) {
@ -22,6 +22,7 @@ interface IProps {
open: boolean;
onClose: () => void;
mat: Material;
div: Division;
}
// Create a popup that let the player manage sales of a material
@ -83,7 +84,51 @@ export function SellMaterialModal(props: IProps): React.ReactElement {
onKeyDown={onKeyDown}
/>
<TextField value={price} type="text" placeholder="Sell price" onChange={onPriceChange} onKeyDown={onKeyDown} />
<Button onClick={sellMaterial}>Confirm</Button>
<Button onClick={sellMaterial} style={{ marginLeft: ".5rem", marginRight: ".5rem" }}>
Confirm
</Button>
{props.div.hasResearch("Market-TA.I") && (
<FormControlLabel
style={{ marginRight: "1rem" }}
control={
<Switch checked={props.mat.marketTa1} onChange={(event) => (props.mat.marketTa1 = event.target.checked)} />
}
label={
<Tooltip
title={
<Typography>
If this is enabled, then this Material will automatically be sold at market price + markup.
<br />
This overrides player set pricing and gets overriden by an active TA2.
</Typography>
}
>
<Typography>Market-TA.I</Typography>
</Tooltip>
}
/>
)}
{props.div.hasResearch("Market-TA.II") && (
<FormControlLabel
control={
<Switch checked={props.mat.marketTa2} onChange={(event) => (props.mat.marketTa2 = event.target.checked)} />
}
label={
<Tooltip
title={
<Typography>
If this is enabled, then this Material will automatically be sold at the optimal price such that the
amount sold matches the amount specified.
<br />
This overrides player set pricing and TA1.
</Typography>
}
>
<Typography>Market-TA.II</Typography>
</Tooltip>
}
/>
)}
</Modal>
);
}

@ -9,8 +9,10 @@ import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import FormControlLabel from "@mui/material/FormControlLabel";
import Switch from "@mui/material/Switch";
import Tooltip from "@mui/material/Tooltip";
import { KEY } from "../../../utils/helpers/keyCodes";
import { CityName } from "@enums";
import { Division } from "src/Corporation/Division";
function initialPrice(product: Product, city: CityName): string {
let val = String(product.cityData[city].desiredSellPrice || "");
@ -27,6 +29,7 @@ interface IProps {
onClose: () => void;
product: Product;
city: CityName;
div: Division;
}
// Create a popup that let the player manage sales of a material
@ -94,11 +97,62 @@ export function SellProductModal(props: IProps): React.ReactElement {
onKeyDown={onKeyDown}
/>
<TextField value={px} type="text" placeholder="Sell price" onChange={onPriceChange} onKeyDown={onKeyDown} />
<Button onClick={sellProduct}>Confirm</Button>
<Button onClick={sellProduct} style={{ marginLeft: ".5rem", marginRight: ".5rem" }}>
Confirm
</Button>
<FormControlLabel
style={{ marginRight: ".5rem" }}
control={<Switch checked={checked} onChange={onCheckedChange} />}
label={<Typography>Set for all cities</Typography>}
/>
{props.div.hasResearch("Market-TA.I") && (
<FormControlLabel
style={{ marginRight: "1rem" }}
control={
<Switch
checked={props.product.marketTa1}
onChange={(event) => (props.product.marketTa1 = event.target.checked)}
/>
}
label={
<Tooltip
title={
<Typography>
If this is enabled, then this Material will automatically be sold at market price + markup.
<br />
This overrides player set pricing and gets overriden by an active TA2.
</Typography>
}
>
<Typography>Market-TA.I</Typography>
</Tooltip>
}
/>
)}
{props.div.hasResearch("Market-TA.II") && (
<FormControlLabel
control={
<Switch
checked={props.product.marketTa2}
onChange={(event) => (props.product.marketTa2 = event.target.checked)}
/>
}
label={
<Tooltip
title={
<Typography>
If this is enabled, then this Material will automatically be sold at the optimal price such that the
amount sold matches the amount specified.
<br />
This overrides player set pricing and TA1.
</Typography>
}
>
<Typography>Market-TA.II</Typography>
</Tooltip>
}
/>
)}
</Modal>
);
}