Quest Character Sheet Generator

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_196":197,"_198":199},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_104":85,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":122,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",88,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","client.ts","latestPath","fileId","779c6606-e859-11f0-bc21-42dde27851f2","name","fileType","script","content","export const clientScript = `\nconst ABILITY_API = \"https://dcm31--a9a4164a278311f0b46e569c3dd06744.web.val.run\";\n\nconst SAMPLE = [\n {\n \"id\": \"fighter_veteran\",\n \"name\": \"Captain Vane\",\n \"role\": \"Fighter\",\n \"bio\": \"My name is **Captain Vane**. I am **45** years old and stand **6'2\\\\\"**. People notice my **scarred cheek**, my **polished armor**, and my **booming voice**. I wear **the heavy plate of the City Watch**. I hail from **the Citadel**. I believe in **order and discipline above all else**. I dream of **a day when I can finally lay down my sword**.\",\n \"ideal\": \"Order\",\n \"flaw\": \"Stubborn\",\n \"dream\": \"Lasting Peace\",\n \"backstory\": \"Vane rose through the ranks of the City Watch over twenty brutal years. He held the eastern gate during the Siege of Ironhold, where he lost half his company and earned the scar that splits his cheek. He's buried more friends than he can count and trained twice as many recruits. The weight of command sits heavy on his shoulders, but he carries it because no one else will. His wife left years ago, tired of waiting for a husband who never came home. Now the Watch is his only family, and he protects them with everything he has.\",\n \"playstyle\": \"Vane is a wall of steel between his allies and danger. He provokes enemies into focusing their attacks on him, then intercepts blows meant for others. When struck, he counterattacks with devastating precision. In desperate moments, he unleashes wild attacks that sacrifice defense for overwhelming offense. Before any battle, he sizes up his opponents, reading their weaknesses. His booming voice summons the blood of his companions, rallying them to fight harder when hope seems lost.\",\n \"abilities\": [\n { \"path\": \"Dueling\", \"name\": \"Counterattack\" },\n { \"path\": \"Dueling\", \"name\": \"Wild Attack\" },\n { \"path\": \"Tactics\", \"name\": \"Provoke\" },\n { \"path\": \"Tactics\", \"name\": \"Intercept\" },\n { \"path\": \"Leadership\", \"name\": \"Size Up\" },\n { \"path\": \"Camaraderie\", \"name\": \"Summon The Blood\" }\n ],\n \"inventory\": [\n \"Plate Armor (3 Armor)\",\n \"Heavy Shield (+1 Armor)\",\n \"Longsword (2 Damage)\",\n \"Crossbow & Bolts\",\n \"Blink Blade (Treasure)\"\n ],\n \"portrait\": \"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/b8b25671-97bd-41b2-1dbf-db884ecccd00/public\"\n },\n {\n \"id\": \"spy_alleycat\",\n \"name\": \"The Alleycat\",\n \"role\": \"Spy\",\n \"bio\": \"My name is **The Alleycat**. I am **23** years old and stand **5'4\\\\\"**. People notice my **broad-brimmed hat**, the **warm colors of my scarf**, and my **watchful eyes**. I wear **an oversized flannel coat with hidden pockets**. I hail from **the City Slums**. I believe in **protecting the neighborhood from corrupt guards**. I dream of **a city where no one has to hide**.\",\n \"ideal\": \"Community\",\n \"flaw\": \"Curious\",\n \"dream\": \"Safety for All\",\n \"backstory\": \"No one knows the Alleycat's real name—not even them anymore. Orphaned young in the Tangles, they learned to survive by watching, listening, and never being seen. They became the eyes and ears of the slum, warning families when the corrupt Watch came collecting 'taxes.' The neighbors leave food on windowsills for them. The children think they're a folk hero. The Watch thinks they're a ghost. The Alleycat intends to keep it that way, one stolen document and exposed scandal at a time.\",\n \"playstyle\": \"The Alleycat never fights fair—they fight smart. Their silver tongue talks them into places locks can't, and their cosmopolitan knowledge lets them blend into any crowd. Hidden blades are strapped beneath their coat, ready for sneak attacks from the shadows. When things go wrong, they vanish into a disguise or scale walls with their feather hook. They know every secret passage, every bribed guard, every way out of trouble before trouble even starts.\",\n \"abilities\": [\n { \"path\": \"Charisma\", \"name\": \"Cosmopolitan\" },\n { \"path\": \"Charisma\", \"name\": \"Silver Tongue\" },\n { \"path\": \"Termination\", \"name\": \"Sneak Attack\" },\n { \"path\": \"Concealment\", \"name\": \"Strap\" },\n { \"path\": \"Concealment\", \"name\": \"Disguise\" },\n { \"path\": \"Infiltration\", \"name\": \"Feather Hook\" }\n ],\n \"inventory\": [\n \"Leather Armor (1 Armor)\",\n \"Dual Daggers (2 Damage)\",\n \"Lockpicks (5 uses)\",\n \"Smoke Bomb\",\n \"Atlas Incognito (Treasure)\"\n ],\n \"portrait\": \"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/9291be0f-d96d-4d62-b6b8-f170711e0100/public\"\n },\n {\n \"id\": \"ranger_scout\",\n \"name\": \"Kael Deep-Scout\",\n \"role\": \"Ranger\",\n \"bio\": \"My name is **Kael**. I am **28** years old and stand **5'8\\\\\"**. People notice my **mud-stained boots**, the **falcon on my shoulder**, and my **quiet demeanor**. I wear **camouflaged leathers blended with foliage**. I hail from **the Borderlands**. I believe **civilization is a trap**. I dream of **mapping the Unknown Wilds**.\",\n \"ideal\": \"Freedom\",\n \"flaw\": \"Loner\",\n \"dream\": \"Map the Unknown\",\n \"backstory\": \"Kael was the youngest of seven children on a Borderlands farmstead. When plague took the rest, they walked into the wilderness and never looked back. For ten years, they've ranged deeper than any scout, guided only by the stars and a falcon named Whisper who found them half-dead in a ravine. Kael has seen things in the Unknown Wilds that would break lesser minds—and mapped them all. They return to civilization only to resupply and sell their charts, speaking as few words as possible before vanishing again into the green.\",\n \"playstyle\": \"Kael is a ghost in the wilderness. They track prey across any terrain, reading signs others would never notice. From impossible distances, their farshot arrows find their mark. They stalk through undergrowth without disturbing a single leaf. Whisper the falcon serves as their animal partner, scouting ahead and warning of danger. When the party is lost, Kael navigates by instinct, always finding the path. They speak more freely with animals than with people.\",\n \"abilities\": [\n { \"path\": \"Hunter\", \"name\": \"Track\" },\n { \"path\": \"Hunter\", \"name\": \"Farshot\" },\n { \"path\": \"Hunter\", \"name\": \"Stalk\" },\n { \"path\": \"Friend\", \"name\": \"Speak With Animal\" },\n { \"path\": \"Friend\", \"name\": \"Animal Partner\" },\n { \"path\": \"Pathfinder\", \"name\": \"Navigate\" }\n ],\n \"inventory\": [\n \"Leather Armor (1 Armor)\",\n \"Longbow (2 Damage)\",\n \"Quiver (20 Arrows)\",\n \"Survival Kit\",\n \"Spyglasses (Treasure)\"\n ],\n \"portrait\": \"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d0b5908d-951d-48f8-50ed-18791db2f000/public\"\n },\n {\n \"id\": \"naturalist_wolcen\",\n \"name\": \"Wolcen\",\n \"role\": \"Naturalist\",\n \"bio\": \"My name is **Wolcen**. I am **an ancient spirit**. People notice my **translucent skin**, the **leaves floating in my wake**, and the **smell of rain**. I wear **robes woven from living vines**. I hail from **the Deep Woods**. I believe **nature must be preserved at all costs**. I dream of **regrowing the World Tree**.\",\n \"ideal\": \"Balance\",\n \"flaw\": \"Detached\",\n \"dream\": \"Restore Nature\",\n \"backstory\": \"Wolcen remembers when the World Tree's roots stretched beneath every forest. They watched it fall to axes and fire a thousand years ago, and their grief became the Deep Woods itself—a place where nature fights back. They slept for centuries in a grove of ancient oaks until loggers came with iron and flame. Now Wolcen walks among mortals again, struggling to understand creatures who live such brief, violent lives. They seek the seeds of the World Tree, scattered across the realm, hoping to undo humanity's greatest sin.\",\n \"playstyle\": \"Wolcen flows between forms like water, taking animal shape to scout, fight, or flee. Thorns erupt from the earth at their command, entangling foes. They freeze enemies solid or burn them with primal fire, wielding the elements as extensions of their will. Their presence lures creatures to them, calming beasts and drawing prey. When allies fall wounded, Wolcen mends their flesh with ancient magic, knitting bone and sealing wounds with a touch.\",\n \"abilities\": [\n { \"path\": \"Shapeshifter\", \"name\": \"Animal Form\" },\n { \"path\": \"Summoner\", \"name\": \"Thorn\" },\n { \"path\": \"Elementalist\", \"name\": \"Freeze\" },\n { \"path\": \"Elementalist\", \"name\": \"Burn\" },\n { \"path\": \"Wild\", \"name\": \"Lure\" },\n { \"path\": \"Restoration\", \"name\": \"Mend\" }\n ],\n \"inventory\": [\n \"Vine Robes\",\n \"Wooden Staff (1 Damage)\",\n \"Herb Pouch\",\n \"Seeds\",\n \"Evergreen Ring (Treasure)\"\n ],\n \"portrait\": \"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/4bd0a926-eba9-4c5a-1d41-59e6746c7200/public\"\n },\n {\n \"id\": \"doctor_vesper\",\n \"name\": \"Dr. Vesper Ashwood\",\n \"role\": \"Doctor\",\n \"bio\": \"My name is **Dr. Vesper Ashwood**. I am **38** years old and stand **5'7\\\\\"**. People notice my **steady hands**, my **analytical gaze**, and my **pristine lab coat**. I wear **practical clothes with many pockets for instruments**. I hail from **the University Hospital**. I believe **death is just another puzzle to solve**. I dream of **conquering mortality itself**.\",\n \"ideal\": \"Knowledge\",\n \"flaw\": \"Detached\",\n \"dream\": \"Conquer Death\",\n \"backstory\": \"Vesper was the University's most promising surgeon until they started asking questions the faculty couldn't answer. Why do some patients survive wounds that kill others? What happens in the moment between life and death? Their research led them to forbidden texts and darker arts. The University expelled them quietly, afraid of scandal. Now Vesper works in the margins—healing those who can't afford real doctors, and studying death in all its forms. They've crossed lines that can't be uncrossed, but they've never lost a patient they truly wanted to save.\",\n \"playstyle\": \"Vesper is the difference between life and death. They heal wounds with surgical precision and can put enemies into magical sleep. Their diagnostic skills identify any ailment, curse, or poison at a glance. They examine the dead for clues others would miss, and their deathsense alerts them when mortality draws near. Most unsettling, they speak with the dead themselves, asking questions of spirits who linger between worlds. Knowledge, Vesper believes, is worth any price.\",\n \"abilities\": [\n { \"path\": \"Alteration\", \"name\": \"Heal\" },\n { \"path\": \"Alteration\", \"name\": \"Sleep\" },\n { \"path\": \"Examination\", \"name\": \"Diagnose\" },\n { \"path\": \"Examination\", \"name\": \"Examine The Dead\" },\n { \"path\": \"Necromancy\", \"name\": \"Deathsense\" },\n { \"path\": \"Necromancy\", \"name\": \"Speak With Dead\" }\n ],\n \"inventory\": [\n \"Lab Coat\",\n \"Bone Saw (2 Damage)\",\n \"Medical Kit\",\n \"Bandages (x5)\",\n \"Kiln Gauze (Treasure)\"\n ],\n \"portrait\": \"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7d47fe96-f63b-4b35-24c3-f70c6dd65800/public\"\n },\n {\n \"id\": \"wizard_arcanist\",\n \"name\": \"Elara the Arcanist\",\n \"role\": \"Wizard\",\n \"bio\": \"My name is **Elara**. I am **112** years old and stand **5'6\\\\\"**. People notice my **ink-stained fingers**, my **floating books**, and my **glowing staff**. I wear **robes embroidered with runes**. I hail from **the Crystal Spire**. I believe **magic is the only truth**. I dream of **rewriting the laws of physics**.\",\n \"ideal\": \"Power\",\n \"flaw\": \"Arrogant\",\n \"dream\": \"Ascension\",\n \"backstory\": \"Elara was already a master wizard when most humans' grandparents were being born. She has outlived three archmages, survived two magical catastrophes, and written books that shaped how wizards understand reality. None of it is enough. The Crystal Spire's elders called her ambitions dangerous; she called them cowards and left. Now she seeks the legendary Dim Grimoire, said to contain spells that predate the gods themselves. Her familiar, an owl named Paradox, is the only creature she trusts completely—because she created him.\",\n \"playstyle\": \"Elara approaches combat like a chess match she's already won. Magic strikes lance from her staff with devastating precision. She kindles flames with a thought and blinks across the battlefield in eyeblinks. Paradox scouts and distracts while she positions for the perfect spell. Her projection magic senses magical auras, revealing hidden enchantments and lurking spellcasters. And when an enemy's magic threatens her allies, she simply says 'No'—and the spell unravels into nothing.\",\n \"abilities\": [\n { \"path\": \"Evocation\", \"name\": \"Magic Strike\" },\n { \"path\": \"Evocation\", \"name\": \"Kindle\" },\n { \"path\": \"Planeshifting\", \"name\": \"Blink\" },\n { \"path\": \"Conjuration\", \"name\": \"Familiar\" },\n { \"path\": \"Projection\", \"name\": \"Sense Magic\" },\n { \"path\": \"Magecraft\", \"name\": \"No\" }\n ],\n \"inventory\": [\n \"Wizard Robes\",\n \"Spellbook\",\n \"Arcane Focus (Staff)\",\n \"Writing Ink\",\n \"Dim Grimoire (Treasure)\"\n ],\n \"portrait\": \"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/add485aa-1d30-425e-5a63-954177575600/public\"\n },\n {\n \"id\": \"magician_performer\",\n \"name\": \"Silvio the Magnificent\",\n \"role\": \"Magician\",\n \"bio\": \"My name is **Silvio**. I am **25** years old and stand **5'9\\\\\"**. People notice my **dazzling smile**, my **quick hands**, and my **deck of cards**. I wear **a tailored suit with a billowing cape**. I hail from **the Traveling Circus**. I believe **life is a performance**. I dream of **performing for the High King**.\",\n \"ideal\": \"Fame\",\n \"flaw\": \"Vain\",\n \"dream\": \"Royal Performance\",\n \"backstory\": \"Silvio was born in a trunk backstage, raised by acrobats and trained by the circus's aging illusionist. By fifteen, he'd surpassed his master. By twenty, he'd made the circus famous. But tent shows and country fairs aren't enough for Silvio—he wants to perform in the Grand Palace, to make the High King himself gasp in wonder. He left the circus to seek his fortune, armed with nothing but his talent, his charm, and an enchanted wardrobe that cost him three years' savings. The world, he's certain, is ready to be amazed.\",\n \"playstyle\": \"Silvio turns every encounter into a show. His magic tricks confound and distract, making coins appear and weapons vanish. He mesmerizes crowds and individuals alike, holding attention exactly where he wants it. With a gesture, he makes enemies look overthere—anywhere but at him. When needed, he fades into invisibility itself. His whispers carry across impossible distances, coordinating allies or taunting foes. And when the finale comes, he scintillates—filling the air with dazzling lights that blind and bewilder.\",\n \"abilities\": [\n { \"path\": \"Misdirection\", \"name\": \"Magic Tricks\" },\n { \"path\": \"Misdirection\", \"name\": \"Mesmerize\" },\n { \"path\": \"Misdirection\", \"name\": \"Overthere\" },\n { \"path\": \"Misdirection\", \"name\": \"Invisibility\" },\n { \"path\": \"Clairvoyance\", \"name\": \"Whisper\" },\n { \"path\": \"Mayhem\", \"name\": \"Scintillate\" }\n ],\n \"inventory\": [\n \"Fine Clothes\",\n \"Deck of Cards\",\n \"Smoke Bombs\",\n \"Hand Mirror\",\n \"Brell's Couture (Treasure)\"\n ],\n \"portrait\": \"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/bb915236-f995-4824-e247-887bf6629300/public\"\n },\n {\n \"id\": \"invoker_cultist\",\n \"name\": \"Malakar\",\n \"role\": \"Invoker\",\n \"bio\": \"My name is **Malakar**. I am **50** years old and stand **6'0\\\\\"**. People notice my **glowing tattoos**, my **whispered chants**, and my **intense stare**. I wear **ceremonial robes of purple and black**. I hail from **the Void Temple**. I believe **the end is inevitable**. I dream of **awakening the Sleeper**.\",\n \"ideal\": \"Faith\",\n \"flaw\": \"Fanatic\",\n \"dream\": \"Awaken the Sleeper\",\n \"backstory\": \"Malakar was a fisherman's son who nearly drowned at twelve. In the dark water, something spoke to him—something vast and patient that sleeps beneath the world. He's spent forty years serving that voice, rising to high priest of a faith most consider madness. The Void Temple's followers are few but devoted, preparing for the day their god awakens. Malakar doesn't seek destruction—he seeks truth. The Sleeper showed him that everything ends, and in that ending, there is peace. He only wants to share that revelation with the world.\",\n \"playstyle\": \"Malakar channels divine wrath with terrifying certainty. He declares holy truths that compel honesty from liars and reveal hidden things. His soul gaze peers into the hearts of others, seeing their sins and secrets. The evil eye curses those who oppose him with misfortune and dread. When battle comes, he calls down fiery avengers—spirits of flame that fight alongside the faithful. His smite channels divine power through his weapon. And always, his shield of faith protects those who stand with him against the darkness.\",\n \"abilities\": [\n { \"path\": \"Invocation\", \"name\": \"Declare\" },\n { \"path\": \"Inquiries\", \"name\": \"Soul Gaze\" },\n { \"path\": \"Inquiries\", \"name\": \"Evil Eye\" },\n { \"path\": \"Wrath\", \"name\": \"Fiery Avenger\" },\n { \"path\": \"Wrath\", \"name\": \"Smite\" },\n { \"path\": \"Wards\", \"name\": \"Shield\" }\n ],\n \"inventory\": [\n \"Ceremonial Robes\",\n \"Ritual Dagger (2 Damage)\",\n \"Incense\",\n \"Symbol of the Void\",\n \"Accursed Band (Treasure)\"\n ],\n \"portrait\": \"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fee534ba-c180-4797-d7a2-1cd2558a3f00/public\"\n }\n];\n\nlet characters = [];\nlet selected = new Set();\nlet previewIdx = 0;\nlet roleCache = {}; // Cache fetched role data\n\nfunction loadJSON() {\n const input = document.getElementById(\"jsonInput\").value.trim();\n const err = document.getElementById(\"error\");\n try {\n characters = input ? JSON.parse(input) : SAMPLE;\n if (!Array.isArray(characters)) characters = [characters];\n characters.forEach((c, i) => { \n if (!c.id) c.id = \"c\" + i;\n if (!c.portrait) c.portrait = null;\n });\n selected = new Set(characters.map(c => c.id));\n previewIdx = 0;\n err.style.display = \"none\";\n renderList();\n renderPreview();\n } catch (e) {\n err.style.display = \"block\";\n }\n}\n\nfunction esc(str) {\n return String(str || \"\").replace(/&/g, \"&\").replace(//g, \">\");\n}\n\nfunction parseBio(bio) {\n return esc(bio).replace(/\\\\*\\\\*([^*]+)\\\\*\\\\*/g, \"$1\");\n}\n\nfunction stripHtml(html) {\n const div = document.createElement(\"div\");\n div.innerHTML = html;\n return div.textContent || div.innerText || \"\";\n}\n\nfunction renderList() {\n const list = document.getElementById(\"charList\");\n list.innerHTML = \"\";\n characters.forEach((c, i) => {\n const div = document.createElement(\"div\");\n div.className = \"char-item\" + (i === previewIdx ? \" active\" : \"\");\n div.dataset.index = i;\n const cb = document.createElement(\"input\");\n cb.type = \"checkbox\";\n cb.checked = selected.has(c.id);\n cb.dataset.id = c.id;\n const info = document.createElement(\"div\");\n const hasDesc = c.abilities && c.abilities.some(a => a.desc);\n info.innerHTML = '

' + esc(c.name) + '

' + esc(c.role) + (c.portrait ? ' [img]' : '') + (hasDesc ? ' [abilities]' : '') + '

';\n div.appendChild(cb);\n div.appendChild(info);\n list.appendChild(div);\n });\n}\n\nfunction renderPreview() {\n const c = characters[previewIdx];\n if (!c) return;\n \n const abilities = c.abilities || [];\n const inventory = c.inventory || [];\n const bioText = (c.bio || \"\").replace(/\\\\*\\\\*/g, \"\");\n \n // Build abilities list (matches PDF: small caps path—N + serif name)\n let abilityList = \"\";\n for (const a of abilities) {\n const pathNum = a.pathIndex ? \"—\" + a.pathIndex : \"\";\n abilityList += '

' + esc(a.path).toUpperCase() + pathNum + ' ' + esc(a.name) + '

';\n }\n \n // Build inventory list (matches PDF: bullet format)\n let invList = \"\";\n for (const item of inventory) {\n invList += '

• ' + esc(item) + '

';\n }\n \n const portraitContent = c.portrait \n ? ' $\"Portrait\"$ '\n : '

Click to upload
or drag & drop

';\n \n let html = '';\n \n // ===== TOP HALF (FRONT) =====\n html += '

';\n \n // Left column: portrait + stats\n html += '

';\n html += '

' + portraitContent + '

';\n html += '';\n html += '

';\n html += '

';\n \n // Right column: name, role, bio, traits\n html += '

';\n html += '

' + esc(c.name) + '

';\n html += '

' + esc(c.role).toUpperCase() + '

';\n html += '

' + esc(bioText) + '

';\n html += '

IDEAL' + esc(c.ideal) + '

';\n html += '

FLAW' + esc(c.flaw) + '

';\n html += '

DREAM' + esc(c.dream) + '

';\n html += '

';\n \n html += '

'; // end top-half header\n \n // Bottom of top half: abilities + inventory side by side\n html += '

';\n html += '

ABILITIES

';\n html += '

' + abilityList + '

';\n html += '

INVENTORY

';\n html += '

' + invList + '

';\n html += '

';\n \n // ===== FOLD LINE =====\n html += '

';\n \n // ===== BOTTOM HALF (BACK) =====\n html += '

';\n \n // Left: backstory + playstyle\n html += '

';\n html += '

' + esc(c.name) + '

';\n html += '

BACKSTORY

';\n html += '

' + esc(c.backstory || \"\") + '

';\n html += '

HOW THEY PLAY

';\n html += '

' + esc(c.playstyle || \"\") + '

';\n html += '

';\n \n // Right: portrait\n html += '

';\n if (c.portrait) {\n html += ' $\"Portrait\"$ ';\n }\n html += '

';\n \n html += '

'; // end bottom-half\n \n html += '';\n \n document.getElementById(\"paper\").innerHTML = html;\n setupPortraitUpload();\n}\n\nfunction setupPortraitUpload() {\n const box = document.getElementById(\"portraitBox\");\n const input = document.getElementById(\"portraitInput\");\n if (!box || !input) return;\n \n box.onclick = () => input.click();\n \n input.onchange = (e) => {\n if (e.target.files && e.target.files[0]) {\n handleImageFile(e.target.files[0]);\n }\n };\n \n box.ondragover = (e) => {\n e.preventDefault();\n box.style.borderColor = \"#7c3aed\";\n box.style.background = \"rgba(124, 58, 237, 0.1)\";\n };\n \n box.ondragleave = (e) => {\n e.preventDefault();\n box.style.borderColor = \"\";\n box.style.background = \"\";\n };\n \n box.ondrop = (e) => {\n e.preventDefault();\n box.style.borderColor = \"\";\n box.style.background = \"\";\n if (e.dataTransfer.files && e.dataTransfer.files[0]) {\n handleImageFile(e.dataTransfer.files[0]);\n }\n };\n}\n\nfunction handleImageFile(file) {\n if (!file.type.startsWith(\"image/\")) return;\n \n const reader = new FileReader();\n reader.onload = (e) => {\n const c = characters[previewIdx];\n if (c) {\n c.portrait = e.target.result;\n renderList();\n renderPreview();\n setStatus(\"Portrait uploaded for \" + c.name);\n }\n };\n reader.readAsDataURL(file);\n}\n\nfunction setStatus(msg) { document.getElementById(\"status\").textContent = msg; }\n\nfunction clearPortrait() {\n const c = characters[previewIdx];\n if (c) {\n c.portrait = null;\n renderList();\n renderPreview();\n setStatus(\"Portrait cleared\");\n }\n}\n\nasync function fetchRoleData(roleName) {\n const key = roleName.toLowerCase();\n if (roleCache[key]) return roleCache[key];\n \n try {\n const res = await fetch(ABILITY_API + \"/role/\" + key);\n if (res.ok) {\n const data = await res.json();\n roleCache[key] = data;\n return data;\n }\n } catch (e) {\n console.error(\"Failed to fetch role:\", e);\n }\n return null;\n}\n\nfunction findAbilityInRole(roleData, abilityName) {\n if (!roleData || !roleData.paths) return null;\n \n for (const [pathName, abilities] of Object.entries(roleData.paths)) {\n for (let i = 0; i < abilities.length; i++) {\n const ability = abilities[i];\n if (ability.name && ability.name.toLowerCase() === abilityName.toLowerCase()) {\n // Return full ability data for card rendering, including position in path\n return {\n path: pathName,\n pathIndex: i + 1, // 1-indexed position in the path\n name: ability.name,\n prefixText: ability.prefixText ? stripHtml(ability.prefixText) : \"\",\n suffixText: ability.suffixText ? stripHtml(ability.suffixText) : \"\",\n subAbilities: (ability.subAbilities || []).map(sub => ({\n ap: sub.ap,\n text: sub.text ? stripHtml(sub.text) : \"\"\n })),\n // Also build flat desc for sheet preview\n desc: buildFlatDesc(ability)\n };\n }\n }\n }\n return null;\n}\n\nfunction buildFlatDesc(ability) {\n let desc = \"\";\n if (ability.prefixText) desc += stripHtml(ability.prefixText) + \" \";\n if (ability.subAbilities && ability.subAbilities.length > 0) {\n for (const sub of ability.subAbilities) {\n if (sub.ap !== undefined) desc += sub.ap + \" AP: \";\n if (sub.text) desc += stripHtml(sub.text) + \" \";\n }\n }\n if (ability.suffixText) desc += stripHtml(ability.suffixText);\n return desc.trim();\n}\n\nasync function fetchAbilities() {\n const c = characters[previewIdx];\n if (!c || !c.role) {\n setStatus(\"No character or role selected\");\n return;\n }\n \n setStatus(\"Fetching abilities for \" + c.role + \"...\");\n \n const roleData = await fetchRoleData(c.role);\n if (!roleData) {\n setStatus(\"Failed to fetch \" + c.role + \" data\");\n return;\n }\n \n let found = 0;\n for (const ability of c.abilities) {\n const full = findAbilityInRole(roleData, ability.name);\n if (full) {\n ability.desc = full.desc;\n ability.path = full.path;\n ability.pathIndex = full.pathIndex;\n ability.prefixText = full.prefixText;\n ability.suffixText = full.suffixText;\n ability.subAbilities = full.subAbilities;\n found++;\n }\n }\n \n setStatus(\"Fetched \" + found + \"/\" + c.abilities.length + \" abilities\");\n renderList();\n renderPreview();\n}\n\nasync function fetchAllAbilities() {\n setStatus(\"Fetching all abilities...\");\n \n for (const c of characters) {\n if (!c.role || !c.abilities) continue;\n \n const roleData = await fetchRoleData(c.role);\n if (!roleData) continue;\n \n for (const ability of c.abilities) {\n const full = findAbilityInRole(roleData, ability.name);\n if (full) {\n ability.desc = full.desc;\n ability.path = full.path;\n ability.pathIndex = full.pathIndex;\n ability.prefixText = full.prefixText;\n ability.suffixText = full.suffixText;\n ability.subAbilities = full.subAbilities;\n }\n }\n }\n \n setStatus(\"Done fetching abilities\");\n renderList();\n renderPreview();\n}\n\nasync function downloadPDF() {\n if (!window.jspdf) { alert(\"Loading...\"); return; }\n const targets = characters.filter(c => selected.has(c.id));\n if (!targets.length) { alert(\"Select characters\"); return; }\n \n setStatus(\"Building PDF...\");\n const doc = new window.jspdf.jsPDF({ unit: \"mm\", format: \"a4\" });\n const W = 210, H = 297, M = 8;\n const HALF = H / 2; // 148.5mm - fold line\n \n // Card dimensions for ability cards page\n const cardW = 70, cardH = 120;\n const cornerRadius = 5;\n const cardMarginX = (W - cardW * 2) / 3;\n const cardMarginY = 15, cardGapY = 10;\n \n function drawAbilityCard(ability, role, path, cardIndex, pageCardIndex) {\n const col = pageCardIndex % 2;\n const row = Math.floor(pageCardIndex / 2);\n const x = cardMarginX + col * (cardW + cardMarginX);\n const y = cardMarginY + row * (cardH + cardGapY);\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 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 const pathNum = ability.pathIndex ? \"—\" + ability.pathIndex : \"\";\n doc.text((role + \" • \" + path + pathNum).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 \n if (ability.prefixText) {\n doc.setFont(\"helvetica\", \"normal\");\n doc.setFontSize(8);\n doc.setTextColor(50);\n const text = stripHtml(ability.prefixText);\n const lines = doc.splitTextToSize(text, cardW - 12);\n lines.slice(0, 3).forEach(line => {\n if (textY < y + cardH - 15) { doc.text(line, x + 6, textY); textY += 3.2; }\n });\n textY += 2;\n }\n \n if (ability.subAbilities && ability.subAbilities.length > 0) {\n ability.subAbilities.forEach((sub) => {\n if (textY > y + cardH - 20) return;\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 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 lines.slice(0, Math.max(1, maxLines)).forEach((line) => {\n if (textY < y + cardH - 15) { doc.text(line, x + 6, textY); textY += 3.2; }\n });\n if (lines.length > maxLines) { doc.text(\"...\", x + 6, textY); textY += 3.2; }\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 async function getAbilityCardsForCharacter(c) {\n if (!c.role || !c.abilities) return [];\n const roleData = await fetchRoleData(c.role);\n if (!roleData || !roleData.paths) return [];\n const cards = [];\n for (const charAbility of c.abilities) {\n for (const [pathName, abilities] of Object.entries(roleData.paths)) {\n for (let i = 0; i < abilities.length; i++) {\n const ability = abilities[i];\n if (ability.name && ability.name.toLowerCase() === charAbility.name.toLowerCase()) {\n cards.push({ name: ability.name, path: pathName, pathIndex: i + 1, prefixText: ability.prefixText || \"\", suffixText: ability.suffixText || \"\", subAbilities: ability.subAbilities || [] });\n break;\n }\n }\n }\n }\n return cards;\n }\n \n for (let pi = 0; pi < targets.length; pi++) {\n const c = targets[pi];\n if (pi > 0) doc.addPage();\n \n // ========== TOP HALF (FRONT) ==========\n const topM = 6;\n let y = topM;\n \n // Portrait - smaller for front\n const portraitW = 40, portraitH = 60;\n if (c.portrait) {\n try { doc.addImage(c.portrait, \"JPEG\", topM, y, portraitW, portraitH, undefined, \"FAST\"); } catch (e) {}\n }\n doc.setDrawColor(26);\n doc.setLineWidth(0.5);\n doc.rect(topM, y, portraitW, portraitH);\n \n // HP/AP under portrait\n const statY = y + portraitH + 2;\n doc.rect(topM, statY, 18, 10);\n doc.rect(topM + 22, statY, 18, 10);\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(9);\n doc.setTextColor(26);\n doc.text(\"HP\", topM + 9, statY + 4, { align: \"center\" });\n doc.text(\"AP\", topM + 31, statY + 4, { align: \"center\" });\n \n // Name and role\n const hx = topM + portraitW + 5;\n const hw = W - topM - hx;\n doc.setFont(\"times\", \"bold\");\n doc.setFontSize(24);\n doc.text(c.name, hx, y + 7);\n doc.setLineWidth(0.5);\n doc.line(hx, y + 10, hx + hw, y + 10);\n \n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(11);\n doc.setTextColor(80);\n doc.text(c.role.toUpperCase(), hx, y + 16);\n \n // Bio\n doc.setTextColor(26);\n doc.setFont(\"times\", \"italic\");\n doc.setFontSize(11);\n const bioText = (c.bio || \"\").replace(/\\\\*\\\\*/g, \"\");\n const bioLines = doc.splitTextToSize(bioText, hw);\n doc.text(bioLines.slice(0, 4), hx, y + 22);\n \n // Traits\n const traitY = y + 42;\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(7);\n doc.setTextColor(100);\n doc.text(\"IDEAL\", hx, traitY);\n doc.text(\"FLAW\", hx + 30, traitY);\n doc.text(\"DREAM\", hx + 60, traitY);\n doc.setFont(\"times\", \"bold\");\n doc.setFontSize(12);\n doc.setTextColor(26);\n doc.text(c.ideal || \"\", hx, traitY + 5);\n doc.text(c.flaw || \"\", hx + 30, traitY + 5);\n doc.text(c.dream || \"\", hx + 60, traitY + 5);\n \n // ABILITIES - Big chunky list\n const abY = y + portraitH + 16;\n const abW = 95;\n doc.setFillColor(26);\n doc.rect(topM, abY, abW, 5, \"F\");\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(9);\n doc.setTextColor(255);\n doc.text(\"ABILITIES\", topM + abW/2, abY + 3.5, { align: \"center\" });\n \n const abilities = c.abilities || [];\n let aY = abY + 10;\n doc.setTextColor(26);\n for (let i = 0; i < abilities.length; i++) {\n // Path as small caps label with index (PATH—N format with em-dash)\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(8);\n doc.setTextColor(100);\n const pathNum = abilities[i].pathIndex ? \"—\" + abilities[i].pathIndex : \"\";\n const pathText = abilities[i].path.toUpperCase() + pathNum + \" \";\n doc.text(pathText, topM + 2, aY);\n const pathWidth = doc.getTextWidth(pathText);\n // Ability name as serif\n doc.setFont(\"times\", \"bold\");\n doc.setFontSize(11);\n doc.setTextColor(26);\n doc.text(abilities[i].name, topM + 2 + pathWidth, aY);\n aY += 7;\n }\n \n // INVENTORY - Simple list\n const invX = topM + abW + 4;\n const invW = W - invX - topM;\n doc.setFillColor(26);\n doc.rect(invX, abY, invW, 5, \"F\");\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(9);\n doc.setTextColor(255);\n doc.text(\"INVENTORY\", invX + invW/2, abY + 3.5, { align: \"center\" });\n \n const inv = c.inventory || [];\n let iY = abY + 10;\n doc.setTextColor(26);\n doc.setFont(\"times\", \"normal\");\n doc.setFontSize(12);\n for (const item of inv) {\n doc.text(\"• \" + item, invX + 2, iY);\n iY += 6;\n }\n \n // Fold line (dashed)\n doc.setDrawColor(180);\n doc.setLineWidth(0.3);\n doc.setLineDashPattern([2, 2], 0);\n doc.line(0, HALF, W, HALF);\n doc.setLineDashPattern([], 0);\n \n // ========== BOTTOM HALF (BACK - rotated 180°) ==========\n // We draw upside down so when folded, it's right-side up on the back\n \n const backY = HALF + 4;\n const backH = HALF - 8;\n \n // For upside-down content, we transform coordinates\n // x' = W - x, y' = H - y\n // But jsPDF doesn't support rotation easily, so we'll position from bottom\n \n // Portrait on right - maintain 2:3 aspect ratio\n const backPortraitW = 55;\n const backPortraitH = backPortraitW * 1.5; // 2:3 ratio = 82.5mm\n const backPortraitX = W - topM - backPortraitW;\n const backPortraitY = backY + 4;\n \n if (c.portrait) {\n try { doc.addImage(c.portrait, \"JPEG\", backPortraitX, backPortraitY, backPortraitW, backPortraitH, undefined, \"FAST\"); } catch (e) {}\n }\n doc.setDrawColor(26);\n doc.setLineWidth(0.5);\n doc.rect(backPortraitX, backPortraitY, backPortraitW, backPortraitH);\n \n // Text content on left\n const textX = topM;\n const textW = backPortraitX - topM - 5;\n let textY = backY + 8;\n \n // Name header\n doc.setFont(\"times\", \"bold\");\n doc.setFontSize(18);\n doc.setTextColor(26);\n doc.text(c.name, textX, textY);\n doc.setLineWidth(0.4);\n doc.line(textX, textY + 2, textX + textW, textY + 2);\n textY += 10;\n \n // BACKSTORY\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(8);\n doc.setTextColor(100);\n doc.text(\"BACKSTORY\", textX, textY);\n textY += 5;\n \n doc.setFont(\"times\", \"normal\");\n doc.setFontSize(11);\n doc.setTextColor(40);\n const backstoryLines = doc.splitTextToSize(c.backstory || \"\", textW);\n doc.text(backstoryLines.slice(0, 10), textX, textY);\n textY += Math.min(backstoryLines.length, 10) * 4.5 + 6;\n \n // PLAYSTYLE\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(8);\n doc.setTextColor(100);\n doc.text(\"HOW THEY PLAY\", textX, textY);\n textY += 5;\n \n doc.setFont(\"times\", \"italic\");\n doc.setFontSize(11);\n doc.setTextColor(40);\n const playstyleLines = doc.splitTextToSize(c.playstyle || \"\", textW);\n doc.text(playstyleLines.slice(0, 10), textX, textY);\n \n // Footer on back\n doc.setFont(\"helvetica\", \"normal\");\n doc.setFontSize(6);\n doc.setTextColor(150);\n doc.text(\"QUEST RPG\", W/2, H - 4, { align: \"center\" });\n \n // ========== ABILITY CARD PAGES ==========\n setStatus(\"Fetching abilities for \" + c.name + \"...\");\n const abilityCards = await getAbilityCardsForCharacter(c);\n if (abilityCards.length > 0) {\n let pageCardIdx = 0;\n for (let ai = 0; ai < abilityCards.length; ai++) {\n if (pageCardIdx === 0) doc.addPage();\n drawAbilityCard(abilityCards[ai], c.role, abilityCards[ai].path, ai, pageCardIdx);\n pageCardIdx++;\n if (pageCardIdx >= 4) pageCardIdx = 0;\n }\n }\n }\n \n doc.save(\"Quest_Characters.pdf\");\n setStatus(\"Downloaded!\");\n}\n\n// Events\ndocument.getElementById(\"loadBtn\").onclick = loadJSON;\ndocument.getElementById(\"selectAllBtn\").onclick = () => {\n selected = new Set(characters.map(c => c.id));\n renderList();\n};\ndocument.getElementById(\"clearBtn\").onclick = () => {\n selected = new Set();\n renderList();\n};\ndocument.getElementById(\"clearPortraitBtn\").onclick = clearPortrait;\ndocument.getElementById(\"fetchAbilitiesBtn\").onclick = fetchAbilities;\ndocument.getElementById(\"fetchAllAbilitiesBtn\").onclick = fetchAllAbilities;\ndocument.getElementById(\"downloadBtn\").onclick = downloadPDF;\n\ndocument.getElementById(\"charList\").onclick = (e) => {\n const item = e.target.closest(\".char-item\");\n if (!item) return;\n if (e.target.type === \"checkbox\") {\n const id = e.target.dataset.id;\n if (selected.has(id)) selected.delete(id);\n else selected.add(id);\n renderList();\n } else {\n previewIdx = parseInt(item.dataset.index, 10);\n renderList();\n renderPreview();\n }\n};\n\ndocument.getElementById(\"jsonInput\").value = JSON.stringify(SAMPLE, null, 2);\nloadJSON();\n`;\n","export const clientScript = `\nconst ABILITY_API = \"https://dcm31--a9a4164a278311f0b46e569c3dd06744.web.val.run\";\n\nconst SAMPLE = [\n {\n \"id\": \"fighter_veteran\",\n \"name\": \"Captain Vane\",\n \"role\": \"Fighter\",\n \"bio\": \"My name is **Captain Vane**. I am **45** years old and stand **6'2\\\\\"**. People notice my **scarred cheek**, my **polished armor**, and my **booming voice**. I wear **the heavy plate of the City Watch**. I hail from **the Citadel**. I believe in **order and discipline above all else**. I dream of **a day when I can finally lay down my sword**.\",\n \"ideal\": \"Order\",\n \"flaw\": \"Stubborn\",\n \"dream\": \"Lasting Peace\",\n \"backstory\": \"Vane rose through the ranks of the City Watch over twenty brutal years. He held the eastern gate during the Siege of Ironhold, where he lost half his company and earned the scar that splits his cheek. He's buried more friends than he can count and trained twice as many recruits. The weight of command sits heavy on his shoulders, but he carries it because no one else will. His wife left years ago, tired of waiting for a husband who never came home. Now the Watch is his only family, and he protects them with everything he has.\",\n \"playstyle\": \"Vane is a wall of steel between his allies and danger. He provokes enemies into focusing their attacks on him, then intercepts blows meant for others. When struck, he counterattacks with devastating precision. In desperate moments, he unleashes wild attacks that sacrifice defense for overwhelming offense. Before any battle, he sizes up his opponents, reading their weaknesses. His booming voice summons the blood of his companions, rallying them to fight harder when hope seems lost.\",\n \"abilities\": [\n { \"path\": \"Dueling\", \"name\": \"Counterattack\" },\n { \"path\": \"Dueling\", \"name\": \"Wild Attack\" },\n { \"path\": \"Tactics\", \"name\": \"Provoke\" },\n { \"path\": \"Tactics\", \"name\": \"Intercept\" }\n ],\n \"inventory\": [\n \"Plate Armor (3 Armor)\",\n \"Heavy Shield (+1 Armor)\",\n \"Longsword (2 Damage)\",\n \"Crossbow & Bolts\",\n \"Blink Blade (Treasure)\"\n ],\n \"portrait\": \"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/b8b25671-97bd-41b2-1dbf-db884ecccd00/public\"\n },\n {\n \"id\": \"spy_alleycat\",\n \"name\": \"The Alleycat\",\n \"role\": \"Spy\",\n \"bio\": \"My name is **The Alleycat**. I am **23** years old and stand **5'4\\\\\"**. People notice my **broad-brimmed hat**, the **warm colors of my scarf**, and my **watchful eyes**. I wear **an oversized flannel coat with hidden pockets**. I hail from **the City Slums**. I believe in **protecting the neighborhood from corrupt guards**. I dream of **a city where no one has to hide**.\",\n \"ideal\": \"Community\",\n \"flaw\": \"Curious\",\n \"dream\": \"Safety for All\",\n \"backstory\": \"No one knows the Alleycat's real name—not even them anymore. Orphaned young in the Tangles, they learned to survive by watching, listening, and never being seen. They became the eyes and ears of the slum, warning families when the corrupt Watch came collecting 'taxes.' The neighbors leave food on windowsills for them. The children think they're a folk hero. The Watch thinks they're a ghost. The Alleycat intends to keep it that way, one stolen document and exposed scandal at a time.\",\n \"playstyle\": \"The Alleycat never fights fair—they fight smart. Their silver tongue talks them into places locks can't, and their cosmopolitan knowledge lets them blend into any crowd. Hidden blades are strapped beneath their coat, ready for sneak attacks from the shadows. When things go wrong, they vanish into a disguise or scale walls with their feather hook. They know every secret passage, every bribed guard, every way out of trouble before trouble even starts.\",\n \"abilities\": [\n { \"path\": \"Charisma\", \"name\": \"Cosmopolitan\" },\n { \"path\": \"Charisma\", \"name\": \"Silver Tongue\" },\n { \"path\": \"Termination\", \"name\": \"Sneak Attack\" },\n { \"path\": \"Concealment\", \"name\": \"Strap\" },\n { \"path\": \"Concealment\", \"name\": \"Disguise\" },\n { \"path\": \"Infiltration\", \"name\": \"Feather Hook\" }\n ],\n \"inventory\": [\n \"Leather Armor (1 Armor)\",\n \"Dual Daggers (2 Damage)\",\n \"Lockpicks (5 uses)\",\n \"Smoke Bomb\",\n \"Atlas Incognito (Treasure)\"\n ],\n \"portrait\": \"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/9291be0f-d96d-4d62-b6b8-f170711e0100/public\"\n },\n {\n \"id\": \"ranger_scout\",\n \"name\": \"Kael Deep-Scout\",\n \"role\": \"Ranger\",\n \"bio\": \"My name is **Kael**. I am **28** years old and stand **5'8\\\\\"**. People notice my **mud-stained boots**, the **falcon on my shoulder**, and my **quiet demeanor**. I wear **camouflaged leathers blended with foliage**. I hail from **the Borderlands**. I believe **civilization is a trap**. I dream of **mapping the Unknown Wilds**.\",\n \"ideal\": \"Freedom\",\n \"flaw\": \"Loner\",\n \"dream\": \"Map the Unknown\",\n \"backstory\": \"Kael was the youngest of seven children on a Borderlands farmstead. When plague took the rest, they walked into the wilderness and never looked back. For ten years, they've ranged deeper than any scout, guided only by the stars and a falcon named Whisper who found them half-dead in a ravine. Kael has seen things in the Unknown Wilds that would break lesser minds—and mapped them all. They return to civilization only to resupply and sell their charts, speaking as few words as possible before vanishing again into the green.\",\n \"playstyle\": \"Kael is a ghost in the wilderness. They track prey across any terrain, reading signs others would never notice. From impossible distances, their farshot arrows find their mark. They stalk through undergrowth without disturbing a single leaf. Whisper the falcon serves as their animal partner, scouting ahead and warning of danger. When the party is lost, Kael navigates by instinct, always finding the path. They speak more freely with animals than with people.\",\n \"abilities\": [\n { \"path\": \"Hunter\", \"name\": \"Track\" },\n { \"path\": \"Hunter\", \"name\": \"Farshot\" },\n { \"path\": \"Hunter\", \"name\": \"Stalk\" },\n { \"path\": \"Friend\", \"name\": \"Speak With Animal\" },\n { \"path\": \"Friend\", \"name\": \"Animal Partner\" },\n { \"path\": \"Pathfinder\", \"name\": \"Navigate\" }\n ],\n \"inventory\": [\n \"Leather Armor (1 Armor)\",\n \"Longbow (2 Damage)\",\n \"Quiver (20 Arrows)\",\n \"Survival Kit\",\n \"Spyglasses (Treasure)\"\n ],\n \"portrait\": \"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d0b5908d-951d-48f8-50ed-18791db2f000/public\"\n },\n {\n \"id\": \"naturalist_wolcen\",\n \"name\": \"Wolcen\",\n \"role\": \"Naturalist\",\n \"bio\": \"My name is **Wolcen**. I am **an ancient spirit**. People notice my **translucent skin**, the **leaves floating in my wake**, and the **smell of rain**. I wear **robes woven from living vines**. I hail from **the Deep Woods**. I believe **nature must be preserved at all costs**. I dream of **regrowing the World Tree**.\",\n \"ideal\": \"Balance\",\n \"flaw\": \"Detached\",\n \"dream\": \"Restore Nature\",\n \"backstory\": \"Wolcen remembers when the World Tree's roots stretched beneath every forest. They watched it fall to axes and fire a thousand years ago, and their grief became the Deep Woods itself—a place where nature fights back. They slept for centuries in a grove of ancient oaks until loggers came with iron and flame. Now Wolcen walks among mortals again, struggling to understand creatures who live such brief, violent lives. They seek the seeds of the World Tree, scattered across the realm, hoping to undo humanity's greatest sin.\",\n \"playstyle\": \"Wolcen flows between forms like water, taking animal shape to scout, fight, or flee. Thorns erupt from the earth at their command, entangling foes. They freeze enemies solid or burn them with primal fire, wielding the elements as extensions of their will. Their presence lures creatures to them, calming beasts and drawing prey. When allies fall wounded, Wolcen mends their flesh with ancient magic, knitting bone and sealing wounds with a touch.\",\n \"abilities\": [\n { \"path\": \"Shapeshifter\", \"name\": \"Animal Form\" },\n { \"path\": \"Summoner\", \"name\": \"Thorn\" },\n { \"path\": \"Elementalist\", \"name\": \"Freeze\" },\n { \"path\": \"Elementalist\", \"name\": \"Burn\" },\n { \"path\": \"Wild\", \"name\": \"Lure\" },\n { \"path\": \"Restoration\", \"name\": \"Mend\" }\n ],\n \"inventory\": [\n \"Vine Robes\",\n \"Wooden Staff (1 Damage)\",\n \"Herb Pouch\",\n \"Seeds\",\n \"Evergreen Ring (Treasure)\"\n ],\n \"portrait\": \"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/4bd0a926-eba9-4c5a-1d41-59e6746c7200/public\"\n },\n {\n \"id\": \"doctor_vesper\",\n \"name\": \"Dr. Vesper Ashwood\",\n \"role\": \"Doctor\",\n \"bio\": \"My name is **Dr. Vesper Ashwood**. I am **38** years old and stand **5'7\\\\\"**. People notice my **steady hands**, my **analytical gaze**, and my **pristine lab coat**. I wear **practical clothes with many pockets for instruments**. I hail from **the University Hospital**. I believe **death is just another puzzle to solve**. I dream of **conquering mortality itself**.\",\n \"ideal\": \"Knowledge\",\n \"flaw\": \"Detached\",\n \"dream\": \"Conquer Death\",\n \"backstory\": \"Vesper was the University's most promising surgeon until they started asking questions the faculty couldn't answer. Why do some patients survive wounds that kill others? What happens in the moment between life and death? Their research led them to forbidden texts and darker arts. The University expelled them quietly, afraid of scandal. Now Vesper works in the margins—healing those who can't afford real doctors, and studying death in all its forms. They've crossed lines that can't be uncrossed, but they've never lost a patient they truly wanted to save.\",\n \"playstyle\": \"Vesper is the difference between life and death. They heal wounds with surgical precision and can put enemies into magical sleep. Their diagnostic skills identify any ailment, curse, or poison at a glance. They examine the dead for clues others would miss, and their deathsense alerts them when mortality draws near. Most unsettling, they speak with the dead themselves, asking questions of spirits who linger between worlds. Knowledge, Vesper believes, is worth any price.\",\n \"abilities\": [\n { \"path\": \"Alteration\", \"name\": \"Heal\" },\n { \"path\": \"Alteration\", \"name\": \"Sleep\" },\n { \"path\": \"Examination\", \"name\": \"Diagnose\" },\n { \"path\": \"Examination\", \"name\": \"Examine The Dead\" },\n { \"path\": \"Necromancy\", \"name\": \"Deathsense\" },\n { \"path\": \"Necromancy\", \"name\": \"Speak With Dead\" }\n ],\n \"inventory\": [\n \"Lab Coat\",\n \"Bone Saw (2 Damage)\",\n \"Medical Kit\",\n \"Bandages (x5)\",\n \"Kiln Gauze (Treasure)\"\n ],\n \"portrait\": \"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7d47fe96-f63b-4b35-24c3-f70c6dd65800/public\"\n },\n {\n \"id\": \"wizard_arcanist\",\n \"name\": \"Elara the Arcanist\",\n \"role\": \"Wizard\",\n \"bio\": \"My name is **Elara**. I am **112** years old and stand **5'6\\\\\"**. People notice my **ink-stained fingers**, my **floating books**, and my **glowing staff**. I wear **robes embroidered with runes**. I hail from **the Crystal Spire**. I believe **magic is the only truth**. I dream of **rewriting the laws of physics**.\",\n \"ideal\": \"Power\",\n \"flaw\": \"Arrogant\",\n \"dream\": \"Ascension\",\n \"backstory\": \"Elara was already a master wizard when most humans' grandparents were being born. She has outlived three archmages, survived two magical catastrophes, and written books that shaped how wizards understand reality. None of it is enough. The Crystal Spire's elders called her ambitions dangerous; she called them cowards and left. Now she seeks the legendary Dim Grimoire, said to contain spells that predate the gods themselves. Her familiar, an owl named Paradox, is the only creature she trusts completely—because she created him.\",\n \"playstyle\": \"Elara approaches combat like a chess match she's already won. Magic strikes lance from her staff with devastating precision. She kindles flames with a thought and blinks across the battlefield in eyeblinks. Paradox scouts and distracts while she positions for the perfect spell. Her projection magic senses magical auras, revealing hidden enchantments and lurking spellcasters. And when an enemy's magic threatens her allies, she simply says 'No'—and the spell unravels into nothing.\",\n \"abilities\": [\n { \"path\": \"Evocation\", \"name\": \"Magic Strike\" },\n { \"path\": \"Evocation\", \"name\": \"Kindle\" },\n { \"path\": \"Planeshifting\", \"name\": \"Blink\" },\n { \"path\": \"Conjuration\", \"name\": \"Familiar\" },\n { \"path\": \"Projection\", \"name\": \"Sense Magic\" },\n { \"path\": \"Magecraft\", \"name\": \"No\" }\n ],\n \"inventory\": [\n \"Wizard Robes\",\n \"Spellbook\",\n \"Arcane Focus (Staff)\",\n \"Writing Ink\",\n \"Dim Grimoire (Treasure)\"\n ],\n \"portrait\": \"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/add485aa-1d30-425e-5a63-954177575600/public\"\n },\n {\n \"id\": \"magician_performer\",\n \"name\": \"Silvio the Magnificent\",\n \"role\": \"Magician\",\n \"bio\": \"My name is **Silvio**. I am **25** years old and stand **5'9\\\\\"**. People notice my **dazzling smile**, my **quick hands**, and my **deck of cards**. I wear **a tailored suit with a billowing cape**. I hail from **the Traveling Circus**. I believe **life is a performance**. I dream of **performing for the High King**.\",\n \"ideal\": \"Fame\",\n \"flaw\": \"Vain\",\n \"dream\": \"Royal Performance\",\n \"backstory\": \"Silvio was born in a trunk backstage, raised by acrobats and trained by the circus's aging illusionist. By fifteen, he'd surpassed his master. By twenty, he'd made the circus famous. But tent shows and country fairs aren't enough for Silvio—he wants to perform in the Grand Palace, to make the High King himself gasp in wonder. He left the circus to seek his fortune, armed with nothing but his talent, his charm, and an enchanted wardrobe that cost him three years' savings. The world, he's certain, is ready to be amazed.\",\n \"playstyle\": \"Silvio turns every encounter into a show. His magic tricks confound and distract, making coins appear and weapons vanish. He mesmerizes crowds and individuals alike, holding attention exactly where he wants it. With a gesture, he makes enemies look overthere—anywhere but at him. When needed, he fades into invisibility itself. His whispers carry across impossible distances, coordinating allies or taunting foes. And when the finale comes, he scintillates—filling the air with dazzling lights that blind and bewilder.\",\n \"abilities\": [\n { \"path\": \"Misdirection\", \"name\": \"Magic Tricks\" },\n { \"path\": \"Misdirection\", \"name\": \"Mesmerize\" },\n { \"path\": \"Misdirection\", \"name\": \"Overthere\" },\n { \"path\": \"Misdirection\", \"name\": \"Invisibility\" },\n { \"path\": \"Clairvoyance\", \"name\": \"Whisper\" },\n { \"path\": \"Mayhem\", \"name\": \"Scintillate\" }\n ],\n \"inventory\": [\n \"Fine Clothes\",\n \"Deck of Cards\",\n \"Smoke Bombs\",\n \"Hand Mirror\",\n \"Brell's Couture (Treasure)\"\n ],\n \"portrait\": \"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/bb915236-f995-4824-e247-887bf6629300/public\"\n },\n {\n \"id\": \"invoker_cultist\",\n \"name\": \"Malakar\",\n \"role\": \"Invoker\",\n \"bio\": \"My name is **Malakar**. I am **50** years old and stand **6'0\\\\\"**. People notice my **glowing tattoos**, my **whispered chants**, and my **intense stare**. I wear **ceremonial robes of purple and black**. I hail from **the Void Temple**. I believe **the end is inevitable**. I dream of **awakening the Sleeper**.\",\n \"ideal\": \"Faith\",\n \"flaw\": \"Fanatic\",\n \"dream\": \"Awaken the Sleeper\",\n \"backstory\": \"Malakar was a fisherman's son who nearly drowned at twelve. In the dark water, something spoke to him—something vast and patient that sleeps beneath the world. He's spent forty years serving that voice, rising to high priest of a faith most consider madness. The Void Temple's followers are few but devoted, preparing for the day their god awakens. Malakar doesn't seek destruction—he seeks truth. The Sleeper showed him that everything ends, and in that ending, there is peace. He only wants to share that revelation with the world.\",\n \"playstyle\": \"Malakar channels divine wrath with terrifying certainty. He declares holy truths that compel honesty from liars and reveal hidden things. His soul gaze peers into the hearts of others, seeing their sins and secrets. The evil eye curses those who oppose him with misfortune and dread. When battle comes, he calls down fiery avengers—spirits of flame that fight alongside the faithful. His smite channels divine power through his weapon. And always, his shield of faith protects those who stand with him against the darkness.\",\n \"abilities\": [\n { \"path\": \"Invocation\", \"name\": \"Declare\" },\n { \"path\": \"Inquiries\", \"name\": \"Soul Gaze\" },\n { \"path\": \"Inquiries\", \"name\": \"Evil Eye\" },\n { \"path\": \"Wrath\", \"name\": \"Fiery Avenger\" },\n { \"path\": \"Wrath\", \"name\": \"Smite\" },\n { \"path\": \"Wards\", \"name\": \"Shield\" }\n ],\n \"inventory\": [\n \"Ceremonial Robes\",\n \"Ritual Dagger (2 Damage)\",\n \"Incense\",\n \"Symbol of the Void\",\n \"Accursed Band (Treasure)\"\n ],\n \"portrait\": \"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fee534ba-c180-4797-d7a2-1cd2558a3f00/public\"\n }\n];\n\nlet characters = [];\nlet selected = new Set();\nlet previewIdx = 0;\nlet roleCache = {}; // Cache fetched role data\n\nfunction loadJSON() {\n const input = document.getElementById(\"jsonInput\").value.trim();\n const err = document.getElementById(\"error\");\n try {\n characters = input ? JSON.parse(input) : SAMPLE;\n if (!Array.isArray(characters)) characters = [characters];\n characters.forEach((c, i) => { \n if (!c.id) c.id = \"c\" + i;\n if (!c.portrait) c.portrait = null;\n });\n selected = new Set(characters.map(c => c.id));\n previewIdx = 0;\n err.style.display = \"none\";\n renderList();\n renderPreview();\n } catch (e) {\n err.style.display = \"block\";\n }\n}\n\nfunction esc(str) {\n return String(str || \"\").replace(/&/g, \"&\").replace(//g, \">\");\n}\n\nfunction parseBio(bio) {\n return esc(bio).replace(/\\\\*\\\\*([^*]+)\\\\*\\\\*/g, \"$1\");\n}\n\nfunction stripHtml(html) {\n const div = document.createElement(\"div\");\n div.innerHTML = html;\n return div.textContent || div.innerText || \"\";\n}\n\nfunction renderList() {\n const list = document.getElementById(\"charList\");\n list.innerHTML = \"\";\n characters.forEach((c, i) => {\n const div = document.createElement(\"div\");\n div.className = \"char-item\" + (i === previewIdx ? \" active\" : \"\");\n div.dataset.index = i;\n const cb = document.createElement(\"input\");\n cb.type = \"checkbox\";\n cb.checked = selected.has(c.id);\n cb.dataset.id = c.id;\n const info = document.createElement(\"div\");\n const hasDesc = c.abilities && c.abilities.some(a => a.desc);\n info.innerHTML = '

' + esc(c.name) + '

' + esc(c.role) + (c.portrait ? ' [img]' : '') + (hasDesc ? ' [abilities]' : '') + '

' + esc(a.path).toUpperCase() + pathNum + ' ' + esc(a.name) + '

';\n }\n \n // Build inventory list (matches PDF: bullet format)\n let invList = \"\";\n for (const item of inventory) {\n invList += '

• ' + esc(item) + '

';\n }\n \n const portraitContent = c.portrait \n ? ' $\"Portrait\"$ '\n : '

Click to upload
or drag & drop

';\n \n let html = '';\n \n // ===== TOP HALF (FRONT) =====\n html += '

';\n \n // Left column: portrait + stats\n html += '

';\n html += '

' + portraitContent + '

';\n html += '';\n html += '

';\n html += '

';\n \n // Right column: name, role, bio, traits\n html += '

';\n html += '

' + esc(c.name) + '

';\n html += '

' + esc(c.role).toUpperCase() + '

';\n html += '

' + esc(bioText) + '

';\n html += '

IDEAL' + esc(c.ideal) + '

';\n html += '

FLAW' + esc(c.flaw) + '

';\n html += '

DREAM' + esc(c.dream) + '

';\n html += '

';\n \n html += '

'; // end top-half header\n \n // Bottom of top half: abilities + inventory side by side\n html += '

';\n html += '

ABILITIES

';\n html += '

' + abilityList + '

';\n html += '

INVENTORY

';\n html += '

' + invList + '

';\n html += '

';\n \n // ===== FOLD LINE =====\n html += '

';\n \n // ===== BOTTOM HALF (BACK) =====\n html += '

';\n \n // Left: backstory + playstyle\n html += '

';\n html += '

' + esc(c.name) + '

';\n html += '

BACKSTORY

';\n html += '

' + esc(c.backstory || \"\") + '

';\n html += '

HOW THEY PLAY

';\n html += '

' + esc(c.playstyle || \"\") + '

';\n html += '

';\n \n // Right: portrait\n html += '

';\n if (c.portrait) {\n html += ' $\"Portrait\"$ ';\n }\n html += '

';\n \n html += '

'; // end bottom-half\n \n html += '';\n \n document.getElementById(\"paper\").innerHTML = html;\n setupPortraitUpload();\n}\n\nfunction setupPortraitUpload() {\n const box = document.getElementById(\"portraitBox\");\n const input = document.getElementById(\"portraitInput\");\n if (!box || !input) return;\n \n box.onclick = () => input.click();\n \n input.onchange = (e) => {\n if (e.target.files && e.target.files[0]) {\n handleImageFile(e.target.files[0]);\n }\n };\n \n box.ondragover = (e) => {\n e.preventDefault();\n box.style.borderColor = \"#7c3aed\";\n box.style.background = \"rgba(124, 58, 237, 0.1)\";\n };\n \n box.ondragleave = (e) => {\n e.preventDefault();\n box.style.borderColor = \"\";\n box.style.background = \"\";\n };\n \n box.ondrop = (e) => {\n e.preventDefault();\n box.style.borderColor = \"\";\n box.style.background = \"\";\n if (e.dataTransfer.files && e.dataTransfer.files[0]) {\n handleImageFile(e.dataTransfer.files[0]);\n }\n };\n}\n\nfunction handleImageFile(file) {\n if (!file.type.startsWith(\"image/\")) return;\n \n const reader = new FileReader();\n reader.onload = (e) => {\n const c = characters[previewIdx];\n if (c) {\n c.portrait = e.target.result;\n renderList();\n renderPreview();\n setStatus(\"Portrait uploaded for \" + c.name);\n }\n };\n reader.readAsDataURL(file);\n}\n\nfunction setStatus(msg) { document.getElementById(\"status\").textContent = msg; }\n\nfunction clearPortrait() {\n const c = characters[previewIdx];\n if (c) {\n c.portrait = null;\n renderList();\n renderPreview();\n setStatus(\"Portrait cleared\");\n }\n}\n\nasync function fetchRoleData(roleName) {\n const key = roleName.toLowerCase();\n if (roleCache[key]) return roleCache[key];\n \n try {\n const res = await fetch(ABILITY_API + \"/role/\" + key);\n if (res.ok) {\n const data = await res.json();\n roleCache[key] = data;\n return data;\n }\n } catch (e) {\n console.error(\"Failed to fetch role:\", e);\n }\n return null;\n}\n\nfunction findAbilityInRole(roleData, abilityName) {\n if (!roleData || !roleData.paths) return null;\n \n for (const [pathName, abilities] of Object.entries(roleData.paths)) {\n for (let i = 0; i < abilities.length; i++) {\n const ability = abilities[i];\n if (ability.name && ability.name.toLowerCase() === abilityName.toLowerCase()) {\n // Return full ability data for card rendering, including position in path\n return {\n path: pathName,\n pathIndex: i + 1, // 1-indexed position in the path\n name: ability.name,\n prefixText: ability.prefixText ? stripHtml(ability.prefixText) : \"\",\n suffixText: ability.suffixText ? stripHtml(ability.suffixText) : \"\",\n subAbilities: (ability.subAbilities || []).map(sub => ({\n ap: sub.ap,\n text: sub.text ? stripHtml(sub.text) : \"\"\n })),\n // Also build flat desc for sheet preview\n desc: buildFlatDesc(ability)\n };\n }\n }\n }\n return null;\n}\n\nfunction buildFlatDesc(ability) {\n let desc = \"\";\n if (ability.prefixText) desc += stripHtml(ability.prefixText) + \" \";\n if (ability.subAbilities && ability.subAbilities.length > 0) {\n for (const sub of ability.subAbilities) {\n if (sub.ap !== undefined) desc += sub.ap + \" AP: \";\n if (sub.text) desc += stripHtml(sub.text) + \" \";\n }\n }\n if (ability.suffixText) desc += stripHtml(ability.suffixText);\n return desc.trim();\n}\n\nasync function fetchAbilities() {\n const c = characters[previewIdx];\n if (!c || !c.role) {\n setStatus(\"No character or role selected\");\n return;\n }\n \n setStatus(\"Fetching abilities for \" + c.role + \"...\");\n \n const roleData = await fetchRoleData(c.role);\n if (!roleData) {\n setStatus(\"Failed to fetch \" + c.role + \" data\");\n return;\n }\n \n let found = 0;\n for (const ability of c.abilities) {\n const full = findAbilityInRole(roleData, ability.name);\n if (full) {\n ability.desc = full.desc;\n ability.path = full.path;\n ability.pathIndex = full.pathIndex;\n ability.prefixText = full.prefixText;\n ability.suffixText = full.suffixText;\n ability.subAbilities = full.subAbilities;\n found++;\n }\n }\n \n setStatus(\"Fetched \" + found + \"/\" + c.abilities.length + \" abilities\");\n renderList();\n renderPreview();\n}\n\nasync function fetchAllAbilities() {\n setStatus(\"Fetching all abilities...\");\n \n for (const c of characters) {\n if (!c.role || !c.abilities) continue;\n \n const roleData = await fetchRoleData(c.role);\n if (!roleData) continue;\n \n for (const ability of c.abilities) {\n const full = findAbilityInRole(roleData, ability.name);\n if (full) {\n ability.desc = full.desc;\n ability.path = full.path;\n ability.pathIndex = full.pathIndex;\n ability.prefixText = full.prefixText;\n ability.suffixText = full.suffixText;\n ability.subAbilities = full.subAbilities;\n }\n }\n }\n \n setStatus(\"Done fetching abilities\");\n renderList();\n renderPreview();\n}\n\nasync function downloadPDF() {\n if (!window.jspdf) { alert(\"Loading...\"); return; }\n const targets = characters.filter(c => selected.has(c.id));\n if (!targets.length) { alert(\"Select characters\"); return; }\n \n setStatus(\"Building PDF...\");\n const doc = new window.jspdf.jsPDF({ unit: \"mm\", format: \"a4\" });\n const W = 210, H = 297, M = 8;\n const HALF = H / 2; // 148.5mm - fold line\n \n // Card dimensions for ability cards page\n const cardW = 70, cardH = 120;\n const cornerRadius = 5;\n const cardMarginX = (W - cardW * 2) / 3;\n const cardMarginY = 15, cardGapY = 10;\n \n function drawAbilityCard(ability, role, path, cardIndex, pageCardIndex) {\n const col = pageCardIndex % 2;\n const row = Math.floor(pageCardIndex / 2);\n const x = cardMarginX + col * (cardW + cardMarginX);\n const y = cardMarginY + row * (cardH + cardGapY);\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 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 const pathNum = ability.pathIndex ? \"—\" + ability.pathIndex : \"\";\n doc.text((role + \" • \" + path + pathNum).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 \n if (ability.prefixText) {\n doc.setFont(\"helvetica\", \"normal\");\n doc.setFontSize(8);\n doc.setTextColor(50);\n const text = stripHtml(ability.prefixText);\n const lines = doc.splitTextToSize(text, cardW - 12);\n lines.slice(0, 3).forEach(line => {\n if (textY < y + cardH - 15) { doc.text(line, x + 6, textY); textY += 3.2; }\n });\n textY += 2;\n }\n \n if (ability.subAbilities && ability.subAbilities.length > 0) {\n ability.subAbilities.forEach((sub) => {\n if (textY > y + cardH - 20) return;\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 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 lines.slice(0, Math.max(1, maxLines)).forEach((line) => {\n if (textY < y + cardH - 15) { doc.text(line, x + 6, textY); textY += 3.2; }\n });\n if (lines.length > maxLines) { doc.text(\"...\", x + 6, textY); textY += 3.2; }\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 async function getAbilityCardsForCharacter(c) {\n if (!c.role || !c.abilities) return [];\n const roleData = await fetchRoleData(c.role);\n if (!roleData || !roleData.paths) return [];\n const cards = [];\n for (const charAbility of c.abilities) {\n for (const [pathName, abilities] of Object.entries(roleData.paths)) {\n for (let i = 0; i < abilities.length; i++) {\n const ability = abilities[i];\n if (ability.name && ability.name.toLowerCase() === charAbility.name.toLowerCase()) {\n cards.push({ name: ability.name, path: pathName, pathIndex: i + 1, prefixText: ability.prefixText || \"\", suffixText: ability.suffixText || \"\", subAbilities: ability.subAbilities || [] });\n break;\n }\n }\n }\n }\n return cards;\n }\n \n for (let pi = 0; pi < targets.length; pi++) {\n const c = targets[pi];\n if (pi > 0) doc.addPage();\n \n // ========== TOP HALF (FRONT) ==========\n const topM = 6;\n let y = topM;\n \n // Portrait - smaller for front\n const portraitW = 40, portraitH = 60;\n if (c.portrait) {\n try { doc.addImage(c.portrait, \"JPEG\", topM, y, portraitW, portraitH, undefined, \"FAST\"); } catch (e) {}\n }\n doc.setDrawColor(26);\n doc.setLineWidth(0.5);\n doc.rect(topM, y, portraitW, portraitH);\n \n // HP/AP under portrait\n const statY = y + portraitH + 2;\n doc.rect(topM, statY, 18, 10);\n doc.rect(topM + 22, statY, 18, 10);\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(9);\n doc.setTextColor(26);\n doc.text(\"HP\", topM + 9, statY + 4, { align: \"center\" });\n doc.text(\"AP\", topM + 31, statY + 4, { align: \"center\" });\n \n // Name and role\n const hx = topM + portraitW + 5;\n const hw = W - topM - hx;\n doc.setFont(\"times\", \"bold\");\n doc.setFontSize(24);\n doc.text(c.name, hx, y + 7);\n doc.setLineWidth(0.5);\n doc.line(hx, y + 10, hx + hw, y + 10);\n \n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(11);\n doc.setTextColor(80);\n doc.text(c.role.toUpperCase(), hx, y + 16);\n \n // Bio\n doc.setTextColor(26);\n doc.setFont(\"times\", \"italic\");\n doc.setFontSize(11);\n const bioText = (c.bio || \"\").replace(/\\\\*\\\\*/g, \"\");\n const bioLines = doc.splitTextToSize(bioText, hw);\n doc.text(bioLines.slice(0, 4), hx, y + 22);\n \n // Traits\n const traitY = y + 42;\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(7);\n doc.setTextColor(100);\n doc.text(\"IDEAL\", hx, traitY);\n doc.text(\"FLAW\", hx + 30, traitY);\n doc.text(\"DREAM\", hx + 60, traitY);\n doc.setFont(\"times\", \"bold\");\n doc.setFontSize(12);\n doc.setTextColor(26);\n doc.text(c.ideal || \"\", hx, traitY + 5);\n doc.text(c.flaw || \"\", hx + 30, traitY + 5);\n doc.text(c.dream || \"\", hx + 60, traitY + 5);\n \n // ABILITIES - Big chunky list\n const abY = y + portraitH + 16;\n const abW = 95;\n doc.setFillColor(26);\n doc.rect(topM, abY, abW, 5, \"F\");\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(9);\n doc.setTextColor(255);\n doc.text(\"ABILITIES\", topM + abW/2, abY + 3.5, { align: \"center\" });\n \n const abilities = c.abilities || [];\n let aY = abY + 10;\n doc.setTextColor(26);\n for (let i = 0; i < abilities.length; i++) {\n // Path as small caps label with index (PATH—N format with em-dash)\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(8);\n doc.setTextColor(100);\n const pathNum = abilities[i].pathIndex ? \"—\" + abilities[i].pathIndex : \"\";\n const pathText = abilities[i].path.toUpperCase() + pathNum + \" \";\n doc.text(pathText, topM + 2, aY);\n const pathWidth = doc.getTextWidth(pathText);\n // Ability name as serif\n doc.setFont(\"times\", \"bold\");\n doc.setFontSize(11);\n doc.setTextColor(26);\n doc.text(abilities[i].name, topM + 2 + pathWidth, aY);\n aY += 7;\n }\n \n // INVENTORY - Simple list\n const invX = topM + abW + 4;\n const invW = W - invX - topM;\n doc.setFillColor(26);\n doc.rect(invX, abY, invW, 5, \"F\");\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(9);\n doc.setTextColor(255);\n doc.text(\"INVENTORY\", invX + invW/2, abY + 3.5, { align: \"center\" });\n \n const inv = c.inventory || [];\n let iY = abY + 10;\n doc.setTextColor(26);\n doc.setFont(\"times\", \"normal\");\n doc.setFontSize(12);\n for (const item of inv) {\n doc.text(\"• \" + item, invX + 2, iY);\n iY += 6;\n }\n \n // Fold line (dashed)\n doc.setDrawColor(180);\n doc.setLineWidth(0.3);\n doc.setLineDashPattern([2, 2], 0);\n doc.line(0, HALF, W, HALF);\n doc.setLineDashPattern([], 0);\n \n // ========== BOTTOM HALF (BACK - rotated 180°) ==========\n // We draw upside down so when folded, it's right-side up on the back\n \n const backY = HALF + 4;\n const backH = HALF - 8;\n \n // For upside-down content, we transform coordinates\n // x' = W - x, y' = H - y\n // But jsPDF doesn't support rotation easily, so we'll position from bottom\n \n // Portrait on right - maintain 2:3 aspect ratio\n const backPortraitW = 55;\n const backPortraitH = backPortraitW * 1.5; // 2:3 ratio = 82.5mm\n const backPortraitX = W - topM - backPortraitW;\n const backPortraitY = backY + 4;\n \n if (c.portrait) {\n try { doc.addImage(c.portrait, \"JPEG\", backPortraitX, backPortraitY, backPortraitW, backPortraitH, undefined, \"FAST\"); } catch (e) {}\n }\n doc.setDrawColor(26);\n doc.setLineWidth(0.5);\n doc.rect(backPortraitX, backPortraitY, backPortraitW, backPortraitH);\n \n // Text content on left\n const textX = topM;\n const textW = backPortraitX - topM - 5;\n let textY = backY + 8;\n \n // Name header\n doc.setFont(\"times\", \"bold\");\n doc.setFontSize(18);\n doc.setTextColor(26);\n doc.text(c.name, textX, textY);\n doc.setLineWidth(0.4);\n doc.line(textX, textY + 2, textX + textW, textY + 2);\n textY += 10;\n \n // BACKSTORY\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(8);\n doc.setTextColor(100);\n doc.text(\"BACKSTORY\", textX, textY);\n textY += 5;\n \n doc.setFont(\"times\", \"normal\");\n doc.setFontSize(11);\n doc.setTextColor(40);\n const backstoryLines = doc.splitTextToSize(c.backstory || \"\", textW);\n doc.text(backstoryLines.slice(0, 10), textX, textY);\n textY += Math.min(backstoryLines.length, 10) * 4.5 + 6;\n \n // PLAYSTYLE\n doc.setFont(\"helvetica\", \"bold\");\n doc.setFontSize(8);\n doc.setTextColor(100);\n doc.text(\"HOW THEY PLAY\", textX, textY);\n textY += 5;\n \n doc.setFont(\"times\", \"italic\");\n doc.setFontSize(11);\n doc.setTextColor(40);\n const playstyleLines = doc.splitTextToSize(c.playstyle || \"\", textW);\n doc.text(playstyleLines.slice(0, 10), textX, textY);\n \n // Footer on back\n doc.setFont(\"helvetica\", \"normal\");\n doc.setFontSize(6);\n doc.setTextColor(150);\n doc.text(\"QUEST RPG\", W/2, H - 4, { align: \"center\" });\n \n // ========== ABILITY CARD PAGES ==========\n setStatus(\"Fetching abilities for \" + c.name + \"...\");\n const abilityCards = await getAbilityCardsForCharacter(c);\n if (abilityCards.length > 0) {\n let pageCardIdx = 0;\n for (let ai = 0; ai < abilityCards.length; ai++) {\n if (pageCardIdx === 0) doc.addPage();\n drawAbilityCard(abilityCards[ai], c.role, abilityCards[ai].path, ai, pageCardIdx);\n pageCardIdx++;\n if (pageCardIdx >= 4) pageCardIdx = 0;\n }\n }\n }\n \n doc.save(\"Quest_Characters.pdf\");\n setStatus(\"Downloaded!\");\n}\n\n// Events\ndocument.getElementById(\"loadBtn\").onclick = loadJSON;\ndocument.getElementById(\"selectAllBtn\").onclick = () => {\n selected = new Set(characters.map(c => c.id));\n renderList();\n};\ndocument.getElementById(\"clearBtn\").onclick = () => {\n selected = new Set();\n renderList();\n};\ndocument.getElementById(\"clearPortraitBtn\").onclick = clearPortrait;\ndocument.getElementById(\"fetchAbilitiesBtn\").onclick = fetchAbilities;\ndocument.getElementById(\"fetchAllAbilitiesBtn\").onclick = fetchAllAbilities;\ndocument.getElementById(\"downloadBtn\").onclick = downloadPDF;\n\ndocument.getElementById(\"charList\").onclick = (e) => {\n const item = e.target.closest(\".char-item\");\n if (!item) return;\n if (e.target.type === \"checkbox\") {\n const id = e.target.dataset.id;\n if (selected.has(id)) selected.delete(id);\n else selected.add(id);\n renderList();\n } else {\n previewIdx = parseInt(item.dataset.index, 10);\n renderList();\n renderPreview();\n }\n};\n\ndocument.getElementById(\"jsonInput\").value = JSON.stringify(SAMPLE, null, 2);\nloadJSON();\n`;\n","createdAt",["D",1767452035176],"branchVersion","branchId","0ef53fd2-e855-11f0-b002-42dde27851f2","id","0ef4ff7c-e855-11f0-b002-42dde27851f2","quest-sheet-printer",["D",1767411246927],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Quest RPG character sheet PDF generator","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",{"_95":94,"_103":99},"org",{"_95":94,"_96":97,"_98":99,"_18":55,"_100":101,"_102":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",106,"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=1789559999&sig=78019e07e4ced3d68c9df61b037dd9640810f47ba2d971eaac41b98f18b7827c","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":192,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":193,"_79":194,"_81":195,"_83":25},"tree",[175,176,177,178],"files",[175,176,177,178],"counts",{"_164":61,"_165":166,"_167":61,"_168":169,"_170":171},"contents",[127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":160,"_32":28,"_30":31,"_134":-5,"_41":42,"_40":14,"_136":25,"_38":161,"_13":162,"_33":34,"_35":37,"_24":25,"_140":-5,"_27":163},{"_43":152,"_32":153,"_30":154,"_134":-5,"_41":42,"_40":155,"_136":122,"_38":156,"_13":157,"_33":20,"_35":158,"_24":25,"_140":-5,"_27":159},{"_43":142,"_32":143,"_30":144,"_134":-5,"_41":42,"_40":145,"_136":25,"_38":146,"_13":147,"_33":148,"_35":149,"_24":25,"_140":150,"_27":151},{"_43":131,"_32":132,"_30":133,"_134":-5,"_41":42,"_40":135,"_136":25,"_38":137,"_13":138,"_33":34,"_35":139,"_24":25,"_140":-5,"_27":141},"adbef6fe-e8b3-11f0-b81d-42dde27851f2","styles.ts","4ee09fe8-e859-11f0-92bf-42dde27851f2","parentId",87,"latest",["D",1767451886013],10,"export const styles = `\n* { box-sizing: border-box; margin: 0; padding: 0; }\n:root { --ink: #1a1a1a; --accent: #7c3aed; --bg: #18181b; --card: #27272a; --border: #3f3f46; }\nbody { font-family: Georgia, serif; background: var(--bg); color: #e4e4e7; display: flex; height: 100vh; overflow: hidden; }\n\n.sidebar { width: 280px; background: var(--card); display: flex; flex-direction: column; padding: 12px; border-right: 1px solid var(--border); overflow-y: auto; }\n.sidebar-title { font-family: Georgia, serif; font-weight: 900; font-size: 22px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }\n.sidebar-title span { color: var(--accent); }\n\n.section { margin-bottom: 12px; }\n.label { font-family: Arial, sans-serif; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #71717a; margin-bottom: 4px; }\n\ntextarea { width: 100%; height: 70px; background: var(--bg); border: 1px solid var(--border); color: #e4e4e7; font-family: monospace; font-size: 9px; padding: 6px; border-radius: 4px; resize: none; }\ntextarea:focus { outline: none; border-color: var(--accent); }\n\nselect { width: 100%; background: var(--bg); border: 1px solid var(--border); color: #e4e4e7; padding: 6px 8px; border-radius: 4px; font-size: 11px; }\n\n.btn { background: var(--border); color: white; border: none; padding: 8px 12px; border-radius: 4px; font-family: Arial, sans-serif; font-weight: 700; font-size: 10px; text-transform: uppercase; cursor: pointer; transition: all 0.15s; }\n.btn:hover { background: #52525b; }\n.btn:disabled { opacity: 0.5; cursor: not-allowed; }\n.btn-primary { background: var(--accent); }\n.btn-primary:hover { background: #6d28d9; }\n.btn-row { display: flex; gap: 4px; margin-top: 6px; }\n.btn-row .btn { flex: 1; padding: 6px; font-size: 9px; }\n\n.char-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; margin: 6px 0; min-height: 100px; }\n.char-item { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--bg); border-radius: 4px; cursor: pointer; border: 1px solid transparent; }\n.char-item:hover { border-color: var(--border); }\n.char-item.active { border-color: var(--accent); background: rgba(124, 58, 237, 0.1); }\n.char-item input[type=\"checkbox\"] { accent-color: var(--accent); }\n.char-name { font-family: Georgia, serif; font-weight: 700; font-size: 13px; }\n.char-role { font-size: 9px; color: #71717a; text-transform: uppercase; font-family: Arial, sans-serif; }\n\n.preview-area { flex: 1; padding: 20px; overflow: auto; background: #09090b; display: flex; justify-content: center; }\n\n.paper { width: 210mm; min-height: 297mm; background: white; color: var(--ink); box-shadow: 0 4px 24px rgba(0,0,0,0.5); padding: 6mm; position: relative; display: flex; flex-direction: column; font-family: Georgia, serif; }\n\n/* ===== PDF-MATCHING PREVIEW STYLES ===== */\n\n/* Top half layout */\n.pdf-top-half { display: flex; gap: 5mm; margin-bottom: 2mm; }\n\n/* Left column: portrait + stats */\n.pdf-left-col { width: 40mm; flex-shrink: 0; }\n.pdf-portrait { width: 40mm; height: 60mm; border: 1px solid var(--ink); overflow: hidden; background: #fafafa; display: flex; align-items: center; justify-content: center; cursor: pointer; }\n.pdf-portrait:hover { background: #f0f0f0; }\n.pdf-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }\n.portrait-placeholder { font-family: Arial, sans-serif; font-size: 9pt; color: #999; text-align: center; padding: 10px; line-height: 1.4; }\n\n.pdf-stats-row { display: flex; gap: 4mm; margin-top: 2mm; }\n.pdf-stat-box { flex: 1; border: 1px solid var(--ink); text-align: center; padding: 1mm; }\n.pdf-stat-label { font-family: Arial, sans-serif; font-weight: 700; font-size: 9pt; }\n.pdf-stat-value { font-family: Georgia, serif; font-size: 14pt; font-weight: 700; min-height: 6mm; }\n\n/* Right column: name, role, bio, traits */\n.pdf-right-col { flex: 1; display: flex; flex-direction: column; }\n.pdf-name { font-family: Georgia, serif; font-weight: 700; font-size: 24pt; line-height: 1; border-bottom: 1px solid var(--ink); padding-bottom: 1mm; margin-bottom: 1mm; }\n.pdf-role { font-family: Arial, sans-serif; font-weight: 700; font-size: 11pt; color: #555; letter-spacing: 0.5px; margin-bottom: 2mm; }\n.pdf-bio { font-family: Georgia, serif; font-size: 11pt; line-height: 1.4; font-style: italic; color: var(--ink); margin-bottom: 2mm; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }\n\n.pdf-traits { display: flex; gap: 8mm; margin-top: auto; }\n.pdf-trait { display: flex; flex-direction: column; }\n.pdf-trait-label { font-family: Arial, sans-serif; font-size: 7pt; font-weight: 700; color: #888; text-transform: uppercase; }\n.pdf-trait-value { font-family: Georgia, serif; font-size: 12pt; font-weight: 700; }\n\n/* Bottom row: abilities + inventory */\n.pdf-bottom-row { display: flex; gap: 4mm; margin-top: 2mm; }\n\n.pdf-abilities-col { flex: 1; }\n.pdf-inventory-col { width: 50%; flex-shrink: 0; }\n\n.pdf-section-header { font-family: Arial, sans-serif; font-weight: 700; font-size: 9pt; text-transform: uppercase; background: var(--ink); color: white; padding: 1.5mm 2mm; text-align: center; }\n.pdf-section-content { padding: 2mm; }\n\n.pdf-ability { padding: 2mm 0; color: var(--ink); }\n.pdf-ability-path { font-family: Arial, sans-serif; font-weight: 700; font-size: 8pt; color: #666; }\n.pdf-ability-name { font-family: Georgia, serif; font-weight: 700; font-size: 11pt; color: var(--ink); }\n.pdf-inv-item { font-family: Georgia, serif; font-size: 12pt; padding: 1mm 0; color: var(--ink); }\n\n/* Fold line */\n.pdf-fold-line { border-top: 2px dashed #bbb; margin: 4mm 0; }\n\n/* Bottom half (back) */\n.pdf-bottom-half { display: flex; gap: 5mm; flex: 1; }\n\n.pdf-back-text { flex: 1; display: flex; flex-direction: column; }\n.pdf-back-name { font-family: Georgia, serif; font-weight: 700; font-size: 18pt; border-bottom: 1px solid var(--ink); padding-bottom: 1mm; margin-bottom: 2mm; }\n.pdf-back-section-label { font-family: Arial, sans-serif; font-size: 8pt; font-weight: 700; color: #888; text-transform: uppercase; margin-top: 2mm; margin-bottom: 1mm; }\n.pdf-back-text-content { font-family: Georgia, serif; font-size: 11pt; line-height: 1.45; color: #333; }\n.pdf-italic { font-style: italic; }\n\n.pdf-back-portrait { width: 55mm; height: 82.5mm; flex-shrink: 0; border: 1px solid var(--ink); overflow: hidden; }\n.pdf-back-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }\n\n.quest-footer { position: absolute; bottom: 4mm; left: 0; right: 0; text-align: center; font-family: Arial, sans-serif; font-size: 6pt; color: #aaa; text-transform: uppercase; letter-spacing: 1.5px; }\n\n.status { font-size: 10px; color: #71717a; margin-top: 4px; min-height: 14px; }\n.error { color: #f87171; font-size: 10px; margin-top: 4px; display: none; }\n`;\n","label",[132],"48714822-e860-11f0-8438-42dde27851f2","main.ts","44e0e678-e855-11f0-b1e2-42dde27851f2",24,["D",1767416067826],11,"http","import { styles } from \"./styles.ts\";\nimport { clientScript } from \"./client.ts\";\n\nexport default async function(req: Request): Promise {\n return new Response(renderHTML(), { \n headers: { \"Content-Type\": \"text/html\" } \n });\n}\n\nfunction renderHTML(): string {\n return `\n\n\n \n \n Quest Character Sheet Generator\n

Diff · v88