diff --git a/src/components/features/characters/InitiativeStatusChip.tsx b/src/components/features/characters/InitiativeStatusChip/InitiativeStatusChip.tsx similarity index 79% rename from src/components/features/characters/InitiativeStatusChip.tsx rename to src/components/features/characters/InitiativeStatusChip/InitiativeStatusChip.tsx index 0f846f50..5daefe31 100644 --- a/src/components/features/characters/InitiativeStatusChip.tsx +++ b/src/components/features/characters/InitiativeStatusChip/InitiativeStatusChip.tsx @@ -2,6 +2,7 @@ import { ChipProps, Chip, Box, Menu, MenuItem } from "@mui/material"; import { INITIATIVE_STATUS } from "types/Character.type"; import DropdownIcon from "@mui/icons-material/ExpandMore"; import { useState } from "react"; +import { useInitiativeStatusText } from "./useInitiativeStatusText"; export interface InitiativeStatusChipProps { status: INITIATIVE_STATUS; @@ -26,17 +27,6 @@ const getStatusProps = (status: INITIATIVE_STATUS): Partial => { } }; -const getStatusText = (status: INITIATIVE_STATUS): string => { - switch (status) { - case INITIATIVE_STATUS.HAS_INITIATIVE: - return "Has Initiative"; - case INITIATIVE_STATUS.DOES_NOT_HAVE_INITIATIVE: - return "Does not have Initiative"; - case INITIATIVE_STATUS.OUT_OF_COMBAT: - return "Out of Combat"; - } -}; - export function InitiativeStatusChip(props: InitiativeStatusChipProps) { const { status, handleStatusChange, variant } = props; @@ -47,13 +37,15 @@ export function InitiativeStatusChip(props: InitiativeStatusChipProps) { setMenuParent(undefined); }; + const statusLabels = useInitiativeStatusText(); + return ( - {getStatusText(status)} + {statusLabels[status]} {handleStatusChange && } } @@ -73,19 +65,19 @@ export function InitiativeStatusChip(props: InitiativeStatusChipProps) { onStatusChangeClick(INITIATIVE_STATUS.HAS_INITIATIVE)} > - {getStatusText(INITIATIVE_STATUS.HAS_INITIATIVE)} + {statusLabels[INITIATIVE_STATUS.HAS_INITIATIVE]} onStatusChangeClick(INITIATIVE_STATUS.DOES_NOT_HAVE_INITIATIVE) } > - {getStatusText(INITIATIVE_STATUS.DOES_NOT_HAVE_INITIATIVE)} + {statusLabels[INITIATIVE_STATUS.DOES_NOT_HAVE_INITIATIVE]} onStatusChangeClick(INITIATIVE_STATUS.OUT_OF_COMBAT)} > - {getStatusText(INITIATIVE_STATUS.OUT_OF_COMBAT)} + {statusLabels[INITIATIVE_STATUS.OUT_OF_COMBAT]} diff --git a/src/components/features/characters/InitiativeStatusChip/index.ts b/src/components/features/characters/InitiativeStatusChip/index.ts new file mode 100644 index 00000000..4d728f79 --- /dev/null +++ b/src/components/features/characters/InitiativeStatusChip/index.ts @@ -0,0 +1 @@ +export * from "./InitiativeStatusChip"; diff --git a/src/components/features/characters/InitiativeStatusChip/useInitiativeStatusText.ts b/src/components/features/characters/InitiativeStatusChip/useInitiativeStatusText.ts new file mode 100644 index 00000000..1a2c3ac6 --- /dev/null +++ b/src/components/features/characters/InitiativeStatusChip/useInitiativeStatusText.ts @@ -0,0 +1,20 @@ +import { useGameSystemValue } from "hooks/useGameSystemValue"; +import { INITIATIVE_STATUS } from "types/Character.type"; +import { GAME_SYSTEMS } from "types/GameSystems.type"; + +export function useInitiativeStatusText(shortVariants?: boolean) { + return useGameSystemValue({ + [GAME_SYSTEMS.IRONSWORN]: { + [INITIATIVE_STATUS.HAS_INITIATIVE]: "Has Initiative", + [INITIATIVE_STATUS.DOES_NOT_HAVE_INITIATIVE]: shortVariants + ? "No Initiative" + : "Does not have Initiative", + [INITIATIVE_STATUS.OUT_OF_COMBAT]: "Out of Combat", + }, + [GAME_SYSTEMS.STARFORGED]: { + [INITIATIVE_STATUS.HAS_INITIATIVE]: "In Control", + [INITIATIVE_STATUS.DOES_NOT_HAVE_INITIATIVE]: "In a Bad Spot", + [INITIATIVE_STATUS.OUT_OF_COMBAT]: "Out of Combat", + }, + }); +} diff --git a/src/components/features/characters/PortraitAvatar/PortraitAvatarDisplay.tsx b/src/components/features/characters/PortraitAvatar/PortraitAvatarDisplay.tsx index 36c1d5e5..690220d4 100644 --- a/src/components/features/characters/PortraitAvatar/PortraitAvatarDisplay.tsx +++ b/src/components/features/characters/PortraitAvatar/PortraitAvatarDisplay.tsx @@ -117,7 +117,12 @@ export function PortraitAvatarDisplay(props: PortraitAvatarDisplayProps) { /> ) : !loading ? ( name ? ( - {name[0]} + + {name[0]} + ) : ( ) diff --git a/src/pages/Character/CharacterCardPage/CharacterCardPage.tsx b/src/pages/Character/CharacterCardPage/CharacterCardPage.tsx index 11fbdaa9..d60577d2 100644 --- a/src/pages/Character/CharacterCardPage/CharacterCardPage.tsx +++ b/src/pages/Character/CharacterCardPage/CharacterCardPage.tsx @@ -9,9 +9,8 @@ import { Unsubscribe } from "firebase/firestore"; import { listenToMostRecentCharacterLog } from "api-calls/game-log/listenToMostRecentCharacterLog"; import { RollCard } from "./components/RollCard"; import { INITIATIVE_STATUS } from "types/Character.type"; -import InitiativeIcon from "@mui/icons-material/Shield"; -import NoInitiativeIcon from "@mui/icons-material/RemoveModerator"; import { useSearchParams } from "react-router-dom"; +import { useInitiativeStatusText } from "components/features/characters/InitiativeStatusChip/useInitiativeStatusText"; export function CharacterCardPage() { const [params] = useSearchParams(); @@ -57,6 +56,8 @@ export function CharacterCardPage() { }; }, [latestRoll]); + const statusLabels = useInitiativeStatusText(true); + if (!character) return null; const userId = character.uid; @@ -142,27 +143,40 @@ export function CharacterCardPage() { - + ({ + sx={{ width: 50, height: 50, - color: theme.palette.primary.main, - })} + color: "#f472b6", + }} /> - + {character.health} - + ({ + sx={{ width: 50, height: 50, - color: theme.palette.info.light, - })} + color: "#38bdf8", + }} /> - + {character.spirit} @@ -177,7 +191,6 @@ export function CharacterCardPage() { py={0.5} pl={1} pr={2} - ml={-1} mt={1} color={(theme) => character.initiativeStatus === @@ -193,24 +206,8 @@ export function CharacterCardPage() { } borderRadius={(theme) => `${theme.shape.borderRadius}px`} > - {character.initiativeStatus === - INITIATIVE_STATUS.HAS_INITIATIVE ? ( - - ) : ( - - )} - {getStatusText(character.initiativeStatus)} + {statusLabels[character.initiativeStatus]} )} @@ -260,14 +257,3 @@ export function CharacterCardPage() { ); } - -const getStatusText = (status: INITIATIVE_STATUS): string => { - switch (status) { - case INITIATIVE_STATUS.HAS_INITIATIVE: - return "Initiative"; - case INITIATIVE_STATUS.DOES_NOT_HAVE_INITIATIVE: - return "No Initiative"; - case INITIATIVE_STATUS.OUT_OF_COMBAT: - return "Out of Combat"; - } -};