Merge pull request #315 from scottbenton/feat/redesign-moves-and-oracles

Feat/redesign moves and oracles

CHANGELOG.MD

@@ -14,6 +14,7 @@
 - Removed "Ask the Oracle" oracles from the oracle list, since they are pinned up top
 - Added a test mobile view for moves and oracles
 - Redesigned stats and tracks sections on mobile
+- Redesigned moves and oracles to make each section collapsible
 
 ### Accessibility
 
@@ -25,6 +26,7 @@
 - Fixed an issue where deleting a custom move caused the app to crash
 - Made some performance improvements on the character view
 - Fixed shared tracks not showing up in the move rollers
+- Prevented oracle inputs from reordering themselves
 
 ---
 

src/components/features/assets/AssetCard/AssetCard.tsx

@@ -179,38 +179,48 @@ export function AssetCard(props: AssetCardProps) {
           {asset.Requirement && (
             <MarkdownRenderer markdown={asset.Requirement} />
           )}
-          {Object.values(asset.Inputs ?? {}).map((field) => (
-            <AssetCardField
-              key={field.$id}
-              field={field}
-              value={storedAsset?.inputs?.[encodeDataswornId(field.$id)]}
-              onChange={(value) => {
-                if (handleInputChange) {
-                  return handleInputChange(encodeDataswornId(field.$id), value);
-                }
-                return new Promise((res, reject) =>
-                  reject("HandleInputChange is undefined")
-                );
-              }}
-              disabled={readOnly || !handleInputChange}
-            />
-          ))}
-          {abilityInputs.map((field) => (
-            <AssetCardField
-              key={field.$id}
-              field={field}
-              value={storedAsset?.inputs?.[encodeDataswornId(field.$id)]}
-              onChange={(value) => {
-                if (handleInputChange) {
-                  return handleInputChange(encodeDataswornId(field.$id), value);
-                }
-                return new Promise((res, reject) =>
-                  reject("handleInputChange is undefined")
-                );
-              }}
-              disabled={readOnly || !handleInputChange}
-            />
-          ))}
+          {Object.values(asset.Inputs ?? {})
+            .sort((i1, i2) => i1.Label.localeCompare(i2.Label))
+            .map((field) => (
+              <AssetCardField
+                key={field.$id}
+                field={field}
+                value={storedAsset?.inputs?.[encodeDataswornId(field.$id)]}
+                onChange={(value) => {
+                  if (handleInputChange) {
+                    return handleInputChange(
+                      encodeDataswornId(field.$id),
+                      value
+                    );
+                  }
+                  return new Promise((res, reject) =>
+                    reject("HandleInputChange is undefined")
+                  );
+                }}
+                disabled={readOnly || !handleInputChange}
+              />
+            ))}
+          {abilityInputs
+            .sort((i1, i2) => i1.Label.localeCompare(i2.Label))
+            .map((field) => (
+              <AssetCardField
+                key={field.$id}
+                field={field}
+                value={storedAsset?.inputs?.[encodeDataswornId(field.$id)]}
+                onChange={(value) => {
+                  if (handleInputChange) {
+                    return handleInputChange(
+                      encodeDataswornId(field.$id),
+                      value
+                    );
+                  }
+                  return new Promise((res, reject) =>
+                    reject("handleInputChange is undefined")
+                  );
+                }}
+                disabled={readOnly || !handleInputChange}
+              />
+            ))}
           <Box flexGrow={1}>
             {asset.Abilities.map((ability, index) => (
               <Box
@@ -253,7 +263,9 @@ export function AssetCard(props: AssetCardProps) {
             conditionMeter &&
             conditionMeter.Conditions.length > 0 && (
               <Box display={"flex"} flexWrap={"wrap"}>
-                {conditionMeter.Conditions.map((condition) => (
+                {conditionMeter.Conditions.sort((c1, c2) =>
+                  c1.localeCompare(c2)
+                ).map((condition) => (
                   <FormControlLabel
                     key={condition}
                     disabled={!handleConditionCheck}

src/components/features/charactersAndCampaigns/CollapsibleSectionHeader.tsx

@@ -0,0 +1,50 @@
+import {
+  Box,
+  ListItemButton,
+  ListItemIcon,
+  ListSubheader,
+} from "@mui/material";
+import OpenIcon from "@mui/icons-material/ChevronRight";
+
+export interface CollapsibleSectionHeaderProps {
+  text: string;
+  open: boolean;
+  toggleOpen: () => void;
+}
+
+export function CollapsibleSectionHeader(props: CollapsibleSectionHeaderProps) {
+  const { text, open, toggleOpen } = props;
+
+  return (
+    <ListSubheader
+      disableGutters
+      sx={(theme) => ({
+        mt: open ? 0.5 : 0,
+        backgroundColor: theme.palette.background.paperInlayDarker,
+        color: theme.palette.grey[theme.palette.mode === "light" ? 700 : 200],
+        ...theme.typography.body1,
+        fontFamily: theme.fontFamilyTitle,
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        transition: theme.transitions.create(["margin"], {
+          duration: theme.transitions.duration.shorter,
+        }),
+      })}
+    >
+      <ListItemButton onClick={toggleOpen}>
+        <Box sx={{ flexGrow: 1 }}>{text}</Box>
+        <ListItemIcon sx={{ minWidth: "unset" }}>
+          <OpenIcon
+            sx={(theme) => ({
+              transform: `rotate(${open ? "-" : ""}90deg)`,
+              transition: theme.transitions.create(["transform"], {
+                duration: theme.transitions.duration.shorter,
+              }),
+            })}
+          />
+        </ListItemIcon>
+      </ListItemButton>
+    </ListSubheader>
+  );
+}

src/components/features/charactersAndCampaigns/MoveDrawer.tsx

@@ -15,6 +15,7 @@ function MoveDrawerUnMemoized(props: MoveDrawerProps) {
     <SwipeableDrawer
       open={open}
       onOpen={openCallback}
+      keepMounted
       disableSwipeToOpen
       disableDiscovery
       onClose={onClose}

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

@@ -1,69 +1,99 @@
 import {
   Box,
+  Collapse,
   ListItem,
   ListItemButton,
   ListItemIcon,
   ListSubheader,
 } from "@mui/material";
 import { Move, MoveCategory as IMoveCategory } from "dataforged";
 import OpenIcon from "@mui/icons-material/ChevronRight";
+import { useEffect, useState } from "react";
+import { useNewMoveOracleView } from "hooks/featureFlags/useNewMoveOracleView";
+import { CollapsibleSectionHeader } from "../CollapsibleSectionHeader";
 
 export interface MoveCategoryProps {
   category: IMoveCategory;
   openMove: (move: Move) => void;
+  forceOpen?: boolean;
 }
 
 export function MoveCategory(props: MoveCategoryProps) {
-  const { category, openMove } = props;
+  const { category, openMove, forceOpen } = props;
+
+  const showNewView = useNewMoveOracleView();
+  const [isExpanded, setIsExpanded] = useState(showNewView ? false : true);
+
+  useEffect(() => {
+    setIsExpanded(showNewView ? false : true);
+  }, [showNewView]);
+
+  const isExpandedOrForced = isExpanded || forceOpen;
 
   return (
     <>
-      <ListSubheader
-        sx={(theme) => ({
-          backgroundColor:
-            theme.palette.darkGrey[
-              theme.palette.mode === "light" ? "light" : "dark"
-            ],
-          color: theme.palette.darkGrey.contrastText,
-          ...theme.typography.body1,
-          fontFamily: theme.fontFamilyTitle,
-        })}
-      >
-        {category.Title.Standard}
-      </ListSubheader>
-      {Object.values(category.Moves).map((move, index) => (
-        <ListItem
-          id={move.$id}
-          key={index}
+      {showNewView ? (
+        <CollapsibleSectionHeader
+          open={isExpandedOrForced ?? false}
+          toggleOpen={() => !forceOpen && setIsExpanded((prev) => !prev)}
+          text={category.Title.Standard}
+        />
+      ) : (
+        <ListSubheader
           sx={(theme) => ({
-            "&:nth-of-type(odd)": {
-              backgroundColor: theme.palette.action.hover,
-            },
+            backgroundColor:
+              theme.palette.darkGrey[
+                theme.palette.mode === "light" ? "light" : "dark"
+              ],
+            color: theme.palette.darkGrey.contrastText,
+            ...theme.typography.body1,
+            fontFamily: theme.fontFamilyTitle,
           })}
-          disablePadding
         >
-          <ListItemButton
-            onClick={() => openMove(move)}
-            sx={{
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-            }}
-          >
-            <Box
+          {category.Title.Standard}
+        </ListSubheader>
+      )}
+      <Collapse in={isExpandedOrForced}>
+        <Box
+          sx={{
+            mb: showNewView && isExpandedOrForced ? 0.5 : 0,
+          }}
+        >
+          {Object.values(category.Moves).map((move, index) => (
+            <ListItem
+              id={move.$id}
+              key={index}
               sx={(theme) => ({
-                ...theme.typography.body2,
-                color: theme.palette.text.primary,
+                "&:nth-of-type(even)": {
+                  backgroundColor: theme.palette.background.paperInlay,
+                },
               })}
+              disablePadding
             >
-              {move.Title.Standard}
-            </Box>
-            <ListItemIcon sx={{ minWidth: "unset" }}>
-              <OpenIcon />
-            </ListItemIcon>
-          </ListItemButton>
-        </ListItem>
-      ))}
+              <ListItemButton
+                onClick={() => openMove(move)}
+                sx={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <Box
+                  sx={(theme) => ({
+                    ...theme.typography.body2,
+                    color: theme.palette.text.primary,
+                  })}
+                >
+                  {move.Title.Standard}
+                </Box>
+                <ListItemIcon sx={{ minWidth: "unset" }}>
+                  <OpenIcon />
+                </ListItemIcon>
+              </ListItemButton>
+            </ListItem>
+          ))}
+        </Box>
+      </Collapse>
     </>
   );
 }

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

@@ -5,41 +5,52 @@ import { useFilterMoves } from "./useFilterMoves";
 import { useStore } from "stores/store";
 
 export function MovesSection() {
-  const { setSearch, filteredMoves } = useFilterMoves();
+  const { setSearch, filteredMoves, isSearchActive } = useFilterMoves();
 
   const openDialog = useStore((store) => store.appState.openDialog);
 
   return (
     <>
-      <Input
-        fullWidth
-        startAdornment={
-          <InputAdornment position={"start"}>
-            <SearchIcon sx={(theme) => ({ color: theme.palette.grey[300] })} />
-          </InputAdornment>
-        }
-        aria-label={"Filter Moves"}
-        placeholder={"Filter Moves"}
-        onChange={(evt) => setSearch(evt.currentTarget.value)}
-        color={"primary"}
-        sx={(theme) => ({
-          backgroundColor: theme.palette.darkGrey.main,
-          color: "#fff",
-          px: 2,
-          "&::hover": {
+      <Box
+        color={(theme) => theme.palette.darkGrey.contrastText}
+        bgcolor={(theme) => theme.palette.darkGrey.dark}
+        borderBottom={(theme) => `1px solid ${theme.palette.darkGrey.dark}`}
+      >
+        <Input
+          fullWidth
+          startAdornment={
+            <InputAdornment position={"start"}>
+              <SearchIcon
+                sx={(theme) => ({ color: theme.palette.grey[300] })}
+              />
+            </InputAdornment>
+          }
+          aria-label={"Filter Moves"}
+          placeholder={"Filter Moves"}
+          onChange={(evt) => setSearch(evt.currentTarget.value)}
+          color={"primary"}
+          sx={(theme) => ({
+            backgroundColor: theme.palette.darkGrey.main,
+            color: "#fff",
+            px: 2,
             borderBottomColor: theme.palette.darkGrey.light,
-          },
-        })}
-      />
-
-      <Box sx={{ overflow: "auto", flexGrow: 1 }}>
+          })}
+        />
+      </Box>
+      <Box
+        sx={{
+          overflow: "auto",
+          flexGrow: 1,
+        }}
+      >
         {filteredMoves.map((category, index) => (
           <MoveCategory
             key={index}
             category={category}
             openMove={(move) => {
               openDialog(move.$id);
             }}
+            forceOpen={isSearchActive}
           />
         ))}
       </Box>

src/components/features/charactersAndCampaigns/MovesSection/useFilterMoves.ts

@@ -6,7 +6,7 @@ import { useCustomMoves } from "./useCustomMoves";
 import { useStore } from "stores/store";
 
 export function useFilterMoves() {
-  const { setSearch, debouncedSearch } = useSearch();
+  const { search, setSearch, debouncedSearch } = useSearch();
   const [filteredMoves, setFilteredMoves] = useState(orderedCategories);
   const { customMoveCategories } = useCustomMoves();
 
@@ -58,5 +58,5 @@ export function useFilterMoves() {
     setFilteredMoves(results);
   }, [debouncedSearch, customMoveCategories, showDelveMoves]);
 
-  return { setSearch, filteredMoves };
+  return { setSearch, filteredMoves, isSearchActive: !!search };
 }