[{"_1":2,"_171":-5,"_172":-5},"loaderData",{"_3":4,"_92":93},"root",{"_5":6,"_35":36,"_65":66},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20,"_34":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","0565155793e5d1dcbfc933cbf424073f8d168deb","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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","API_URL","https://api.val.town","clerkState",{"_67":68},"__internal_clerk_state",{"_69":70,"_71":46,"_72":73,"_74":73,"_75":20,"_76":73,"_77":73,"_78":73,"_79":73,"_80":81,"_90":20,"_91":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_82":20,"_19":20,"_83":73,"_84":85,"_86":73,"_87":46,"_88":20,"_89":73},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_94":95,"_96":97,"_98":99,"_100":101,"_149":150,"_167":168,"_169":170},"handle","dcm31","name","quest-encounters","path","client.ts","project",{"_102":103,"_96":97,"_104":105,"_106":-5,"_107":20,"_108":109,"_110":111,"_112":-5,"_12":113,"_114":-5,"_115":20,"_116":-5,"_117":-5,"_118":32,"_14":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":129,"_132":133,"_135":136,"_148":20},"id","c2676bba-e771-11f0-a247-42dde27851f2","createdAt",["D",1767313622733],"deletedAt","legacyEnvVars","privacy","public","description","Quest RPG encounter builder with official typography","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","d663a026-6449-42f6-9156-1d4a2d64d38c","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_94":95,"_130":131},"profileImageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/260ec866-bb5d-4641-4bfe-526cca896a00/square512","org",{"_94":95,"_134":131,"_12":113},"avatar","branch",{"_137":138,"_96":44,"_102":139,"_140":103,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":97,"_147":95},"version",13,"c267ae72-e771-11f0-a247-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_102":151,"_96":99,"_152":153,"_154":-5,"_155":139,"_156":138,"_157":158,"_104":159,"_137":160,"_161":149,"_162":163,"_164":20,"_165":-5,"_98":166},"d16392e8-e77a-11f0-9ad7-42dde27851f2","fileId","6e661432-e774-11f0-a2ab-42dde27851f2","parentId","branchId","branchVersion","latest",true,["D",1767317513336],2,"fileType","content","// Client-side React app code (runs in browser)\n\nexport function getClientScript(bestiaryJson: string): string {\n return `\nconst { useState, useMemo, useEffect } = React;\n\nconst BESTIARY = ${bestiaryJson};\n\n// SVG Icons\nconst Icons = {\n chevronDown: '',\n arrowLeft: '',\n play: '',\n download: '',\n book: '',\n skull: '',\n};\n\nfunction Icon({ name, className }) {\n return React.createElement('span', {\n className: className,\n dangerouslySetInnerHTML: { __html: Icons[name] },\n style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }\n });\n}\n\nfunction classifyDifficulty(cost, ranges) {\n if (cost >= ranges.Easy.min && cost <= ranges.Easy.max) return \"Easy\";\n if (cost >= ranges.Fair.min && cost <= ranges.Fair.max) return \"Fair\";\n if (cost >= ranges.Deadly.min && cost <= ranges.Deadly.max) return \"Deadly\";\n return null;\n}\n\nfunction generateEncounters(partyHP) {\n const ranges = {\n Easy: { min: partyHP * 0.2, max: partyHP * 0.49 },\n Fair: { min: partyHP * 0.5, max: partyHP * 0.89 },\n Deadly: { min: partyHP * 0.9, max: partyHP * 1.3 },\n };\n \n const encounters = [];\n const seen = new Set();\n \n const minion = BESTIARY.find(c => c.id === \"minion\");\n const veteran = BESTIARY.find(c => c.id === \"veteran\");\n const boss = BESTIARY.find(c => c.id === \"boss\");\n const bigBoss = BESTIARY.find(c => c.id === \"big_boss\");\n \n const targets = [ranges.Easy.max, ranges.Fair.max, ranges.Deadly.max];\n \n for (const target of targets) {\n const minionCount = Math.floor(target / minion.cost);\n if (minionCount > 0) {\n const roster = Array(minionCount).fill(minion);\n const cost = roster.reduce((s, c) => s + c.cost, 0);\n const difficulty = classifyDifficulty(cost, ranges);\n const id = \"horde-\" + cost;\n if (difficulty && !seen.has(id)) {\n seen.add(id);\n encounters.push({ id, name: \"The Horde\", flavor: minionCount + \" minions swarm the party\", totalCost: cost, roster, difficulty });\n }\n }\n \n const veteranCount = Math.floor(target / veteran.cost);\n if (veteranCount > 0) {\n const roster = Array(veteranCount).fill(veteran);\n const cost = roster.reduce((s, c) => s + c.cost, 0);\n const difficulty = classifyDifficulty(cost, ranges);\n const id = \"elite-\" + cost;\n if (difficulty && !seen.has(id)) {\n seen.add(id);\n encounters.push({ id, name: \"Elite Squad\", flavor: veteranCount + \" battle-hardened veterans\", totalCost: cost, roster, difficulty });\n }\n }\n \n if (target > boss.cost) {\n const addCount = Math.round((target - boss.cost) / minion.cost);\n const roster = [boss, ...Array(addCount).fill(minion)];\n const cost = roster.reduce((s, c) => s + c.cost, 0);\n const difficulty = classifyDifficulty(cost, ranges);\n const id = \"boss-\" + cost;\n if (difficulty && !seen.has(id)) {\n seen.add(id);\n encounters.push({ id, name: \"Boss Leader\", flavor: \"1 Boss with \" + addCount + \" minion guards\", totalCost: cost, roster, difficulty });\n }\n }\n \n if (target >= bigBoss.cost) {\n const addCount = Math.floor((target - bigBoss.cost) / minion.cost);\n const roster = [bigBoss, ...Array(addCount).fill(minion)];\n const cost = roster.reduce((s, c) => s + c.cost, 0);\n const difficulty = classifyDifficulty(cost, ranges);\n const id = \"villain-\" + cost;\n if (difficulty && !seen.has(id)) {\n seen.add(id);\n encounters.push({ id, name: \"Major Villain\", flavor: addCount > 0 ? \"Big Boss with \" + addCount + \" loyal guards\" : \"A fearsome Big Boss stands alone\", totalCost: cost, roster, difficulty });\n }\n }\n }\n \n return { encounters: encounters.sort((a, b) => a.totalCost - b.totalCost), ranges };\n}\n\n// PDF Generation - Tarot-sized cards (70mm x 120mm) with rounded corners\nasync function downloadPDF(encounter) {\n if (!window.jspdf) {\n alert(\"PDF loading... try again.\");\n return;\n }\n \n const { jsPDF } = window.jspdf;\n const doc = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' });\n \n // Tarot card dimensions: 70mm x 120mm\n const cardW = 70, cardH = 120;\n const cornerRadius = 5;\n const marginX = (210 - cardW * 2) / 3;\n const marginY = 15, gapY = 8;\n \n encounter.roster.forEach((unit, 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 using jsPDF's built-in roundedRect\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 // Name - centered, large\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(16);\n doc.setTextColor(30, 30, 30);\n doc.text(unit.name.toUpperCase(), x + cardW / 2, y + 20, { align: 'center' });\n \n // Role - centered below name\n doc.setFontSize(9);\n doc.setTextColor(100);\n doc.text(unit.role.toUpperCase(), x + cardW / 2, y + 28, { align: 'center' });\n \n // Decorative line\n doc.setLineWidth(0.5);\n doc.setDrawColor(180);\n doc.line(x + 15, y + 35, x + cardW - 15, y + 35);\n \n // Large HP display in center\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(48);\n doc.setTextColor(30, 30, 30);\n doc.text(String(unit.hp), x + cardW / 2, y + 65, { align: 'center' });\n \n doc.setFontSize(10);\n doc.setTextColor(100);\n doc.text(\"HIT POINTS\", x + cardW / 2, y + 73, { align: 'center' });\n \n // Attack stat\n doc.setLineWidth(0.5);\n doc.setDrawColor(180);\n doc.line(x + 15, y + 82, x + cardW - 15, y + 82);\n \n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(24);\n doc.setTextColor(30, 30, 30);\n doc.text(String(unit.attack), x + cardW / 2, y + 97, { align: 'center' });\n \n doc.setFontSize(9);\n doc.setTextColor(100);\n doc.text(\"ATTACK\", x + cardW / 2, y + 104, { align: 'center' });\n \n // Footer\n doc.setFontSize(7);\n doc.setTextColor(150);\n doc.text(\"QUEST RPG\", x + cardW / 2, y + cardH - 6, { align: 'center' });\n });\n \n doc.save(encounter.name.replace(/\\\\s+/g, '_') + '_Cards.pdf');\n}\n\n// Components\nfunction DifficultyGuide({ partyHP, ranges }) {\n const [open, setOpen] = useState(false);\n \n return React.createElement('div', { className: 'difficulty-guide' },\n React.createElement('div', { className: 'guide-header', onClick: () => setOpen(!open) },\n React.createElement(Icon, { name: 'book', className: 'icon' }),\n React.createElement('h3', null, 'DIFFICULTY GUIDE'),\n React.createElement('span', { \n className: 'chevron ' + (open ? 'open' : ''),\n dangerouslySetInnerHTML: { __html: Icons.chevronDown }\n })\n ),\n React.createElement('div', { className: 'guide-content ' + (open ? 'open' : '') },\n React.createElement('div', { className: 'ranges' },\n React.createElement('div', { className: 'range' },\n React.createElement('span', { className: 'label' }, 'EASY (20-49%)'),\n React.createElement('span', { className: 'value' }, Math.floor(ranges.Easy.min) + ' - ' + Math.floor(ranges.Easy.max))\n ),\n React.createElement('div', { className: 'range' },\n React.createElement('span', { className: 'label' }, 'FAIR (50-89%)'),\n React.createElement('span', { className: 'value' }, Math.floor(ranges.Fair.min) + ' - ' + Math.floor(ranges.Fair.max))\n ),\n React.createElement('div', { className: 'range' },\n React.createElement('span', { className: 'label' }, 'DEADLY (90%+)'),\n React.createElement('span', { className: 'value' }, Math.floor(ranges.Deadly.min) + ' - ' + Math.floor(ranges.Deadly.max))\n )\n ),\n React.createElement('div', { className: 'formula' }, 'NPC Rating = HP + Attack + 1'),\n React.createElement('blockquote', null,\n '\"First, add up the current hit points of the entire party... Then, add together: their hit points, the highest damage they deal in a turn, and the number of NPCs.\"',\n React.createElement('cite', null, '- QUEST GAME BOOK, PAGE 108')\n )\n )\n );\n}\n\nfunction EncounterCard({ enc, onRun, onPrint }) {\n // Group roster by unit type and get stats for each\n const unitGroups = {};\n enc.roster.forEach(u => {\n if (!unitGroups[u.name]) {\n unitGroups[u.name] = { count: 0, hp: u.hp, attack: u.attack };\n }\n unitGroups[u.name].count++;\n });\n \n return React.createElement('div', { className: 'encounter-card' },\n React.createElement('div', { className: 'encounter-header' },\n React.createElement('span', { className: 'encounter-name' }, enc.name),\n React.createElement('span', { className: 'encounter-rating' }, 'Rating ' + enc.totalCost)\n ),\n React.createElement('p', { className: 'encounter-flavor' }, enc.flavor),\n // Roster stats - show each enemy type with its stats inline\n React.createElement('div', { className: 'roster-stats' },\n Object.entries(unitGroups).map(([name, data]) => {\n return React.createElement('span', { key: name, className: 'roster-unit' },\n React.createElement('span', { className: 'count' }, data.count + 'x ' + name),\n React.createElement('span', { className: 'stats' }, data.hp + ' HP / ' + data.attack + ' Dmg')\n );\n })\n ),\n React.createElement('div', { className: 'encounter-actions' },\n React.createElement('button', { className: 'btn btn-primary', onClick: () => onRun(enc) },\n React.createElement('span', { dangerouslySetInnerHTML: { __html: Icons.play } }),\n 'RUN'\n ),\n React.createElement('button', { className: 'btn', onClick: () => onPrint(enc) },\n React.createElement('span', { dangerouslySetInnerHTML: { __html: Icons.download } }),\n 'PDF'\n )\n )\n );\n}\n\nfunction DifficultySection({ title, encounters, onRun, onPrint }) {\n const [open, setOpen] = useState(false);\n \n if (!encounters.length) return null;\n \n const badgeClass = title.toLowerCase();\n \n return React.createElement('div', { className: 'difficulty-section' },\n React.createElement('div', { className: 'difficulty-header', onClick: () => setOpen(!open) },\n React.createElement('span', { className: 'difficulty-badge ' + badgeClass }, title.toUpperCase()),\n React.createElement('span', { className: 'difficulty-count' }, encounters.length + ' encounters'),\n React.createElement('span', { \n className: 'difficulty-chevron ' + (open ? 'open' : ''),\n dangerouslySetInnerHTML: { __html: Icons.chevronDown }\n })\n ),\n React.createElement('div', { className: 'difficulty-grid ' + (open ? 'open' : '') },\n encounters.map(enc => React.createElement(EncounterCard, {\n key: enc.id,\n enc,\n onRun,\n onPrint\n }))\n )\n );\n}\n\nfunction CombatUnit({ unit, onDamage, onHeal }) {\n const isDead = unit.currentHp <= 0;\n \n return React.createElement('div', { className: 'combat-unit ' + (isDead ? 'dead' : '') },\n React.createElement('div', { className: 'unit-info' },\n React.createElement('div', { className: 'unit-hp' }, \n isDead \n ? React.createElement('span', { dangerouslySetInnerHTML: { __html: Icons.skull }, style: { width: 24, height: 24 } })\n : unit.currentHp\n ),\n React.createElement('div', null,\n React.createElement('div', { className: 'unit-name' }, unit.name),\n React.createElement('div', { className: 'unit-stats' }, 'MAX HP ' + unit.hp + ' / ATK ' + unit.attack)\n )\n ),\n !isDead \n ? React.createElement('div', { className: 'unit-controls' },\n React.createElement('button', { className: 'damage', onClick: () => onDamage(unit.uniqueId) }, '-'),\n React.createElement('button', { className: 'heal', onClick: () => onHeal(unit.uniqueId) }, '+')\n )\n : React.createElement('button', { className: 'btn', onClick: () => onHeal(unit.uniqueId, unit.hp) }, 'REVIVE')\n );\n}\n\nfunction Attribution() {\n return React.createElement('footer', { className: 'attribution' },\n React.createElement('p', null, \n 'This tool uses mechanics from the ',\n React.createElement('a', { href: 'https://www.adventure.game/resources/', target: '_blank', rel: 'noopener' }, 'Quest Creators Resource'),\n ' by ',\n React.createElement('a', { href: 'https://www.adventure.game/', target: '_blank', rel: 'noopener' }, 'The Adventure Guild'),\n ', licensed under ',\n React.createElement('a', { href: 'https://creativecommons.org/licenses/by/4.0/', target: '_blank', rel: 'noopener' }, 'CC-BY 4.0'),\n '.'\n ),\n React.createElement('p', null,\n 'Quest was created by T.C. Sottek.'\n )\n );\n}\n\nfunction App() {\n const [partyHP, setPartyHP] = useState(40);\n const [view, setView] = useState('setup');\n const [selectedEncounter, setSelectedEncounter] = useState(null);\n const [combatRoster, setCombatRoster] = useState([]);\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 const { encounters, ranges } = useMemo(() => generateEncounters(partyHP), [partyHP]);\n \n const handleRun = (enc) => {\n setSelectedEncounter(enc);\n setCombatRoster(enc.roster.map((u, i) => ({\n ...u,\n currentHp: u.hp,\n uniqueId: u.id + '-' + i + '-' + Date.now()\n })));\n setView('run');\n };\n \n const handleDamage = (id) => {\n setCombatRoster(r => r.map(u => \n u.uniqueId === id ? { ...u, currentHp: Math.max(0, u.currentHp - 1) } : u\n ));\n };\n \n const handleHeal = (id, amt = 1) => {\n setCombatRoster(r => r.map(u => \n u.uniqueId === id ? { ...u, currentHp: Math.min(u.hp, u.currentHp + amt) } : u\n ));\n };\n \n if (view === 'run' && selectedEncounter) {\n const allDead = combatRoster.every(u => u.currentHp === 0);\n \n return React.createElement('div', { className: 'combat-view' },\n React.createElement('div', { className: 'app' },\n React.createElement('div', { className: 'combat-header' },\n React.createElement('button', { className: 'back', onClick: () => setView('setup') },\n React.createElement('span', { dangerouslySetInnerHTML: { __html: Icons.arrowLeft } }),\n 'BACK'\n ),\n React.createElement('div', { className: 'title' },\n React.createElement('h2', null, selectedEncounter.name),\n React.createElement('span', { className: 'subtitle' }, 'BATTLE TRACKER')\n )\n ),\n combatRoster.map(unit => React.createElement(CombatUnit, {\n key: unit.uniqueId,\n unit,\n onDamage: handleDamage,\n onHeal: handleHeal\n })),\n allDead && React.createElement('div', { className: 'victory' },\n React.createElement('h3', null, 'Encounter Cleared!'),\n React.createElement('button', { className: 'btn btn-primary', onClick: () => setView('setup') }, 'PLAN NEXT BATTLE')\n )\n )\n );\n }\n \n return React.createElement('div', { className: 'app' },\n React.createElement('header', null,\n React.createElement('h1', null, 'ENCOUNTER BUILDER'),\n React.createElement('span', { className: 'subtitle' }, 'QUEST RPG')\n ),\n React.createElement('div', { className: 'card party-input' },\n React.createElement('label', null, 'TOTAL PARTY HP'),\n React.createElement('div', { className: 'hp-row' },\n React.createElement('button', { onClick: () => setPartyHP(h => Math.max(10, h - 5)) }, '-'),\n React.createElement('input', {\n type: 'number',\n value: partyHP,\n onChange: e => setPartyHP(parseInt(e.target.value) || 10)\n }),\n React.createElement('button', { onClick: () => setPartyHP(h => h + 5) }, '+')\n ),\n React.createElement('div', { className: 'presets' },\n [2, 3, 4, 5, 6].map(n => \n React.createElement('button', { key: n, onClick: () => setPartyHP(n * 10) }, n + ' PLAYERS')\n )\n )\n ),\n React.createElement(DifficultyGuide, { partyHP, ranges }),\n React.createElement(DifficultySection, {\n title: 'Easy',\n encounters: encounters.filter(e => e.difficulty === 'Easy'),\n onRun: handleRun,\n onPrint: downloadPDF\n }),\n React.createElement(DifficultySection, {\n title: 'Fair',\n encounters: encounters.filter(e => e.difficulty === 'Fair'),\n onRun: handleRun,\n onPrint: downloadPDF\n }),\n React.createElement(DifficultySection, {\n title: 'Deadly',\n encounters: encounters.filter(e => e.difficulty === 'Deadly'),\n onRun: handleRun,\n onPrint: downloadPDF\n }),\n React.createElement(Attribution, null)\n );\n}\n\nReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));\n`;\n}\n","deleted","label",[99],"permalink","https://www.val.town/x/dcm31/quest-encounters/code/client.ts","extension","ts","actionData","errors"]