Quest Ability Cards

\n \n \n \n\n`;\n\n return c.html(HTML);\n});\n\nexport default app.fetch;\n",[59],"cd99f634-ebd0-11f0-b254-42dde27851f2","client.ts","6390e970-e81d-11f0-88da-42dde27851f2",20,["D",1767794248341],11,"// Client-side React app code (runs in browser)\n\nexport function getClientScript(): string {\n return `\nconst { useState, useEffect, useMemo } = React;\n\nconst ROLES = ['doctor', 'fighter', 'invoker', 'magician', 'naturalist', 'ranger', 'spy', 'wizard'];\nconst STORAGE_KEY = 'quest-abilities-selections';\nconst THEME_KEY = 'quest-abilities-theme';\n\n// Role colors based on official Quest art\nconst ROLE_COLORS = {\n doctor: { bg: '#fcd5ce', border: '#f4978e', text: '#9d4343', activeBg: '#e86a6a' },\n fighter: { bg: '#fed7aa', border: '#fb923c', text: '#9a3412', activeBg: '#ea580c' },\n invoker: { bg: '#c7d2fe', border: '#818cf8', text: '#3730a3', activeBg: '#4f46e5' },\n magician: { bg: '#f5d0fe', border: '#e879f9', text: '#86198f', activeBg: '#c026d3' },\n naturalist: { bg: '#bbf7d0', border: '#4ade80', text: '#166534', activeBg: '#16a34a' },\n ranger: { bg: '#a5f3fc', border: '#22d3ee', text: '#0e7490', activeBg: '#0891b2' },\n spy: { bg: '#ddd6fe', border: '#a78bfa', text: '#5b21b6', activeBg: '#7c3aed' },\n wizard: { bg: '#fde68a', border: '#fbbf24', text: '#92400e', activeBg: '#d97706' },\n};\n\n// Dark mode role colors - slightly adjusted for dark backgrounds\nconst ROLE_COLORS_DARK = {\n doctor: { bg: '#3d2020', border: '#f4978e', text: '#fcd5ce', activeBg: '#e86a6a' },\n fighter: { bg: '#3d2510', border: '#fb923c', text: '#fed7aa', activeBg: '#ea580c' },\n invoker: { bg: '#1e2040', border: '#818cf8', text: '#c7d2fe', activeBg: '#4f46e5' },\n magician: { bg: '#301530', border: '#e879f9', text: '#f5d0fe', activeBg: '#c026d3' },\n naturalist: { bg: '#103020', border: '#4ade80', text: '#bbf7d0', activeBg: '#16a34a' },\n ranger: { bg: '#102530', border: '#22d3ee', text: '#a5f3fc', activeBg: '#0891b2' },\n spy: { bg: '#201530', border: '#a78bfa', text: '#ddd6fe', activeBg: '#7c3aed' },\n wizard: { bg: '#302510', border: '#fbbf24', text: '#fde68a', activeBg: '#d97706' },\n};\n\n// Path emojis - unique single emojis per path (no duplicates)\nconst PATH_EMOJIS = {\n // Doctor\n 'Healing': '💚',\n 'Alteration': '🧬',\n 'Necromancy': '☠️',\n 'Harm': '💉',\n 'Perception': '🔮',\n 'Examination': '🩺',\n // Fighter\n 'Dueling': '⚔️',\n 'Tactics': '📋',\n 'Camaraderie': '🫂',\n 'Leadership': '👑',\n 'Body': '💪',\n // Invoker\n 'Invocation': '🙏',\n 'Inquiries': '🔎',\n 'Verdicts': '⚖️',\n 'Wrath': '⚡',\n 'Wards': '🛡️',\n // Magician\n 'Misdirection': '🪞',\n 'Mannequins': '🎭',\n 'Clairvoyance': '👁️',\n 'Conjuration': '🎩',\n 'Mind Control': '🧠',\n 'Mayhem': '💥',\n // Naturalist\n 'Shapeshifter': '🦎',\n 'Summoner': '🌿',\n 'Elementalist': '🔥',\n 'Stormcaller': '⛈️',\n 'Spiritcaller': '🐺',\n 'Ecologist': '🌍',\n // Ranger\n 'Story and Song': '🎵',\n 'Survivalist': '🏕️',\n 'Pathfinder': '🧭',\n 'Hunter': '🏹',\n 'Friend': '🦅',\n // Spy\n 'Charisma': '😏',\n 'Termination': '🗡️',\n 'Concealment': '🌑',\n 'Surveillance': '🔭',\n 'Stenography': '📝',\n 'Infiltration': '🚪',\n 'Impersonation': '🥸',\n // Wizard\n 'Evocation': '✨',\n 'Planeshifting': '🚀',\n 'Magecraft': '📖',\n 'Projection': '📡',\n 'Trickery': '🃏',\n // Legendary\n 'Legendary': '⭐',\n};\n\n// SVG Icons\nconst Icons = {\n chevronDown: '',\n check: '',\n download: '',\n x: '',\n search: '',\n lock: '',\n};\n\nfunction Icon({ name, className }) {\n return React.createElement('span', {\n className,\n dangerouslySetInnerHTML: { __html: Icons[name] },\n style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }\n });\n}\n\n// Strip HTML tags for plain text\nfunction stripHtml(html) {\n if (!html) return '';\n return html.replace(/<[^>]*>/g, '').trim();\n}\n\n// LocalStorage helpers\nfunction loadSelections() {\n try {\n const saved = localStorage.getItem(STORAGE_KEY);\n if (saved) {\n const data = JSON.parse(saved);\n return {\n ids: new Set(data.ids || []),\n abilities: data.abilities || []\n };\n }\n } catch (e) {\n console.warn('Failed to load selections:', e);\n }\n return { ids: new Set(), abilities: [] };\n}\n\nfunction saveSelections(ids, abilities) {\n try {\n localStorage.setItem(STORAGE_KEY, JSON.stringify({\n ids: Array.from(ids),\n abilities\n }));\n } catch (e) {\n console.warn('Failed to save selections:', e);\n }\n}\n\n// Theme helpers\nfunction getInitialTheme() {\n try {\n const saved = localStorage.getItem(THEME_KEY);\n if (saved) return saved;\n if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n return 'dark';\n }\n } catch (e) {\n console.warn('Failed to get theme:', e);\n }\n return 'light';\n}\n\nfunction saveTheme(theme) {\n try {\n localStorage.setItem(THEME_KEY, theme);\n document.documentElement.setAttribute('data-theme', theme);\n } catch (e) {\n console.warn('Failed to save theme:', e);\n }\n}\n\n// PDF Generation - Tarot-sized cards (70mm x 120mm)\nasync function downloadPDF(selectedAbilities) {\n if (!window.jspdf) {\n alert(\"PDF loading... try again in a moment.\");\n return;\n }\n \n const { jsPDF } = window.jspdf;\n const doc = new jsPDF({ orientation: 'p', unit: 'mm', format: 'letter' });\n \n const cardW = 70, cardH = 120;\n const cornerRadius = 5;\n const marginX = (215.9 - cardW * 2) / 3;\n const marginY = 15, gapY = 10;\n \n selectedAbilities.forEach((ability, i) => {\n if (i > 0 && i % 4 === 0) doc.addPage();\n \n const col = i % 2;\n const row = Math.floor((i % 4) / 2);\n const x = marginX + col * (cardW + marginX);\n const y = marginY + row * (cardH + gapY);\n \n doc.setLineWidth(0.8);\n doc.setDrawColor(30, 30, 30);\n doc.setFillColor(255, 255, 255);\n doc.roundedRect(x, y, cardW, cardH, cornerRadius, cornerRadius, 'FD');\n \n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(14);\n doc.setTextColor(30, 30, 30);\n \n const nameLines = doc.splitTextToSize(ability.name.toUpperCase(), cardW - 12);\n doc.text(nameLines, x + cardW / 2, y + 14, { align: 'center' });\n \n const nameHeight = nameLines.length * 5;\n doc.setFontSize(8);\n doc.setTextColor(100);\n doc.text((ability.role + ' • ' + ability.path).toUpperCase(), x + cardW / 2, y + 14 + nameHeight + 2, { align: 'center' });\n \n const lineY = y + 14 + nameHeight + 8;\n doc.setLineWidth(0.4);\n doc.setDrawColor(180);\n doc.line(x + 10, lineY, x + cardW - 10, lineY);\n \n let textY = lineY + 6;\n doc.setFont(\"helvetica\", \"normal\");\n doc.setFontSize(8);\n doc.setTextColor(50);\n \n if (ability.subAbilities && ability.subAbilities.length > 0) {\n ability.subAbilities.forEach((sub, si) => {\n if (textY > y + cardH - 20) return;\n \n if (sub.ap !== undefined) {\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(7);\n doc.setTextColor(180, 20, 80);\n doc.text(sub.ap + ' AP', x + 6, textY);\n textY += 4;\n }\n \n doc.setFont(\"helvetica\", \"normal\");\n doc.setFontSize(7.5);\n doc.setTextColor(50);\n const text = stripHtml(sub.text);\n const lines = doc.splitTextToSize(text, cardW - 12);\n const maxLines = Math.floor((y + cardH - 15 - textY) / 3.2);\n const displayLines = lines.slice(0, Math.max(1, maxLines));\n \n displayLines.forEach((line, li) => {\n if (textY < y + cardH - 15) {\n doc.text(line, x + 6, textY);\n textY += 3.2;\n }\n });\n \n if (lines.length > displayLines.length) {\n doc.text('...', x + 6, textY);\n textY += 3.2;\n }\n \n textY += 2;\n });\n }\n \n doc.setFontSize(6);\n doc.setTextColor(150);\n doc.text(\"QUEST RPG\", x + cardW / 2, y + cardH - 5, { align: 'center' });\n });\n \n doc.save('Quest_Ability_Cards.pdf');\n}\n\n// Components\nfunction AbilityCard({ ability, isSelected, isLocked, onToggle, role, path, searchTerm, index, isDark }) {\n const [expanded, setExpanded] = useState(false);\n \n const highlightText = (text) => {\n if (!searchTerm || !text) return text;\n const lowerText = text.toLowerCase();\n const lowerSearch = searchTerm.toLowerCase();\n const idx = lowerText.indexOf(lowerSearch);\n if (idx === -1) return text;\n return text.slice(0, idx) + '' + text.slice(idx, idx + searchTerm.length) + '' + text.slice(idx + searchTerm.length);\n };\n \n const handleHeaderClick = (e) => {\n if (isLocked) {\n setExpanded(!expanded);\n return;\n }\n if (e.target.closest('.ability-checkbox')) {\n onToggle();\n } else {\n setExpanded(!expanded);\n }\n };\n \n const colors = isDark ? (ROLE_COLORS_DARK[role] || ROLE_COLORS_DARK.doctor) : (ROLE_COLORS[role] || ROLE_COLORS.doctor);\n \n return React.createElement('div', { \n className: 'ability-card ' + (isSelected ? 'selected' : '') + (isLocked ? ' locked' : ''),\n style: isSelected ? { borderColor: colors.activeBg, boxShadow: '0 0 0 1px ' + colors.activeBg } : {}\n },\n React.createElement('div', { \n className: 'ability-header',\n onClick: handleHeaderClick\n },\n React.createElement('div', { \n className: 'ability-checkbox ' + (isSelected ? 'checked' : '') + (isLocked ? ' locked' : ''),\n style: isSelected ? { backgroundColor: colors.activeBg, borderColor: colors.activeBg } : {},\n onClick: (e) => { e.stopPropagation(); if (!isLocked) onToggle(); }\n },\n isLocked \n ? React.createElement('span', { dangerouslySetInnerHTML: { __html: Icons.lock } })\n : isSelected && React.createElement('span', { dangerouslySetInnerHTML: { __html: Icons.check } })\n ),\n React.createElement('span', { className: 'ability-index' }, index + 1),\n React.createElement('span', { \n className: 'ability-name',\n dangerouslySetInnerHTML: { __html: highlightText(ability.name) }\n }),\n React.createElement('span', { \n className: 'ability-expand ' + (expanded ? 'open' : ''),\n dangerouslySetInnerHTML: { __html: Icons.chevronDown }\n })\n ),\n React.createElement('div', { className: 'ability-details ' + (expanded ? 'open' : '') },\n ability.prefixText && React.createElement('p', { \n dangerouslySetInnerHTML: { __html: ability.prefixText } \n }),\n ability.subAbilities && ability.subAbilities.map((sub, i) => \n React.createElement('div', { key: i, className: 'sub-ability' },\n sub.ap !== undefined && React.createElement('div', { className: 'ap-cost' }, sub.ap + ' AP'),\n React.createElement('div', { \n className: 'sub-ability-text',\n dangerouslySetInnerHTML: { __html: sub.text }\n }),\n sub.table && React.createElement('table', { className: 'roll-table' },\n React.createElement('thead', null,\n React.createElement('tr', null,\n React.createElement('th', null, 'Roll'),\n React.createElement('th', null, 'Result')\n )\n ),\n React.createElement('tbody', null,\n sub.table.map((entry, j) => \n React.createElement('tr', { key: j },\n React.createElement('td', null, \n entry.ceiling ? entry.floor + '-' + entry.ceiling : entry.floor\n ),\n React.createElement('td', null, entry.result)\n )\n )\n )\n )\n )\n ),\n ability.suffixText && React.createElement('p', { \n dangerouslySetInnerHTML: { __html: ability.suffixText } \n })\n )\n );\n}\n\nfunction PathSection({ pathName, abilities, selectedIds, onToggle, onSelectAll, onDeselectAll, role, searchTerm, isDark }) {\n const [open, setOpen] = useState(false);\n \n const pathAbilityIds = abilities.map(a => role + '/' + pathName + '/' + a.name);\n const selectedCount = pathAbilityIds.filter(id => selectedIds.has(id)).length;\n const allSelected = selectedCount === abilities.length;\n \n // Calculate which abilities are locked (skill tree logic)\n const getLockedStatus = (index) => {\n if (index === 0) return false; // First ability is never locked\n const prevId = role + '/' + pathName + '/' + abilities[index - 1].name;\n return !selectedIds.has(prevId);\n };\n \n const filteredAbilities = searchTerm \n ? abilities.filter(a => \n a.name.toLowerCase().includes(searchTerm.toLowerCase()) ||\n (a.subAbilities && a.subAbilities.some(sub => \n sub.text && stripHtml(sub.text).toLowerCase().includes(searchTerm.toLowerCase())\n ))\n )\n : abilities;\n \n useEffect(() => {\n if (searchTerm && filteredAbilities.length > 0) {\n setOpen(true);\n }\n }, [searchTerm, filteredAbilities.length]);\n \n if (searchTerm && filteredAbilities.length === 0) return null;\n \n const emoji = PATH_EMOJIS[pathName] || '✨';\n const colors = isDark ? (ROLE_COLORS_DARK[role] || ROLE_COLORS_DARK.doctor) : (ROLE_COLORS[role] || ROLE_COLORS.doctor);\n \n // Select all that are unlocked in order\n const handleSelectAllInOrder = () => {\n const newIds = new Set(selectedIds);\n const newAbilities = [];\n \n // Select abilities in order until we hit the end\n for (const ability of abilities) {\n const id = role + '/' + pathName + '/' + ability.name;\n if (!newIds.has(id)) {\n newIds.add(id);\n newAbilities.push({\n id,\n ...ability,\n role: role.charAt(0).toUpperCase() + role.slice(1),\n path: pathName\n });\n }\n }\n \n onSelectAll(pathName, abilities);\n };\n \n return React.createElement('div', { className: 'path-section' },\n React.createElement('div', { \n className: 'path-header',\n onClick: () => setOpen(!open),\n style: { borderLeftColor: colors.activeBg, borderLeftWidth: '4px' }\n },\n React.createElement('span', { className: 'path-emoji' }, emoji),\n React.createElement('span', { className: 'path-name' }, pathName),\n React.createElement('span', { className: 'path-count' }, \n selectedCount > 0 ? selectedCount + '/' + abilities.length + ' • ' : '',\n abilities.length + ' abilities'\n ),\n React.createElement('span', { \n className: 'path-chevron ' + (open ? 'open' : ''),\n dangerouslySetInnerHTML: { __html: Icons.chevronDown }\n })\n ),\n React.createElement('div', { className: 'path-abilities ' + (open ? 'open' : '') },\n React.createElement('div', { className: 'path-actions' },\n !allSelected && React.createElement('button', { \n className: 'path-action-btn',\n onClick: (e) => { e.stopPropagation(); handleSelectAllInOrder(); }\n }, 'Select all'),\n selectedCount > 0 && React.createElement('button', { \n className: 'path-action-btn',\n onClick: (e) => { e.stopPropagation(); onDeselectAll(pathName, abilities); }\n }, 'Deselect all')\n ),\n (searchTerm ? filteredAbilities : abilities).map((ability, i) => {\n const originalIndex = searchTerm ? abilities.findIndex(a => a.name === ability.name) : i;\n const id = role + '/' + pathName + '/' + ability.name;\n const isLocked = getLockedStatus(originalIndex);\n return React.createElement(AbilityCard, {\n key: i,\n ability,\n isSelected: selectedIds.has(id),\n isLocked,\n onToggle: () => onToggle(id, ability, role, pathName),\n role,\n path: pathName,\n searchTerm,\n index: originalIndex,\n isDark\n });\n })\n )\n );\n}\n\nfunction PrintToolbar({ count, onPrint, onClear }) {\n return React.createElement('div', { className: 'print-toolbar ' + (count > 0 ? 'visible' : '') },\n React.createElement('span', { className: 'selection-count' }, count + ' CARDS SELECTED'),\n React.createElement('button', { className: 'btn btn-danger', onClick: onClear },\n React.createElement(Icon, { name: 'x' }),\n 'CLEAR'\n ),\n React.createElement('button', { className: 'btn btn-primary', onClick: onPrint },\n React.createElement(Icon, { name: 'download' }),\n 'PRINT PDF'\n )\n );\n}\n\nfunction SearchBar({ value, onChange }) {\n return React.createElement('div', { className: 'search-bar' },\n React.createElement('span', { className: 'search-icon', dangerouslySetInnerHTML: { __html: Icons.search } }),\n React.createElement('input', {\n type: 'text',\n placeholder: 'Search abilities...',\n value,\n onChange: (e) => onChange(e.target.value)\n }),\n value && React.createElement('button', { \n className: 'search-clear',\n onClick: () => onChange('')\n }, '×')\n );\n}\n\nfunction Attribution() {\n return React.createElement('footer', { className: 'attribution' },\n React.createElement('p', null, \n 'Ability data from ',\n React.createElement('a', { href: 'https://github.com/nboughton/Questling', target: '_blank', rel: 'noopener' }, 'Questling'),\n ' by Nick Boughton.'\n ),\n React.createElement('p', null,\n 'Quest created by T.C. Sottek. Learn more at ',\n React.createElement('a', { href: 'https://www.adventure.game/', target: '_blank', rel: 'noopener' }, 'adventure.game'),\n '.'\n )\n );\n}\n\nfunction ThemeToggle({ isDark, onToggle }) {\n return React.createElement('button', {\n className: 'theme-toggle',\n onClick: onToggle,\n title: isDark ? 'Switch to light mode' : 'Switch to dark mode'\n }, isDark ? '☀️' : '🌙');\n}\n\nfunction App() {\n const [activeRole, setActiveRole] = useState('doctor');\n const [roleData, setRoleData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [searchTerm, setSearchTerm] = useState('');\n const [theme, setTheme] = useState(getInitialTheme);\n \n const isDark = theme === 'dark';\n \n const [selectedIds, setSelectedIds] = useState(() => loadSelections().ids);\n const [selectedAbilities, setSelectedAbilities] = useState(() => loadSelections().abilities);\n \n // Apply theme on mount and when changed\n useEffect(() => {\n document.documentElement.setAttribute('data-theme', theme);\n }, [theme]);\n \n const toggleTheme = () => {\n const newTheme = theme === 'light' ? 'dark' : 'light';\n setTheme(newTheme);\n saveTheme(newTheme);\n };\n \n useEffect(() => {\n if (!window.jspdf) {\n const script = document.createElement('script');\n script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js';\n document.body.appendChild(script);\n }\n }, []);\n \n useEffect(() => {\n saveSelections(selectedIds, selectedAbilities);\n }, [selectedIds, selectedAbilities]);\n \n useEffect(() => {\n setLoading(true);\n setError(null);\n \n fetch('/api/role/' + activeRole)\n .then(res => res.json())\n .then(data => {\n if (data.error) {\n setError(data.error);\n setRoleData(null);\n } else {\n setRoleData(data);\n }\n setLoading(false);\n })\n .catch(err => {\n setError('Failed to load: ' + err.message);\n setLoading(false);\n });\n }, [activeRole]);\n \n const handleToggle = (id, ability, role, path) => {\n const newIds = new Set(selectedIds);\n const newAbilities = [...selectedAbilities];\n \n if (newIds.has(id)) {\n // When deselecting, also deselect all abilities below this one in the path\n if (roleData && roleData.paths && roleData.paths[path]) {\n const pathAbilities = roleData.paths[path];\n const abilityIndex = pathAbilities.findIndex(a => a.name === ability.name);\n // Deselect this and all subsequent abilities in the path\n for (let i = abilityIndex; i < pathAbilities.length; i++) {\n const idToRemove = role + '/' + path + '/' + pathAbilities[i].name;\n newIds.delete(idToRemove);\n const idx = newAbilities.findIndex(a => a.id === idToRemove);\n if (idx !== -1) newAbilities.splice(idx, 1);\n }\n }\n } else {\n newIds.add(id);\n newAbilities.push({\n id,\n ...ability,\n role: role.charAt(0).toUpperCase() + role.slice(1),\n path\n });\n }\n \n setSelectedIds(newIds);\n setSelectedAbilities(newAbilities);\n };\n \n const handleSelectAll = (pathName, abilities) => {\n const newIds = new Set(selectedIds);\n const newAbilities = [...selectedAbilities];\n \n abilities.forEach(ability => {\n const id = activeRole + '/' + pathName + '/' + ability.name;\n if (!newIds.has(id)) {\n newIds.add(id);\n newAbilities.push({\n id,\n ...ability,\n role: activeRole.charAt(0).toUpperCase() + activeRole.slice(1),\n path: pathName\n });\n }\n });\n \n setSelectedIds(newIds);\n setSelectedAbilities(newAbilities);\n };\n \n const handleDeselectAll = (pathName, abilities) => {\n const newIds = new Set(selectedIds);\n let newAbilities = [...selectedAbilities];\n \n abilities.forEach(ability => {\n const id = activeRole + '/' + pathName + '/' + ability.name;\n newIds.delete(id);\n newAbilities = newAbilities.filter(a => a.id !== id);\n });\n \n setSelectedIds(newIds);\n setSelectedAbilities(newAbilities);\n };\n \n const handleClear = () => {\n setSelectedIds(new Set());\n setSelectedAbilities([]);\n };\n \n const handlePrint = () => {\n if (selectedAbilities.length === 0) return;\n downloadPDF(selectedAbilities);\n };\n \n const selectedByRole = useMemo(() => {\n const counts = {};\n ROLES.forEach(r => counts[r] = 0);\n selectedAbilities.forEach(a => {\n const role = a.role.toLowerCase();\n if (counts[role] !== undefined) counts[role]++;\n });\n return counts;\n }, [selectedAbilities]);\n \n const roleColors = isDark ? ROLE_COLORS_DARK : ROLE_COLORS;\n \n return React.createElement('div', { className: 'app' },\n React.createElement('header', null,\n React.createElement(ThemeToggle, { isDark, onToggle: toggleTheme }),\n React.createElement('h1', null, 'ABILITY CARDS'),\n React.createElement('span', { className: 'subtitle' }, 'QUEST RPG')\n ),\n \n React.createElement('div', { className: 'role-tabs' },\n ROLES.map(role => {\n const colors = roleColors[role];\n const isActive = role === activeRole;\n const style = isActive \n ? { backgroundColor: colors.activeBg, color: 'white', borderColor: colors.activeBg }\n : { backgroundColor: colors.bg, borderColor: colors.border, color: colors.text };\n \n return React.createElement('button', {\n key: role,\n className: 'role-tab ' + (isActive ? 'active' : ''),\n style,\n onClick: () => setActiveRole(role)\n }, \n role,\n selectedByRole[role] > 0 && React.createElement('span', { \n className: 'role-badge',\n style: isActive ? { backgroundColor: 'white', color: colors.activeBg } : { backgroundColor: colors.activeBg, color: 'white' }\n }, selectedByRole[role])\n )\n })\n ),\n \n React.createElement(SearchBar, { value: searchTerm, onChange: setSearchTerm }),\n \n loading \n ? React.createElement('div', { className: 'loading' },\n React.createElement('div', { className: 'loading-spinner' }),\n 'Loading abilities...'\n )\n : error\n ? React.createElement('div', { className: 'card', style: { padding: '2rem', textAlign: 'center', color: '#b91c1c' } }, error)\n : roleData && roleData.paths && Object.entries(roleData.paths).map(([pathName, abilities]) =>\n React.createElement(PathSection, {\n key: pathName,\n pathName,\n abilities,\n selectedIds,\n onToggle: handleToggle,\n onSelectAll: handleSelectAll,\n onDeselectAll: handleDeselectAll,\n role: activeRole,\n searchTerm,\n isDark\n })\n ),\n \n React.createElement(Attribution, null),\n React.createElement(PrintToolbar, {\n count: selectedAbilities.length,\n onPrint: handlePrint,\n onClear: handleClear\n })\n );\n}\n\nReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));\n`;\n}\n",[68],"70bc0634-e81d-11f0-bd3d-42dde27851f2","README.md","70bc06de-e81d-11f0-bd3d-42dde27851f2",4,["D",1767387359149],"# Quest Ability Cards\n\nBrowse and print tarot-sized ability cards for Quest RPG.\n\n## Features\n\n- **Browse by Role**: Switch between Doctor, Fighter, Invoker, Magician, Naturalist, Ranger, Spy, and Wizard\n- **Expandable Details**: Click any ability to see full descriptions, AP costs, and roll tables\n- **Select for Printing**: Check abilities you want to print as cards\n- **PDF Export**: Generate tarot-sized (70mm × 120mm) cards on letter paper with rounded corners\n\n## How to Use\n\n1. Select a role from the tabs\n2. Expand paths to see abilities\n3. Click the checkbox to select abilities for your printout\n4. Click \"Print PDF\" to download your cards\n\n## Data Source\n\nAbility data is sourced from [Questling](https://github.com/nboughton/Questling) by Nick Boughton, which parses the official Quest RPG content.\n\n## Related\n\n- [quest-encounters](https://www.val.town/x/dcm31/quest-encounters) - Encounter builder for Quest RPG\n- [questAbilityStorage](https://www.val.town/x/dcm31/questAbilityStorage) - Data storage for Quest abilities\n- [questAbilityApi](https://www.val.town/x/dcm31/questAbilityApi) - API for querying Quest abilities\n\n## Credits\n\nQuest was created by T.C. Sottek. Learn more at [adventure.game](https://www.adventure.game/).\n",[76],{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":96,"_17":63,"_51":24,"_52":80,"_54":55,"_56":-5,"_87":97,"_18":98},{"_36":67,"_13":68,"_39":69,"_41":-5,"_42":43,"_44":70,"_46":47,"_48":93,"_17":72,"_51":24,"_52":73,"_54":55,"_56":-5,"_87":94,"_18":95},{"_36":58,"_13":59,"_39":60,"_41":-5,"_42":43,"_44":61,"_46":47,"_48":90,"_17":63,"_51":64,"_52":65,"_54":55,"_56":-5,"_87":91,"_18":92},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":86,"_17":50,"_51":24,"_52":53,"_54":55,"_56":-5,"_87":88,"_18":89},["D",1767794114213],"children",[],[38],["D",1767387348867],[],[59],["D",1767794248341],[],[68],["D",1767387359149],[],[76],"2c3fdf94-e81d-11f0-95d1-42dde27851f2",["D",1767387244254],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Quest RPG ability card viewer and printer","imageUrl","userId","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_153":149},"org",{"_11":12,"_146":147,"_148":149,"_109":110,"_150":151,"_152":55},"branch",{"_17":70,"_13":16,"_36":43,"_138":99,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":14,"_145":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789552799&sig=9e2f7c6ad81bfe0a417f4ee593a56f46019d3f18deb24441c667547de12b5000","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":99,"_13":14,"_48":202,"_101":-5,"_102":55,"_103":104,"_105":104,"_106":107,"_108":-5,"_109":110,"_111":-5,"_112":55,"_113":-5,"_114":-5,"_115":63,"_116":117,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_131":203,"_133":204,"_135":205,"_137":55},[190,191,192,193],"files",[190,191,192,193],"counts",{"_180":63,"_181":182,"_183":63,"_31":184,"_185":186},[172,173,174,175],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":79,"_17":63,"_51":24,"_52":80,"_54":55,"_56":-5,"_18":179},{"_36":67,"_13":68,"_39":69,"_41":-5,"_42":43,"_44":70,"_46":47,"_48":71,"_17":72,"_51":24,"_52":73,"_54":55,"_56":-5,"_18":178},{"_36":58,"_13":59,"_39":60,"_41":-5,"_42":43,"_44":61,"_46":47,"_48":62,"_17":63,"_51":64,"_52":65,"_54":55,"_56":-5,"_18":177},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":24,"_52":53,"_54":55,"_56":-5,"_18":176},[38],[59],[68],[76],"pulls","branches",1,"forks",{"_187":63,"_189":63},"connections",{"_187":63,"_188":63},"count","unfilledCount","emptyCount",{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":96,"_17":63,"_51":24,"_52":80,"_54":55,"_56":-5,"_87":200,"_18":201},{"_36":67,"_13":68,"_39":69,"_41":-5,"_42":43,"_44":70,"_46":47,"_48":93,"_17":72,"_51":24,"_52":73,"_54":55,"_56":-5,"_87":198,"_18":199},{"_36":58,"_13":59,"_39":60,"_41":-5,"_42":43,"_44":61,"_46":47,"_48":90,"_17":63,"_51":64,"_52":65,"_54":55,"_56":-5,"_87":196,"_18":197},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":86,"_17":50,"_51":24,"_52":53,"_54":55,"_56":-5,"_87":194,"_18":195},[],[38],[],[59],[],[68],[],[76],["D",1767387244254],{"_11":12,"_153":149},{"_11":12,"_146":147,"_148":149,"_109":110,"_150":151,"_152":55},{"_17":70,"_13":16,"_36":43,"_138":99,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":14,"_145":12},"ctx",{"_131":-5,"_169":239,"_240":241,"_242":243,"_244":55,"_245":55,"_246":55,"_247":47,"_248":-5,"_249":-7,"_250":-7,"_251":63,"_252":55,"_253":55,"_254":-5,"_255":55,"_256":55,"_257":55,"_258":-5},"ENV",{"_210":211,"_212":213,"_214":16,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code