Files
roll20-character-sheets-tester/EtherealWinds-playtest/etherealwinds.html
T
OoznynKoo 979cf9d58d Ethereal Winds playtest, Initial upload
A custom character sheet for Ethereal Winds, starting the first phase of playtesting. Version 1.1 alpha.
2021-01-07 13:25:24 +02:00

373 lines
20 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:">
<input class="descriptor" name="attr_bluetopshow" type="text" disabled="true" value="@{bluetop}">
<select name="attr_allocatetop">
<option value="unallocated" checked="true">&mdash;</option>
<option value="Ethereal">Ethereal</option>
<option value="Mental">Mental</option>
<option value="Physical">Physical</option>
</select>
<button type="roll" value="&{template:custom} {{color=green}} {{title=@{character_name}}} {{subtitle=@{allocatetop}}} {{Check=[[floor(({@{diepoolfirst}}k5+@{conditional}+floor(@{penalty}))/@{tn})]] success(es).}} {{Notes=Check made with a [[floor(@{penalty})]] penalty.}}" name="roll_checkfirst">Roll</button>
</div>
<div>
<input type="hidden" name="attr_blueright" value="Joy / Anger:">
<input class="descriptor" name="attr_bluerightshow" type="text" disabled="true" value="@{blueright}">
<select name="attr_allocateright">
<option value="unallocated" checked="true">&mdash;</option>
<option value="Ethereal">Ethereal</option>
<option value="Mental">Mental</option>
<option value="Physical">Physical</option>
</select>
<button type="roll" value="&{template:custom} {{color=green}} {{title=@{character_name}}} {{subtitle=@{allocateright}}} {{Check=[[floor(({@{diepoolsecond}}k5+@{conditional}+floor(@{penalty}))/@{tn})]] success(es).}} {{Notes=Check made with a [[floor(@{penalty})]] penalty.}}" name="roll_checksecond">Roll</button>
</div>
<div>
<input type="hidden" name="attr_blueleft" value="Fear / Confusion:">
<input class="descriptor" name="attr_blueleftshow" type="text" disabled="true" value="@{blueleft}">
<select name="attr_allocateleft">
<option value="unallocated" checked="true">&mdash;</option>
<option value="Ethereal">Ethereal</option>
<option value="Mental">Mental</option>
<option value="Physical">Physical</option>
</select>
<button type="roll" value="&{template:custom} {{color=green}} {{title=@{character_name}}} {{subtitle=@{allocateleft}}} {{Roll=[[floor(({@{diepoolthird}}k5+@{conditional}+floor(@{penalty}))/@{tn})]] success(es).}} {{Notes=Check made with a [[floor(@{penalty})]] penalty.}}" name="roll_checkthird">Roll</button>
</div>
</div>
<div class="targetnumber"><input type="number" name="attr_tn" value="13"><label>TN</label></div>
</div>
<div class="effort-track">
<h2>Effort Remaining</h2>
<div><input type="radio" name="attr_effort" value="10"><p class="label inline">&ndash; 10</p></div>
<div><input type="radio" name="attr_effort" value="9"><p class="label inline">&ndash; 9</p></div>
<div><input type="radio" name="attr_effort" value="8"><p class="label inline">&ndash; 8</p></div>
<div><input type="radio" name="attr_effort" value="7"><p class="label inline">&ndash; 7</p></div>
<div><input type="radio" name="attr_effort" value="6"><p class="label inline">&ndash; 6</p></div>
<div><input type="radio" name="attr_effort" value="5"><p class="label inline">&ndash; 5</p></div>
<div><input type="radio" name="attr_effort" value="4"><p class="label inline">&ndash; 4</p></div>
<div><input type="radio" name="attr_effort" value="3"><p class="label inline">&ndash; 3</p></div>
<div><input type="radio" name="attr_effort" value="2"><p class="label inline">&ndash; 2</p></div>
<div><input type="radio" name="attr_effort" value="1"><p class="label inline">&ndash; 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}))/@{tn})]] success(es).}} {{Notes=Check made with a [[floor(@{penalty})]] penalty.}}" 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>
<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>