Fix react error in ASCIICity

This commit is contained in:
Snarling 2022-09-26 10:39:09 -04:00
parent 3dbc848098
commit 21c919c030

@ -12,8 +12,8 @@ import { Locations } from "../Locations";
import { Location } from "../Location"; import { Location } from "../Location";
import { Settings } from "../../Settings/Settings"; import { Settings } from "../../Settings/Settings";
import { use } from "../../ui/Context"; import { Router } from "../../ui/GameRoot";
import { IRouter } from "../../ui/Router"; import { Player } from "../../Player";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import { LocationType } from "../LocationTypeEnum"; import { LocationType } from "../LocationTypeEnum";
@ -37,20 +37,17 @@ const useStyles = makeStyles((theme: Theme) =>
}), }),
); );
function toLocation(router: IRouter, location: Location): void { function toLocation(location: Location): void {
if (location.name === LocationName.TravelAgency) { if (location.name === LocationName.TravelAgency) {
router.toTravel(); Router.toTravel();
} else if (location.name === LocationName.WorldStockExchange) { } else if (location.name === LocationName.WorldStockExchange) {
router.toStockMarket(); Router.toStockMarket();
} else { } else {
router.toLocation(location); Router.toLocation(location);
} }
} }
function LocationLetter(location: Location): React.ReactElement { function LocationLetter(location: Location, className: string): React.ReactElement {
location.types;
const router = use.Router();
const classes = useStyles();
let L = "X"; let L = "X";
if (location.types.includes(LocationType.Company)) L = "C"; if (location.types.includes(LocationType.Company)) L = "C";
if (location.types.includes(LocationType.Gym)) L = "G"; if (location.types.includes(LocationType.Gym)) L = "G";
@ -64,12 +61,7 @@ function LocationLetter(location: Location): React.ReactElement {
if (location.types.includes(LocationType.Special)) L = "?"; if (location.types.includes(LocationType.Special)) L = "?";
if (!location) return <span>*</span>; if (!location) return <span>*</span>;
return ( return (
<span <span aria-label={location.name} key={location.name} className={className} onClick={() => toLocation(location)}>
aria-label={location.name}
key={location.name}
className={classes.location}
onClick={() => toLocation(router, location)}
>
<b>{L}</b> <b>{L}</b>
</span> </span>
); );
@ -107,6 +99,7 @@ function ASCIICity(props: IProps): React.ReactElement {
Y: 24, Y: 24,
Z: 25, Z: 25,
}; };
const classes = useStyles();
const lineElems = (s: string): (string | React.ReactElement)[] => { const lineElems = (s: string): (string | React.ReactElement)[] => {
const elems: (string | React.ReactElement)[] = []; const elems: (string | React.ReactElement)[] = [];
@ -125,7 +118,7 @@ function ASCIICity(props: IProps): React.ReactElement {
const endI = matches[i].index; const endI = matches[i].index;
elems.push(s.slice(startI, endI)); elems.push(s.slice(startI, endI));
const locationI = letterMap[s[matches[i].index]]; const locationI = letterMap[s[matches[i].index]];
elems.push(LocationLetter(Locations[props.city.locations[locationI]])); elems.push(LocationLetter(Locations[props.city.locations[locationI]], classes.location));
} }
elems.push(s.slice(matches[matches.length - 1].index + 1)); elems.push(s.slice(matches[matches.length - 1].index + 1));
return elems; return elems;
@ -147,11 +140,10 @@ function ASCIICity(props: IProps): React.ReactElement {
} }
function ListCity(props: IProps): React.ReactElement { function ListCity(props: IProps): React.ReactElement {
const router = use.Router();
const locationButtons = props.city.locations.map((locName) => { const locationButtons = props.city.locations.map((locName) => {
return ( return (
<React.Fragment key={locName}> <React.Fragment key={locName}>
<Button onClick={() => toLocation(router, Locations[locName])}>{locName}</Button> <Button onClick={() => toLocation(Locations[locName])}>{locName}</Button>
<br /> <br />
</React.Fragment> </React.Fragment>
); );
@ -161,8 +153,7 @@ function ListCity(props: IProps): React.ReactElement {
} }
export function LocationCity(): React.ReactElement { export function LocationCity(): React.ReactElement {
const player = use.Player(); const city = Cities[Player.city];
const city = Cities[player.city];
return ( return (
<> <>
<Typography>{city.name}</Typography> <Typography>{city.name}</Typography>