Updated spells modal

service/src/db/spells/types.rs

@@ -177,54 +177,13 @@ pub struct Range {
 #[derive(Debug, Serialize, Deserialize)]
 pub struct Area {
   #[serde(rename = "type")]
-  pub area_type: AreaType,
+  pub area_type: String,
   #[serde(skip_serializing_if = "Option::is_none")]
   pub value: Option<i32>,
   #[serde(skip_serializing_if = "Option::is_none")]
   pub unit: Option<String>
 }
 
-#[derive(Debug, Serialize, Deserialize)]
-pub enum AreaType {
-  #[serde(rename = "cone")]
-  Cone,
-  #[serde(rename = "cube")]
-  Cube,
-  #[serde(rename = "cylinder")]
-  Cylinder,
-  #[serde(rename = "line")]
-  Line,
-  #[serde(rename = "sphere")]
-  Sphere
-}
-
-// impl AreaType {
-//   pub fn to_string(&self) -> String {
-//     match self {
-//       AreaType::Cone => "cone".to_string(),
-//       AreaType::Cube => "cube".to_string(),
-//       AreaType::Cylinder => "cylinder".to_string(),
-//       AreaType::Line => "line".to_string(),
-//       AreaType::Sphere => "sphere".to_string()
-//     }
-//   }
-// }
-
-// impl FromStr for AreaType {
-//   type Err = ();
-
-//   fn from_str(s: &str) -> Result<Self, Self::Err> {
-//     match s {
-//       "cone" => Ok(AreaType::Cone),
-//       "cube" => Ok(AreaType::Cube),
-//       "cylinder" => Ok(AreaType::Cylinder),
-//       "line" => Ok(AreaType::Line),
-//       "sphere" => Ok(AreaType::Sphere),
-//       _ => Err(())
-//     }
-//   }
-// }
-
 #[derive(Debug, Serialize, Deserialize)]
 pub struct Duration {
   #[serde(rename = "type")]

ui/src/app/spells/page.tsx

@@ -22,6 +22,16 @@ export default function Page() {
   const [activeSpell, setActiveSpell] = useState<Spell | undefined>(undefined);
   const [isOpen, setIsOpen] = useState(false);
   const [searchName, setSearchName] = useState('');
+  const [includeCantrips, setIncludeCantrips] = useState(true);
+  const [includeLevel1, setIncludeLevel1] = useState(true);
+  const [includeLevel2, setIncludeLevel2] = useState(true);
+  const [includeLevel3, setIncludeLevel3] = useState(true);
+  const [includeLevel4, setIncludeLevel4] = useState(true);
+  const [includeLevel5, setIncludeLevel5] = useState(true);
+  const [includeLevel6, setIncludeLevel6] = useState(true);
+  const [includeLevel7, setIncludeLevel7] = useState(true);
+  const [includeLevel8, setIncludeLevel8] = useState(true);
+  const [includeLevel9, setIncludeLevel9] = useState(true);
 
   useEffect(() => {
     getSpells({ levels: [0] }).then((s) => setCantrips(s.data));
@@ -54,6 +64,15 @@ export default function Page() {
         }}
       />
       <hr />
+      <SpellSection
+        title='Level 1'
+        spells={level1.filter((s) => s.name.toLowerCase().includes(searchName.toLowerCase()))}
+        onClick={(spell) => {
+          setActiveSpell(spell);
+          setIsOpen(true);
+        }}
+      />
+      <hr />
       {activeSpell && <SpellModal spell={activeSpell} isOpen={isOpen} onClose={() => setIsOpen(false)} />}
     </Box>
   );

ui/src/components/SpellModal.tsx

@@ -50,7 +50,7 @@ export default function SpellModal({ spell, isOpen, onClose }: SpellModalProps)
           <span style={{ overflowWrap: 'break-word' }}>
             {spell.classes.map((c) => (
               <span style={{ paddingRight: '0.6em', display: 'inline-block' }} className='link'>
-                {capitalize(c)}
+                {parseText(c, true)}
               </span>
             ))}
           </span>
@@ -86,8 +86,7 @@ export default function SpellModal({ spell, isOpen, onClose }: SpellModalProps)
   );
 }
 
-function SpellDescription({ spell }: { spell: Spell }) {
-  function parseText(text: string) {
+function parseText(text: string, capitalizeFirst?: boolean) {
   const regex = /{@(.*?) (.*?)}/g;
   const matches = text.matchAll(regex);
   const result = [];
@@ -96,22 +95,43 @@ function SpellDescription({ spell }: { spell: Spell }) {
     const [full, type, name] = match;
     result.push(text.slice(lastIndex, match.index));
     if (match.index !== undefined) {
+      if (type == 'dice') {
         result.push(
           <span onClick={() => handleLink(type, name)} className='link'>
             {name}
           </span>
         );
+      } else if (type == 'scaledice') {
+        // scaledice format is {@scaledice 1d6|1-9|1d6|}. Parse this out into dice, levels, and dice again.
+        const [dice, levels] = name.split('|');
+        result.push(
+          <span onClick={() => handleLink('dice', dice)} className='link'>
+            {dice}
+          </span>
+        );
+      } else if (type == 'bold') {
+        result.push(<span style={{ fontWeight: 'bold' }}>{name}</span>);
+      } else if (type == 'subclass') {
+        const [className, subclassName] = name.split('|');
+        result.push(
+          <span>
+            {capitalize(className)} ({capitalize(subclassName)})
+          </span>
+        );
+      } else {
+        result.push(<span>{capitalizeFirst ? capitalize(name) : name}</span>);
+      }
       lastIndex = match.index + full.length;
     }
   }
   result.push(text.slice(lastIndex));
   return result;
-  }
+}
 
-  function handleLink(type: string, name: string) {
+function handleLink(type: string, name: string) {
   if (type == 'spell') {
     console.log(`Link to spell: ${name}`);
-    } else if (type == 'dice' || type == 'damage') {
+  } else if (type == 'dice') {
     const rolls = rollDice(name);
     notifications.show({
       title: `Rolling ${name}`,
@@ -120,31 +140,20 @@ function SpellDescription({ spell }: { spell: Spell }) {
       autoClose: 5000,
       withCloseButton: false
     });
+  } else if (type == 'scaledice') {
+    console.log(`Link to scaledice: ${name}`);
   } else {
     console.error(`Unknown link type: ${type}`);
   }
-  }
+}
+
+function SpellDescription({ spell }: { spell: Spell }) {
 
   return (
     <>
       {spell.description && (
         <>
           {spell.description.entries.map((e) => (
-            // typeof e === 'string' ? (
-            //   <p>{parseText(e)}</p>
-            // ) : (
-            //   <>
-            //     {e.list ? (
-            //       <ul>
-            //         {e.list.map((text) => (
-            //           <li>{parseText(text)}</li>
-            //         ))}
-            //       </ul>
-            //     ) : (
-            //       <></>
-            //     )}
-            //   </>
-            // )
             <>
               {e.text && <p>{parseText(e.text)}</p>}
               {e.list && (