use tabs for corp

This commit is contained in:
Olivier Gagnon 2021-09-29 01:54:17 -04:00
parent c5713fa6d8
commit cefd499ff6

@ -1,4 +1,4 @@
import React, { useRef } from "react";
import React, { useState } from "react";
import { CorporationConstants } from "../data/Constants";
import { dialogBoxCreate } from "../../ui/React/DialogBox";
import { NewCity } from "../Actions";
@ -16,20 +16,24 @@ interface IProps {
export function ExpandNewCity(props: IProps): React.ReactElement {
const corp = useCorporation();
const division = useDivision();
const dropdown = useRef<HTMLSelectElement>(null);
const possibleCities = Object.keys(division.offices).filter((cityName: string) => division.offices[cityName] === 0);
const [city, setCity] = useState(possibleCities[0]);
function onCityChange(event: SelectChangeEvent<string>): void {
setCity(event.target.value);
}
function expand(): void {
if (dropdown.current === null) return;
try {
NewCity(corp, division, dropdown.current.value);
NewCity(corp, division, city);
} catch (err) {
dialogBoxCreate(err + "");
return;
}
dialogBoxCreate(`Opened a new office in ${dropdown.current.value}!`);
dialogBoxCreate(`Opened a new office in ${city}!`);
props.cityStateSetter(dropdown.current.value);
props.cityStateSetter(city);
}
return (
<>
@ -37,14 +41,12 @@ export function ExpandNewCity(props: IProps): React.ReactElement {
Would you like to expand into a new city by opening an office? This would cost{" "}
<MoneyCost money={CorporationConstants.OfficeInitialCost} corp={corp} />
</Typography>
<Select ref={dropdown}>
{Object.keys(division.offices)
.filter((cityName: string) => division.offices[cityName] === 0)
.map((cityName: string) => (
<MenuItem key={cityName} value={cityName}>
{cityName}
</MenuItem>
))}
<Select value={city} onChange={onCityChange}>
{possibleCities.map((cityName: string) => (
<MenuItem key={cityName} value={cityName}>
{cityName}
</MenuItem>
))}
</Select>
<Button onClick={expand} disabled={corp.funds.lt(0)}>
Confirm