Updated spells modal

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 && (