ddServer/templates/monsterForm.html
Patryk Hegenberg 206b5bb506 add everything necessary to be able to calculate skills interactive.
added new route to main to handle skill field update
added new handler to work with htmx requests for skill calculation
made skill fields readonly
adapted templates for reloading of skills only
2023-12-12 20:56:55 +01:00

378 lines
13 KiB
HTML

{{ define "monsterform" }}
<div class="tile is-ancestor">
<div class="tile is-parent">
<div class="tile is-child field">
<label for="name">Monster Name:</label>
<div class="control">
<input type="text" name="name" required placeholder="Type here" class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="source">Monster Source:</label>
<div class="control">
<input type="text" name="source" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="size">Size:</label>
<div class="control">
<div class="select">
<select name="size">
<option>H</option>
<option>T</option>
<option>S</option>
<option>L</option>
<option>G</option>
</select>
</div>
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="type">Type:</label>
<div class="control">
<input type="text" name="type" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
</div>
<div class="tile is-vertical is-ancestor">
<div class="tile is-parent">
<div class="tile is-child field">
<label for="alignment">Alignment:</label>
<div class="control">
<input type="text" name="alignment" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<div class="tile is-child field">
<label for="ac">AC:</label>
<div class="control">
<input type="number" name="ac" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="acFrom">AC From:</label>
<div class="control">
<input type="text" name="acFrom" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<div class="tile is-child field">
<label for="hpAverage">HP Average:</label>
<div class="control">
<input type="number" name="hpAverage" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="hpFormula">HP Formula:</label>
<div class="control">
<input type="text" name="hpFormula" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
</div>
<div class="card tile is-ancestor is-vertical">
<header class="card-header">
<p class="card-header-title">
Speed
</p>
</header>
<div class="card-content">
<div class="content">
<div class="tile is-ancestor">
<div class="tile is-parent">
<div class="tile is-child field">
<label for="walk">Walk:</label>
<div class="control">
<input type="number" name="walk" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="burrow">Burrow:</label>
<div class="control">
<input type="number" name="burrow" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="climb">Climb:</label>
<div class="control">
<input type="number" name="climb" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<div class="tile is-child field">
<label for="fly">Fly:</label>
<div class="control">
<input type="number" name="fly" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="swim">Swim:</label>
<div class="control">
<input type="number" name="swim" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<div class="tile is-child field">
<label for="str">Str:</label>
<div class="control">
<input type="number" name="str" required class="input input-bordered w-full max-w-xs"
hx-post="/calculate-skills" hx-trigger="keyup changed delay:100ms" hx-target="#skills" hx-swap="innerHTML">
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="dex">Dex:</label>
<div class="control">
<input type="number" name="dex" required class="input input-bordered w-full max-w-xs"
hx-post="/calculate-skills" hx-trigger="keyup changed delay:100ms" hx-target="#skills" hx-swap="innerHTML">
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="con">Con:</label>
<div class="control">
<input type="number" name="con" required class="input input-bordered w-full max-w-xs"
hx-post="/calculate-skills" hx-trigger="keyup changed delay:100ms" hx-target="#skills" hx-swap="innerHTML">
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="cr">CR:</label>
<div class="control">
<input type="text" name="cr" required class="input input-bordered w-full max-w-xs" hx-post="/calculate-skills"
hx-trigger="keyup changed delay:100ms" hx-target="#skills" hx-swap="innerHTML" hx-target="#skills"
hx-swap="outerHTML">
</div>
</div>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<div class="tile is-child field">
<label for="int">Int:</label>
<div class="control">
<input type="number" name="int" required class="input input-bordered w-full max-w-xs"
hx-post="/calculate-skills" hx-trigger="keyup changed delay:100ms" hx-target="#skills" hx-swap="innerHTML">
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="wis">Wis:</label>
<div class="control">
<input type="number" name="wis" required class="input input-bordered w-full max-w-xs"
hx-post="/calculate-skills" hx-trigger="keyup changed delay:100ms" hx-target="#skills" hx-swap="innerHTML">
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="cha">Cha:</label>
<div class="control">
<input type="number" name="cha" required class="input input-bordered w-full max-w-xs"
hx-post="/calculate-skills" hx-trigger="keyup changed delay:100ms" hx-target="#skills" hx-swap="innerHTML">
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="passive">Passive:</label>
<div class="control">
<input type="number" name="passive" required class="input input-bordered w-full max-w-xs"
hx-post="/calculate-skills" hx-trigger="keyup changed delay:100ms" hx-target="#skills" hx-swap="innerHTML">
</div>
</div>
</div>
</div>
<div class="card tile is-ancestor is-vertical">
<header class="card-header">
<p class="card-header-title">
Save
</p>
</header>
<div class="card-content">
<div class="content">
<div class="tile is-ancestor">
<div class="tile is-parent gap">
<div class="tile is-child field">
<label for="saveDex">Dex:</label>
<div class="control">
<input type="text" name="saveDex" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
<div class="tile is-parent gap">
<div class="tile is-child field">
<label for="saveCon">Con:</label>
<div class="control">
<input type="text" name="saveCon" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
<div class="tile is-parent gap">
<div class="tile is-child field">
<label for="saveWis">Wis:</label>
<div class="control">
<input type="text" name="saveWis" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent gap">
<div class="tile is-child field">
<label for="saveCha">Cha:</label>
<div class="control">
<input type="text" name="saveCha" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
<div class="tile is-parent gap">
<div class="tile is-child field">
<label for="saveInt">Int:</label>
<div class="control">
<input type="text" name="saveInt" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
<div class="tile is-parent gap">
<div class="tile is-child field">
<label for="saveStr">Str:</label>
<div class="control">
<input type="text" name="saveStr" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="skills" class="card tile is-ancestor is-vertical">
{{ template "skills" }}
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<div class="tile is-child field">
<label for="resist">Damage Resistances:</label>
<div class="control">
<input type="text" name="resist" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="immune">Damage Immunity:</label>
<div class="control">
<input type="text" name="immune" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="vulnerable">Vulnerability:</label>
<div class="control">
<input type="text" name="vulnerable" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="conditionImmune">Condition Immunity:</label>
<div class="control">
<input type="text" name="conditionImmune" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<div class="tile is-child field">
<label for="senses">Senses:</label>
<div class="control">
<input type="text" name="senses" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<div class="tile is-child field">
<label for="languages">Languages:</label>
<div class="control">
<input type="text" name="languages" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<div class="tile is-child field">
<label for="traitName">Trait Name:</label>
<div class="control">
<input type="text" name="traitName" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="traitEntry">Trait Entry:</label>
<div class="control">
<input type="text" name="traitEntry" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<div class="tile is-child field">
<label for="actionName">Action Name:</label>
<div class="control">
<input type="text" name="actionName" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child field">
<label for="actionEntry">Action Entry:</label>
<div class="control">
<input type="text" name="actionEntry" required class="input input-bordered w-full max-w-xs">
</div>
</div>
</div>
</div>
{{end}}