<section class="grid grid-3col"> <fieldset class="resource grid-span-3 flexcol"> <div class="resource flexrow"> <label for="system.age" class="resource-label">Age</label> <input type="text" name="system.age" value="{{system.age}}" data-dtype="String"/> </div> <div class="resource grid-span-2 flexrow"> <label for="system.pronouns" class="resource-label">Pronouns</label> <input type="text" name="system.pronouns" value="{{system.pronouns}}" data-dtype="String"/> </div> <div class="resource grid-span-3 flexrow"> <label for="system.fear" class="resource-label">Fear</label> <input type="text" name="system.fear" value="{{system.fear}}" data-dtype="String"/> </div> <div class="resource grid-span-3 flexrow" > <label for="system.motivation" class="resource-label">Motivation</label> <input type="text" name="system.motivation" value="{{system.motivation}}" data-dtype="String"/> </div> <div class="resource grid-span-3 flexrow" > <label for="system.description" class="resource-label">Description</label> <input type="text" name="system.description" value="{{system.description}}" data-dtype="String"/> </div> <div class="resource grid-span-3 flexrow"> <label for="system.grade" class="resource-label">Grade</label> <input type="text" name="system.grade" value="{{system.grade}}" data-dtype="String"/> </div> </fieldset> <fieldset class="resource grid-span-3 flexcol"> <legend>Your Broom</legend> <!-- Broom Name Input with Dropdown --> <div class="resource flexrow"> <label for="broom-name" class="resource-label">Name</label> <input list="broomOptions" id="broom-name" name="system.broom.name" value="{{system.broom.name}}" data-dtype="String" placeholder="Select or Enter Broom Name" oninput="updateBroomDetails()" onblur="updateBroomDetails()"> <datalist id="broomOptions"> <option value="The Blocker's Broom" data-look="Defensive" data-mechanical="Gain the Guardian Strength"></option> <option value="Bolting 4000" data-look="Fast" data-mechanical="+1 to Flight checks"></option> <option value="The Bruiser" data-look="Intense" data-mechanical="+1 to Fight checks"></option> <option value="Cunning Captain’s Cruiser" data-look="Natural Leader" data-mechanical="Treat Snap Decisions as Planned Actions unless facing fear"></option> <option value="Daredevil’s Duster" data-look="Flashy" data-mechanical="+3 to Charm checks when performing a stunt"></option> <option value="The Daring Dodger 3000" data-look="Ambitious" data-mechanical="Each Adversity Token adds +2 to your roll instead of +1"></option> <option value="Heartwood’s Helper" data-look="Outgoing" data-mechanical="Each successful check grants an ally one Adversity Token"></option> <option value="Mapmaker’s Friend" data-look="Level-Headed" data-mechanical="Cannot get lost if you know the area"></option> <option value="The Mastermind’s Sweeper" data-look="Confident" data-mechanical="+1 to Brains checks"></option> <option value="The Strong Sweep 2500" data-look="Strong" data-mechanical="+1 to Brawn checks"></option> <option value="The Suave Sweeper" data-look="Trustworthy" data-mechanical="+1 to Charm checks"></option> <option value="The Tough Break" data-look="Tough" data-mechanical="+1 to Grit checks"></option> <option value="Valiance 2400" data-look="Brave" data-mechanical="May ignore your fears"></option> <option value="Weasel’s Whisk" data-look="Sneaky" data-mechanical="Gain the Unassuming Strength"></option> </datalist> </div> <!-- Broom Look --> <div class="resource flexrow"> <label for="broom-look" class="resource-label">Look</label> <input type="text" id="broom-look" name="system.broom.look" value="{{system.broom.look}}" data-dtype="String"/> </div> <!-- Mechanical Benefit as Textarea --> <div class="resource flexrow"> <label for="broom-mechanical" class="resource-label">Mechanical Benefit</label> <textarea id="broom-mechanical" name="system.broom.mechanicalbenefit" data-dtype="String" rows="3" style="resize:none;"></textarea> </div> </fieldset> <script> function updateBroomDetails() { // Use a short delay to allow browser to properly handle the datalist input setTimeout(function() { const broomNameInput = document.getElementById("broom-name").value.trim(); const broomOptions = document.querySelectorAll("#broomOptions option"); let selectedLook = ""; let selectedMechanical = ""; // Loop through the datalist options to find a matching broom name broomOptions.forEach(option => { if (option.value.toLowerCase() === broomNameInput.toLowerCase()) { selectedLook = option.getAttribute("data-look"); selectedMechanical = option.getAttribute("data-mechanical"); } }); // Update the look and mechanical benefit fields if a predefined broom is selected document.getElementById("broom-look").value = selectedLook || ""; document.getElementById("broom-mechanical").value = selectedMechanical || ""; }, 100); // Delay of 100 milliseconds } </script> <fieldset class="resource grid-span-3 flexcol"> <legend>Wand Selection</legend> <!-- Wood Selection --> <div class="resource-flexrow"> <label for="system.wand.wood" class="resource-label">Wood Type</label> <input list="WoodOptions" id="wandWoodChoice" name="system.wand.wood" value="{{system.wand.wood}}" placeholder="Select Wood type" oninput="updateWandWoodDetails()" onblur="updateWandWoodDetails()"> <datalist id="WoodOptions"> <option value="">Select Wood</option> <option value="Wisteria">(Brains)</option> <option value="Hawthorn">(Brains)</option> <option value="Pine">(Brawn)</option> <option value="Oak">(Brawn)</option> <option value="Crabapple">(Fight)</option> <option value="Dogwood">(Fight)</option> <option value="Birch">(Flight)</option> <option value="Bamboo">(Flight)</option> <option value="Ironwood">(Grit)</option> <option value="Maple">(Grit)</option> <option value="Lilac">(Charm)</option> <option value="Cherry">(Charm)</option> </datalist> </div> <!-- Core Selection --> <div class="resource-flexrow"> <label for="system.wand.core" class="resource-label">Core Type</label> <input list="CoreOptions" id="wandCoreChoice" name="system.wand.core" value="{{system.wand.core}}" placeholder="Select Core type" oninput="updateWandCoreDetails()" onblur="updateWandCoreDetails()"> <datalist id="CoreOptions"> <option value="">Select Core</option> <option value="Parchment">(Brains)</option> <option value="Phoenix Feather">(Brains)</option> <option value="Owl Feather">(Brains)</option> <option value="Gorilla Fur">(Brawn)</option> <option value="Ogre’s Fingernail">(Brawn)</option> <option value="Hippo’s Tooth">(Brawn)</option> <option value="Dragon’s Heartstring">(Fight)</option> <option value="Wolf’s Tooth">(Fight)</option> <option value="Elk’s Antler">(Fight)</option> <option value="Hawk’s Feather">(Flight)</option> <option value="Bat’s Bone">(Flight)</option> <option value="Changeling’s Hair">(Charm)</option> <option value="Gold">(Charm)</option> <option value="Mirror">(Charm)</option> <option value="Steel">(Grit)</option> <option value="Diamond">(Grit)</option> <option value="Lion’s Mane">(Grit)</option> </datalist> </div> </fieldset> <fieldset class="resource grid-span-3 flexcol"> <legend>Animal Familiar</legend> <div class="resource grid-span-3 flexrow"> <label for="system.animalfamiliar" class="resource-label">Animal Familiar</label> <input type="text" name="system.animalfamiliar" value="{{system.animalfamiliar}}" data-dtype="String"/> </div> </fieldset> </section>