41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { useMemo } from "react";
|
|
import { Population } from "../utils/saerro";
|
|
import * as styles from "./faction-bar-sxs.css";
|
|
import { background200, ncFaction, trFaction, vsFaction } from "../utils/theme";
|
|
|
|
export const FactionBarSxS = ({
|
|
population: { nc, vs, tr },
|
|
}: {
|
|
population: Population;
|
|
}) => {
|
|
const { vsPercent, ncPercent, trPercent } = useMemo(() => {
|
|
const total = nc + vs + tr;
|
|
return {
|
|
vsPercent: Math.round((vs / total) * 100) || 0,
|
|
ncPercent: Math.round((nc / total) * 100) || 0,
|
|
trPercent: Math.round((tr / total) * 100) || 0,
|
|
};
|
|
}, [vs, nc, tr]);
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Bar percent={vsPercent} color={vsFaction} />
|
|
<Bar percent={ncPercent} color={ncFaction} />
|
|
<Bar percent={trPercent} color={trFaction} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Bar = (props: { percent: number; color: string }) => (
|
|
<div
|
|
className={styles.bar}
|
|
style={{
|
|
backgroundImage: `linear-gradient( to top,
|
|
${props.color} 0% ${props.percent}% ,
|
|
${background200} ${props.percent + 0.1}% 100%
|
|
)`,
|
|
}}
|
|
>
|
|
|
|
</div>
|
|
);
|