Refactor class and race components

gvorbeck · Jan 20, 2024 · b0b0972 · b0b0972
1 parent 7e1beba
commit b0b0972
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 17 deletions.
diff --git a/src/components/PageNewCharacter/StepClass/StepClass.tsx b/src/components/PageNewCharacter/StepClass/StepClass.tsx
@@ -276,18 +276,6 @@ const StepClass: React.FC<
             key={className}
           />
         ))}
-      {!character.class.includes("Custom") &&
-        !!character.class.length &&
-        character.class.map(
-          (className) =>
-            classes[className as ClassNames] && (
-              <WRaceClassDescription
-                subject={className}
-                image={classImage(className as ClassNames)}
-                key={className}
-              />
-            ),
-        )}
     </Flex>
   );
 };

diff --git a/src/components/PageNewCharacter/StepClass/WClassSettings/WClassSettings.tsx b/src/components/PageNewCharacter/StepClass/WClassSettings/WClassSettings.tsx
@@ -1,6 +1,8 @@
 import { CharData, RaceNames } from "@/data/definitions";
 import { races } from "@/data/races";
+import { useDeviceType } from "@/hooks/useDeviceType";
 import { Flex, Switch, Typography } from "antd";
+import classNames from "classnames";
 import React from "react";
 
 interface WClassSettingsProps {
@@ -21,17 +23,24 @@ const WClassSettings: React.FC<
   supplementalContent,
   combinationClass,
 }) => {
+  const { isMobile } = useDeviceType();
+  const flexClassNames = classNames(
+    { "flex-col-reverse": isMobile },
+    { "mt-4": isMobile },
+    className,
+  );
+  const innerFlexClassNames = classNames({ "justify-between": isMobile });
   return (
-    <Flex gap={16} className={className}>
-      <Flex gap={8}>
+    <Flex gap={16} className={flexClassNames}>
+      <Flex gap={8} className={innerFlexClassNames}>
         <Typography.Text>Enable Supplemental Content</Typography.Text>
         <Switch
           checked={supplementalContent}
           onChange={onSupplementalContentChange}
         />
       </Flex>
       {races[character.race as RaceNames]?.allowedCombinationClasses && (
-        <Flex gap={8}>
+        <Flex gap={8} className={innerFlexClassNames}>
           <Typography.Text>Use Combination Class</Typography.Text>
           <Switch
             checked={combinationClass}

diff --git a/src/components/PageNewCharacter/StepClass/WRaceClassDescription/WRaceClassDescription.tsx b/src/components/PageNewCharacter/StepClass/WRaceClassDescription/WRaceClassDescription.tsx
@@ -1,8 +1,10 @@
 import { classes } from "@/data/classes";
 import { ClassNames, RaceNames } from "@/data/definitions";
 import { races } from "@/data/races";
+import { useDeviceType } from "@/hooks/useDeviceType";
 import { useMarkdown } from "@/hooks/useMarkdown";
 import { Card, Flex, Image } from "antd";
+import classNames from "classnames";
 import React from "react";
 
 interface WRaceClassDescriptionProps {
@@ -13,6 +15,8 @@ interface WRaceClassDescriptionProps {
 const WRaceClassDescription: React.FC<
   WRaceClassDescriptionProps & React.ComponentPropsWithRef<"div">
 > = ({ className, subject, image }) => {
+  const { isMobile } = useDeviceType();
+  const flexClassNames = classNames({ "flex-col-reverse": isMobile });
   const raceDescription = useMarkdown(
     races[subject as RaceNames]?.details?.description ?? "",
   );
@@ -27,7 +31,7 @@ const WRaceClassDescription: React.FC<
       }
       className={className}
     >
-      <Flex gap={16}>
+      <Flex gap={16} vertical={isMobile} className={flexClassNames}>
         <div
           dangerouslySetInnerHTML={{
             __html: cardDescription,

diff --git a/src/components/PageNewCharacter/StepHitPoints/StepHitPoints.tsx b/src/components/PageNewCharacter/StepHitPoints/StepHitPoints.tsx
@@ -10,6 +10,7 @@ import {
 } from "antd";
 import { rollDice } from "@/support/diceSupport";
 import { getCharacterHitDiceFromClass } from "./StepHitPointsSupport";
+import { useDeviceType } from "@/hooks/useDeviceType";
 
 interface StepHitPointsProps {
   character: CharData;
@@ -19,6 +20,7 @@ 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>(
@@ -55,7 +57,11 @@ const StepHitPoints: React.FC<
   return (
     <Flex vertical className={className} gap={16}>
       {useCustomDice && (
-        <Radio.Group defaultValue={DiceTypes.D6} onChange={onRadioGroupChange}>
+        <Radio.Group
+          defaultValue={DiceTypes.D6}
+          onChange={onRadioGroupChange}
+          size={isMobile ? "small" : "middle"}
+        >
           {Object.values(DiceTypes).map((die: string) => (
             <Radio.Button value={die}>{die}</Radio.Button>
           ))}