Added automatic rolls

This is v1 for this sheet for me. Added rolls on everywhere I could
think, covering most of the basics.

Also added the URL for the game publisher, as asked by the author.
This commit is contained in:
Jose Junior
2018-02-26 15:07:05 -05:00
parent cea5a21268
commit d3ff06ea5e
3 changed files with 296 additions and 106 deletions
+166 -82
View File
@@ -1,26 +1,35 @@
.charsheet .sheet-body {
.charsheet .sheet-body {
color: black;
background-color: white;
/* background-image:url(http://1-background.com/images/old-paper/crumpled-rice-paper.jpg);
*/
}
.charsheet label {
font-family: serif;
.charsheet .sheet-header:first-letter {
font-size: 1.4em;
font-weight: bold;
}
.charsheet .sheet-header:first-line {
font-size: 1em;
}
.charsheet .sheet-header {
display: inline-block;
text-align: left;
margin-bottom: 0;
}
.charsheet label.sheet-header {
font-family: serif;
text-transform: uppercase;
font-family: "Times New Roman", Times, Serif;
text-align: right;
font-size: 14px;
margin-bottom: 0;
font-size: 12px;
}
.charsheet input {
font-family: cursive;
display: inline-block;
width: 250px;
color: black;
}
.charsheet input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
.charsheet .sheet-no-spinners {
-moz-appearance:textfield;
}
.charsheet .sheet-no-spinners::-webkit-outer-spin-button,
.sheet-no-spinners::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.charsheet .sheet-input-line {
background: none;
@@ -28,46 +37,42 @@
border-bottom: 1px solid #ccc;
outline: none;
width: 100%;
border-radius: 0px;
border-radius: 0;
font-size: 14px;
color: black;
-webkit-appearance: none;
-moz-appearance: none;
box-shadow: inset 0 0px 0px rgba(0,0,0,0.075)
/*-webkit-appearance: none;
-moz-appearance: none;*/
box-shadow: inset 0 0 0 rgba(0,0,0,0.075)
}
.charsheet textarea.sheet-notes {
.charsheet .sheet-notes {
background-attachment: local;
background-image: linear-gradient(to right, white 10px, transparent 10px), linear-gradient(to left, white 10px, transparent 10px), repeating-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);
line-height: 31px;
padding: 8px 0px;
box-shadow: inset 0 0px 0px rgba(0,0,0,0.075)
padding: 8px 0;
box-shadow: inset 0 0 0 rgba(0,0,0,0.075)
}
.charsheet textarea.sheet-area-lines {
font-family: 'Reenie Beanie', cursive;
.charsheet .sheet-area-lines {
font-size: 14px;
border: none;
outline: none;
overflow: none;
resize: none;
width: calc(100%-30px);
border-radius: 0px;
border-radius: 0;
color: black;
}
.charsheet textarea.sheet-area-small {
.charsheet .sheet-area-small {
height: 4em;
}
.charsheet textarea.sheet-area-medium {
.charsheet .sheet-area-medium {
height: 7em;
}
.charsheet textarea.sheet-area-large {
.charsheet .sheet-area-large {
height: 14em;
}
.charsheet select {
margin-bottom: 0px;
margin-bottom: 0;
width: 250px;
}
.charsheet table {
width: 100%;
}
.charsheet hr {
border-top: 4px double #8c8b8b;
@@ -79,49 +84,86 @@
}
.charsheet .sheet-center {
text-align: center;
}
.charsheet .sheet-middle {
vertical-align: middle;
}
.charsheet .sheet-bottom {
vertical-align: bottom;
}
.charsheet .sheet-top {
vertical-align: top;
}
.charsheet .sheet-right {
text-align: right;
}
.charsheet .sheet-sub-header {
text-align: center;
font-family: serif;
width: 100%;
font-size: 16px;
font-weight: bold;
padding-bottom: 5px;
font-family: "Times New Roman", Times, Serif;
text-transform: uppercase;
}
.charsheet .sheet-sub-header:first-letter {
font-size: 1.3em;
}
.charsheet .sheet-sub-header:first-line {
font-size: 1em;
}
.charsheet .sheet-list-header {
text-align: left;
font-family: serif;
width: 100%;
font-size: 16px;
font-weight: bold;
padding-bottom: 5px;
font-family: "Times New Roman", Times, Serif;
text-transform: uppercase;
}
.charsheet .sheet-list-header:first-letter {
font-size: 1.3em;
}
.charsheet .sheet-list-header:first-line {
font-size: 1em;
}
.charsheet .sheet-small-list-header {
text-align: left;
font-size: 12px;
font-family: "Cinzel";
width: 100%;
font-weight: bold;
padding-bottom: 5px;
padding-top: 5px;
font-family: "Times New Roman", Times, Serif;
}
.charsheet .sheet-small-list-header:first-letter {
font-size: 1.4em;
}
.charsheet .sheet-small-list-header:first-line {
font-size: 1em;
}
.charsheet .sheet-save-labels {
text-align: center;
font-family: "Cinzel";
font-size: 12px;
margin-top: 5px;
font-family: "Times New Roman", Times, Serif;
}
.charsheet .sheet-save-input {
background: transparent;
outline: none;
border: none;
}
.charsheet td.sheet-save-table {
.charsheet .sheet-save-table {
width: 20%;
text-align: center;
vertical-align: top;
}
.charsheet .sheet-attr-table {
width: 20%;
}
.charsheet .sheet-table {
display: table;
table-layout: auto;
width: 100%;
}
.charsheet .sheet-table-row {
@@ -129,8 +171,14 @@
}
.charsheet .sheet-table-cell {
display: table-cell;
padding-left: 4px;
padding-right: 4px;
padding-left: 0;
padding-right: 2px;
}
.charsheet .sheet-table-header {
display: table-header-group;
}
.charsheet .sheet-table-body {
display: table-row-group;
}
.charsheet .sheet-circle {
margin: auto;
@@ -146,105 +194,141 @@
text-align:center;
vertical-align: middle;
}
.charsheet input.sheet-input-hpmax {
height: 50px;
.charsheet .sheet-input-hpmax {
height: 50px !important;
max-width: 60px;
text-align: center;
border : solid black 2px;
border : solid #4d4d4d 2px;
font-size: 20px;
font-weight: bold;
background: transparent;
border-top-left-radius: 100px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 100px;
}
.charsheet input.sheet-input-hpcurrent {
height: 50px;
.charsheet .sheet-input-hpcurrent {
height: 50px !important;
max-width: 60px;
text-align: center;
border : solid black 2px;
border : solid #4d4d4d 2px;
font-size: 20px;
font-weight: bold;
background: transparent;
border-top-left-radius: 0px;
border-top-left-radius: 0;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 0px;
border-bottom-left-radius: 0;
}
.charsheet input.sheet-input-ac {
height: 50px;
.charsheet .sheet-input-ac {
height: 50px !important;
max-width: 60px;
text-align: center;
border : solid black 2px;
font-size: 20px;
border : solid #4d4d4d 2px;
font-size: 18px;
line-height: 25px;
font-weight: bold;
background: transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.charsheet input.sheet-input-fp {
height: 50px;
.charsheet .sheet-input-fp {
height: 50px !important;
max-width: 60px;
text-align: center;
border : solid black 2px;
border : solid #4d4d4d 2px;
font-size: 20px;
font-weight: bold;
background: transparent;
border-top-left-radius: 10px;
border-top-right-radius: 0px;
border-top-right-radius: 0;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 0px;
border-bottom-left-radius: 0;
}
.charsheet input.sheet-attr-number {
.charsheet .sheet-attr-number {
display: inline-block;
background: transparent;
border-radius: 0px;
border-width: 2px;
border-radius: 0;
border-width: 3px;
border-style: solid;
border-color: #4d4d4d;
font-size: 18px;
text-align: center;
padding: 10px;
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 5px;
height: 50px;
width: 50px;
}
.charsheet input.sheet-attr-mod {
.charsheet .sheet-attr-mod {
color: #4d4d4d;
font-size: 24px;
text-align: center;
}
.charsheet p.sheet-attr-extra {
.charsheet .sheet-attr-extra {
display: block;
font-style: italic;
font-size: 10px;
padding-left: 20px;
margin-bottom: 0px;
line-height: 12px;
padding-left: 0;
padding-bottom: 0;
margin-bottom: 0;
margin-left: 0;
}
.charsheet .sheet-attr {
display: inline-block;
width: 10em;
text-align: right;
font-size: 18px;
font-size: 14px;
font-family: "Times New Roman", Times, Serif;
padding: 0;
text-transform: uppercase;
}
.charsheet .sheet-attr:first-letter {
font-size: 1.4em;
font-weight: bold;
}
.charsheet .sheet-attr:first-line {
font-size: 1em;
}
.charsheet .sheet-fiftyfifty {
width: calc(50% - 25px) !important;
}
}
.charsheet .sheet-midcol {
width: 50px !important;
}
.charsheet .sheet-columnrule {
-webkit-column-rule: 4px double #ff00ff; /* Chrome, Safari, Opera */
-moz-column-rule: 4px double #ff00ff; /* Firefox */
column-rule: 4px double #ff00ff;
}
}
.charsheet .sheet-right-border {
border-right: 4px double #8c8b8b;
}
}
.charsheet .sheet-2colrow .sheet-col {
margin-right: 10px !important;
}
}
.sheet-rolltemplate-btwtests table {
width: 100%;
border: 1px solid;
color: black;
font-size: 1em;
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
.sheet-rolltemplate-btwtests th {
background-color: rgb(89, 89, 89);
color: #ffffff;
padding: 2px;
border-bottom: 1px solid black;
line-height: 1.6em;
font-size: 1.2em;
}
.sheet-rolltemplate-btwtests .userscript-tcat {
font-weight: bold;
}
.sheet-rolltemplate-btwtests td {
padding: 5px;
border-bottom: 1px solid black;
}
+130 -24
View File
@@ -96,7 +96,7 @@ on("change:str change:dex change:con change:int change:wis change:cha", function
<div class="sheet-table-cell sheet-center"><input type="number" class="sheet-attr-number" min=1 max=19 value=10 name="attr_str" /></div>
<div class="sheet-table-cell sheet-center">
<input type="hidden" name="attr_tmp_str_mod" value=0>
<input type="number" name="attr_str_mod" class="sheet-attr-mod" value="@{tmp_str_mod}" disabled=true>
<input type="number" name="attr_str_mod" class="sheet-attr-mod sheet-no-spinners" value="@{tmp_str_mod}" disabled=true>
</div>
<div class="sheet-table-cell sheet-middle">
<span class="sheet-attr-extra">melee to hit</span>
@@ -112,7 +112,7 @@ on("change:str change:dex change:con change:int change:wis change:cha", function
<div class="sheet-table-cell sheet-center"><input type="number" class="sheet-attr-number" min=1 max=19 value=10 name="attr_dex" /></div>
<div class="sheet-table-cell sheet-center">
<input type="hidden" name="attr_tmp_dex_mod" value=0>
<input type="number" name="attr_dex_mod" class="sheet-attr-mod" value="@{tmp_dex_mod}" disabled=true>
<input type="number" name="attr_dex_mod" class="sheet-attr-mod sheet-no-spinners" value="@{tmp_dex_mod}" disabled=true>
</div>
<div class="sheet-table-cell sheet-middle">
<span class="sheet-attr-extra">ranged to hit</span>
@@ -129,7 +129,7 @@ on("change:str change:dex change:con change:int change:wis change:cha", function
<div class="sheet-table-cell sheet-center"><input type="number" class="sheet-attr-number" min=1 max=19 value=10 name="attr_con" /></div>
<div class="sheet-table-cell sheet-center">
<input type="hidden" name="attr_tmp_con_mod" value=0>
<input type="number" name="attr_con_mod" class="sheet-attr-mod" value="@{tmp_con_mod}" disabled=true>
<input type="number" name="attr_con_mod" class="sheet-attr-mod sheet-no-spinners" value="@{tmp_con_mod}" disabled=true>
</div>
<div class="sheet-table-cell sheet-middle">
<p class="sheet-attr-extra">hit points per level</p>
@@ -144,7 +144,7 @@ on("change:str change:dex change:con change:int change:wis change:cha", function
<div class="sheet-table-cell sheet-center"><input type="number" class="sheet-attr-number" min=1 max=19 value=10 name="attr_int" /></div>
<div class="sheet-table-cell sheet-center">
<input type="hidden" name="attr_tmp_int_mod" value=0>
<input type="number" name="attr_int_mod" class="sheet-attr-mod" value="@{tmp_int_mod}" disabled=true>
<input type="number" name="attr_int_mod" class="sheet-attr-mod sheet-no-spinners" value="@{tmp_int_mod}" disabled=true>
</div>
<div class="sheet-table-cell sheet-middle">
<p class="sheet-attr-extra">languages known</p>
@@ -159,7 +159,7 @@ on("change:str change:dex change:con change:int change:wis change:cha", function
<div class="sheet-table-cell sheet-center"><input type="number" class="sheet-attr-number" min=1 max=19 value=10 name="attr_wis" /></div>
<div class="sheet-table-cell sheet-center">
<input type="hidden" name="attr_tmp_wis_mod" value=0>
<input type="number" name="attr_wis_mod" class="sheet-attr-mod" value="@{tmp_wis_mod}" disabled=true>
<input type="number" name="attr_wis_mod" class="sheet-attr-mod sheet-no-spinners" value="@{tmp_wis_mod}" disabled=true>
</div>
<div class="sheet-table-cell sheet-middle">
<p class="sheet-attr-extra">save vs mind control</p>
@@ -174,7 +174,7 @@ on("change:str change:dex change:con change:int change:wis change:cha", function
<div class="sheet-table-cell sheet-center"><input type="number" class="sheet-attr-number" min=1 max=19 value=10 name="attr_cha" /></div>
<div class="sheet-table-cell sheet-center">
<input type="hidden" name="attr_tmp_cha_mod" value=0>
<input type="number" name="attr_cha_mod" class="sheet-attr-mod" value="@{tmp_cha_mod}" disabled=true>
<input type="number" name="attr_cha_mod" class="sheet-attr-mod sheet-no-spinners" value="@{tmp_cha_mod}" disabled=true>
</div>
<div class="sheet-table-cell sheet-middle">
<p class="sheet-attr-extra">max # of allies</p>
@@ -388,19 +388,84 @@ on("change:str change:dex change:con change:int change:wis change:cha", function
</div>
</div>
<hr />
<div class="sheet-list-header">Skills:</div>
<textarea name="attr_skills" placeholder="Skill name (attribute) +2/+4" class="sheet-area-lines sheet-area-small sheet-notes"></textarea>
<div class="sheet-list-header">Class Abilities:</div>
<textarea name="attr_class_abilities" placeholder="Name, description" class="sheet-area-lines sheet-area-medium sheet-notes"></textarea>
<div class="sheet-sub-header">Skills</div>
<fieldset class="repeating_skills">
<div class="sheet-table">
<div class="sheet-table-row">
<div class="sheet-table-cell">
<input type="text" class="sheet-input-line" style="width:100%;" name="attr_skill_name"/>
<label for="attr_skill_name" class="sheet-attr-extra">Name</label>
</div>
<div class="sheet-table-cell">
<select class="sheet-input-line" name="attr_skill_attr">
<option value="@{str}">Str</option>
<option value="@{dex}">Dex</option>
<option value="@{con}">Con</option>
<option value="@{int}">Int</option>
<option value="@{wis}">Wis</option>
<option value="@{cha}">Cha</option>
</select>
<label for="attr_skill_attr" class="sheet-attr-extra">Attribute</label>
</div>
<div class="sheet-table-cell">
<select class="sheet-input-line" name="attr_skill_bonus">
<option value="2">+2</option>
<option value="4">+4</option>
</select>
<label for="attr_skill_bonus" class="sheet-attr-extra">Bonus</label>
</div>
<div class="sheet-table-cell">
<select class="sheet-input-line" name="attr_skill_diff">
<option value="2">Easy</option>
<option value="0" selected>Normal</option>
<option value="-2">Hard</option>
<option value="-5">Very Hard</option>
<option value="-10">Impossible</option>
</select>
<label for="attr_skill_diff" class="sheet-attr-extra">Difficulty</label>
</div>
<div class="sheet-table-cell">
<button type="roll" value="&{template:btwtests} {{name=@{skill_name} Check}} {{skillcheck=[[1d20]]}} {{target=[[@{skill_attr}+@{skill_bonus}+@{skill_diff}]]}}"></button>
</div>
</div>
</div>
</fieldset>
<hr />
<div class="sheet-sub-header">Magic</div>
<div class="sheet-small-list-header">Cantrips:</div>
<textarea name="attr_cantrips" class="sheet-area-lines sheet-area-small sheet-notes"></textarea>
<fieldset class="repeating_cantrips">
<div class="sheet-table">
<div class="sheet-table-row">
<div class="sheet-table-cell">
<input type="text" class="sheet-input-line" name="attr_cantrip_name" />
<label for="attr_skill_name" class="sheet-attr-extra">Name</label>
</div>
<div class="sheet-table-cell">
<select class="sheet-input-line" name="attr_cantrip_attr">
<option value="@{int}">Int</option>
<option value="@{wis}">Wis</option>
</select>
<label for="attr_skill_attr" class="sheet-attr-extra">Attribute</label>
</div>
<div class="sheet-table-cell sheet-right" style="width: 1em">
<button type="roll" value="&{template:btwtests} {{name=Casting @{cantrip_name}}} {{cantripcheck=[[1d20]]}} {{target=[[@{cantrip_attr}]]}}"></button>
</div>
</div>
</div>
</fieldset>
<div class="sheet-small-list-header">Spells:</div>
<textarea name="attr_spells" class="sheet-area-lines sheet-area-medium sheet-notes"></textarea>
<textarea name="attr_spells" class="sheet-area-lines sheet-area-large sheet-notes"></textarea>
<div class="sheet-small-list-header">Rituals:</div>
<textarea name="attr_rituals" class="sheet-area-lines sheet-area-medium sheet-notes"></textarea>
<textarea name="attr_rituals" class="sheet-area-lines sheet-area-large sheet-notes"></textarea>
</div>
</div>
<hr />
<div class="sheet-row">
@@ -416,6 +481,7 @@ on("change:str change:dex change:con change:int change:wis change:cha", function
<textarea name="attr_equipment" placeholder="Name, quantity, weight" class="sheet-area-lines sheet-area-large sheet-notes"></textarea>
<div style="text-align:center;">
<img style="max-height: 150px" src="https://i.imgur.com/whKdPgO.png">
<span>Find more at the publisher's website: https://www.flatlandgames.com</span>
</div>
</div>
<div class="sheet-col">
@@ -430,7 +496,7 @@ on("change:str change:dex change:con change:int change:wis change:cha", function
<!-- Roll templates go down here -->
<div style="display: none">
<rolltemplate class="sheet-rolltemplate-btwtests">
<table>
<tr><th><span>{{name}}</span></th></tr>
@@ -450,19 +516,18 @@ on("change:str change:dex change:con change:int change:wis change:cha", function
{{/damage}}
{{#save}}
<tr class="rowcolor"><td><span class="tcat">Roll: </span>{{save}} &gt; {{target}}</td></tr>
{{#rollLess() save target}}
<tr><td class="subheader" style="color:red;"><b>Failure.</b></td></tr>
{{/rollLess() save target}}
{{#rollGreater() save target}}
{{#^rollLess() save target}}
<tr><td class="subheader" style="color:green;"><b>Success!</b></td></tr>
{{/rollGreater() save target}}
{{/^rollLess() save target}}
{{#rollLess() save target}}
<tr><td class="subheader" style="color:red;"><b>Failure.</b></td></tr>
{{/rollLess() save target}}
{{/save}}
{{#attrcheck}}
<tr class="rowcolor"><td><span class="tcat">Roll: </span>{{attrcheck}} &gt; {{target}}</td></tr>
{{#rollLess() attrcheck target}}
<tr class="rowcolor"><td><span class="tcat">Roll: </span>{{attrcheck}} &lt; {{target}}</td></tr>
{{#^rollGreater() attrcheck target}}
<tr><td class="subheader" style="color:green;"><b>Success!</b></td></tr>
{{/rollLess() attrcheck target}}
{{/^rollGreater() attrcheck target}}
{{#rollGreater() attrcheck target}}
<tr><td class="subheader" style="color:red;"><b>Failure.</b></td></tr>
{{/rollGreater() attrcheck target}}
@@ -473,6 +538,47 @@ on("change:str change:dex change:con change:int change:wis change:cha", function
<tr><td class="subheader" style="color:red;"><b>Automatic failure... (Natural 20)</b></td></tr>
{{/rollWasCrit() attrcheck}}
{{/attrcheck}}
{{#skillcheck}}
<tr class="rowcolor"><td><span class="tcat">Roll: </span>{{skillcheck}} vs {{target}}</td></tr>
{{#^rollGreater() skillcheck target}}
<tr><td class="subheader" style="color:green;"><b>Success!</b></td></tr>
{{/^rollGreater() skillcheck target}}
{{#rollGreater() skillcheck target}}
<tr><td class="subheader" style="color:red;"><b>Failure.</b></td></tr>
{{/rollGreater() skillcheck target}}
{{#rollWasFumble() skillcheck}}
<tr><td class="subheader" style="color:green;"><b>Automatic success! (Natural 1)</b></td></tr>
{{/rollWasFumble() skillcheck}}
{{#rollWasCrit() skillcheck}}
<tr><td class="subheader" style="color:red;"><b>Automatic failure... (Natural 20)</b></td></tr>
{{/rollWasCrit() skillcheck}}
{{/skillcheck}}
{{#cantripcheck}}
<tr class="rowcolor"><td><span class="tcat">Roll: </span>{{cantripcheck}} vs {{target}}</td></tr>
{{#^rollGreater() cantripcheck target}}
<tr><td class="subheader" style="color:green;"><b>Success!</b></td></tr>
{{/^rollGreater() cantripcheck target}}
{{#rollGreater() cantripcheck target}}
<tr><td class="subheader" style="color:red;"><b>Failure.</b></td></tr>
<tr><td class="subheader" style="color:red;">
<p>Cantrip failure options:</p>
<p>Lose all magic for the day or</p>
<p>Cantrip goes wrong</p>
</td></tr>
{{/rollGreater() cantripcheck target}}
{{#rollWasFumble() cantripcheck}}
<tr><td class="subheader" style="color:green;"><b>Automatic success! (Natural 1)</b></td></tr>
{{/rollWasFumble() cantripcheck}}
{{#rollWasCrit() cantripcheck}}
<tr><td class="subheader" style="color:red;"><b>Automatic failure... (Natural 20)</b></td></tr>
{{/rollWasCrit() cantripcheck}}
{{/cantripcheck}}
</table>
</rolltemplate>
</rolltemplate>
</div>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 134 KiB