Merge pull request #222 from gvorbeck/all-spells-selection

All spells selection

src/components/PageCharacterSheet/PageCharacterSheet.tsx

@@ -212,7 +212,7 @@ const PageCharacterSheet: React.FC<
               />
               <Section title="Weight" component={<Weight />} />
             </Flex>
-            {isSpellCaster(character.class) && (
+            {isSpellCaster(character) && (
               <Section title="Spells" component={<Spells />} />
             )}
           </Col>

src/components/PageNewCharacter/PageNewCharacter.tsx

@@ -57,7 +57,10 @@ const PageNewCharacter: React.FC<
     console.log(character);
     setCurrentStep(currentStep + 1);
   };
-  const prev = () => setCurrentStep(currentStep - 1);
+  const prev = () => {
+    console.log(character);
+    setCurrentStep(currentStep - 1);
+  };
   const stepsItems = getStepsItems(
     character,
     setCharacter,

src/components/PageNewCharacter/StepClass/StepClass.tsx

@@ -1,5 +1,5 @@
 import { Flex, Input, Select, SelectProps } from "antd";
-import React, { ChangeEvent } from "react";
+import React, { ChangeEvent, Suspense } from "react";
 import {
   baseClasses,
   classSplit,
@@ -15,6 +15,12 @@ import { races } from "@/data/races";
 import WSpellSelect from "./WSpellSelect/WSpellSelect";
 import WCombinationClassSelect from "./WCombinationClassSelect/WCombinationClassSelect";
 import WClassSettings from "./WClassSettings/WClassSettings";
+import HomebrewWarning from "@/components/HomebrewWarning/HomebrewWarning";
+
+// Lazy loading this because it's a big component and it's not needed unless the user selects a custom class.
+const WAllSpellsSelection = React.lazy(
+  () => import("./WAllSpellsSelection/WAllSpellsSelection"),
+);
 
 interface StepClassProps {
   character: CharData;
@@ -234,7 +240,6 @@ const StepClass: React.FC<
               ? "Custom"
               : standardClass
           }
-          // value={classType === "custom" ? "Custom" : standardClass}
           onChange={onStandardClassChange}
           placeholder="Select a class"
         />
@@ -251,10 +256,19 @@ const StepClass: React.FC<
       {(getClassType(character.class) === "custom" ||
         classArr[0] === "Custom") &&
         !combinationClass && (
-          <Input
-            value={customClass ?? character.class}
-            onChange={(e) => onCustomClassChange(e)}
-          />
+          <>
+            <HomebrewWarning homebrew="class" />
+            <Input
+              value={customClass ?? character.class}
+              onChange={(e) => onCustomClassChange(e)}
+            />
+            <Suspense fallback={<div>Loading...</div>}>
+              <WAllSpellsSelection
+                character={character}
+                setCharacter={setCharacter}
+              />
+            </Suspense>
+          </>
         )}
       {hasMagicCharacterClass && (
         // Spell dropdown and spell description

src/components/PageNewCharacter/StepClass/WAllSpellsSelection/WAllSpellsSelection.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import spells from "@/data/spells.json";
+import { Checkbox, Divider, Typography } from "antd";
+import classNames from "classnames";
+import { useDeviceType } from "@/hooks/useDeviceType";
+import { CharData, Spell } from "@/data/definitions";
+
+interface WAllSpellsSelectionProps {
+  character: CharData;
+  setCharacter: (character: CharData) => void;
+}
+
+const WAllSpellsSelection: React.FC<
+  WAllSpellsSelectionProps & React.ComponentPropsWithRef<"div">
+> = ({ className, character, setCharacter }) => {
+  const { isDesktop, isMobile, isTablet } = useDeviceType();
+  const checkboxGroupClassNames = classNames(
+    "grid",
+    { "grid-cols-1": isMobile },
+    { "grid-cols-3": isTablet },
+    { "grid-cols-3": isDesktop },
+    className,
+  );
+  const options = spells.map((spell) => ({
+    label: spell.name,
+    value: spell.name,
+  }));
+  const [startingSpells, setStartingSpells] = React.useState<Spell[]>(
+    character.spells || [],
+  );
+  const onChange = (checkedValues: string[]) => {
+    const newStartingSpells = spells.filter((spell) =>
+      checkedValues.includes(spell.name),
+    );
+    setStartingSpells(newStartingSpells);
+  };
+
+  React.useEffect(() => {
+    setCharacter({ ...character, spells: startingSpells });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [startingSpells]);
+  return (
+    <>
+      <Divider plain className="font-enchant text-2xl">
+        Starting Spells
+      </Divider>
+      <Typography.Text>
+        Choose the spells your custom class starts level 1 with, if any.
+      </Typography.Text>
+      <Checkbox.Group
+        className={checkboxGroupClassNames}
+        options={options}
+        onChange={onChange}
+      />
+    </>
+  );
+};
+
+export default WAllSpellsSelection;

src/components/PageNewCharacter/StepHitPoints/StepHitPoints.tsx

@@ -1,16 +1,8 @@
 import React from "react";
 import { CharData, DiceTypes } from "@/data/definitions";
-import {
-  Button,
-  Flex,
-  InputNumber,
-  Radio,
-  RadioChangeEvent,
-  Space,
-} from "antd";
+import { Button, Flex, InputNumber, Select, SelectProps, Space } from "antd";
 import { rollDice } from "@/support/diceSupport";
 import { getCharacterHitDiceFromClass } from "./StepHitPointsSupport";
-import { useDeviceType } from "@/hooks/useDeviceType";
 
 interface StepHitPointsProps {
   character: CharData;
@@ -20,11 +12,14 @@ interface StepHitPointsProps {
 const StepHitPoints: React.FC<
   StepHitPointsProps & React.ComponentPropsWithRef<"div">
 > = ({ className, character, setCharacter }) => {
-  const { isMobile } = useDeviceType();
   const [max, setMax] = React.useState<number>(character.hp.max || 0);
   const [useCustomDice, setUseCustomDice] = React.useState<boolean>(false);
   const [die, setDie] = React.useState<DiceTypes | undefined>(
-    getCharacterHitDiceFromClass(character),
+    getCharacterHitDiceFromClass(character) || (character.hp.dice as DiceTypes),
+  );
+
+  const options: SelectProps["options"] = Object.values(DiceTypes).map(
+    (die: string) => ({ label: die, value: die }),
   );
 
   const handleButtonClick = () => {
@@ -34,8 +29,8 @@ const StepHitPoints: React.FC<
     roll = roll < 1 ? 1 : roll;
     setMax(roll);
   };
-  const onRadioGroupChange = (e: RadioChangeEvent) => {
-    setDie(e.target.value);
+  const onSelectChange = (value: DiceTypes) => {
+    setDie(value);
   };
 
   React.useEffect(() => {
@@ -57,15 +52,7 @@ const StepHitPoints: React.FC<
   return (
     <Flex vertical className={className} gap={16}>
       {useCustomDice && (
-        <Radio.Group
-          defaultValue={DiceTypes.D6}
-          onChange={onRadioGroupChange}
-          size={isMobile ? "small" : "middle"}
-        >
-          {Object.values(DiceTypes).map((die: string) => (
-            <Radio.Button value={die}>{die}</Radio.Button>
-          ))}
-        </Radio.Group>
+        <Select options={options} onChange={onSelectChange} value={die} />
       )}
       <Space.Compact>
         <InputNumber value={max} />

src/hooks/useSpellData.ts

@@ -1,24 +1,27 @@
 import { classes } from "@/data/classes";
 import React from "react";
-import { ClassNames } from "@/data/definitions";
-import { classSplit } from "@/support/classSupport";
+import { CharData, ClassNames } from "@/data/definitions";
+import { classSplit, getClassType } from "@/support/classSupport";
 
 export function useSpellData() {
   const [hasSpellBudget, setHasSpellBudget] = React.useState(false);
 
-  const checkSpellCaster = (charClass: string | string[]) => {
-    const classArr = classSplit(charClass);
+  const checkSpellCaster = (character: CharData) => {
+    const classArr = classSplit(character.class);
     return classArr.some((c) => {
       const classData = classes[c as ClassNames];
       return (
-        classData && classData.spellBudget && classData.spellBudget.length > 0
+        (classData &&
+          classData.spellBudget &&
+          classData.spellBudget.length > 0) ||
+        (getClassType(character.class) === "custom" && character.spells.length)
       );
     });
   };
 
   const isSpellCaster = React.useCallback(
-    (charClass: string | string[]) => {
-      const result = checkSpellCaster(charClass);
+    (character: CharData) => {
+      const result = checkSpellCaster(character);
       if (result !== hasSpellBudget) {
         setHasSpellBudget(result);
       }