fix(obs-card): Fixed OBS Card color & styling for starforged

scottbenton · Mar 21, 2024 · a23a33b · a23a33b
1 parent 4bb4765
commit a23a33b
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 57 deletions.
diff --git a/...tures/characters/InitiativeStatusChip.tsx → ...iativeStatusChip/InitiativeStatusChip.tsx b/...tures/characters/InitiativeStatusChip.tsx → ...iativeStatusChip/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<ChipProps> => {
   }
 };
 
-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 (
     <span>
       <Chip
         size={"small"}
         label={
           <Box display={"flex"} alignItems={"center"}>
-            {getStatusText(status)}
+            {statusLabels[status]}
             {handleStatusChange && <DropdownIcon sx={{ ml: 1 }} />}
           </Box>
         }
@@ -73,19 +65,19 @@ export function InitiativeStatusChip(props: InitiativeStatusChipProps) {
         <MenuItem
           onClick={() => onStatusChangeClick(INITIATIVE_STATUS.HAS_INITIATIVE)}
         >
-          {getStatusText(INITIATIVE_STATUS.HAS_INITIATIVE)}
+          {statusLabels[INITIATIVE_STATUS.HAS_INITIATIVE]}
         </MenuItem>
         <MenuItem
           onClick={() =>
             onStatusChangeClick(INITIATIVE_STATUS.DOES_NOT_HAVE_INITIATIVE)
           }
         >
-          {getStatusText(INITIATIVE_STATUS.DOES_NOT_HAVE_INITIATIVE)}
+          {statusLabels[INITIATIVE_STATUS.DOES_NOT_HAVE_INITIATIVE]}
         </MenuItem>
         <MenuItem
           onClick={() => onStatusChangeClick(INITIATIVE_STATUS.OUT_OF_COMBAT)}
         >
-          {getStatusText(INITIATIVE_STATUS.OUT_OF_COMBAT)}
+          {statusLabels[INITIATIVE_STATUS.OUT_OF_COMBAT]}
         </MenuItem>
       </Menu>
     </span>

diff --git a/src/components/features/characters/InitiativeStatusChip/index.ts 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
@@ -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
@@ -117,7 +117,12 @@ export function PortraitAvatarDisplay(props: PortraitAvatarDisplayProps) {
         />
       ) : !loading ? (
         name ? (
-          <Typography variant={variants[size]}>{name[0]}</Typography>
+          <Typography
+            variant={variants[size]}
+            fontWeight={size === "huge" ? 600 : undefined}
+          >
+            {name[0]}
+          </Typography>
         ) : (
           <BackgroundIcon />
         )

diff --git 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() {
                 </Typography>
               </Box>
               <Box display={"flex"}>
-                <Box display={"flex"} alignItems={"center"}>
+                <Box
+                  display={"flex"}
+                  alignItems={"center"}
+                  bgcolor={"grey.900"}
+                  borderRadius={1}
+                  p={1}
+                >
                   <HealthIcon
-                    sx={(theme) => ({
+                    sx={{
                       width: 50,
                       height: 50,
-                      color: theme.palette.primary.main,
-                    })}
+                      color: "#f472b6",
+                    }}
                   />
-                  <Typography variant={"h3"} ml={1}>
+                  <Typography variant={"h3"} ml={1} width={36}>
                     {character.health}
                   </Typography>
                 </Box>
-                <Box display={"flex"} alignItems={"center"} ml={4}>
+                <Box
+                  display={"flex"}
+                  alignItems={"center"}
+                  ml={2}
+                  bgcolor={"grey.900"}
+                  borderRadius={1}
+                  p={1}
+                >
                   <SpiritIcon
-                    sx={(theme) => ({
+                    sx={{
                       width: 50,
                       height: 50,
-                      color: theme.palette.info.light,
-                    })}
+                      color: "#38bdf8",
+                    }}
                   />
-                  <Typography variant={"h3"} ml={1}>
+                  <Typography variant={"h3"} ml={1} width={36}>
                     {character.spirit}
                   </Typography>
                 </Box>
@@ -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 ? (
-                      <InitiativeIcon
-                        sx={{
-                          width: 50,
-                          height: 50,
-                        }}
-                      />
-                    ) : (
-                      <NoInitiativeIcon
-                        sx={{
-                          width: 50,
-                          height: 50,
-                        }}
-                      />
-                    )}
                     <Typography variant={"h4"} ml={1}>
-                      {getStatusText(character.initiativeStatus)}
+                      {statusLabels[character.initiativeStatus]}
                     </Typography>
                   </Box>
                 )}
@@ -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";
-  }
-};