2021-09-05 01:09:30 +02:00
|
|
|
import React, { useState } from "react";
|
2021-08-15 22:20:10 +02:00
|
|
|
import { IPlayer } from "../../PersonObjects/IPlayer";
|
|
|
|
import { IEngine } from "../../IEngine";
|
|
|
|
import { Factions } from "../Factions";
|
|
|
|
import { displayFactionContent, joinFaction } from "../FactionHelpers";
|
|
|
|
|
|
|
|
interface IProps {
|
2021-09-05 01:09:30 +02:00
|
|
|
player: IPlayer;
|
|
|
|
engine: IEngine;
|
2021-08-15 22:20:10 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
export function FactionList(props: IProps): React.ReactElement {
|
2021-09-05 01:09:30 +02:00
|
|
|
const setRerender = useState(false)[1];
|
2021-08-15 22:20:10 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
function openFaction(faction: string): void {
|
|
|
|
props.engine.loadFactionContent();
|
|
|
|
displayFactionContent(faction);
|
|
|
|
}
|
2021-08-15 22:20:10 +02:00
|
|
|
|
2021-09-09 05:47:34 +02:00
|
|
|
function acceptInvitation(event: React.MouseEvent<HTMLElement>, 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 (
|
|
|
|
<>
|
|
|
|
<h1>Factions</h1>
|
|
|
|
<p>Lists all factions you have joined</p>
|
|
|
|
<br />
|
|
|
|
<ul>
|
|
|
|
{props.player.factions.map((faction: string) => (
|
|
|
|
<li key={faction}>
|
|
|
|
<a
|
|
|
|
className="a-link-button"
|
|
|
|
onClick={() => openFaction(faction)}
|
|
|
|
style={{ padding: "4px", margin: "4px", display: "inline-block" }}
|
|
|
|
>
|
|
|
|
{faction}
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
<br />
|
|
|
|
<h1>Outstanding Faction Invitations</h1>
|
|
|
|
<p style={{ width: "70%" }}>
|
2021-09-09 05:47:34 +02:00
|
|
|
Lists factions you have been invited to. You can accept these faction invitations at any time.
|
2021-09-05 01:09:30 +02:00
|
|
|
</p>
|
|
|
|
<ul>
|
|
|
|
{props.player.factionInvitations.map((faction: string) => (
|
|
|
|
<li key={faction} style={{ padding: "6px", margin: "6px" }}>
|
2021-09-09 05:47:34 +02:00
|
|
|
<p style={{ display: "inline", margin: "4px", padding: "4px" }}>{faction}</p>
|
2021-09-05 01:09:30 +02:00
|
|
|
<a
|
|
|
|
className="a-link-button"
|
|
|
|
onClick={(e) => acceptInvitation(e, faction)}
|
|
|
|
style={{ display: "inline", margin: "4px", padding: "4px" }}
|
|
|
|
>
|
|
|
|
Accept Faction Invitation
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|