Supers! add mook and roll parsing

This commit is contained in:
Kurohyou
2021-09-19 19:13:38 -06:00
parent 2e04e3d682
commit f22f91bdbd
2 changed files with 896 additions and 336 deletions
+382 -107
View File
@@ -6,14 +6,14 @@
.sheet-medium {width: 25%}
select {width: 25%;}
select {width: auto;}
/* --------- Text ------------- */
label {display: inline;}
h2 {
h2,.sheet-h2 {
color: blue;
text-align: center;
}
@@ -48,7 +48,10 @@ input[type="number"]{
input[type="number"]{
text-align: center;
}
.sheet-input-label input[type='text']{
width: 100%;
box-sizing: border-box;
}
textarea {
background-color: transparent;
width: 89%;
@@ -66,7 +69,32 @@ input[type="text"]:focus,
input[type="number"]:focus{
background-color: #F6CED8;
}
.sheet-stacked{
display: grid;
grid:
repeat(2,auto)
/
auto
;
grid-template-areas:
"over"
"under"
;
padding: 0;
margin: 0;
}
.sheet-stacked > :not(input){
text-align: center;
}
.sheet-stacked.sheet-over > :not(input){
grid-area: over;
}
.sheet-stacked.sheet-under > :not(input){
grid-area: under;
}
.sheet-main .sheet-stacked > input{
width: 100%;
}
/* -----Hides up/down buttons on numberfields that don't need them ---*/
input[type=number].sheet-ref::-webkit-inner-spin-button,
@@ -85,11 +113,35 @@ input[type=number].sheet-txtfield {
button {border-top: 1px;}
.charsheet button[type=roll].sheet-d6::before { /*new die changes die roller to d6*/
.charsheet button:is([type='roll'],[type='action']).sheet-d6::before { /*new die changes die roller to d6*/
font-family: 'dicefontd6';
content: 'F ';
}
button[type='action']{
border-radius: 4px;
border: 1px solid #ccc;
border-bottom-color: #bbb;
display: inline-block;
line-height: 18px;
color: #333;
text-shadow: 0 1px 1px rgb(255 255 255 / 75%);
vertical-align: middle;
background-color: #f5f5f5;
background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
background-repeat: repeat-x;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 2px rgb(0 0 0 / 5%);
cursor: pointer;
font-size: 18.59px;
padding: 2px 3px;
margin: 0px 3px 0px 3px;
}
button[type='action']:hover{
color: #333;
text-decoration: none;
background-color: #e6e6e6;
background-position: 0 -15px;
}
/*-----------------------------------------------------------------*\
#SECTIONS
\*-----------------------------------------------------------------*/
@@ -118,56 +170,119 @@ button {border-top: 1px;}
.sheet-section {
padding: 5px;
min-height: 90%;
}
.sheet-border{
border: solid 4px black;
}
.sheet-main .sheet-boxed{
border: 2px solid black;
}
/* ----- Character Sheet Structure -------
'.sheet-main' defines the sheet's general structure and dimensions using CSS Grid.
It uses 'Grid template areas' to name each sheet section,
so that they can be positioned in the grid easily,
while also providing a human-readable overview. */
div.sheet-main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 2fr 3.25fr 3fr 3.75fr 2fr 1fr;
grid-template-areas:"name logo "
"resistances aptitudes "
"advantages disadvantages "
"powers powers "
"tracker comp-dice "
"cost cost ";
grid-gap: 4px;
width: 1000px; /* Defines the width and height of the sheet */
height: 1600px;
.sheet-section-control[value="character"] ~ .sheet-main > .sheet-mook,
.sheet-section-control[value="mook"] ~ .sheet-main > .sheet-character{
display: none;
}
.sheet-character > .sheet-name{
grid-template-columns: 1fr;
}
/*
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3,auto);
grid-template-areas:
"name logo"
"rating qualities"
"exceptional exceptional"
;
grid-gap: 4px;
*/
.sheet-section-control[value="character"] ~ .sheet-main{
grid-template-rows:repeat(2,auto) repeat(5,auto) 8em;
grid-template-areas:
"name logo"
"toggle version"
"resistances aptitudes"
"advantages disadvantages"
"powers powers"
"tracker comp-dice"
"cost cost"
;
}
.sheet-section-control[value="mook"] ~ .sheet-main{
grid-template-rows:repeat(2,auto) repeat(3,auto);
grid-template-areas:
"name logo"
"toggle version"
"rating qualities"
"exceptional exceptional"
"tracker tracker"
;
}
.sheet-main{
display: grid;
grid-template-columns: repeat(2,minmax(auto,1fr));
grid-gap: 4px;
}
.sheet-character {
display: contents;
}
.sheet-toggle{
grid-area: toggle;
display: grid;
grid-template-columns: repeat(4,auto);
place-content: center start;
align-items: center;
gap: 8px;
}
.sheet-section-control:not([value="mook"]) ~ .sheet-main > .sheet-toggle > .sheet-mook-type{
display: none;
}
.sheet-mook-type{
margin: 0;
}
.sheet-toggle > h4{
display: inline;
}
.sheet-automation{
grid-area: version;
place-self: center start;
}
/* NAME SECTION */
div.sheet-name{
grid-area: name;
padding: 30px 0px 0px 50px;
}
div.sheet-name input[type="text"]{
width: 460px;
display: grid;
gap: 4px;
}
div.sheet-name h6{
padding-left: 10px;
}
/* LOGO SECTION */
.sheet-version{
grid-area: version;
display: grid;
place-self: center end;
gap: 0.5rem;
align-content: center;
grid-template-columns: repeat(2,auto);
}
.sheet-version > *{
line-height: 0;
}
div.sheet-logo{
grid-area: logo;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Supers-Revised-Edition/images/logo.png);
background-size: 344px 150px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
display: flex;
justify-content: flex-end;
align-items: flex-end;
@@ -178,30 +293,29 @@ div.sheet-logo{
/* RESISTANCES */
div.sheet-resistances{
grid-area:resistances;
display: grid;
grid-template-columns: 1fr;
place-items: center;
align-content: start;
}
span.sheet-resistance {background-color: white;color: black;}
div.sheet-resistances h2{
width: 200px;
padding-left: 150px;
}
div.sheet-resistances .sheet-res-grid{
display: grid;
grid-template-columns: 3fr 2fr 2fr 1fr 6fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
width: 320px;
}
div.sheet-resistances input[type="text"].sheet-notes{
width: 240px;
width: 100%;
}
div.sheet-resistances input[type="number"]{
border-style: solid;
}
.sheet-initiative {margin-left: 225px;
}
/* Aptitudes */
@@ -209,20 +323,18 @@ div.sheet-aptitudes{
grid-area: aptitudes;
}
div.sheet-aptitudes input[type="text"].sheet-bold{
font-size: 1.3em;
width: 158px;
}
div.sheet-powers input[type="text"].sheet-bold{
font-size: 1.3em;
width: 200px;
}
div.sheet-aptitudes input[type="text"].sheet-longap{
width: 225px;
.repitem input[type="text"]{
width: 100%;
box-sizing: border-box;
}
.sheet-aptitudes .repitem{
display: grid;
grid-template-columns: 15rem repeat(2,auto) 1fr;
gap: 4px;
}
/* Advantages & Disadvantages */
div.sheet-advantages{
@@ -232,24 +344,29 @@ div.sheet-advantages{
div.sheet-disadvantages{
grid-area: disadvantages;
}
.sheet-advantages .repcontainer,
.sheet-disadvantages .repcontainer{
margin-bottom: 4px;
}
.sheet-advantages .repitem,
.sheet-disadvantages .repitem{
display: grid;
grid-template-columns: 15rem auto 1fr;
gap: 0.5rem;
}
.sheet-advantages .repitem > *,
.sheet-disadvantages .repitem > *{
width: 100%;
}
.sheet-advantages .itemcontrol,
.sheet-disadvantages .itemcontrol{
grid-column: 1/-1;
}
div.sheet-advantages input[type="number"],
div.sheet-disadvantages input[type="number"]{
width: 30px;
}
div.sheet-advantages input[type="text"].sheet-notes{
width: 240px;
}
div.sheet-disadvantages input[type="text"].sheet-notes{
width: 210px;
}
.sheet-mediumadv {width: 188px; margin: 2px;}
.sheet-mediumdis {width: 43%; margin: 2px;}
/* Powers */
@@ -258,39 +375,73 @@ div.sheet-powers{
grid-area: powers;
}
.sheet-mediumpow {width: 17%}
.sheet-powers .sheet-d6{
place-self: center;
}
/*
Repeating Powers styling
*/
.sheet-powers .repitem,
.sheet-exceptional .repitem{
display: grid;
grid-template-columns: 30rem auto auto 1fr;
grid-gap: 2px;
}
/* TRACKER SECTION */
div.sheet-tracker{
.sheet-tracker{
grid-area: tracker;
}
div.sheet-def-tracker{
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Supers-Revised-Edition/images/Original-Tracker.png);
background-size: 490px 180px;
background-repeat: no-repeat;
height: 180px;
width: 490px;
}
div.sheet-alt-tracker{
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Supers-Revised-Edition/images/alternate-tracker.png);
background-size: 490px 180px;
background-repeat: no-repeat;
height: 180px;
width: 490px;
}
div.sheet-def-tracker,
input.sheet-tracker-switch:checked ~ .sheet-alt-tracker{
display: block;
}
div.sheet-alt-tracker,
input.sheet-tracker-switch:checked ~ .sheet-def-tracker{
input.sheet-tracker-switch:checked ~ .sheet-def-tracker,
input.sheet-tracker-switch:not(:checked) ~ .sheet-alt-tracker{
display: none;
}
.sheet-tracker{
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: repeat(2,auto);
}
.sheet-tracker-type{
display: flex;
gap: 0.5rem;
justify-content: flex-start;
align-items: center;
}
.sheet-tracker > table{
grid-column: 1/-1;
}
.sheet-cell-display{
display: flex;
justify-content: center;
padding: 4px 0;
}
.sheet-tracker > table tr:first-child{
border-bottom: 4px solid black;
}
.sheet-track-row:nth-child(odd){
background-color: #d9e2f3;
}
.sheet-section-control[value="character"] ~ .sheet-main input.sheet-tracker-switch:not(:checked) ~ div.sheet-alt-tracker,
.sheet-section-control[value="character"] ~ .sheet-main input.sheet-tracker-switch:checked ~ .sheet-def-tracker{
display: none;
}
.sheet-section-control[value="mook"] ~ .sheet-main > .sheet-tracker{
display: contents;
}
.sheet-section-control[value="mook"] ~ .sheet-main > .sheet-tracker > :is(span,input){
display: none;
}
.sheet-section-control[value="mook"] ~ .sheet-main > .sheet-tracker > :is(.sheet-def-tracker,.sheet-alt-tracker){
box-sizing: border-box;
width: 100%;
grid-column: span 1;
display: table;
}
/* COMP DICE */
div.sheet-comp-dice{
@@ -306,43 +457,167 @@ div.sheet-temp-comp-dice{
/* Cost */
div.sheet-cost{
grid-area: cost;
justify-content: space-around;
display: grid;
grid:
auto [total-start total-value-start]auto[total-start total-value-start]
/
auto auto auto [total-start] auto auto [total-end total-value-start] auto [total-value-end] auto auto auto auto
;
align-content: start;
}
div.sheet-cost span{
padding: 3px 0px 0px 10px;
}
/*-----------------------------------------------------------------*\
.sheet-cost > .sheet-total{
grid-area: total;
justify-self: end;
}
.sheet-cost > .sheet-total-value{
grid-area: total-value;
}
/* Mooks */
.sheet-mook{
display: contents;
}
.sheet-mook > .sheet-name{
grid:
1fr 1fr
/
1fr
;
grid-template-areas:
"name"
"description"
;
grid-gap: 4px;
align-items: center;
}
.sheet-mook > .sheet-name .sheet-description{
grid-area: description;
}
.sheet-mook > .sheet-rating{
padding: 4px;
display: grid;
--gutterSize: 30px;
grid:
auto repeat(2,5em)
/
var(--gutterSize) repeat(2,5em) var(--gutterSize)
;
grid-area: rating;
grid-row-gap: 4px;
grid-template-areas:
". header header ."
". max current rating-button"
". initiative initiative initiative-button"
;
place-content: start center;
}
.sheet-mook > .sheet-rating > h2{
grid-area: header;
text-align: center;
}
.sheet-mook > .sheet-rating > .sheet-max{
grid-area: max;
}
.sheet-mook > .sheet-rating > .sheet-current{
grid-area: current;
}
.sheet-mook > .sheet-rating > .sheet-initiative{
grid-area: initiative;
place-self: center;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(2,auto);
grid-template-areas:
"header header header"
". input button"
;
}
.sheet-mook > .sheet-rating > .sheet-initiative > input{
justify-self: center;
width: 40px;
grid-area: input;
}
.sheet-mook > .sheet-rating > .sheet-initiative > button{
place-self: center;
grid-area: button;
}
.sheet-mook > .sheet-rating > .sheet-initiative > h2{
justify-self: center;
grid-area: header;
}
.sheet-mook > .sheet-rating > .sheet-d6{
place-self: center end;
}
.sheet-mook > .sheet-rating > .sheet-rating.sheet-d6{
grid-area: rating-button;
}
.sheet-mook > .sheet-rating > .sheet-initiative-button{
grid-area: initiative-button;
}
.sheet-mook > .sheet-qualities{
grid-area: qualities;
}
.sheet-mook > .sheet-exceptional{
grid-area: exceptional;
}
.sheet-qualities .repitem{
display: grid;
grid-template-columns: 15rem 1fr;
gap: 4px;
}
/*
#ROLL TEMPLATE
\*-----------------------------------------------------------------*/
/* ----------- BLACK -----------*/
.sheet-rolltemplate-black div {
width:100%;
background-color:white;
border:1px solid rgba(0, 0, 0,1);
----------- Supers -----------
*/
.sheet-rolltemplate-supers .sheet-template-container{
background-color: white;
border: 1px solid black;
display: grid;
grid-template-columns: 1fr;
}
.sheet-rolltemplate-black caption {
background-color:rgba(0, 0, 0,1);
color:white;
font-family:"Helvetica Neue",Helvetica,sans-serif;
font-weight:600;
text-align:center;
font-size:1.1em;
padding:5px;
.sheet-rolltemplate-supers .sheet-template-container div > *{
white-space: pre-wrap;
}
.sheet-rolltemplate-black td {
.sheet-rolltemplate-supers .sheet-header{
display: grid;
grid-template-rows: repeat(2,auto);
background-color:#000000;
color: white;
font-family:"Helvetica Neue",Helvetica,sans-serif;
}
.sheet-rolltemplate-supers .sheet-header *{
color: white;
}
.sheet-rolltemplate-supers .sheet-header h4 {
font-size:1.1em;
padding:5px;
place-self: center start;
}
.sheet-rolltemplate-supers .sheet-header a {
font-size:1em;
padding:5px;
place-self: center end;
font-weight: bold;
}
.sheet-rolltemplate-supers .sheet-template-container div:not(.sheet-header) {
padding:5px;
line-height:1.4em;
vertical-align:top;
display: grid;
grid-template-columns: repeat(2,1fr);
justify-items: center;
}
.sheet-rolltemplate-black td:first-child {
font-weight:bold;
text-align:right;
min-width:50px;
padding-right:10px;
}
.sheet-rolltemplate-black tr:nth-child(even) {
.sheet-rolltemplate-supers .sheet-template-container div:nth-child(even) {
background-color:#eee;
}
.sheet-rolltemplate-supers .sheet-successes{
justify-self: center;
grid-column: span 2;
}
.sheet-rolltemplate-supers .sheet-successes .inlinerollresult,
.sheet-rolltemplate-supers .sheet-successes .inlinerollresult:is(.fullcrit,.fullfail,.importantroll){
background-color: transparent;
border: none;
}
+514 -229
View File
@@ -1,238 +1,269 @@
<div class="main">
<!-- name -->
<div class="section name">
<input class="superlong bold" type="text" name="attr_character_name" />
<h6>Hero Name</h6>
<br />
<input class="superlong bold" type="text" name="attr_real_name" />
<h6>Real Name</h6>
</div>
<input type='hidden' name='attr_modifier_query' title='@{modifier_query}' value='+[[0?{+/- d6 Modifier|0}d6]]'>
<input type='hidden' name='attr_sheet_view' title='@{sheet_view}' value='character' class='section-control'><input type='hidden' name='attr_template_start' title='@{template_start}' value='&{template:supers} {{character_name=@{character_name}}} {{character_id=@{character_id}}}'>
<div class="main">
<!-- logo -->
<input type="hidden" name="attr_version">
<div class="section logo">
<span>Sheet Version 1.2</span>
</div>
<!-- resistances -->
<div class="section resistances border">
<div class="flex-row">
<h2>RESISTANCES</h2>
</div>
<div class="res-grid">
<div><!-- empty div placeholder --></div>
<span class="bold">MAX</span>
<span class="bold">Current</span>
<div><!-- empty div placeholder --></div>
<span class="small">Notes</span>
<div><span class="resistance bold">&nbsp;COMPOSURE&nbsp;&nbsp;</span>
</div>
<div>
<input class="ref bold" type="number" name="attr_composure_max">
</div>
<div>
<input class="ref bold" type="number" name="attr_composure">
</div>
<div>
<button class="d6" type='roll' name='roll_composure' value='&{template:default} {{name=@{character_name} **Composure** check}} {{result=[[@{composure}d6]]}}'></button>
</div>
<div>
<input class="notes" type="text" name="attr_composurenotes" />
</div>
<div> <span class="resistance bold">&nbsp;FORTITUDE</span>
</div>
<div>
<input class="ref bold" type="number" name="attr_fortitude_max">
</div>
<div>
<input class="ref bold" type="number" name="attr_fortitude">
</div>
<div>
<button class="d6" type='roll' name='roll_fortitude' value='&{template:default} {{name=@{character_name} **Fortitude** check}} {{result=[[@{fortitude}d6]]}}'></button>
</div>
<div>
<input class="notes" type="text" name="attr_fortitudenotes" />
</div>
<div><span class="resistance bold">&nbsp;REACTION</span>
</div>
<div>
<input class="ref bold" type="number" name="attr_reaction_max">
</div>
<div>
<input class="ref bold" type="number" name="attr_reaction">
</div>
<div>
<button class="d6" type='roll' name='roll_reaction' value='&{template:default} {{name=@{character_name} **Reaction** check}} {{result=[[@{reaction}d6]]}}'></button>
</div>
<div>
<input class="notes" type="text" name="attr_reactionnotes" />
</div>
<div><span class="resistance bold">&nbsp;WILL</span>
</div>
<div>
<input class="ref bold" type="number" name="attr_will_max">
</div>
<div>
<input class="ref bold" type="number" name="attr_will">
</div>
<div>
<button class="d6" type='roll' name='roll_will' value='&{template:default} {{name=@{character_name} **Will** check}} {{result=[[@{will}d6]]}}'></button>
</div>
<div>
<input class="notes" type="text" name="attr_willnotes" />
</div>
</div>
<br />
<div class="flex-row">
<h2>INITIATIVE</h2>
</div>
<br />
<div class="initiative">
<input class="ref bold" type="number" name="attr_initiative">
<button name="roll_init" class="d6" type="roll" value="&{template:default} {{name=@{character_name} **Initiative** check}} {{result=[[@{initiative}d6 &{tracker}]]}}"></button>
</div>
</div>
<!-- aptitudes -->
<div class="section aptitudes border">
<h2>APTITUDES</h2>
<label class="aptitudes">
<fieldset class="repeating_aptitudes">
<input class="medium bold" type="text" name="attr_aptitudename" />
<input class="ref bold" type="number" name="attr_aptitude">
<button class="d6" type='roll' name='roll_aptitude' value='&{template:default} {{name=@{character_name} **@{aptitudename} Check}} {{result=[[@{aptitude}d6k3]]}}'></button>
<input class="longap" type="text" name="attr_aptitudenotes" />
</fieldset>
<div class='section version'>
<h5>Sheet Version</h5>
<span name='attr_version'>1.2</span>
</div>
<label class='input-label automation'>
<span>Success Automation</span>
<input type='checkbox' name='attr_automation' value='1' checked>
</label>
<span class='toggle'>
<h5>Sheet Type</h5>
<label class='input-label'>
<span>Character</span>
<input type='radio' name='attr_sheet_view' title='@{sheet_view}' value='character' checked>
</label>
</div>
<!-- advantages -->
<div class="section advantages border">
<h2>ADVANTAGES</h2>
<fieldset class="repeating_advantages">
<input class="mediumadv bold" type="text" name="attr_advantage" />
<input class="bold ref" name="attr_advantage-rank" type="number" value="1"/>
<span class="bold">&nbsp;</span>
<input class="notes" type="text" name="attr_advantagenotes" />
</fieldset>
</div>
<!-- disadvantages -->
<div class="section disadvantages border">
<h2>DISADVANTAGES</h2>
<fieldset class="repeating_disadvantages">
<input class="mediumdis bold" type="text" name="attr_disadvantage" />
<input class="bold ref" name="attr_disadvantage-rank" type="number" value="1"/>
<span class="bold">&nbsp;</span>
<input class="notes" type="text" name="attr_disadvantagenotes" />
</fieldset>
</div>
<!-- powers -->
<div class="section powers border">
<h2>POWERS</h2>
<label class="powers">
<fieldset class="repeating_powers">
<input class="mediumpow bold" type="text" name="attr_powernamename" />
<input class="ref bold" type="number" name="attr_power">
<button class="d6" type='roll' name='roll_power' value='&{template:default} {{name=@{character_name} **@{powernamename}** Check}} {{result=[[@{power}d6]]}}'></button>
<input class="longpow" type="text" name="attr_powernotes" style="width:688px" />
<label class='input-label'>
<span>Mook</span>
<input type='radio' name='attr_sheet_view' title='@{sheet_view}' value='mook'>
</label>
<select class='mook-type' name='attr_mook_type' title='@{mook_type}'>
<option value='mook' selected>Mook</option>
<option value='citizen'>Citizen</option>
<option value='henchman'>Henchman</option>
<option value='supporting cast'>Supporting Cast</option>
</select>
</span>
<div class='character'>
<!-- name -->
<div class="section name">
<label class='input-label'>
<input class="bold" type="text" name="attr_character_name" title='@{character_name}' />
<h6>Hero Name</h6>
</label>
<label class='input-label'>
<input class="bold" type="text" name="attr_real_name" title='@{real_name}' />
<h6>Real Name</h6>
</label>
</div>
<!-- resistances -->
<div class="section resistances border">
<div class="flex-row">
<h2>RESISTANCES</h2>
</div>
<div class="res-grid">
<div><!-- empty div placeholder --></div>
<span class="bold">MAX</span>
<span class="bold">Current</span>
<div><!-- empty div placeholder --></div>
<span class="small">Notes</span>
<div><span class="resistance bold">&nbsp;COMPOSURE&nbsp;&nbsp;</span>
</div>
<div>
<input class="ref bold" type="number" name="attr_composure_max" title='@{composure_max}'>
</div>
<div>
<input class="ref bold" type="number" name="attr_composure" title='@{composure}'>
</div>
<div>
<button class="d6" type='action' name='act_compute-composure'></button>
</div>
<div>
<input class="notes" type="text" name="attr_composurenotes" title='@{composurenotes}' />
</div>
<div> <span class="resistance bold">&nbsp;FORTITUDE</span>
</div>
<div>
<input class="ref bold" type="number" name="attr_fortitude_max" title='@{fortitude_max}'>
</div>
<div>
<input class="ref bold" type="number" name="attr_fortitude" title='@{fortitude}'>
</div>
<div>
<button class="d6" type='action' name='act_compute-fortitude'></button>
</div>
<div>
<input class="notes" type="text" name="attr_fortitudenotes" title='@{fortitudenotes}' />
</div>
<div><span class="resistance bold">&nbsp;REACTION</span>
</div>
<div>
<input class="ref bold" type="number" name="attr_reaction_max" title='@{reaction_max}'>
</div>
<div>
<input class="ref bold" type="number" name="attr_reaction" title='@{reaction}'>
</div>
<div>
<button class="d6" type='action' name='act_compute-reaction'></button>
</div>
<div>
<input class="notes" type="text" name="attr_reactionnotes" title='@{reactionnotes}' />
</div>
<div>
<span class="resistance bold">&nbsp;WILL</span>
</div>
<div>
<input class="ref bold" type="number" name="attr_will_max" title='@{will_max}'>
</div>
<div>
<input class="ref bold" type="number" name="attr_will" title='@{will}'>
</div>
<div>
<button class="d6" type='action' name='act_compute-will'></button>
</div>
<div>
<input class="notes" type="text" name="attr_willnotes" title='@{willnotes}' />
</div>
</div>
<br />
<div class="flex-row">
<h2>INITIATIVE</h2>
</div>
<br />
<div class="initiative">
<input class="ref bold" type="number" name="attr_initiative" title='@{initiative}'>
<button name="roll_init" title='%{init}' class="d6" type="roll" value="@{template_start} {{name=Initiative check}} {{result=[[@{initiative}d6@{modifier_query} &{tracker}]]}}"></button>
</div>
</div>
<!-- aptitudes -->
<div class="section aptitudes border">
<h2>APTITUDES</h2>
<label class="aptitudes">
<fieldset class="repeating_aptitudes">
<input class="medium bold" type="text" name="attr_aptitudename" title='@{repeating_aptitudes_$X_aptitudename}' />
<input class="ref bold" type="number" name="attr_aptitude" title='@{repeating_aptitudes_$X_aptitude}'>
<button class="d6" type='action' name='act_compute-aptitude'></button>
<input class="longap" type="text" name="attr_aptitudenotes" title='@{aptitudenotes}' />
</fieldset>
</label>
</div>
<!-- advantages -->
<div class="section advantages border">
<h2>ADVANTAGES</h2>
<fieldset class="repeating_advantages">
<input class="mediumadv bold" type="text" name="attr_advantage" title='@{repeating_advantages_$X_advantage}' />
<input class="bold ref" name="attr_advantage-rank" title='@{repeating_advantages_$X_advantage-rank}' type="number" value="1"/>
<input class="notes" type="text" name="attr_advantagenotes" title='@{repeating_advantages_$X_advantagenotes}' />
</fieldset>
</label>
</div>
<!-- competency dice -->
<div class="section comp-dice flex-down flex-center border">
<h2>COMPETENCY DICE</h2>
<br />
<br />
<div>
<span class="bold">Competency Dice:</span>
<input class="bold ref" type="number" name="attr_comp" />/<input class="bold ref" type="number" name="attr_comp_max" />
</div>
<div>
<span class="bold">Temp Comp Dice:</span>
<input class="bold ref" type="number" name="attr_temp_comp" />/<input class="bold ref" type="number" name="attr_temp_comp_max" />
<!-- disadvantages -->
<div class="section disadvantages border">
<h2>DISADVANTAGES</h2>
<fieldset class="repeating_disadvantages">
<input class="mediumdis bold" type="text" name="attr_disadvantage" title='@{repeating_disadvantages_$X_disadvantage}' />
<input class="bold ref" name="attr_disadvantage-rank" title='@{repeating_disadvantages_$X_disadvantage-rank}' type="number" value="1"/>
<input class="notes" type="text" name="attr_disadvantagenotes" title='@{repeating_disadvantages_$X_disadvantagenotes}' />
</fieldset>
</div>
</div>
<!-- tracker -->
<div class="section tracker">
<span>Use Alternative tracker</span> <input type="checkbox" class="sheet-tracker-switch" name="attr_tracker_switch" value="1">
<div class="def-tracker"></div>
<div class="alt-tracker"></div>
</div>
<!-- alt tracker -->
<!--
<div class="section alt-tracker">
-->
<!-- cost -->
<div class="section cost border flex-down flex-center">
<div class="flex-row">
<!-- powers -->
<div class="section powers border">
<h2>POWERS</h2>
<label class="powers">
<fieldset class="repeating_powers">
<input class="mediumpow bold" type="text" name="attr_powername" title='@{repeating_powers_$X_powername}' />
<input class="ref bold" type="number" name="attr_power" title='@{repeating_powers_$X_power}'>
<button class="d6" type='action' name='act_compute-power'></button>
<input class="longpow" type="text" name="attr_powernotes" title='@{repeating_powers_$X_powernotes}' />
</fieldset>
</label>
</div>
<!-- competency dice -->
<div class="section comp-dice flex-down flex-center border">
<h2>COMPETENCY DICE</h2>
<br />
<br />
<div>
<span class="bold">Competency Dice:</span>
<input class="bold ref" type="number" name="attr_comp" title='@{comp}' />/<input class="bold ref" type="number" name="attr_comp_max" title='@{comp_max}' />
</div>
<div>
<span class="bold">Temp Comp Dice:</span>
<input class="bold ref" type="number" name="attr_temp_comp" title='@{temp_comp}' />/<input class="bold ref" type="number" name="attr_temp_comp_max" title='@{temp_comp_max}' />
</div>
</div>
<!-- alt tracker -->
<!-- cost -->
<div class="section cost border flex-down flex-center">
<span class="bold">RESISTANCES</span>
<input class="bold" type="number" name="attr_resist-cost" value="0" />
<input class="bold" type="number" name="attr_resist-cost" title='@{resist-cost}' value="0" />
<span class="bold">+ APTITUDES </span>
<input class="bold" type="number" name="attr_apt-cost" value="0" />
<input class="bold" type="number" name="attr_apt-cost" title='@{apt-cost}' value="0" />
<span class="bold">+ POWERS</span>
<input class="bold" type="number" name="attr_power-cost" value="0" />
<input class="bold" type="number" name="attr_power-cost" title='@{power-cost}' value="0" />
<span class="bold">+ ADVANTAGES</span>
<input class="bold" type="number" name="attr_adv-cost" value="0" />
<input class="bold" type="number" name="attr_adv-cost" title='@{adv-cost}' value="0" />
<span class="bold">+ DISADVANTAGES</span>
<input class="bold" type="number" name="attr_disadv-cost" value="0" />
<input class="bold" type="number" name="attr_disadv-cost" title='@{disadv-cost}' value="0" />
<span class="bold total">= TOTAL COST</span>
<input class="bold ref total-value" type="number" name="attr_cost" title='@{cost}' value="@{resist-cost}+@{apt-cost}+@{power-cost}+@{adv-cost}+@{disadv-cost}" disabled="true"/>
</div>
<div>
<span class="bold">= TOTAL COST</span>
<input class="bold ref" type="number" name="attr_cost" value="@{resist-cost}+@{apt-cost}+@{power-cost}+@{adv-cost}+@{disadv-cost}" disabled="true"/>
</div>
<div class='mook'>
<!-- name -->
<div class="section name">
<label class='input-label'>
<input class="bold" type="text" name="attr_character_name" title='@{character_name}' />
<h6>Name</h6>
</label>
<label class='input-label description'>
<input class="bold" type="text" name="attr_mook_description" title='@{mook_description}' />
<h6>Description</h6>
</label>
</div>
<div class='rating border'>
<h2>Rating</h2>
<button type='action' name='act_compute-rating' class='rating d6'></button>
<label class='input-label stacked over max'>
<h6 class='boxed'>MAX</h6>
<input type='number' class='ref bold boxed' name='attr_rating_max' title='@{rating_max}' value='0'>
</label>
<label class='input-label stacked over current'>
<h6 class='boxed'>CURRENT</h6>
<input type='number' class='ref bold boxed' name='attr_rating' title='@{rating}' value='0'>
</label>
<label class='input-label stacked over initiative'>
<h2>Initiative</h2>
<input type='number' class='ref bold boxed' name='attr_initiative' title='@{initiative}' value='0'>
<button name="roll_init" title='%{init}' class="initiative-button d6" type="roll" value="@{template_start} {{name=Initiative check}} {{result=[[@{initiative}d6@{modifier_query} &{tracker}]]}}"></button>
</label>
</div>
<div class='qualities border'>
<h2>Qualities</h2>
<fieldset class='repeating_quality'>
<input type='text' name='attr_name' title='@{name}'>
<input type='text' name='attr_description' title='@{description}'>
</fieldset>
</div>
<div class='exceptional border'>
<h2>Exceptional Qualities</h2>
<fieldset class='repeating_exceptional'>
<input type='text' name='attr_exceptionalname' title='@{exceptionalname}'>
<input type='number' name='attr_exceptional' title='@{exceptional}' value='0'>
<button class="d6" type='action' name='act_compute-exceptional'></button>
<input type='text' name='attr_description' title='@{exceptionalnotes}'>
</fieldset>
</div>
</div>
<!-- tracker -->
<div class="tracker">
<span>Use Alternative tracker</span>
<input type="checkbox" class="sheet-tracker-switch" name="attr_tracker_switch" title='@{tracker_switch}' value="1">
<table class="def-tracker border">
<tr> <th colspan="10"><h5 class='cell-display'>Success Track</h5></th> </tr>
<tr class='track-row'> <td><div class="cell-display">1</div></td><td><div class="cell-display">7</div></td><td><div class="cell-display">13</div></td><td><div class="cell-display">19</div></td><td><div class="cell-display">25</div></td><td><div class="cell-display">31</div></td><td><div class="cell-display">37</div></td><td><div class="cell-display">43</div></td><td><div class="cell-display">49</div></td><td><div class="cell-display">55</div></td> </tr>
<tr class='track-row'> <td><div class="cell-display">2</div></td><td><div class="cell-display">8</div></td><td><div class="cell-display">14</div></td><td><div class="cell-display">20</div></td><td><div class="cell-display">26</div></td><td><div class="cell-display">32</div></td><td><div class="cell-display">38</div></td><td><div class="cell-display">44</div></td><td><div class="cell-display">50</div></td><td><div class="cell-display">56</div></td> </tr>
<tr class='track-row'> <td><div class="cell-display">3</div></td><td><div class="cell-display">9</div></td><td><div class="cell-display">15</div></td><td><div class="cell-display">21</div></td><td><div class="cell-display">27</div></td><td><div class="cell-display">33</div></td><td><div class="cell-display">39</div></td><td><div class="cell-display">45</div></td><td><div class="cell-display">51</div></td><td><div class="cell-display">57</div></td> </tr>
<tr class='track-row'> <td><div class="cell-display">4</div></td><td><div class="cell-display">10</div></td><td><div class="cell-display">16</div></td><td><div class="cell-display">22</div></td><td><div class="cell-display">28</div></td><td><div class="cell-display">34</div></td><td><div class="cell-display">40</div></td><td><div class="cell-display">46</div></td><td><div class="cell-display">52</div></td><td><div class="cell-display">58</div></td> </tr>
<tr class='track-row'> <td><div class="cell-display">5</div></td><td><div class="cell-display">11</div></td><td><div class="cell-display">17</div></td><td><div class="cell-display">23</div></td><td><div class="cell-display">29</div></td><td><div class="cell-display">35</div></td><td><div class="cell-display">41</div></td><td><div class="cell-display">47</div></td><td><div class="cell-display">53</div></td><td><div class="cell-display">59</div></td> </tr>
<tr class='track-row'> <td><div class="cell-display">6</div></td><td><div class="cell-display">12</div></td><td><div class="cell-display">18</div></td><td><div class="cell-display">24</div></td><td><div class="cell-display">30</div></td><td><div class="cell-display">36</div></td><td><div class="cell-display">42</div></td><td><div class="cell-display">48</div></td><td><div class="cell-display">54</div></td><td><div class="cell-display">60</div></td> </tr>
</table>
<table class="alt-tracker border">
<tr> <th><h5 class='cell-display'>Range of Success</h5></th><th><h5 class='cell-display'>Damage/Effect</h5></th> </tr>
<tr class='track-row'> <td><div class="cell-display">0 - 5</div></td><td><div class="cell-display">1d6 / 1</div></td> </tr>
<tr class='track-row'> <td><div class="cell-display">6 - 11</div></td><td><div class="cell-display">2d6 / 2</div></td> </tr>
<tr class='track-row'> <td><div class="cell-display">12 - 17</div></td><td><div class="cell-display">3d6 / 3</div></td> </tr>
<tr class='track-row'> <td><div class="cell-display">18 - 23</div></td><td><div class="cell-display">4d6 / 4</div></td> </tr>
<tr class='track-row'> <td><div class="cell-display">24 - 29</div></td><td><div class="cell-display">5d6 / 5</div></td> </tr>
<tr class='track-row'> <td><div class="cell-display">30 - 35</div></td><td><div class="cell-display">6d6 / 6</div></td> </tr>
</table>
</div>
</div>
@@ -240,11 +271,265 @@
<!-- ROLL TEMPLATE -->
<rolltemplate class="sheet-rolltemplate-black">
<div>
<caption>{{name}}</caption>
{{#allprops() }}
<tr><td>{{key}}</td><td>{{value}}</td>
{{/allprops() }}
</div>
</rolltemplate>
<rolltemplate class="sheet-rolltemplate-supers">
<div class='template-container'>
<div class='header'>
{{#name}}
<h4>{{name}}</h4>
{{/name}}
{{#character_name}}
{{#character_id}}
[{{character_name}}](http://journal.roll20.net/character/{{character_id}})
{{/character_id}}{{^character_id}}
{{character_name}}
{{/character_id}}
{{/character_name}}
</div>
{{#target}}
<div>
<h5>Result</h5><h5>Target Number</h5>
</div>
<div>
<span>{{result}}</span><span>{{target}}</span>
</div>
<div>
<span class="successes">{{computed::result}}</span>
</div>
{{/target}}
{{^target}}
{{#result}}
<div>
<h5>Result</h5><span>{{result}}</span>
</div>
{{/result}}
{{/target}}
{{#allprops() result target character_name character_id}}
<div>
<span>{{key}}</span><span>{{value}}</span>
</div>
{{/allprops() result target character_name character_id}}
</div>
</rolltemplate>
<script type='text/worker'>
//# Roll20Async functions #
//These together allow the use of promises and await/async to allow us to escape callback hell
const setActiveCharacterId = function(charId){
var oldAcid=getActiveCharacterId();
var ev = new CustomEvent("message");
ev.data={"id":"0", "type":"setActiveCharacter", "data":charId};
self.dispatchEvent(ev);
return oldAcid;
};
const _getAttrs = function (props){
var acid=getActiveCharacterId();//save the current activeCharacterID in case it has changed when the promise runs
var prevAcid=null; //local variable defined here, because it needs to be shared across the promise callbacks defined below
return new Promise((resolve,reject)=>{
prevAcid=setActiveCharacterId(acid); //in case the activeCharacterId has changed, restore it to what we were expecting and save the current value to restore later
try{
getAttrs(props,(values)=>{ resolve(values); });
}catch{ reject(); }
}).finally(()=>{
setActiveCharacterId(prevAcid); //restore activeCharcterId to what it was when the promise first ran
});
};
const _getAllAttrs = async function(props,sectionDetails=repeatingSectionDetails){
const [repeats,sections] = await _getSections(sectionDetails);
const attributes = await _getAttrs([...(props||baseGet),...repeats]);
return [attributes,repeats,sections];
}
//use the same pattern for each of the following...
const _setAttrs = function (propObj, options){
var acid=getActiveCharacterId();
var prevAcid=null;
return new Promise((resolve,reject)=>{
prevAcid=setActiveCharacterId(acid);
try{
setAttrs(propObj,options,(values)=>{ resolve(values); });
}
catch{ reject(); }
}).finally(()=>{
setActiveCharacterId(prevAcid);
});
};
const _getSectionIDs = function(sectionName){
var acid=getActiveCharacterId();
var prevAcid=null;
return new Promise((resolve,reject)=>{
prevAcid=setActiveCharacterId(acid);
try{
getSectionIDs(sectionName,(values)=>{ resolve(values); });
}
catch{ reject(); }
}).finally(()=>{
setActiveCharacterId(prevAcid);
});
};
//# Utility Functions #
const log = function(msg){
if(typeof msg === 'string'){
console.log(`%c${sheetName} log| ${msg}`,"background-color:#159ccf");
}else if(typeof msg === 'object'){
Object.keys(msg).forEach((m)=>{
if(typeof msg[m] === 'string'){
console.log(`%c${sheetName} log| ${m}: ${msg[m]}`,"background-color:#159ccf");
}else{
console.log(`%c${sheetName} log| ${typeof msg[m]} ${m}`,"background-color:#159ccf");
console.table(msg[m]);
}
});
}
};
const debug = function(msg,force){
if(!debugMode && !force && version > 0) return;
if(typeof msg === 'string'){
console.log(`%c${sheetName} DEBUG| ${msg}`,"background-color:tan;color:red;");
}else if(typeof msg === 'object'){
Object.keys(msg).forEach((m)=>{
if(typeof msg[m] === 'string'){
console.log(`%c${sheetName} DEBUG| ${m}: ${msg[m]}`,"background-color:tan;color:red;");
}else{
console.log(`%c${sheetName} DEBUG| ${typeof msg[m]} ${m}`,"background-color:tan;color:red;font-weight:bold;");
console.table(msg[m]);
}
});
}
};
const _getSections = function(section_details=repeatingSectionDetails){
let queue = _.clone(section_details);
const worker = async (repeatAttrs=[],sections={})=>{
let detail = queue.shift();
let IDs = await _getSectionIDs(detail.section);
sections[detail.section] = IDs;
let attrs = IDs.forEach((i)=>{
detail.fields.forEach((f)=>{
repeatAttrs.push(`${detail.section}_${i}_${f}`);
});
});
if(queue.length){
return worker(repeatAttrs,sections);
}else{
return [repeatAttrs,sections];
}
};
if(!queue[0]){
return [[],{}];
}
return worker();
};
// Sets the attributes while always calling with {silent:true}
// Can be awaited to get the values returned from _setAttrs
const set = function(obj,vocal){
let setObj = verifyObj(obj);
return _setAttrs(setObj,{silent:vocal ? false : true});
};
//verifies that the property/keys of the setObj are valid
const verifyObj = function(obj){
return Object.keys(obj).reduce((m,p)=>{
if(obj[p] || obj[p]===0 || obj[p]===''){
m[p]=obj[p];
}else{
debug(`WARNING: setObj[${p}] = ${obj[p]}`);
}
return m;
},{})
};
//sanitizes text for use as a regex
sanitizeForRegex = function(text){
return text.replace(/\.|\||\(|\)|\[|\]|\-|\+|\?|\/|\{|\}|\^|\$|\*/g,'\\$&');
};
//converts a value to a number, it's default value, or 0
const value = function(val,def){
return (+val||def||0);
};
//extracts the section, rowID, and field name from a repeating attribute name
/*
e.g. repeating_equipment_-09Jhu89z_bulk would give:
section: equipment
rowID: -09Jhu89z
field: bulk
*/
const parseRepeatName = function(string){
let match = string.match(/(repeating_[^_]+)_([^_]+)_(.+)/);
match.shift();
return match;
};
const parseClickTrigger = string => string.replace(/clicked:/,'');
/*
value='&{template:default} {{name=@{character_name} **Composure** check}} {{result=[[@{composure}d6@{modifier_query}]]}} {{target=@{target_query}}}'
value='&{template:default} {{name=@{character_name} **Fortitude** check}} {{result=[[@{fortitude}d6@{modifier_query}]]}} {{target=@{target_query}}}'
value='&{template:default} {{name=@{character_name} **Reaction** check}} {{result=[[@{reaction}d6@{modifier_query}]]}} {{target=@{target_query}}}'
value='&{template:default} {{name=@{character_name} **Will** check}} {{result=[[@{will}d6@{modifier_query}]]}} {{target=@{target_query}}}'
value='&{template:default} {{name=@{character_name} **@{aptitudename} Check}} {{result=[[@{aptitude}d6k3@{modifier_query}]]}} {{target=@{target_query}}}'
value='&{template:default} {{name=@{character_name} **@{powernamename}** Check}} {{result=[[@{power}d6@{modifier_query}]]}} {{target=@{target_query}}}'
<input type='hidden' name='attr_target_query' title='@{target_query}' value='[[?{Target Number}]]'>
*/
/*
Variables
*/
const sheetName = 'Supers! Revised Edition';
const version = 1.2;
let debugMode = false;
const rollButtons = ['repeating_aptitudes:compute-aptitude','repeating_powers:compute-power','repeating_exceptional:compute-exceptional','compute-composure','compute-fortitude','compute-reaction','compute-will','compute-aptitude','compute-power','compute-rating'];
const repeatingSectionDetails = [
{section:'repeating_aptitudes',fields:['compute-aptitude','aptitudename']},
{section:'repeating_powers',fields:['powernamename','power','powername','compute-power']},
{section:'repeating_exceptional',fields:['name','dice','compute-exceptional']}
];
const baseGet = [];
const calculateSuccess = async function(event){
let [,row,section,rowID,computeName,attrName] = event.triggerName.match(/clicked:(?:(?<row>repeating_(?<section>[^_]+)_(?<rowID>[^_]+))_)?(?<computeName>compute-(?<attrName>.+))/);
const attributes = await _getAttrs(['automation']);
let name;
let capName;
if(row){
name = `${row}_${attrName}`;
capName = `@{${row}_${section.replace(/s$/,'')}name}`;
}else{
name = attrName;
capName = name.replace(/^[a-z]/i,(match)=>{
return match.toUpperCase();
});
}
const computed = {};
const roll = `@{template_start} {{name=${capName} check}} {{result=[[ [[0@{${name}}+0?{+/- d6 Modifier|0}]]d6${/aptitude/.test(row) ? 'kh3' : ''}]]}} ${value(attributes.automation) ? `{{target=[[0?{${capName} Target Number|10}]]}}` : ''}`;
const intermediate = await startRoll(roll);
let rollID = intermediate.rollId;
if(value(attributes.automation)){
let results = intermediate.results;
computed.result = results.result.result-results.target.result;
if(computed.result >= 0){
computed.result = Math.max(Math.ceil((computed.result)/5),1);
}else{
computed.result = 0;
}
computed.result = `${computed.result} Success${computed.result !== 1 ? 'es':''}`;
}
finishRoll(rollID,computed);
};
rollButtons.forEach((button)=>{
on(`clicked:${button}`,calculateSuccess);
});
on('sheet:opened',async ()=>{
const [attributes,repeats,sections] = await _getAllAttrs(['character_name','debug_mode']);
debugMode = value(attributes.debug_mode);
const setObj = {};
debug({sections});
update1x3(attributes,sections,setObj);
setObj.version = version;
debug({setObj});
set(setObj);
});
const update1x3 = function(attributes,sections,setObj){
sections.repeating_powers.forEach((id)=>{
if(attributes[`repeating_powers_${id}_powernamename`]){
setObj[`repeating_powers_${id}_powername`] = attributes[`repeating_powers_${id}_powernamename`];
attributes[`repeating_powers_${id}_powername`] = setObj[`repeating_powers_${id}_powername`];
setObj[`repeating_powers_${id}_powernamename`] = '';
}
});
};
log('Sheet Booted Successfully');
</script>