Fixed capitalize classes

ui/src/app/spells/page.tsx

@@ -73,6 +73,77 @@ export default function Page() {
         }}
       />
       <hr />
+      <SpellSection
+        title='Level 2'
+        spells={level2.filter((s) => s.name.toLowerCase().includes(searchName.toLowerCase()))}
+        onClick={(spell) => {
+          setActiveSpell(spell);
+          setIsOpen(true);
+        }}
+      />
+      <hr />
+      <SpellSection
+        title='Level 3'
+        spells={level3.filter((s) => s.name.toLowerCase().includes(searchName.toLowerCase()))}
+        onClick={(spell) => {
+          setActiveSpell(spell);
+          setIsOpen(true);
+        }}
+      />
+      <hr />
+      <SpellSection
+        title='Level 4'
+        spells={level4.filter((s) => s.name.toLowerCase().includes(searchName.toLowerCase()))}
+        onClick={(spell) => {
+          setActiveSpell(spell);
+          setIsOpen(true);
+        }}
+      />
+      <hr />
+      <SpellSection
+        title='Level 5'
+        spells={level5.filter((s) => s.name.toLowerCase().includes(searchName.toLowerCase()))}
+        onClick={(spell) => {
+          setActiveSpell(spell);
+          setIsOpen(true);
+        }}
+      />
+      <hr />
+      <SpellSection
+        title='Level 6'
+        spells={level6.filter((s) => s.name.toLowerCase().includes(searchName.toLowerCase()))}
+        onClick={(spell) => {
+          setActiveSpell(spell);
+          setIsOpen(true);
+        }}
+      />
+      <hr />
+      <SpellSection
+        title='Level 7'
+        spells={level7.filter((s) => s.name.toLowerCase().includes(searchName.toLowerCase()))}
+        onClick={(spell) => {
+          setActiveSpell(spell);
+          setIsOpen(true);
+        }}
+      />
+      <hr />
+      <SpellSection
+        title='Level 8'
+        spells={level8.filter((s) => s.name.toLowerCase().includes(searchName.toLowerCase()))}
+        onClick={(spell) => {
+          setActiveSpell(spell);
+          setIsOpen(true);
+        }}
+      />
+      <hr />
+      <SpellSection
+        title='Level 9'
+        spells={level9.filter((s) => s.name.toLowerCase().includes(searchName.toLowerCase()))}
+        onClick={(spell) => {
+          setActiveSpell(spell);
+          setIsOpen(true);
+        }}
+      />
       {activeSpell && <SpellModal spell={activeSpell} isOpen={isOpen} onClose={() => setIsOpen(false)} />}
     </Box>
   );

ui/src/components/SpellModal.tsx

@@ -95,8 +95,10 @@ function parseText(text: string, capitalizeFirst?: boolean): (string | JSX.Eleme
   const matches = text.matchAll(regex);
   const result = [];
   let lastIndex = 0;
+  let noMatches = true;
 
   for (const match of matches) {
+    noMatches = false;
     const key = crypto.randomUUID();
     const [full, type, name] = match;
     result.push(<span key={crypto.randomUUID()}>{text.slice(lastIndex, match.index)}</span>);
@@ -108,7 +110,7 @@ function parseText(text: string, capitalizeFirst?: boolean): (string | JSX.Eleme
           </span>
         );
       } else if (type == 'scaledice') {
-        // scaledice format is {@scaledice 1d6|1-9|1d6|}. Parse this out into dice, levels, and dice again.
+        // scaledice format is {@scaledice 1d6|1-9}. Parse this out into dice, levels, and dice again.
         const [dice, levels] = name.split('|');
         result.push(
           <span onClick={() => handleLink('dice', dice)} className='link' key={key}>
@@ -134,7 +136,8 @@ function parseText(text: string, capitalizeFirst?: boolean): (string | JSX.Eleme
       lastIndex = match.index + full.length;
     }
   }
-  result.push(<span key={crypto.randomUUID()}>{text.slice(lastIndex)}</span>);
+  const lastString = text.slice(lastIndex);
+  result.push(<span key={crypto.randomUUID()}>{noMatches ? capitalize(lastString) : lastString}</span>);
 
   return result;
 }