diff --git a/src/Faction/ui/FactionsRoot.tsx b/src/Faction/ui/FactionsRoot.tsx index e47f53d74..fa7029174 100644 --- a/src/Faction/ui/FactionsRoot.tsx +++ b/src/Faction/ui/FactionsRoot.tsx @@ -1,24 +1,194 @@ +import { Explore, Info, LastPage, LocalPolice, NewReleases, Report, SportsMma } from "@mui/icons-material"; +import { Box, Button, Container, Paper, Tooltip, Typography, useTheme } from "@mui/material"; import React, { useEffect, useState } from "react"; - -import { Box, Button, Container, Paper, TableBody, TableRow, Typography } from "@mui/material"; - import { IPlayer } from "../../PersonObjects/IPlayer"; -import { Table, TableCell } from "../../ui/React/Table"; +import { Settings } from "../../Settings/Settings"; +import { numeralWrapper } from "../../ui/numeralFormat"; import { IRouter } from "../../ui/Router"; - -import { Faction } from "../Faction"; -import { joinFaction, getFactionAugmentationsFiltered } from "../FactionHelpers"; -import { Factions } from "../Factions"; import { FactionNames } from "../data/FactionNames"; +import { Faction } from "../Faction"; +import { getFactionAugmentationsFiltered, joinFaction } from "../FactionHelpers"; +import { Factions } from "../Factions"; export const InvitationsSeen: string[] = []; +const getAugsLeft = (faction: Faction, player: IPlayer): number => { + const augs = getFactionAugmentationsFiltered(player, faction); + + return augs.filter((augmentation: string) => !player.hasAugmentation(augmentation)).length; +}; + +interface IWorkTypeProps { + faction: Faction; +} + +const fontSize = "small"; +const marginRight = 0.5; + +const WorkTypesOffered = (props: IWorkTypeProps): React.ReactElement => { + const info = props.faction.getInfo(); + + return ( + <> + {info.offerFieldWork && ( + + + + )} + {info.offerHackingWork && ( + + + + )} + {info.offerSecurityWork && ( + + + + )} + + ); +}; + +interface IFactionProps { + player: IPlayer; + router: IRouter; + faction: Faction; + + joined: boolean; + + rerender: () => void; +} + +const FactionElement = (props: IFactionProps): React.ReactElement => { + const facInfo = props.faction.getInfo(); + + function openFaction(faction: Faction): void { + props.router.toFaction(faction); + } + + function openFactionAugPage(faction: Faction): void { + props.router.toFaction(faction, true); + } + + function acceptInvitation(event: React.MouseEvent, faction: string): void { + if (!event.isTrusted) return; + joinFaction(Factions[faction]); + props.rerender(); + } + + return ( + + + {props.joined ? ( + + + + + ) : ( + + )} + + + + + {props.faction.name} + + + + {props.player.hasGangWith(props.faction.name) && ( + + + + )} + + {facInfo.special && ( + + + + )} + + {!props.joined && facInfo.enemies.length > 0 && ( + + This Faction is enemies with: +
    + {facInfo.enemies.map((enemy) => ( +
  • {enemy}
    • + ))} +
+ Joining this Faction will prevent you from joining its enemies + + } + > + + + )} + + + + + {!props.player.hasGangWith(props.faction.name) && } + + {props.joined && ( + + {getAugsLeft(props.faction, props.player)} Augmentations left + + )} + + + + + {props.joined && ( + + + {numeralWrapper.formatFavor(props.faction.favor)} favor + + + {numeralWrapper.formatReputation(props.faction.playerReputation)} rep + + + )} + + ); +}; + interface IProps { player: IPlayer; router: IRouter; } export function FactionsRoot(props: IProps): React.ReactElement { + const theme = useTheme(); const setRerender = useState(false)[1]; function rerender(): void { setRerender((old) => !old); @@ -35,99 +205,90 @@ export function FactionsRoot(props: IProps): React.ReactElement { }); }, []); - function openFaction(faction: Faction): void { - props.router.toFaction(faction); - } - - function openFactionAugPage(faction: Faction): void { - props.router.toFaction(faction, true); - } - - function acceptInvitation(event: React.MouseEvent, faction: string): void { - if (!event.isTrusted) return; - joinFaction(Factions[faction]); - setRerender((x) => !x); - } - - const getAugsLeft = (faction: Faction, player: IPlayer): number => { - const augs = getFactionAugmentationsFiltered(player, faction); - - return augs.filter((augmentation: string) => !player.hasAugmentation(augmentation)).length; - }; - const allFactions = Object.values(FactionNames).map((faction) => faction as string); - const allJoinedFactions = props.player.factions.slice(0); + const allJoinedFactions = [...props.player.factions]; allJoinedFactions.sort((a, b) => allFactions.indexOf(a) - allFactions.indexOf(b)); + const invitations = props.player.factionInvitations; return ( - - Factions - - Throughout the game you may receive invitations from factions. There are many different factions, and each - faction has different criteria for determining its potential members. Joining a faction and furthering its cause - is crucial to progressing in the game and unlocking endgame content. + + + Factions + + Throughout the game you may receive invitations from factions. There are many different factions, and each + faction has different criteria for determining its potential members. Joining a faction and furthering its + cause is crucial to progressing in the game and unlocking endgame content. + + } + > + + - - Factions you have joined: - - {(allJoinedFactions.length > 0 && ( - - - - {allJoinedFactions.map((faction: string) => ( - - - - {faction} - - - - - - - - - - - - - - ))} - -
- - )) || You haven't joined any factions.} - - Outstanding Faction Invitations - - - Factions you have been invited to. You can accept these faction invitations at any time: - - {(props.player.factionInvitations.length > 0 && ( - - - - {props.player.factionInvitations.map((faction: string) => ( - - - - {faction} - - - - - - - - - ))} - -
- - )) || You have no outstanding faction invites.} + 0 ? "1fr " : "") + "2fr", + [theme.breakpoints.down("lg")]: { gridTemplateColumns: "1fr", "& > span:nth-child(1)": { order: 1 } }, + gridTemplateRows: "minmax(0, 1fr)", + "& > span > .MuiBox-root": { + display: "grid", + gridAutoRows: "70px", + gap: 1, + }, + }} + > + {invitations.length > 0 && ( + + + Faction Invitations + + + {invitations.map((facName) => { + if (!Factions.hasOwnProperty(facName)) return null; + return ( + + ); + })} + + + )} + + + + Your Factions + + + {allJoinedFactions.length > 0 ? ( + allJoinedFactions.map((facName) => { + if (!Factions.hasOwnProperty(facName)) return null; + return ( + + ); + }) + ) : ( + You have not yet joined any Factions. + )} + + + ); }