98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
import {
|
|
allClasses,
|
|
Population,
|
|
totalPopulation,
|
|
World,
|
|
Zone,
|
|
} from "../utils/saerro";
|
|
import { headerFont } from "./world.css";
|
|
import {
|
|
chartTile,
|
|
chartTileChart,
|
|
chartTilePopImage,
|
|
chartTilePopLine,
|
|
chartTileTotal,
|
|
classesContainer,
|
|
zoneContainer,
|
|
zoneHeader,
|
|
} from "./world-zone-container.css";
|
|
import { classIconMap } from "../utils/class-icons";
|
|
import { FactionBarSxS } from "./faction-bar-sxs";
|
|
import { c } from "../utils/classes";
|
|
import vsLogo from "../images/vs-100.png";
|
|
import ncLogo from "../images/nc-100.png";
|
|
import trLogo from "../images/tr-100.png";
|
|
|
|
export type WZCProps = {
|
|
world: World;
|
|
zone: Zone;
|
|
};
|
|
|
|
export const WorldZoneContainer = (props: WZCProps) => {
|
|
return (
|
|
<section className={zoneContainer} title={props.zone.name}>
|
|
<div className={zoneHeader}>
|
|
<h3 className={headerFont}>{props.zone.name.toUpperCase()}</h3>
|
|
{/* TODO: metagame */}
|
|
</div>
|
|
<div>
|
|
<h4 className={headerFont}>CLASSES</h4>
|
|
<div style={{ display: "flex" }}>
|
|
<Classes classes={props.zone.classes} />
|
|
<div style={{ display: "flex", flex: "1 3 100%", flexWrap: "wrap" }}>
|
|
|
|
</div>
|
|
<div style={{ display: "flex", flex: "1 3 100%", flexWrap: "wrap" }}>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
const Classes = (props: { classes: Zone["classes"] }) => {
|
|
if (props.classes === undefined) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className={classesContainer}>
|
|
{allClasses.map((name) => (
|
|
<ChartTile
|
|
key={name}
|
|
name={name}
|
|
pop={(props.classes as Record<string, Population>)[name]}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ChartTile = (props: { name: string; pop: Population }) => (
|
|
<div className={chartTile}>
|
|
<div className={chartTileChart}>
|
|
<FactionBarSxS population={props.pop} />
|
|
<img src={(classIconMap as any)[props.name]} />
|
|
</div>
|
|
<div>
|
|
<div className={c(headerFont, chartTileTotal)}>
|
|
{totalPopulation(props.pop)}
|
|
</div>
|
|
<div>
|
|
<div className={chartTilePopLine}>
|
|
<img className={chartTilePopImage} src={vsLogo} alt="VS" />{" "}
|
|
{props.pop.vs}
|
|
</div>
|
|
<div className={chartTilePopLine}>
|
|
<img className={chartTilePopImage} src={ncLogo} alt="NC" />{" "}
|
|
{props.pop.nc}
|
|
</div>
|
|
<div className={chartTilePopLine}>
|
|
<img className={chartTilePopImage} src={trLogo} alt="TR" />{" "}
|
|
{props.pop.tr}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|