Files
roll20-character-sheets/EtherealWinds-playtest/etherealwinds.html
T
2024-06-03 13:15:14 -04:00

406 lines
22 KiB
HTML

<div class="wrapper">
<div class="top">
<div class="top-left">
<div class="wrap"><label class="label inline">Name:</label> <input type="text" name="attr_character_name"></div>
<div class="wrap"><label class="label">Description:</label> <textarea type="text" name="attr_description"></textarea></div>
</div>
<div class="top-center">
<img src="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/EtherealWinds-playtest/logo.png" alt="Ethereal Winds">
<!--<p class="subheading">working title</p>-->
<h3>Character Sheet v1</h3>
<p class="bigger inline">Clear Assignment</p><input type="radio" name="attr_focus" value="0">
</div>
<div class="top-right">
<div class="wrap"><label class="label inline">Player:</label> <input type="text" name="attr_player"></div>
<div class="wrap"><label class="label inline">Color:</label> <input type="text" name="attr_color"></div>
<div class="wrap"><label class="label inline">Specialization:</label> <input type="text" name="attr_specialization"></div>
<div class="wrap"><label class="label">Masteries:</label> <textarea name="attr_masteries"></textarea></div>
</div>
<div class="dietypes">
<h2>Select Dice: <span><input type="radio" name="attr_dietype" value="0" checked="true"><label>D6</label>
<input type="radio" name="attr_dietype" value="1"><label>D8</label>
<input type="radio" name="attr_dietype" value="2"><label>D10</label>
<input type="radio" name="attr_dietype" value="3"><label>D12</label></span></h2>
<input type="hidden" name="attr_dicetoroll" value="d6">
</div>
</div>
<div class="wound-track">
<h2>Wound Track</h2>
<div><p class="label inline">Baseline 0 &ndash;</p><input type="radio" name="attr_wounds" value="0"></div>
<div><p class="label inline">1 &ndash;</p><input type="radio" name="attr_wounds" value="0.5"></div>
<div><p class="label inline">DD1 | 2 &ndash;</p><input type="radio" name="attr_wounds" value="1"></div>
<div><p class="label inline">3 &ndash;</p><input type="radio" name="attr_wounds" value="1.5"></div>
<div><p class="label inline">DD2 | 4 &ndash;</p><input type="radio" name="attr_wounds" value="2"></div>
<div><p class="label inline">Permanent Injury | 5 &ndash;</p><input type="radio" name="attr_wounds" value="2.5"></div>
<div><p class="label inline">RD1 | 6 &ndash;</p><input type="radio" name="attr_wounds" value="3"></div>
<div><p class="label inline">7 &ndash;</p><input type="radio" name="attr_wounds" value="3.5"></div>
<div><p class="label inline">DDx | 8 &ndash;</p><input type="radio" name="attr_wounds" value="4"></div>
<div><p class="label inline">9 &ndash;</p><input type="radio" name="attr_wounds" value="4.5"></div>
<div><p class="label inline">Bodily Death | 10 &ndash;</p><input type="radio" name="attr_wounds" value="5"></div>
<input type="hidden" name="attr_dd" value="0">
<input type="hidden" name="attr_rd" value="0">
<div>
<p class="legend simple"><strong>DD = Diesize Decrease.</strong> Dice are switched out for lower value ones.</p>
<p class="legend simple"><strong>RD = Remove Die.</strong> Dice are removed from the pool.</p>
</div>
<div class="strain-track">
<h2>Strain</h2>
<input type="radio" name="attr_strain" value="0"><p class="label inline">&nbsp;&ndash; 0 | <span>Total Penalty</span></p>
<div><p class="label inline">1</p><input type="radio" name="attr_strain" value="0.5"></div>
<div><p class="label inline">2</p><input type="radio" name="attr_strain" value="0.75"></div>
<div><p class="label inline">3 | <span>-1</span></p><input type="radio" name="attr_strain" value="-1"></div>
<div><p class="label inline">4</p><input type="radio" name="attr_strain" value="-0.5"></div>
<div><p class="label inline">5 | <span>-2</span></p><input type="radio" name="attr_strain" value="-2"></div>
<div><p class="label inline">6</p><input type="radio" name="attr_strain" value="-1.5"></div>
<div><p class="label inline">7 | <span>-3</span></p><input type="radio" name="attr_strain" value="-3"></div>
<div><p class="label inline">8 | <span>-4</span></p><input type="radio" name="attr_strain" value="-4"></div>
<div><p class="label inline">9 | <span>-5</span></p><input type="radio" name="attr_strain" value="-5"></div>
<div><p class="label inline">10 | <span>-6</span></p><input type="radio" name="attr_strain" value="-6"></div>
<input type="hidden" name="attr_penalty" value="@{strain}">
</div>
</div>
<div class="numbers">
<div class="block block1"><input type="radio" name="attr_focus" value="1"><h3>Compassion</h3><div class="attribute"><input type="number" name="attr_compassion" placeholder="3"></div></div>
<div class="block block2"><input type="radio" name="attr_focus" value="2"><h3>Joy</h3><div class="attribute"><input type="number" name="attr_joy" placeholder="3"></div></div>
<div class="block block6"><input type="radio" name="attr_focus" value="6"><h3>Sorrow</h3><div class="attribute"><input type="number" name="attr_sorrow" placeholder="3"></div></div>
<div class="hexes">
<input type="checkbox" class="switch" name="attr_switch" value="1"><label>Switch Stat Hexes</label>
<input type="hidden" name="attr_diepooltop" value="0">
<input type="hidden" name="attr_diepoolright" value="0">
<input type="hidden" name="attr_diepoolleft" value="0">
<div class="orangehex">
<div class="stat-hex hex1"><input type="number" name="attr_stat1" value="floor((@{compassionmod}+@{joymod})/2)" disabled="true"></div>
<div class="stat-hex hex3"><input type="number" name="attr_stat3" value="floor((@{angermod}+@{fearmod})/2)" disabled="true"></div>
<div class="stat-hex hex5"><input type="number" name="attr_stat5" value="floor((@{confusionmod}+@{sorrowmod})/2)" disabled="true"></div>
</div>
<div class="bluehex">
<div class="stat-hex hex2"><input type="number" name="attr_stat2" value="floor((@{joymod}+@{angermod})/2)" disabled="true"></div>
<div class="stat-hex hex4"><input type="number" name="attr_stat4" value="floor((@{fearmod}+@{confusionmod})/2)" disabled="true"></div>
<div class="stat-hex hex6"><input type="number" name="attr_stat6" value="floor((@{sorrowmod}+@{compassionmod})/2)" disabled="true"></div>
</div>
</div>
<div class="block block3"><input type="radio" name="attr_focus" value="3"><h3>Anger</h3><div class="attribute"><input type="number" name="attr_anger" placeholder="3"></div></div>
<div class="block block5"><div class="attribute"><input type="number" name="attr_confusion" placeholder="3"></div><h3>Confusion</h3><input type="radio" name="attr_focus" value="5"></div>
<div class="block block4"><div class="attribute"><input type="number" name="attr_fear" placeholder="3"></div><h3>Fear</h3><input type="radio" name="attr_focus" value="4"></div>
<input type="hidden" value="@{compassion}" name="attr_compassionmod">
<input type="hidden" value="@{joy}" name="attr_joymod">
<input type="hidden" value="@{anger}" name="attr_angermod">
<input type="hidden" value="@{fear}" name="attr_fearmod">
<input type="hidden" value="@{confusion}" name="attr_confusionmod">
<input type="hidden" value="@{sorrow}" name="attr_sorrowmod">
</div>
<div class="selector">
<!--<p>Base Stat Calculation Options</p>
<div><input type="radio" name="attr_hexgroupz" value="1" checked="true"><p class="label inline">Use the Blue Hexes</p></div>
<div><input type="radio" name="attr_hexgroupz" value="2"><p class="label inline">Use the Orange Hexes</p></div>-->
<h2>Stat Allocation</h2>
<input type="hidden" name="attr_diepoolfirst" value="0">
<input type="hidden" name="attr_diepoolsecond" value="0">
<input type="hidden" name="attr_diepoolthird" value="0">
<div class="combo">
<div>
<input type="hidden" name="attr_bluetop" value="Sorrow / Compassion:">
<!-- version 1.2 alpha | hidden attributes that enable color switching -->
<input name="attr_allocatetop" type="hidden" class="colorswitch1">
<input class="descriptor" name="attr_bluetopshow" type="text" disabled="true" value="@{bluetop}">
<select name="attr_allocatetop" class="selectedcolor1">
<option value="unallocated" checked="true">&mdash;</option>
<option value="Ethereal">Ethereal</option>
<option value="Mental">Mental</option>
<option value="Physical">Physical</option>
</select>
<span class="highlighted hl6">&xcirc;</span>
<span class="highlighted hl1">&xcirc;</span>
<!-- version 1.2 alpha | updated roll formulas to include bonus attribute -->
<button type="roll" value="&{template:custom} {{color=green}} {{title=@{character_name}}} {{subtitle=@{allocatetop}}} {{Check=[[floor(({@{diepoolfirst}}k5+@{conditional}+floor(@{penalty})+@{bonus})/@{tn})]] success(es).}} {{Notes=Check made with a [[floor(@{penalty})+@{bonus}]] modifier.}}" name="roll_checkfirst">Roll</button>
</div>
<div>
<input type="hidden" name="attr_blueright" value="Joy / Anger:">
<input name="attr_allocateright" type="hidden" class="colorswitch2">
<input class="descriptor" name="attr_bluerightshow" type="text" disabled="true" value="@{blueright}">
<select name="attr_allocateright" class="selectedcolor2">
<option value="unallocated" checked="true">&mdash;</option>
<option value="Ethereal">Ethereal</option>
<option value="Mental">Mental</option>
<option value="Physical">Physical</option>
</select>
<span class="highlighted hl2">&xcirc;</span>
<span class="highlighted hl3">&xcirc;</span>
<button type="roll" value="&{template:custom} {{color=green}} {{title=@{character_name}}} {{subtitle=@{allocateright}}} {{Check=[[floor(({@{diepoolsecond}}k5+@{conditional}+floor(@{penalty})+@{bonus})/@{tn})]] success(es).}} {{Notes=Check made with a [[floor(@{penalty})+@{bonus}]] modifier.}}" name="roll_checksecond">Roll</button>
</div>
<div>
<input type="hidden" name="attr_blueleft" value="Fear / Confusion:">
<input name="attr_allocateleft" type="hidden" class="colorswitch3">
<input class="descriptor" name="attr_blueleftshow" type="text" disabled="true" value="@{blueleft}">
<select name="attr_allocateleft" class="selectedcolor3">
<option value="unallocated" checked="true">&mdash;</option>
<option value="Ethereal">Ethereal</option>
<option value="Mental">Mental</option>
<option value="Physical">Physical</option>
</select>
<span class="highlighted hl4">&xcirc;</span>
<span class="highlighted hl5">&xcirc;</span>
<button type="roll" value="&{template:custom} {{color=green}} {{title=@{character_name}}} {{subtitle=@{allocateleft}}} {{Roll=[[floor(({@{diepoolthird}}k5+@{conditional}+floor(@{penalty})+@{bonus})/@{tn})]] success(es).}} {{Notes=Check made with a [[floor(@{penalty})+@{bonus}]] modifier.}}" name="roll_checkthird">Roll</button>
</div>
</div>
<div class="targetnumber"><input type="number" name="attr_tn" value="13"><label>TN</label></div>
<!-- character sheet version 1.2 | added a field for roll bonuses -->
<div class="bonustoroll"><input type="number" name="attr_bonus" value="0"><label>Bonus</label></div>
</div>
<div class="effort-track">
<h2>Effort Remaining</h2>
<!-- removing dashes in front of numbers -->
<div><input type="radio" name="attr_effort" value="10"><p class="label inline"> 10</p></div>
<div><input type="radio" name="attr_effort" value="9"><p class="label inline"> 9</p></div>
<div><input type="radio" name="attr_effort" value="8"><p class="label inline"> 8</p></div>
<div><input type="radio" name="attr_effort" value="7"><p class="label inline"> 7</p></div>
<div><input type="radio" name="attr_effort" value="6"><p class="label inline"> 6</p></div>
<div><input type="radio" name="attr_effort" value="5"><p class="label inline"> 5</p></div>
<div><input type="radio" name="attr_effort" value="4"><p class="label inline"> 4</p></div>
<div><input type="radio" name="attr_effort" value="3"><p class="label inline"> 3</p></div>
<div><input type="radio" name="attr_effort" value="2"><p class="label inline"> 2</p></div>
<div><input type="radio" name="attr_effort" value="1"><p class="label inline"> 1</p></div>
<div class="single">
<input type="radio" name="attr_effort" value="0"><p class="label inline">&ndash; 0</p>
<button type="roll" value="&{template:custom} {{color=green}} {{title=@{character_name}}} {{subtitle=Effort}} {{Roll=[[floor(({@{diepooleffort}}k5+@{conditional}+floor(@{penalty})+@{bonus})/@{tn})]] success(es).}} {{Notes=Check made with a [[floor(@{penalty})+@{bonus}]] modifier.}}" name="roll_checkeffort">Roll Effort</button>
</div>
<input type="hidden" name="attr_diepooleffort" value="0">
</div>
<div class="derived-stats">
<div class="conditions">
<label class="label">Conditional Penalties:</label>
<input type="number" name="attr_conditional" value="0">
</div>
<div class="health">
<img src="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/EtherealWinds-playtest/hex-health.png" alt="derived stats: health">
<p class="simple">Highest + Lowest Attribute</p>
<div><input type="number" name="attr_health" value="2"></div>
</div>
<div class="mana">
<img src="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/EtherealWinds-playtest/hex-mana.png" alt="derived stats: mana">
<p class="simple">Ethereal Stat +1</p>
<div><input type="number" name="attr_mana" value="2"></div>
</div>
<h2>Injuries</h2>
<textarea name="attr_injuries"></textarea>
</div>
<div class="exp"><input type="text" name="attr_exp"><p class="label simple inline">&nbsp;/&nbsp;</p><input type="text" name="attr_totalexp">
<p class="label inline">Current / Total EXP</p>
</div>
<div class="tints">
<h2>Tints &amp; Color Notes</h2>
<textarea name="attr_colornotes"></textarea>
</div>
<div class="gear">
<h2>Gear/Special Properties</h2>
<div><h3>Item</h3><textarea name="attr_items"></textarea></div>
<div><h3>Properties</h3><textarea name="attr_properties"></textarea></div>
</div>
<div class="assets">
<h2>Anchor: <input type="text" name="attr_anchor" placeholder="Intricate Gold Pendant"></h2>
<label>Focus Decay</label>
<select name="attr_uses">
<option value="0">Still unused</option>
<option value="1">Used Once</option>
<option value="2">Used Twice</option>
<option value="3">Used Three times</option>
<option value="4">Used Four times</option>
<option value="5">Used Five times</option>
<option value="6">Used Six times</option>
<option value="7">Used Seven times</option>
<option value="8">Completely Used Up</option>
</select>
<h2>Resources, Wealth &amp; Assets</h2>
<fieldset class="repeating_assets">
<input type="text" name="attr_assetname">
<select name="attr_condition">
<option value="intact">intact</option>
<option value="partially consumed">partially consumed</option>
<option value="completely used up">completely used up</option>
</select>
</fieldset>
</div>
<div class="notes">
<h2>Miscellaneous Notes</h2>
<textarea name="attr_miscnotes"></textarea>
</div>
<!-- adding repeatable section for custom rolls -->
<div class="customrolls">
<h2>Custom Rolls</h2>
<p>Roll penalties and bonuses are applied automatically; <strong>RD</strong>, <strong>DD</strong>, and <strong>type of die</strong> are not.<br>
You can drop the lowest rolling dice by adding "dl" and the number of dice to remove. Alternately you can add "k" followed by however many dice you want to keep.</p>
<p>If rolling multiple types of dice and need to drop some, place them inside curly brackets. Example: <strong>{2d6+3d8}k4</strong>.</p>
<hr>
<fieldset class="repeating_custom">
<label>Name: </label><input type="text" name="attr_customrollname">
<label>Formula: </label><input type="text" name="attr_customdice" value="4d6dl1">
<button type="roll" value="&{template:custom} {{color=green}} {{title=@{character_name}}} {{subtitle=@{customrollname}}} {{Check=[[floor((@{customdice}+@{conditional}+floor(@{penalty})+@{bonus})/@{tn})]] success(es).}} {{Notes=Check made with a [[floor(@{penalty})+@{bonus}]] modifier.}}" name="roll_checkfirst">Roll</button>
<hr>
</fieldset>
</div>
<div class="last">&nbsp;</div>
</div>
<rolltemplate class="sheet-rolltemplate-custom">
<div class="sheet-container sheet-color-{{color}}">
<div class="sheet-header">
{{#title}}<div class="sheet-title">{{title}}</div>{{/title}}
{{#subtitle}}<div class="sheet-subtitle">{{subtitle}}</div>{{/subtitle}}
</div>
<div class="sheet-content">
{{#allprops() title subtitle desc color}}
<div class="sheet-key">{{key}}</div>
<div class="sheet-value">{{value}}</div>
{{/allprops() title subtitle desc color}}
{{#desc}}<div class="sheet-desc">{{desc}}</div>{{/desc}}
</div>
</div>
</rolltemplate>
<script type="text/worker">
on("change:compassion change:joy change:anger change:fear change:confusion change:sorrow change:focus change:switch change:dietype change:wounds change:effort sheet:opened", function() {
getAttrs(["focus","compassion","joy","anger","fear","confusion","sorrow","switch","compassionmod","joymod","angermod","fearmod","confusionmod","sorrowmod", "wounds","dietype","effort"], function(values) {
let assignment = parseInt(values.focus)||0;
let quirk1 = parseInt(values.compassion)||0;
let quirk2 = parseInt(values.joy)||0;
let quirk3 = parseInt(values.anger)||0;
let quirk4 = parseInt(values.fear)||0;
let quirk5 = parseInt(values.confusion)||0;
let quirk6 = parseInt(values.sorrow)||0;
let addto1 = 0;
let addto2 = 0;
let addto3 = 0;
let addto4 = 0;
let addto5 = 0;
let addto6 = 0;
let assigned = 3;
let adjacent = 1;
let setpooltop = 0;
let setpoolright = 0;
let setpoolleft = 0;
let setpooleffort = parseInt(values.effort)||0;
let tooltiptop = "Select Base Stat";
let tooltipright = "Select Base Stat";
let tooltipleft = "Select Base Stat";
let hexcolor = parseInt(values.switch)||0;
let wounded = parseInt(values.wounds)||0;
let basedie = parseInt(values.dietype)||0;
let addtodd = 0;
let addtord = 0;
let dice = "d6";
let reduced = "d6";
let pooltop = "";
let poolright = "";
let poolleft = "";
let pooleffort = "";
let ddx = "0";
// checks whether compassion is focused
if (assignment == 1) { addto6 = adjacent; addto1 = assigned; addto2 = adjacent; console.log("Compassion is now Focused"); };
// checks whether joy is focused
if (assignment == 2) {addto1 = adjacent; addto2 = assigned; addto3 = adjacent; console.log("Joy is now Focused"); };
// checks whether anger is focused
if (assignment == 3) {addto2 = adjacent; addto3 = assigned; addto4 = adjacent; console.log("Anger is now Focused"); };
// checks whether fear is focused
if (assignment == 4) { addto3 = adjacent; addto4 = assigned; addto5 = adjacent; console.log("Fear is now Focused"); };
// checks whether confusion is focused
if (assignment == 5) {addto4 = adjacent; addto5 = assigned; addto6 = adjacent; console.log("Confusion is now Focused"); };
// checks whether sorrow is focused
if (assignment == 6) {addto5 = adjacent; addto6 = assigned; addto1 = adjacent; console.log("Sorrow is now Focused"); };
//changes how attributes are calculated for base stats -->
// if the orange hexgroup is selected
if (hexcolor == 1) {
console.log("Alternate Hex group is switched ON");
tooltiptop = "Sorrow / Compassion:";
tooltipright = "Joy / Anger:";
tooltipleft = "Fear / Confusion:";
setpooltop = Math.floor((quirk6+addto6+quirk1+addto1)/2); // should equal stat6
setpoolright = Math.floor((quirk2+addto2+quirk3+addto3)/2); // should equal stat2
setpoolleft = Math.floor((quirk4+addto4+quirk5+addto5)/2); // should equal stat4
};
// if the blue hexgroup is selected
if (hexcolor == 0) {
console.log("Alternate Hex group is switched OFF");
tooltiptop = "Compassion / Joy:";
tooltipright = "Anger / Fear:";
tooltipleft = "Confusion / Sorrow:";
setpooltop = Math.floor((quirk1+addto1+quirk2+addto2)/2); // should equal stat1
setpoolright = Math.floor((quirk3+addto3+quirk4+addto4)/2); // should equal stat3
setpoolleft = Math.floor((quirk5+addto5+quirk6+addto6)/2); // should equal stat5
};
// changes the base dice based on selected radio
if (basedie == 0) { dice = "d6"; reduced = "d6"; console.log("Selected Die Type: D6"); };
if (basedie == 1) { dice = "d8"; reduced = "d6"; console.log("Selected Die Type: D8"); };
if (basedie == 2) { dice = "d10"; reduced = "d8"; console.log("Selected Die Type: D10"); };
if (basedie == 3) { dice = "d12"; reduced = "d10"; console.log("Selected Die Type: D12"); };
// adds dice to remove or decrease for rolls
if (Math.floor(wounded) == 0) { addtodd = 0; ddx = 0; console.log("Dice Modifiers: none"); };
if (Math.floor(wounded) == 1) { addtodd = 1; ddx = 0; console.log("Modifiers: DD1"); };
if (Math.floor(wounded) == 2) { addtodd = 2; ddx = 0; console.log("Modifiers: DD2"); };
if (Math.floor(wounded) == 3) { addtodd = 2; ddx = 0; addtord = 1; console.log("Modifiers: DD2 and RD1"); };
if (Math.floor(wounded) == 4) { addtodd = 0; ddx = 1; addtord = 1; console.log("Modifiers: DDx and RD1"); };
pooltop = (setpooltop - addtodd - addtord) + dice + "+" + addtodd + reduced;
if (ddx == 1) { pooltop = (setpooltop - addtord) + reduced; };
console.log("The First Die pool is currently: "+pooltop);
poolright = (setpoolright - addtodd - addtord) + dice + "+" + addtodd + reduced;
if (ddx == 1) { poolright = (setpoolright - addtord) + reduced; };
console.log("The Second Die pool is currently: "+poolright);
poolleft = (setpoolleft - addtodd - addtord) + dice + "+" + addtodd + reduced;
if (ddx == 1) { poolleft = (setpoolleft - addtord) + reduced; };
console.log("The Third Die pool is currently: "+poolleft);
pooleffort = (setpooleffort - addtodd - addtord) + dice + "+" + addtodd + reduced;
if (ddx == 1) { pooleffort = (setpooleffort - addtord) + reduced; };
console.log("Should you have to roll Effort: "+pooleffort);
setAttrs({
"compassionmod": quirk1+addto1,
"joymod": quirk2+addto2,
"angermod": quirk3+addto3,
"fearmod": quirk4+addto4,
"confusionmod": quirk5+addto5,
"sorrowmod": quirk6+addto6,
"diepooltop": setpooltop,
"diepoolright": setpoolright,
"diepoolleft": setpoolleft,
"bluetop": tooltiptop,
"blueright": tooltipright,
"blueleft": tooltipleft,
"diepoolFirst": pooltop,
"diepoolSecond": poolright,
"diepoolThird": poolleft,
"diepoolEffort": pooleffort
});
});
console.log("Sheetworker Initiated");
});
</script>