Quest Ability Cards

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_191":192,"_193":194},"routes/_app.x.$handle.$name",{"_94":93,"_32":44,"_103":84,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":121,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",7,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","client.ts","latestPath","fileId","6390e970-e81d-11f0-88da-42dde27851f2","name","fileType","content","// 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';\n\n// SVG Icons\nconst Icons = {\n chevronDown: '',\n check: '',\n download: '',\n x: '',\n checkAll: '',\n search: '',\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// 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 // Letter size: 215.9mm x 279.4mm\n const doc = new jsPDF({ orientation: 'p', unit: 'mm', format: 'letter' });\n \n // Tarot card dimensions: 70mm x 120mm\n const cardW = 70, cardH = 120;\n const cornerRadius = 5;\n // Center 2 cards horizontally with margins\n const marginX = (215.9 - cardW * 2) / 3;\n const marginY = 15, gapY = 10;\n \n selectedAbilities.forEach((ability, i) => {\n // 2 cards per row, 2 rows per page = 4 cards per page\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 // Draw rounded card border\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 // Ability name - centered, large\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(14);\n doc.setTextColor(30, 30, 30);\n \n // Word wrap the ability name if needed\n const nameLines = doc.splitTextToSize(ability.name.toUpperCase(), cardW - 12);\n doc.text(nameLines, x + cardW / 2, y + 14, { align: 'center' });\n \n // Role & Path - centered below name\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 // Decorative line\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 // Ability text content\n let textY = lineY + 6;\n doc.setFont(\"helvetica\", \"normal\");\n doc.setFontSize(8);\n doc.setTextColor(50);\n \n // Get all sub-ability text\n if (ability.subAbilities && ability.subAbilities.length > 0) {\n ability.subAbilities.forEach((sub, si) => {\n if (textY > y + cardH - 20) return; // Stop if running out of space\n \n // AP cost\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 // Sub-ability text\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 // Limit lines to fit in card\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; // Gap between sub-abilities\n });\n }\n \n // Footer\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, onToggle, role, path, searchTerm }) {\n const [expanded, setExpanded] = useState(false);\n \n // Highlight matching text\n const highlightText = (text) => {\n if (!searchTerm || !text) return text;\n const regex = new RegExp('(' + searchTerm.replace(/[.*+?^\\${}()|[\\\\]\\\\\\\\]/g, '\\\\\\\\$&') + ')', 'gi');\n return text.replace(regex, '$1');\n };\n \n const handleHeaderClick = (e) => {\n if (e.target.closest('.ability-checkbox')) {\n onToggle();\n } else {\n setExpanded(!expanded);\n }\n };\n \n return React.createElement('div', { \n className: 'ability-card ' + (isSelected ? 'selected' : '')\n },\n React.createElement('div', { \n className: 'ability-header',\n onClick: handleHeaderClick\n },\n React.createElement('div', { \n className: 'ability-checkbox ' + (isSelected ? 'checked' : ''),\n onClick: (e) => { e.stopPropagation(); onToggle(); }\n },\n isSelected && React.createElement('span', { dangerouslySetInnerHTML: { __html: Icons.check } })\n ),\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 }) {\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 // Filter abilities by search term\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 // Auto-expand if search has matches\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 return React.createElement('div', { className: 'path-section' },\n React.createElement('div', { \n className: 'path-header',\n onClick: () => setOpen(!open)\n },\n React.createElement('span', { className: 'path-name' }, pathName),\n React.createElement('span', { className: 'path-count' }, \n selectedCount > 0 ? selectedCount + ' selected • ' : '',\n (searchTerm ? filteredAbilities.length + '/' : '') + 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 // Select all / Deselect all buttons\n React.createElement('div', { className: 'path-actions' },\n !allSelected && React.createElement('button', { \n className: 'path-action-btn',\n onClick: (e) => { e.stopPropagation(); onSelectAll(pathName, filteredAbilities); }\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 filteredAbilities.map((ability, i) => {\n const id = role + '/' + pathName + '/' + ability.name;\n return React.createElement(AbilityCard, {\n key: i,\n ability,\n isSelected: selectedIds.has(id),\n onToggle: () => onToggle(id, ability, role, pathName),\n role,\n path: pathName,\n searchTerm\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 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 \n // Load saved selections on mount\n const [selectedIds, setSelectedIds] = useState(() => loadSelections().ids);\n const [selectedAbilities, setSelectedAbilities] = useState(() => loadSelections().abilities);\n \n // Load jsPDF\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 // Save selections whenever they change\n useEffect(() => {\n saveSelections(selectedIds, selectedAbilities);\n }, [selectedIds, selectedAbilities]);\n \n // Fetch role data\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 newIds.delete(id);\n const idx = newAbilities.findIndex(a => a.id === id);\n if (idx !== -1) newAbilities.splice(idx, 1);\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 // Count selected per role for badges\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 return React.createElement('div', { className: 'app' },\n React.createElement('header', null,\n React.createElement('h1', null, 'ABILITY CARDS'),\n React.createElement('span', { className: 'subtitle' }, 'QUEST RPG')\n ),\n \n // Role tabs\n React.createElement('div', { className: 'role-tabs' },\n ROLES.map(role => \n React.createElement('button', {\n key: role,\n className: 'role-tab ' + (role === activeRole ? 'active' : ''),\n onClick: () => setActiveRole(role)\n }, \n role,\n selectedByRole[role] > 0 && React.createElement('span', { className: 'role-badge' }, selectedByRole[role])\n )\n )\n ),\n \n // Search bar\n React.createElement(SearchBar, { value: searchTerm, onChange: setSearchTerm }),\n \n // Content\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 })\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","// 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';\n\n// Role colors based on official Quest art\nconst ROLE_COLORS = {\n doctor: { bg: '#fecaca', border: '#f87171', text: '#991b1b', activeBg: '#dc2626' },\n fighter: { bg: '#fed7aa', border: '#fb923c', text: '#9a3412', activeBg: '#ea580c' },\n invoker: { bg: '#bfdbfe', border: '#60a5fa', text: '#1e40af', activeBg: '#2563eb' },\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// Path emojis by role\nconst PATH_EMOJIS = {\n // Doctor\n 'Healing': '💚',\n 'Alteration': '🧬',\n 'Necromancy': '💀',\n 'Harm': '💢',\n 'Perception': '👁️',\n 'Examination': '🔍',\n // Fighter\n 'Combat': '⚔️',\n 'Tactics': '🎯',\n 'Camaraderie': '🤝',\n 'Defense': '🛡️',\n // Invoker\n 'Invocation': '✨',\n 'The Patron': '👁️‍🗨️',\n 'The Omen': '🌙',\n 'The Word': '📜',\n // Magician\n 'Tricks': '🎩',\n 'Misdirection': '🪞',\n 'Charm': '💫',\n 'Transformation': '🦋',\n // Naturalist\n 'Communes': '🌿',\n 'Animals': '🦊',\n 'Plants': '🌸',\n 'Elements': '🌊',\n // Ranger\n 'Wilderness': '🏕️',\n 'Tracking': '🐾',\n 'Hunting': '🏹',\n 'Creatures': '🦅',\n // Spy\n 'Infiltration': '🎭',\n 'Assassination': '🗡️',\n 'Sabotage': '💣',\n 'Surveillance': '🔭',\n // Wizard\n 'Arcana': '📖',\n 'Force': '💥',\n 'Space': '🌀',\n 'Time': '⏳',\n // Legendary (common across roles)\n 'Legendary': '⭐',\n};\n\n// SVG Icons\nconst Icons = {\n chevronDown: '',\n check: '',\n download: '',\n x: '',\n search: '',\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// 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, onToggle, role, path, searchTerm }) {\n const [expanded, setExpanded] = useState(false);\n \n const highlightText = (text) => {\n if (!searchTerm || !text) return text;\n const regex = new RegExp('(' + searchTerm.replace(/[.*+?^${}()|[\\\\]\\\\\\\\]/g, '\\\\\\\\$&') + ')', 'gi');\n return text.replace(regex, '$1');\n };\n \n const handleHeaderClick = (e) => {\n if (e.target.closest('.ability-checkbox')) {\n onToggle();\n } else {\n setExpanded(!expanded);\n }\n };\n \n const colors = ROLE_COLORS[role] || ROLE_COLORS.doctor;\n \n return React.createElement('div', { \n className: 'ability-card ' + (isSelected ? 'selected' : ''),\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' : ''),\n style: isSelected ? { backgroundColor: colors.activeBg, borderColor: colors.activeBg } : {},\n onClick: (e) => { e.stopPropagation(); onToggle(); }\n },\n isSelected && React.createElement('span', { dangerouslySetInnerHTML: { __html: Icons.check } })\n ),\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 }) {\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 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 = ROLE_COLORS[role] || ROLE_COLORS.doctor;\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 + ' selected • ' : '',\n (searchTerm ? filteredAbilities.length + '/' : '') + 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(); onSelectAll(pathName, filteredAbilities); }\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 filteredAbilities.map((ability, i) => {\n const id = role + '/' + pathName + '/' + ability.name;\n return React.createElement(AbilityCard, {\n key: i,\n ability,\n isSelected: selectedIds.has(id),\n onToggle: () => onToggle(id, ability, role, pathName),\n role,\n path: pathName,\n searchTerm\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 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 \n const [selectedIds, setSelectedIds] = useState(() => loadSelections().ids);\n const [selectedAbilities, setSelectedAbilities] = useState(() => loadSelections().abilities);\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 newIds.delete(id);\n const idx = newAbilities.findIndex(a => a.id === id);\n if (idx !== -1) newAbilities.splice(idx, 1);\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 return React.createElement('div', { className: 'app' },\n React.createElement('header', null,\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 = ROLE_COLORS[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 })\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","createdAt",["D",1767387961115],"branchVersion","branchId","2c4026b6-e81d-11f0-95d1-42dde27851f2","id","2c3fdf94-e81d-11f0-95d1-42dde27851f2","quest-abilities",["D",1767387244254],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Quest RPG ability card viewer and printer","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_102":98},"org",{"_94":93,"_95":96,"_97":98,"_18":54,"_99":100,"_101":25},"branch",{"_13":83,"_32":84,"_42":41,"_85":43,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":44,"_92":93},"isOwned",20,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dcm31","handle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789556399&sig=79099f5f8ff13fa7ca88ddd17cfb358dd5de01b4572d54739a735b474a8e2cad","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":187,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":188,"_78":189,"_80":190,"_82":25},"tree",[170,171,172,173],"files",[170,171,172,173],"counts",{"_160":60,"_161":137,"_162":60,"_163":164,"_165":166},"contents",[126,127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_42":153,"_32":154,"_30":155,"_133":-5,"_40":41,"_39":156,"_135":121,"_37":157,"_13":60,"_33":20,"_34":158,"_24":25,"_139":-5,"_27":159},{"_42":149,"_32":28,"_30":31,"_133":-5,"_40":41,"_39":14,"_135":25,"_37":150,"_13":151,"_33":20,"_34":36,"_24":25,"_139":-5,"_27":152},{"_42":141,"_32":142,"_30":143,"_133":-5,"_40":41,"_39":144,"_135":121,"_37":145,"_13":60,"_33":146,"_34":147,"_24":25,"_139":-5,"_27":148},{"_42":130,"_32":131,"_30":132,"_133":-5,"_40":41,"_39":134,"_135":25,"_37":136,"_13":137,"_33":20,"_34":138,"_24":25,"_139":-5,"_27":140},"25457c5c-e81e-11f0-b703-42dde27851f2","styles.ts","427f1da6-e81d-11f0-9add-42dde27851f2","parentId",6,"latest",["D",1767387662034],1,"// CSS styles for Quest Abilities Viewer\n// Typography: Alegreya Sans SC (headings), Alegreya (pullquotes), Ovo (body)\n\nexport const STYLES = `\n* { box-sizing: border-box; margin: 0; padding: 0; }\n\n:root {\n --ink: #111111;\n --paper: #ffffff;\n --warm-gray: #f8f7f5;\n --border: #e5e5e5;\n --border-strong: #d4d4d4;\n --muted: #555555;\n --accent: #d4145a;\n --radius: 12px;\n --radius-sm: 8px;\n}\n\nbody {\n font-family: 'Ovo', Georgia, serif;\n background: var(--warm-gray);\n color: var(--ink);\n line-height: 1.5;\n font-size: 17px;\n}\n\n.h1, h1 { \n font-family: 'Alegreya Sans SC', sans-serif; \n font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n}\n\n.h2, h2 { \n font-family: 'Alegreya Sans SC', sans-serif; \n font-weight: 800;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.h3, h3 {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-weight: 700;\n font-size: 0.8rem;\n text-transform: uppercase;\n letter-spacing: 0.12em;\n}\n\n.app {\n max-width: 720px;\n margin: 0 auto;\n padding: 2.5rem 1.25rem;\n}\n\nheader {\n text-align: center;\n margin-bottom: 2rem;\n}\n\nheader h1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n color: var(--ink);\n}\n\nheader .subtitle {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 1rem;\n font-weight: 700;\n color: var(--muted);\n letter-spacing: 0.15em;\n}\n\n.card {\n background: var(--paper);\n border-radius: var(--radius);\n border: 1px solid var(--border);\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n margin-bottom: 1.5rem;\n}\n\n/* Role selector tabs */\n.role-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n justify-content: center;\n margin-bottom: 1rem;\n padding: 1rem;\n background: var(--paper);\n border-radius: var(--radius);\n border: 1px solid var(--border);\n}\n\n.role-tab {\n padding: 0.625rem 1rem;\n border: 1px solid var(--border);\n border-radius: 999px;\n background: var(--paper);\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.8rem;\n font-weight: 700;\n color: var(--muted);\n cursor: pointer;\n transition: all 0.15s;\n text-transform: capitalize;\n position: relative;\n}\n\n.role-tab:hover {\n border-color: var(--border-strong);\n color: var(--ink);\n}\n\n.role-tab.active {\n background: var(--ink);\n color: var(--paper);\n border-color: var(--ink);\n}\n\n.role-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n margin-left: 6px;\n font-size: 0.65rem;\n font-weight: 800;\n background: var(--accent);\n color: white;\n border-radius: 999px;\n}\n\n.role-tab.active .role-badge {\n background: var(--paper);\n color: var(--ink);\n}\n\n/* Search bar */\n.search-bar {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.875rem 1.25rem;\n background: var(--paper);\n border-radius: var(--radius);\n border: 1px solid var(--border);\n margin-bottom: 1.5rem;\n transition: border-color 0.15s;\n}\n\n.search-bar:focus-within {\n border-color: var(--border-strong);\n}\n\n.search-icon {\n width: 20px;\n height: 20px;\n color: var(--muted);\n flex-shrink: 0;\n}\n\n.search-bar input {\n flex: 1;\n border: none;\n outline: none;\n font-family: 'Ovo', Georgia, serif;\n font-size: 1rem;\n background: transparent;\n color: var(--ink);\n}\n\n.search-bar input::placeholder {\n color: var(--muted);\n}\n\n.search-clear {\n width: 24px;\n height: 24px;\n border: none;\n background: var(--warm-gray);\n border-radius: 50%;\n font-size: 1.25rem;\n line-height: 1;\n color: var(--muted);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.search-clear:hover {\n background: var(--border);\n color: var(--ink);\n}\n\n/* Search highlight */\nmark {\n background: #fef08a;\n color: inherit;\n padding: 0 2px;\n border-radius: 2px;\n}\n\n/* Path sections */\n.path-section {\n margin-bottom: 0.75rem;\n}\n\n.path-header {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem 1.25rem;\n background: var(--paper);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n cursor: pointer;\n transition: border-color 0.15s;\n}\n\n.path-header:hover {\n border-color: var(--border-strong);\n}\n\n.path-name {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-weight: 800;\n font-size: 1rem;\n flex: 1;\n}\n\n.path-count {\n font-family: 'Ovo', serif;\n font-size: 0.85rem;\n color: var(--muted);\n}\n\n.path-chevron {\n width: 18px;\n height: 18px;\n color: var(--muted);\n transition: transform 0.2s;\n}\n\n.path-chevron.open {\n transform: rotate(180deg);\n}\n\n.path-abilities {\n display: none;\n padding: 0.75rem 0;\n}\n\n.path-abilities.open {\n display: block;\n}\n\n/* Path action buttons */\n.path-actions {\n display: flex;\n gap: 0.5rem;\n margin-bottom: 0.75rem;\n padding-left: 0.25rem;\n}\n\n.path-action-btn {\n padding: 0.375rem 0.75rem;\n border: 1px solid var(--border);\n border-radius: 999px;\n background: var(--paper);\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.7rem;\n font-weight: 700;\n color: var(--muted);\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.path-action-btn:hover {\n border-color: var(--border-strong);\n color: var(--ink);\n background: var(--warm-gray);\n}\n\n/* Ability cards */\n.ability-card {\n background: var(--paper);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n margin-bottom: 0.625rem;\n transition: all 0.15s;\n}\n\n.ability-card:hover {\n border-color: var(--border-strong);\n}\n\n.ability-card.selected {\n border-color: var(--accent);\n box-shadow: 0 0 0 1px var(--accent);\n}\n\n.ability-header {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 1rem 1.25rem;\n cursor: pointer;\n}\n\n.ability-checkbox {\n width: 22px;\n height: 22px;\n border: 2px solid var(--border-strong);\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: all 0.15s;\n}\n\n.ability-checkbox.checked {\n background: var(--accent);\n border-color: var(--accent);\n color: white;\n}\n\n.ability-checkbox svg {\n width: 14px;\n height: 14px;\n}\n\n.ability-name {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-weight: 800;\n font-size: 1rem;\n flex: 1;\n}\n\n.ability-expand {\n width: 18px;\n height: 18px;\n color: var(--muted);\n transition: transform 0.2s;\n}\n\n.ability-expand.open {\n transform: rotate(180deg);\n}\n\n.ability-details {\n display: none;\n padding: 0 1.25rem 1.25rem;\n border-top: 1px dashed var(--border);\n margin: 0 1.25rem;\n padding-top: 1rem;\n}\n\n.ability-details.open {\n display: block;\n}\n\n.ability-details p {\n margin-bottom: 0.75rem;\n font-size: 0.95rem;\n}\n\n.sub-ability {\n background: var(--warm-gray);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n padding: 1rem;\n margin-bottom: 0.75rem;\n}\n\n.ap-cost {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-weight: 700;\n font-size: 0.75rem;\n letter-spacing: 0.1em;\n color: var(--accent);\n margin-bottom: 0.5rem;\n}\n\n.sub-ability-text {\n font-size: 0.9rem;\n line-height: 1.6;\n}\n\n.roll-table {\n width: 100%;\n margin-top: 0.75rem;\n border-collapse: collapse;\n font-size: 0.85rem;\n}\n\n.roll-table th,\n.roll-table td {\n border: 1px solid var(--border);\n padding: 0.5rem 0.75rem;\n text-align: left;\n}\n\n.roll-table th {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-weight: 700;\n font-size: 0.7rem;\n letter-spacing: 0.08em;\n background: var(--paper);\n}\n\n/* Print toolbar */\n.print-toolbar {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: var(--paper);\n border-top: 1px solid var(--border);\n padding: 1rem;\n display: flex;\n justify-content: center;\n gap: 1rem;\n box-shadow: 0 -4px 12px rgba(0,0,0,0.08);\n transform: translateY(100%);\n transition: transform 0.3s ease;\n z-index: 100;\n}\n\n.print-toolbar.visible {\n transform: translateY(0);\n}\n\n.selection-count {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-weight: 700;\n font-size: 0.9rem;\n color: var(--muted);\n display: flex;\n align-items: center;\n padding: 0 1rem;\n}\n\n.btn {\n padding: 0.75rem 1.25rem;\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n background: var(--paper);\n font-family: 'Alegreya Sans SC', sans-serif;\n font-size: 0.85rem;\n font-weight: 700;\n letter-spacing: 0.04em;\n cursor: pointer;\n transition: all 0.15s;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.btn:hover {\n border-color: var(--border-strong);\n background: var(--warm-gray);\n}\n\n.btn-primary {\n background: var(--ink);\n color: var(--paper);\n border-color: var(--ink);\n}\n\n.btn-primary:hover {\n background: #333;\n border-color: #333;\n}\n\n.btn-danger {\n color: var(--accent);\n border-color: var(--accent);\n}\n\n.btn-danger:hover {\n background: #fff0f3;\n}\n\n.btn svg {\n width: 16px;\n height: 16px;\n}\n\n/* Attribution footer */\n.attribution {\n margin-top: 2.5rem;\n padding-top: 1.25rem;\n padding-bottom: 5rem;\n border-top: 1px solid var(--border);\n text-align: center;\n}\n\n.attribution p {\n font-size: 0.8rem;\n color: var(--muted);\n margin-bottom: 0.375rem;\n}\n\n.attribution a {\n color: var(--muted);\n text-decoration: underline;\n}\n\n.attribution a:hover {\n color: var(--ink);\n}\n\n/* Loading state */\n.loading {\n text-align: center;\n padding: 3rem;\n color: var(--muted);\n}\n\n.loading-spinner {\n width: 32px;\n height: 32px;\n border: 3px solid var(--border);\n border-top-color: var(--accent);\n border-radius: 50%;\n margin: 0 auto 1rem;\n animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin {\n to { transform: rotate(360deg); }\n}\n\n@media (max-width: 640px) {\n header h1 { font-size: 2rem; }\n .role-tabs { gap: 0.375rem; }\n .role-tab { padding: 0.5rem 0.75rem; font-size: 0.7rem; }\n .print-toolbar { flex-wrap: wrap; }\n .selection-count { width: 100%; justify-content: center; padding-bottom: 0.5rem; }\n}\n`;\n","label",[131],"6a9b5886-e81d-11f0-813e-42dde27851f2","main.ts","6a9b59da-e81d-11f0-813e-42dde27851f2",3,["D",1767387348867],"http","import { Hono } from \"npm:hono@4\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { STYLES } from \"./styles.ts\";\nimport { getClientScript } from \"./client.ts\";\n\nconst app = new Hono();\n\nconst ROLES = [\"doctor\", \"fighter\", \"invoker\", \"magician\", \"naturalist\", \"ranger\", \"spy\", \"wizard\"];\n\n// API endpoint to get role data\napp.get(\"/api/role/:role\", async (c) => {\n const role = c.req.param(\"role\").toLowerCase();\n \n if (!ROLES.includes(role)) {\n return c.json({ error: \"Invalid role\" }, 400);\n }\n \n try {\n // Fetch from dcm31's blob storage where questAbilityStorage stores the data\n const data = await blob.getJSON(`questling_role_${role}`);\n if (!data) {\n return c.json({ error: \"Role data not found\" }, 404);\n }\n return c.json(data);\n } catch (error) {\n console.error(`Error fetching role ${role}:`, error);\n return c.json({ error: \"Failed to fetch role data\" }, 500);\n }\n});\n\n// Main page\napp.get(\"/\", (c) => {\n const HTML = `\n\n\n \n \n Quest Ability Cards\n \n \n \n \n\n\n

\n \n \n \n\n`;\n\n return c.html(HTML);\n});\n\nexport default app.fetch;\n",[142],"d78a83c6-e81e-11f0-b359-42dde27851f2",["D",1767387961115],2,[28],"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",[154],"pulls","branches","forks","envVars",{"_167":60,"_169":60},"connections",{"_167":60,"_168":60},"count","unfilledCount","emptyCount",{"_42":153,"_32":154,"_30":155,"_133":-5,"_40":41,"_39":156,"_135":121,"_37":184,"_13":60,"_33":20,"_34":158,"_24":25,"_139":-5,"_175":185,"_27":186},{"_42":149,"_32":28,"_30":31,"_133":-5,"_40":41,"_39":14,"_135":25,"_37":181,"_13":151,"_33":20,"_34":36,"_24":25,"_139":-5,"_175":182,"_27":183},{"_42":141,"_32":142,"_30":143,"_133":-5,"_40":41,"_39":144,"_135":121,"_37":178,"_13":60,"_33":146,"_34":147,"_24":25,"_139":-5,"_175":179,"_27":180},{"_42":130,"_32":131,"_30":132,"_133":-5,"_40":41,"_39":134,"_135":25,"_37":174,"_13":137,"_33":20,"_34":138,"_24":25,"_139":-5,"_175":176,"_27":177},["D",1767387662034],"children",[],[131],["D",1767387348867],[],[142],["D",1767387961115],[],[28],["D",1767387359149],[],[154],["D",1767387244254],{"_94":93,"_102":98},{"_94":93,"_95":96,"_97":98,"_18":54,"_99":100,"_101":25},{"_13":83,"_32":84,"_42":41,"_85":43,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":44,"_92":93},"ctx",{"_76":-5,"_123":224,"_225":226,"_227":228,"_229":25,"_230":25,"_231":25,"_232":121,"_233":-5,"_234":-7,"_235":-7,"_236":60,"_237":25,"_238":25,"_239":-5,"_240":25,"_241":25,"_242":25,"_243":-5},"ENV",{"_195":196,"_197":198,"_199":84,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223},"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"]

Diff · v7