2021-09-20 23:26:47 +02:00
|
|
|
import React, { useState, useEffect } from "react";
|
2021-08-15 22:20:10 +02:00
|
|
|
import { IPlayer } from "../../PersonObjects/IPlayer";
|
2021-09-17 08:04:44 +02:00
|
|
|
import { IRouter } from "../../ui/Router";
|
2021-08-15 22:20:10 +02:00
|
|
|
import { Factions } from "../Factions";
|
2021-09-17 08:04:44 +02:00
|
|
|
import { Faction } from "../Faction";
|
|
|
|
import { joinFaction } from "../FactionHelpers";
|
2021-08-15 22:20:10 +02:00
|
|
|
|
2021-09-20 07:18:20 +02:00
|
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
import Box from "@mui/material/Box";
|
|
|
|
import Link from "@mui/material/Link";
|
|
|
|
import Button from "@mui/material/Button";
|
|
|
|
import TableBody from "@mui/material/TableBody";
|
|
|
|
import { Table, TableCell } from "../../ui/React/Table";
|
|
|
|
import TableRow from "@mui/material/TableRow";
|
|
|
|
|
2021-08-15 22:20:10 +02:00
|
|
|
interface IProps {
|
2021-09-05 01:09:30 +02:00
|
|
|
player: IPlayer;
|
2021-09-17 08:04:44 +02:00
|
|
|
router: IRouter;
|
2021-08-15 22:20:10 +02:00
|
|
|
}
|
|
|
|
|
2021-09-17 08:04:44 +02:00
|
|
|
export function FactionsRoot(props: IProps): React.ReactElement {
|
2021-09-05 01:09:30 +02:00
|
|
|
const setRerender = useState(false)[1];
|
2021-09-20 23:26:47 +02:00
|
|
|
function rerender(): void {
|
|
|
|
setRerender((old) => !old);
|
|
|
|
}
|
|
|
|
useEffect(() => {
|
2021-09-25 19:31:42 +02:00
|
|
|
const id = setInterval(rerender, 200);
|
2021-09-20 23:26:47 +02:00
|
|
|
return () => clearInterval(id);
|
|
|
|
}, []);
|
2021-09-17 08:04:44 +02:00
|
|
|
function openFaction(faction: Faction): void {
|
|
|
|
props.router.toFaction(faction);
|
2021-09-05 01:09:30 +02:00
|
|
|
}
|
2021-08-15 22:20:10 +02:00
|
|
|
|
2021-09-20 07:18:20 +02:00
|
|
|
function acceptInvitation(event: React.MouseEvent<HTMLButtonElement, MouseEvent>, faction: string): void {
|
2021-09-05 01:09:30 +02:00
|
|
|
if (!event.isTrusted) return;
|
|
|
|
joinFaction(Factions[faction]);
|
|
|
|
setRerender((x) => !x);
|
|
|
|
}
|
2021-08-15 22:20:10 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
return (
|
|
|
|
<>
|
2021-09-25 09:09:27 +02:00
|
|
|
<Typography variant="h4">Factions</Typography>
|
2021-09-20 07:18:20 +02:00
|
|
|
<Typography>Lists all factions you have joined</Typography>
|
2021-09-05 01:09:30 +02:00
|
|
|
<br />
|
2021-09-20 07:18:20 +02:00
|
|
|
<Box display="flex" flexDirection="column">
|
2021-09-05 01:09:30 +02:00
|
|
|
{props.player.factions.map((faction: string) => (
|
2021-09-20 07:18:20 +02:00
|
|
|
<Link key={faction} variant="h6" onClick={() => openFaction(Factions[faction])}>
|
|
|
|
{faction}
|
|
|
|
</Link>
|
2021-09-05 01:09:30 +02:00
|
|
|
))}
|
2021-09-20 07:18:20 +02:00
|
|
|
</Box>
|
2021-09-05 01:09:30 +02:00
|
|
|
<br />
|
2021-09-20 07:18:20 +02:00
|
|
|
{props.player.factionInvitations.length > 0 && (
|
|
|
|
<>
|
|
|
|
<Typography variant="h5" color="primary">
|
|
|
|
Outstanding Faction Invitations
|
|
|
|
</Typography>
|
|
|
|
<Typography>
|
|
|
|
Lists factions you have been invited to. You can accept these faction invitations at any time.
|
|
|
|
</Typography>
|
|
|
|
<Table size="small" padding="none">
|
|
|
|
<TableBody>
|
|
|
|
{props.player.factionInvitations.map((faction: string) => (
|
|
|
|
<TableRow key={faction}>
|
|
|
|
<TableCell>
|
|
|
|
<Typography noWrap>{faction}</Typography>
|
|
|
|
</TableCell>
|
|
|
|
<TableCell align="right">
|
|
|
|
<Button onClick={(e) => acceptInvitation(e, faction)}>Join!</Button>
|
|
|
|
</TableCell>
|
|
|
|
</TableRow>
|
|
|
|
))}
|
|
|
|
</TableBody>
|
|
|
|
</Table>
|
|
|
|
</>
|
|
|
|
)}
|
2021-09-05 01:09:30 +02:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|