Merge pull request #306 from scottbenton/feat/move-oracles-to-moves

Feat/move oracles to moves

CHANGELOG.MD

@@ -7,6 +7,9 @@
 ### Changes
 
 - Added ability to remove lore, location, and NPC images by making them fullscreen and clicking the delete button
+- Moved Oracle tab to be with moves on desktop devices
+- Moved oracle pins to be in the oracle dialog to save space
+- Removed "Ask the Oracle" oracles from the oracle list, since they are pinned up top
 
 ### Accessibility
 

src/api-calls/campaign/listenToUsersCampaigns.ts

@@ -25,7 +25,9 @@ export function listenToUsersCampaigns(
           dataHandler.onDocChange(change.doc.id, change.doc.data());
         }
       });
-      dataHandler.onLoaded();
+      if (snapshot.empty) {
+        dataHandler.onLoaded();
+      }
     },
     (error) => onError(error)
   );

src/components/features/charactersAndCampaigns/MovesSection/MovesSection.tsx

@@ -11,10 +11,7 @@ export function MovesSection() {
   const { openDialog } = useLinkedDialog();
 
   return (
-    <Card
-      variant={"outlined"}
-      sx={{ height: "100%", display: "flex", flexDirection: "column" }}
-    >
+    <>
       <Input
         fullWidth
         startAdornment={
@@ -47,6 +44,6 @@ export function MovesSection() {
           />
         ))}
       </Box>
-    </Card>
+    </>
   );
 }

src/components/features/charactersAndCampaigns/OracleSection/AskTheOracleButtons.tsx

@@ -0,0 +1,88 @@
+import { Box, Button } from "@mui/material";
+import { useGameSystemValue } from "hooks/useGameSystemValue";
+import { GAME_SYSTEMS, GameSystemChooser } from "types/GameSystems.type";
+import { useRoller } from "providers/DieRollProvider";
+
+export enum ORACLE_KEYS {
+  ALMOST_CERTAIN = "almostCertain",
+  LIKELY = "likely",
+  FIFTY_FIFTY = "fiftyFifty",
+  UNLIKELY = "unlikely",
+  SMALL_CHANCE = "smallChance",
+}
+
+const oracleOrder = [
+  ORACLE_KEYS.SMALL_CHANCE,
+  ORACLE_KEYS.UNLIKELY,
+  ORACLE_KEYS.FIFTY_FIFTY,
+  ORACLE_KEYS.LIKELY,
+  ORACLE_KEYS.ALMOST_CERTAIN,
+];
+
+const askTheOracleOracles: GameSystemChooser<{ [key in ORACLE_KEYS]: string }> =
+  {
+    [GAME_SYSTEMS.IRONSWORN]: {
+      [ORACLE_KEYS.ALMOST_CERTAIN]:
+        "ironsworn/oracles/moves/ask_the_oracle/almost_certain",
+      [ORACLE_KEYS.LIKELY]: "ironsworn/oracles/moves/ask_the_oracle/likely",
+      [ORACLE_KEYS.FIFTY_FIFTY]: "ironsworn/oracles/moves/ask_the_oracle/50_50",
+      [ORACLE_KEYS.UNLIKELY]: "ironsworn/oracles/moves/ask_the_oracle/unlikely",
+      [ORACLE_KEYS.SMALL_CHANCE]:
+        "ironsworn/oracles/moves/ask_the_oracle/small_chance",
+    },
+    [GAME_SYSTEMS.STARFORGED]: {
+      [ORACLE_KEYS.ALMOST_CERTAIN]:
+        "starforged/oracles/moves/ask_the_oracle/almost_certain",
+      [ORACLE_KEYS.LIKELY]: "starforged/oracles/moves/ask_the_oracle/likely",
+      [ORACLE_KEYS.FIFTY_FIFTY]:
+        "starforged/oracles/moves/ask_the_oracle/fifty-fifty",
+      [ORACLE_KEYS.UNLIKELY]:
+        "starforged/oracles/moves/ask_the_oracle/unlikely",
+      [ORACLE_KEYS.SMALL_CHANCE]:
+        "starforged/oracles/moves/ask_the_oracle/small_chance",
+    },
+  };
+
+const askTheOracleLabels: { [key in ORACLE_KEYS]: string } = {
+  [ORACLE_KEYS.ALMOST_CERTAIN]: "Almost Certain",
+  [ORACLE_KEYS.LIKELY]: "Likely",
+  [ORACLE_KEYS.FIFTY_FIFTY]: "50/50",
+  [ORACLE_KEYS.UNLIKELY]: "Unlikely",
+  [ORACLE_KEYS.SMALL_CHANCE]: "Small Chance",
+};
+
+export function AskTheOracleButtons() {
+  const { rollOracleTable } = useRoller();
+  const oracles = useGameSystemValue(askTheOracleOracles);
+
+  return (
+    <Box
+      display={"flex"}
+      justifyContent={"center"}
+      // border={(theme) => `1px solid ${theme.palette.divider}`}
+    >
+      {oracleOrder.map((oracleKey) => (
+        <Button
+          key={oracleKey}
+          size={"small"}
+          color={"inherit"}
+          sx={(theme) => ({
+            fontFamily: theme.fontFamilyTitle,
+            lineHeight: 1,
+            "&:hover": {
+              bgcolor: theme.palette.darkGrey.main,
+            },
+            minHeight: 32,
+            minWidth: 0,
+            px: 1,
+          })}
+          onClick={() =>
+            rollOracleTable(oracles[oracleKey as ORACLE_KEYS], true, true)
+          }
+        >
+          {askTheOracleLabels[oracleKey as ORACLE_KEYS]}
+        </Button>
+      ))}
+    </Box>
+  );
+}

src/components/features/charactersAndCampaigns/OracleSection/OracleCategory.tsx

@@ -3,7 +3,7 @@ import { useRoller } from "providers/DieRollProvider";
 import { OracleListItem } from "./OracleListItem";
 import { OracleSet } from "dataforged";
 import { useLinkedDialog } from "providers/LinkedDialogProvider";
-import { hiddenOracleIds } from "data/oracles";
+import { hiddenOracleCategoryIds } from "data/oracles";
 
 export interface OracleCategoryProps {
   prefix?: string;
@@ -23,6 +23,10 @@ export function OracleCategory(props: OracleCategoryProps) {
 
   const sampleNames = category["Sample Names" as "Sample names"];
 
+  if (hiddenOracleCategoryIds[category.$id]) {
+    return null;
+  }
+
   return (
     <>
       <List disablePadding>
@@ -56,7 +60,7 @@ export function OracleCategory(props: OracleCategoryProps) {
           )}
         {Object.keys(category.Tables ?? {}).map((oracleId, index) => {
           const oracle = category.Tables?.[oracleId];
-          if (hiddenOracleIds[oracleId] || !oracle) return null;
+          if (!oracle) return null;
           return (
             <OracleListItem
               id={oracle.$id}

src/components/features/charactersAndCampaigns/OracleSection/OracleListItem.tsx

@@ -38,40 +38,43 @@ export function OracleListItem(props: OracleListItemProps) {
       sx={(theme) => ({
         "&:nth-of-type(odd)": {
           backgroundColor: theme.palette.action.hover,
-          "&:hover": {
-            backgroundColor: theme.palette.action.selected,
+        },
+        "& #open-table": {
+          display: isTouchDevice ? "inline-flex" : "none",
+        },
+        "&:hover": {
+          backgroundColor: theme.palette.action.selected,
+          "& #open-table": {
+            display: "inline-flex",
           },
         },
+        "&:focus-visible #open-table": {
+          display: "inline-flex",
+        },
       })}
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
       secondaryAction={
-        <>
-          {(isHovering || isTouchDevice) && (
-            <IconButton onClick={() => onOpenClick()}>
-              <TableIcon />
-            </IconButton>
-          )}
-
-          {(isHovering || isTouchDevice || pinned) && (
-            <IconButton
-              color={pinned ? "primary" : "default"}
-              onClick={() => updatePinnedOracle(id, !pinned).catch(() => {})}
-              disabled={loading}
-            >
-              <PinIcon />
-            </IconButton>
-          )}
-        </>
+        <IconButton
+          id={"open-table"}
+          onClick={() => onOpenClick()}
+          sx={{
+            "&:focus-visible": {
+              display: "inline-flex",
+            },
+            "&:hover": {
+              display: "inline-flex",
+            },
+          }}
+        >
+          <TableIcon />
+        </IconButton>
       }
     >
       <ListItemButton
         onClick={() => onRollClick()}
         sx={{ pr: "96px!important" }}
       >
-        <ListItemIcon>
-          <D10Icon />
-        </ListItemIcon>
         <ListItemText primary={text} />
       </ListItemButton>
     </ListItem>

src/components/features/charactersAndCampaigns/OracleSection/OracleSection.tsx

@@ -1,90 +1,30 @@
-import { Box, Button, Input, InputAdornment } from "@mui/material";
-import { useRoller } from "providers/DieRollProvider";
+import { Box, Input, InputAdornment, Typography } from "@mui/material";
 import { OracleCategory } from "./OracleCategory";
 import SearchIcon from "@mui/icons-material/Search";
 import { useFilterOracles } from "./useFilterOracles";
 import { useStore } from "stores/store";
-import { GAME_SYSTEMS, GameSystemChooser } from "types/GameSystems.type";
-import { useGameSystemValue } from "hooks/useGameSystemValue";
-
-type oracleKeys =
-  | "almostCertain"
-  | "likely"
-  | "fiftyFifty"
-  | "unlikely"
-  | "smallChance";
-
-const askTheOracleOracles: GameSystemChooser<{ [key in oracleKeys]: string }> =
-  {
-    [GAME_SYSTEMS.IRONSWORN]: {
-      almostCertain: "ironsworn/oracles/moves/ask_the_oracle/almost_certain",
-      likely: "ironsworn/oracles/moves/ask_the_oracle/likely",
-      fiftyFifty: "ironsworn/oracles/moves/ask_the_oracle/50_50",
-      unlikely: "ironsworn/oracles/moves/ask_the_oracle/unlikely",
-      smallChance: "ironsworn/oracles/moves/ask_the_oracle/small_chance",
-    },
-    [GAME_SYSTEMS.STARFORGED]: {
-      almostCertain: "starforged/oracles/moves/ask_the_oracle/almost_certain",
-      likely: "starforged/oracles/moves/ask_the_oracle/likely",
-      fiftyFifty: "starforged/oracles/moves/ask_the_oracle/fifty-fifty",
-      unlikely: "starforged/oracles/moves/ask_the_oracle/unlikely",
-      smallChance: "starforged/oracles/moves/ask_the_oracle/small_chance",
-    },
-  };
+import { AskTheOracleButtons } from "./AskTheOracleButtons";
 
 export function OracleSection() {
-  const { rollOracleTable } = useRoller();
-
   const pinnedOracles = useStore((store) => store.settings.pinnedOraclesIds);
   const { search, filteredOracles, setSearch } = useFilterOracles();
 
-  const askTheOracle = useGameSystemValue(askTheOracleOracles);
-
   return (
     <>
-      <Box display={"flex"} flexWrap={"wrap"} p={1}>
-        <Button
-          sx={{ mx: 0.5, my: 0.5 }}
-          variant={"outlined"}
-          color={"inherit"}
-          onClick={() => rollOracleTable(askTheOracle.smallChance, true, true)}
-        >
-          Small Chance
-        </Button>
-        <Button
-          sx={{ mx: 0.5, my: 0.5 }}
-          variant={"outlined"}
-          color={"inherit"}
-          onClick={() => rollOracleTable(askTheOracle.unlikely, true, true)}
+      <Box
+        color={(theme) => theme.palette.darkGrey.contrastText}
+        bgcolor={(theme) => theme.palette.darkGrey.dark}
+        borderBottom={(theme) => `1px solid ${theme.palette.darkGrey.dark}`}
+      >
+        <Typography
+          variant={"body2"}
+          component={"div"}
+          textAlign={"center"}
+          fontFamily={(theme) => theme.fontFamilyTitle}
         >
-          Unlikely
-        </Button>
-        <Button
-          sx={{ mx: 0.5, my: 0.5 }}
-          variant={"outlined"}
-          color={"inherit"}
-          onClick={() => rollOracleTable(askTheOracle.fiftyFifty, true, true)}
-        >
-          50/50
-        </Button>
-        <Button
-          sx={{ mx: 0.5, my: 0.5 }}
-          variant={"outlined"}
-          color={"inherit"}
-          onClick={() => rollOracleTable(askTheOracle.likely, true, true)}
-        >
-          Likely
-        </Button>
-        <Button
-          sx={{ mx: 0.5, my: 0.5 }}
-          variant={"outlined"}
-          color={"inherit"}
-          onClick={() =>
-            rollOracleTable(askTheOracle.almostCertain, true, true)
-          }
-        >
-          Almost Certain
-        </Button>
+          Ask the Oracle
+        </Typography>
+        <AskTheOracleButtons />
       </Box>
 
       <Input
@@ -106,13 +46,15 @@ export function OracleSection() {
           borderBottomColor: theme.palette.darkGrey.light,
         })}
       />
-      {filteredOracles.map((category) => (
-        <OracleCategory
-          category={category}
-          key={category.Title.Standard}
-          pinnedCategories={pinnedOracles}
-        />
-      ))}
+      <Box sx={{ overflow: "auto", flexGrow: 1 }}>
+        {filteredOracles.map((category, index) => (
+          <OracleCategory
+            category={category}
+            key={index}
+            pinnedCategories={pinnedOracles}
+          />
+        ))}
+      </Box>
     </>
   );
 }

src/components/features/charactersAndCampaigns/OracleSection/useFilterOracles.ts

@@ -53,10 +53,9 @@ export function useFilterOracles() {
             },
           }
         : undefined;
-
     return pinnedOracleSection
       ? [pinnedOracleSection, ...orderedCategories]
-      : orderedCategories;
+      : [...orderedCategories];
   }, [pinnedOracles, appName, allCustomOracleMap]);
 
   const [filteredOracles, setFilteredOracles] = useState(combinedOracles);

src/components/features/worlds/NPCSection/NPCList.tsx

@@ -28,7 +28,7 @@ export function NPCList(props: NPCListProps) {
   return (
     <Grid container sx={{ p: 2 }} spacing={2}>
       {filteredNPCIds.map((npcId) => (
-        <Grid item xs={12} sm={6} md={4} key={npcId}>
+        <Grid item xs={12} sm={6} lg={4} key={npcId}>
           <NPCItem
             npc={npcs[npcId]}
             locations={locations}