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",{"_93":92,"_32":44,"_102":83,"_27":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":25,"_117":118,"_119":120,"_121":-5,"_122":-5,"_123":124},"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",20,"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';\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 muted/adjusted for dark backgrounds\nconst ROLE_COLORS_DARK = {\n doctor: { bg: '#4a2828', border: '#f4978e', text: '#fcd5ce', activeBg: '#e86a6a' },\n fighter: { bg: '#4a2810', border: '#fb923c', text: '#fed7aa', activeBg: '#ea580c' },\n invoker: { bg: '#252850', border: '#818cf8', text: '#c7d2fe', activeBg: '#4f46e5' },\n magician: { bg: '#3d1545', border: '#e879f9', text: '#f5d0fe', activeBg: '#c026d3' },\n naturalist: { bg: '#1a3d25', border: '#4ade80', text: '#bbf7d0', activeBg: '#16a34a' },\n ranger: { bg: '#153d45', border: '#22d3ee', text: '#a5f3fc', activeBg: '#0891b2' },\n spy: { bg: '#2d1f50', border: '#a78bfa', text: '#ddd6fe', activeBg: '#7c3aed' },\n wizard: { bg: '#4a3d15', 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 sun: '',\n moon: '',\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 loadTheme() {\n try {\n const saved = localStorage.getItem(THEME_KEY);\n if (saved) return saved;\n // Check system preference\n if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n return 'dark';\n }\n } catch (e) {\n console.warn('Failed to load theme:', e);\n }\n return 'light';\n}\n\nfunction saveTheme(theme) {\n try {\n localStorage.setItem(THEME_KEY, 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// Theme Toggle Component\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 'aria-label': isDark ? 'Switch to light mode' : 'Switch to dark mode'\n },\n React.createElement('span', {\n dangerouslySetInnerHTML: { __html: isDark ? Icons.sun : Icons.moon },\n style: { display: 'inline-flex', width: '20px', height: '20px' }\n })\n );\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 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 [isDark, setIsDark] = useState(() => loadTheme() === 'dark');\n \n const [selectedIds, setSelectedIds] = useState(() => loadSelections().ids);\n const [selectedAbilities, setSelectedAbilities] = useState(() => loadSelections().abilities);\n \n // Apply theme to document\n useEffect(() => {\n document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');\n saveTheme(isDark ? 'dark' : 'light');\n }, [isDark]);\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 toggleTheme = () => {\n setIsDark(!isDark);\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 currentRoleColors = 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 = currentRoleColors[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","// 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","createdAt",["D",1767794248341],"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",{"_93":92,"_101":97},"org",{"_93":92,"_94":95,"_96":97,"_18":54,"_98":99,"_100":25},"branch",{"_13":14,"_32":83,"_42":41,"_84":43,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":44,"_91":92},"isOwned","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=1789541999&sig=7032040c53bed00f88177505596e579d7fe702ff82f3f97f431146d41baae6d9","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",{"_159":60,"_160":161,"_162":60,"_163":164,"_165":166},"contents",[125,126,127,128],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_42":152,"_32":153,"_30":154,"_132":-5,"_40":41,"_39":155,"_134":120,"_37":156,"_13":60,"_33":20,"_34":157,"_24":25,"_138":-5,"_27":158},{"_42":148,"_32":28,"_30":31,"_132":-5,"_40":41,"_39":14,"_134":120,"_37":149,"_13":150,"_33":20,"_34":36,"_24":25,"_138":-5,"_27":151},{"_42":140,"_32":141,"_30":142,"_132":-5,"_40":41,"_39":143,"_134":120,"_37":144,"_13":60,"_33":145,"_34":146,"_24":25,"_138":-5,"_27":147},{"_42":129,"_32":130,"_30":131,"_132":-5,"_40":41,"_39":133,"_134":120,"_37":135,"_13":136,"_33":20,"_34":137,"_24":25,"_138":-5,"_27":139},"7da6f3e8-ebd0-11f0-8343-42dde27851f2","styles.ts","427f1da6-e81d-11f0-9add-42dde27851f2","parentId",19,"latest",["D",1767794114213],5,"// 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\n[data-theme=\"dark\"] {\n --ink: #f0f0f0;\n --paper: #1a1a1a;\n --warm-gray: #0d0d0d;\n --border: #333333;\n --border-strong: #444444;\n --muted: #a0a0a0;\n --accent: #ff4081;\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 transition: background-color 0.3s, color 0.3s;\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 position: relative;\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/* Theme toggle button */\n.theme-toggle {\n position: absolute;\n top: 0;\n right: 0;\n width: 44px;\n height: 44px;\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n background: var(--paper);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n font-size: 1.25rem;\n}\n\n.theme-toggle:hover {\n border-color: var(--border-strong);\n background: var(--warm-gray);\n}\n\n[data-theme=\"dark\"] .theme-toggle:hover {\n background: var(--border);\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 transition: background-color 0.3s, border-color 0.3s;\n}\n\n[data-theme=\"dark\"] .card {\n box-shadow: 0 2px 8px rgba(0,0,0,0.2);\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 transition: background-color 0.3s, border-color 0.3s;\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, background-color 0.3s;\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 transition: background-color 0.15s, color 0.15s;\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[data-theme=\"dark\"] mark {\n background: #854d0e;\n color: #fef9c3;\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, background-color 0.3s;\n}\n\n.path-header:hover {\n border-color: var(--border-strong);\n}\n\n.path-emoji {\n font-size: 1.25rem;\n line-height: 1;\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.locked {\n background: var(--warm-gray);\n border-color: var(--border);\n color: var(--border-strong);\n cursor: not-allowed;\n}\n\n.ability-checkbox svg {\n width: 14px;\n height: 14px;\n}\n\n.ability-index {\n font-family: 'Alegreya Sans SC', sans-serif;\n font-weight: 700;\n font-size: 0.75rem;\n color: var(--muted);\n min-width: 18px;\n text-align: center;\n}\n\n.ability-card.locked {\n opacity: 0.6;\n}\n\n.ability-card.locked .ability-name {\n color: var(--muted);\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 transition: background-color 0.3s, border-color 0.3s;\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, background-color 0.3s, border-color 0.3s;\n z-index: 100;\n}\n\n[data-theme=\"dark\"] .print-toolbar {\n box-shadow: 0 -4px 12px rgba(0,0,0,0.3);\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[data-theme=\"dark\"] .btn-primary {\n background: #f0f0f0;\n color: #1a1a1a;\n border-color: #f0f0f0;\n}\n\n[data-theme=\"dark\"] .btn-primary:hover {\n background: #d0d0d0;\n border-color: #d0d0d0;\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[data-theme=\"dark\"] .btn-danger:hover {\n background: #3d1a24;\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 .theme-toggle { width: 38px; height: 38px; font-size: 1.1rem; }\n}\n`;\n","label",[130],"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",[141],"cd99f634-ebd0-11f0-b254-42dde27851f2",["D",1767794248341],11,[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",[153],"pulls","branches",1,"forks","envVars",{"_167":60,"_169":60},"connections",{"_167":60,"_168":60},"count","unfilledCount","emptyCount",{"_42":152,"_32":153,"_30":154,"_132":-5,"_40":41,"_39":155,"_134":120,"_37":184,"_13":60,"_33":20,"_34":157,"_24":25,"_138":-5,"_175":185,"_27":186},{"_42":148,"_32":28,"_30":31,"_132":-5,"_40":41,"_39":14,"_134":120,"_37":181,"_13":150,"_33":20,"_34":36,"_24":25,"_138":-5,"_175":182,"_27":183},{"_42":140,"_32":141,"_30":142,"_132":-5,"_40":41,"_39":143,"_134":120,"_37":178,"_13":60,"_33":145,"_34":146,"_24":25,"_138":-5,"_175":179,"_27":180},{"_42":129,"_32":130,"_30":131,"_132":-5,"_40":41,"_39":133,"_134":120,"_37":174,"_13":136,"_33":20,"_34":137,"_24":25,"_138":-5,"_175":176,"_27":177},["D",1767794114213],"children",[],[130],["D",1767387348867],[],[141],["D",1767794248341],[],[28],["D",1767387359149],[],[153],["D",1767387244254],{"_93":92,"_101":97},{"_93":92,"_94":95,"_96":97,"_18":54,"_98":99,"_100":25},{"_13":14,"_32":83,"_42":41,"_84":43,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":44,"_91":92},"ctx",{"_76":-5,"_122":224,"_225":226,"_227":228,"_229":25,"_230":25,"_231":25,"_232":120,"_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":83,"_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 · v20