Updated spells modal

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,65 +86,74 @@ export default function SpellModal({ spell, isOpen, onClose }: SpellModalProps)
   );
 }
 
-function SpellDescription({ spell }: { spell: Spell }) {
-  function parseText(text: string) {
-    const regex = /{@(.*?) (.*?)}/g;
-    const matches = text.matchAll(regex);
-    const result = [];
-    let lastIndex = 0;
-    for (const match of matches) {
-      const [full, type, name] = match;
-      result.push(text.slice(lastIndex, match.index));
-      if (match.index !== undefined) {
+function parseText(text: string, capitalizeFirst?: boolean) {
+  const regex = /{@(.*?) (.*?)}/g;
+  const matches = text.matchAll(regex);
+  const result = [];
+  let lastIndex = 0;
+  for (const match of matches) {
+    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>
         );
-        lastIndex = match.index + full.length;
+      } 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;
   }
+  result.push(text.slice(lastIndex));
+  return result;
+}
 
-  function handleLink(type: string, name: string) {
-    if (type == 'spell') {
-      console.log(`Link to spell: ${name}`);
-    } else if (type == 'dice' || type == 'damage') {
-      const rolls = rollDice(name);
-      notifications.show({
-        title: `Rolling ${name}`,
-        message: `${rolls.join(' + ')} = ${rolls.reduce((a, b) => a + b, 0)}`,
-        color: 'blue',
-        autoClose: 5000,
-        withCloseButton: false
-      });
-    } else {
-      console.error(`Unknown link type: ${type}`);
-    }
+function handleLink(type: string, name: string) {
+  if (type == 'spell') {
+    console.log(`Link to spell: ${name}`);
+  } else if (type == 'dice') {
+    const rolls = rollDice(name);
+    notifications.show({
+      title: `Rolling ${name}`,
+      message: `${rolls.join(' + ')} = ${rolls.reduce((a, b) => a + b, 0)}`,
+      color: 'blue',
+      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 && (