Merge pull request #221 from gvorbeck/refactor-selector

Refactor selector

package.json

@@ -4,7 +4,7 @@
   "bfrpgEdition": "4th",
   "bfrpgRelease": "137",
   "license": "CC BY-SA 4.0",
-  "version": "2.0.0.0",
+  "version": "2.0.1",
   "private": true,
   "type": "module",
   "scripts": {

src/components/CardCharacter/CardCharacter.tsx

@@ -18,6 +18,7 @@ import { useNavigate } from "react-router-dom";
 import { User } from "firebase/auth";
 import { avatarClassNames } from "@/support/cssSupport";
 import { deleteDocument } from "@/support/accountSupport";
+import { classSplit } from "@/support/classSupport";
 
 interface CardCharacterProps {
   item: CharData;
@@ -49,7 +50,7 @@ const CardCharacter: React.FC<
   const descriptionItems: DescriptionsProps["items"] = [
     { key: "1", label: "Level", children: item.level },
     { key: "2", label: "Race", children: item.race },
-    { key: "3", label: "Class", children: item.class },
+    { key: "3", label: "Class", children: classSplit(item.class).join(" | ") },
   ];
   return (
     item &&

src/components/ModalLevelUp/ModalLevelUp.tsx

@@ -44,6 +44,7 @@ const ModalLevelUp: React.FC<
   React.useEffect(() => {
     // Set magicClass when character changes
     const classArr = classSplit(character.class);
+    // NOTE: do this with some() instead:
     for (const cls of classArr) {
       const key = cls as keyof typeof classes;
       if (classes[key]?.spellBudget) {

src/components/ModalLevelUp/SpellOptionsContainer/SpellOptionsContainer.tsx

@@ -25,7 +25,10 @@ const SpellOptionsContainer: React.FC<
     <div className={className}>
       {spellBudget.map((max, index) => {
         const spellLevel = index + 1;
-        const spellsAtLevel = getSpellsAtLevel(character).filter(
+        const spellsAtLevel = getSpellsAtLevel(
+          character.class,
+          character.level,
+        ).filter(
           (spell) => spell.level[magicClass.toLowerCase()] === spellLevel,
         );
         return (

src/components/PageCharacterSheet/PageCharacterSheet.tsx

@@ -67,7 +67,7 @@ const PageCharacterSheet: React.FC<
   const abilitiesTableHelpText = useMarkdown(
     `A player must roll their percentile dice with a result less than or equal to the numbers shown below. Click the rows to automatically roll for each special ability.`,
   );
-  const customClassAlertMessage = useMarkdown(customClassString);
+  const customClassAlertMessage = customClassString;
   const { isMobile, isTablet, isDesktop } = useDeviceType();
   const { isSpellCaster } = useSpellData();
   const classArr = character ? classSplit(character.class) : [];

src/components/PageNewCharacter/PageNewCharacter.tsx

@@ -48,10 +48,15 @@ const PageNewCharacter: React.FC<
     xp: 0,
   } as CharData);
   const [comboClass, setComboClass] = React.useState(false);
-  const [comboClassSwitch, setComboClassSwitch] = React.useState(false);
+  const [comboClassSwitch, setComboClassSwitch] = React.useState(
+    character.class?.length > 1,
+  );
   const [messageApi, contextHolder] = message.useMessage();
   // VARS
-  const next = () => setCurrentStep(currentStep + 1);
+  const next = () => {
+    console.log(character);
+    setCurrentStep(currentStep + 1);
+  };
   const prev = () => setCurrentStep(currentStep - 1);
   const stepsItems = getStepsItems(
     character,

src/components/PageNewCharacter/StepAbilities/StepAbilities.tsx

@@ -155,7 +155,11 @@ const StepAbilities: React.FC<
   return (
     <Flex vertical className={className} gap={16}>
       {!hideRollAll && (
-        <Button type="primary" onClick={rollAllAbilities}>
+        <Button
+          type="primary"
+          onClick={rollAllAbilities}
+          className="self-start"
+        >
           Roll All Abilities
         </Button>
       )}

src/components/PageNewCharacter/StepClass/SpellOptions/SpellOptions.tsx

@@ -50,7 +50,7 @@ const SpellOptions: React.FC<
   const selectedSpell =
     spells.find((spell: Spell) => spell.name === startingSpells[0]) ||
     ({ description: "", duration: "", range: "" } as Spell);
-  const levelOneSpells = getSpellsAtLevel(character);
+  const levelOneSpells = getSpellsAtLevel(character.class, character.level);
   const spellImage = getSpellImage(toSlugCase(startingSpells[0] || ""));
   const descriptionClassNames = classNames({ "flex-col": isMobile });
   const selectOptions: SelectProps["options"] = levelOneSpells