NCO 1.0
First release of NCO charactersheet. - Html + sheet worker - Css - preview - Json file
This commit is contained in:
Meka
@@ -0,0 +1,320 @@
|
||||
<div class="centered">
|
||||
<button type="action" name="act_roll">Roll!</button>
|
||||
<input class="edit" type="checkbox" name="attr_edit"/>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column_left">
|
||||
|
||||
<div class="nickname border">
|
||||
<input type="text" name="attr_nickname" placeholder="Nickname" />
|
||||
</div>
|
||||
|
||||
<h3>Description</h3>
|
||||
<textarea class="description border" name="attr_description"></textarea>
|
||||
|
||||
<h3>Trademarks</h3>
|
||||
<ul class="trademarks border">
|
||||
<li class="trademark_name">
|
||||
<input type="text" name="attr_trademark_1"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_1_1"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_1_2"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_1_3"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_1_4"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_1_5"/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="trademarks border">
|
||||
<li class="trademark_name">
|
||||
<input type="text" name="attr_trademark_2"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_2_1"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_2_2"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_2_3"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_2_4"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_2_5"/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="trademarks border">
|
||||
<li class="trademark_name">
|
||||
<input type="text" name="attr_trademark_3"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_3_1"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_3_2"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_3_3"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_3_4"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_3_5"/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="trademarks border">
|
||||
<li class="trademark_name">
|
||||
<input type="text" name="attr_trademark_4"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_4_1"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_4_2"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_4_3"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_4_4"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_4_5"/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="trademarks border">
|
||||
<li class="trademark_name">
|
||||
<input type="text" name="attr_trademark_5"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_5_1"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_5_2"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_5_3"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_5_4"/>
|
||||
</li>
|
||||
<li class="edges">
|
||||
<input type="text" name="attr_edge_5_5"/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Experience Points</h3>
|
||||
<div class="experience">
|
||||
<div class="center">
|
||||
<input type="checkbox" name="attr_xp_1"/>
|
||||
<input type="checkbox" name="attr_xp_2"/>
|
||||
<input type="checkbox" name="attr_xp_3"/>
|
||||
<input type="checkbox" name="attr_xp_4"/>
|
||||
<input type="checkbox" name="attr_xp_5"/>
|
||||
|
|
||||
<input type="checkbox" name="attr_xp_6"/>
|
||||
<input type="checkbox" name="attr_xp_7"/>
|
||||
<input type="checkbox" name="attr_xp_8"/>
|
||||
<input type="checkbox" name="attr_xp_9"/>
|
||||
<input type="checkbox" name="attr_xp_10"/>
|
||||
|
|
||||
<input type="checkbox" name="attr_xp_11"/>
|
||||
<input type="checkbox" name="attr_xp_12"/>
|
||||
<input type="checkbox" name="attr_xp_13"/>
|
||||
<input type="checkbox" name="attr_xp_14"/>
|
||||
<input type="checkbox" name="attr_xp_15"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column_right">
|
||||
<div class="image">
|
||||
<img src="front.png"/>
|
||||
</div>
|
||||
<h3>Hits</h3>
|
||||
<div class="hits">
|
||||
<input type="checkbox" name="attr_hit_1"/>
|
||||
<input type="checkbox" name="attr_hit_2"/>
|
||||
<input type="checkbox" name="attr_hit_3"/>
|
||||
<input type="checkbox" name="attr_hit_4"/>
|
||||
</div>
|
||||
<h3>Conditions</h3>
|
||||
<table class="conditions">
|
||||
<tr>
|
||||
<td><input type="checkbox" name="attr_angry"/><span>Angry</span></td>
|
||||
<td><input type="checkbox" name="attr_dazed"/><span>Dazed</span></td>
|
||||
<td><input type="checkbox" name="attr_exhausted"/><span>Exhausted</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" name="attr_scared"/><span>Scared</span></td>
|
||||
<td><input type="checkbox" name="attr_restrained"/><span>Restrained</span></td>
|
||||
<td><input type="checkbox" name="attr_weakened"/><span>Weakened</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<input type="checkbox" name="attr_free_conditon_1"/>
|
||||
<input type="text" name="attr_free_conditon_text_1"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<input type="checkbox" name="attr_free_conditon_2"/>
|
||||
|
||||
<input type="text" name="attr_free_conditon_text_2"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h3>Traumas</h3>
|
||||
<ul class="traumas">
|
||||
<li><i class="minus"></i><input type="text" name="attr_trauma1"/></li>
|
||||
<li><i class="minus"></i><input type="text" name="attr_trauma2"/></li>
|
||||
<li><i class="minus"></i><input type="text" name="attr_trauma3"/></li>
|
||||
<li><i class="minus"></i><input type="text" name="attr_trauma4"/></li>
|
||||
</ul>
|
||||
<h3>Flaws</h3>
|
||||
<ul class="flaws border">
|
||||
<li><i class="minus"></i><input type="text" name="attr_flaw1"/></li>
|
||||
<li><i class="minus"></i><input type="text" name="attr_flaw1"/></li>
|
||||
</ul>
|
||||
<table class="stunts border">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Base</td>
|
||||
<td>Current</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h3>Stunt Points</h3></td>
|
||||
<td><input type="number" name="attr_stunt_base"></td>
|
||||
<td><input type="number" name="attr_stunt_current"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<h3 class="gears_h3">Gears</h3>
|
||||
<i>Basic</i>
|
||||
<textarea class="gears border"></textarea>
|
||||
<i>Special</i>
|
||||
<textarea class="gears border"></textarea>
|
||||
<h3>Drive</h3>
|
||||
<div class="drive border">
|
||||
<input type="text" name="attr_drive"/>
|
||||
<div class="center">
|
||||
<input type="checkbox" name="attr_drive_1"/>
|
||||
<input type="checkbox" name="attr_drive_2"/>
|
||||
<input type="checkbox" name="attr_drive_3"/>
|
||||
<input type="checkbox" name="attr_drive_4"/>
|
||||
<input type="checkbox" name="attr_drive_5"/>
|
||||
<input type="checkbox" name="attr_drive_6"/>
|
||||
<input type="checkbox" name="attr_drive_7"/>
|
||||
<input type="checkbox" name="attr_drive_8"/>
|
||||
<input type="checkbox" name="attr_drive_9"/>
|
||||
<input type="checkbox" name="attr_drive_10"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<rolltemplate class="sheet-rolltemplate-roll">
|
||||
<div class="sheet-template-container">
|
||||
<div class="resultat">
|
||||
<h3>{{name}}</h1>
|
||||
<div class="results">
|
||||
<h4>Action dices = {{action}}</h4>
|
||||
<h4>Danger dices = {{danger}}</h4>
|
||||
<h4>Result = {{computed::roll1}}
|
||||
{{#rollGreater() computed::roll1 6}}Success & Bounces{{/rollGreater() computed::roll1 6}}
|
||||
{{#rollTotal() computed::roll1 6}}Success !!{{/rollTotal() computed::roll1 6}}
|
||||
{{#rollBetween() computed::roll1 4 5}}Partial Success{{/rollBetween() computed::roll1 4 5}}
|
||||
{{#rollBetween() computed::roll1 2 3}}Failed...{{/rollBetween() computed::roll1 2 3}}
|
||||
{{#rollLess() computed::roll1 2}}Botch !!!{{/rollLess() computed::roll1 2}}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</rolltemplate>
|
||||
|
||||
<script type="text/worker">
|
||||
on('clicked:roll', (info) => {
|
||||
startRoll("&{template:roll} {{name=@{character_name} Roll}} {{roll1=[[?{Action dices|1|2|3|4|5}d6+?{Danger dices|0|1|2|3|4|5}d6]]}} {{action=?{Action dices|1|2|3|4|5}}} {{danger=?{Danger dices|0|1|2|3|4|5}}}", (results) => {
|
||||
console.log(results);
|
||||
console.log(results.results.roll1.rolls[0].results);
|
||||
|
||||
var actions = results.results.roll1.rolls[0].results;
|
||||
var banes = 0;
|
||||
|
||||
if (results.results.roll1.rolls.length > 1 ) {
|
||||
banes = results.results.roll1.rolls[1].results;
|
||||
banes.forEach(formatResult);
|
||||
}
|
||||
|
||||
const actionDices = actions.length;
|
||||
const baneDices = banes.length
|
||||
|
||||
var result;
|
||||
var bounce = 0;
|
||||
var message = 'Action dices : ' + actions.length + '\n';
|
||||
message += 'Danger dices : ' + banes.length + '\n\n';
|
||||
|
||||
console.log(actions);
|
||||
if (actions.length > 0) {
|
||||
result = max(actions);
|
||||
} else {
|
||||
result = 0;
|
||||
}
|
||||
|
||||
if (result > 1) {
|
||||
if (result > 3) message += result + ' : Partial Success.'
|
||||
else message += result + ' : Failed...';
|
||||
} else {
|
||||
message += result + ' : BOTCH !!!';
|
||||
}
|
||||
if (result == 6){
|
||||
let count = 0;
|
||||
for (let i = 0; i < actions.length; ++i) {
|
||||
if (actions[i] == 6)
|
||||
count++;
|
||||
}
|
||||
bounce = count - 1;
|
||||
if (bounce > 0) {
|
||||
message += result + ' : Success \nwith ' +bounce+ ' bounce(s) !';
|
||||
} else {
|
||||
message += result + ' : Success !';
|
||||
}
|
||||
}
|
||||
|
||||
function formatResult(item) {
|
||||
if(actions.indexOf(item) != -1) {
|
||||
actions.splice(actions.indexOf(item), 1);
|
||||
}
|
||||
}
|
||||
|
||||
function max(arr){
|
||||
var max = arr[0];
|
||||
for(var i=1; i<arr.length; i++){
|
||||
if(arr[i] > max){
|
||||
max = arr[i];
|
||||
}
|
||||
}
|
||||
return max;
|
||||
}
|
||||
|
||||
const computed = result + bounce;
|
||||
|
||||
finishRoll(
|
||||
results.rollId,
|
||||
{
|
||||
roll1: computed,
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,183 @@
|
||||
.sheet-centered {
|
||||
font-family: system-ui;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: medium;
|
||||
font-family: system-ui;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-top: -10px;
|
||||
float: right;
|
||||
font-size: medium;
|
||||
color: blueviolet;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
li::before {
|
||||
|
||||
}
|
||||
.sheet-trademarks li:first-child {
|
||||
list-style-type: none;
|
||||
border-bottom: 2px solid black;
|
||||
margin-left: -40px;
|
||||
background-color: blueviolet;
|
||||
}
|
||||
|
||||
.sheet-trademarks li:first-child input{
|
||||
font-weight: bolder;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: "[+] ";
|
||||
}
|
||||
|
||||
.sheet-traumas li, .flaws li {
|
||||
list-style-type: "[-] ";
|
||||
}
|
||||
|
||||
div.sheet-centered { width: 600px; }
|
||||
div.sheet-columns { width: 680px; margin: 0 auto;}
|
||||
|
||||
.sheet-column_left, .sheet-column_right {
|
||||
width: 300px;
|
||||
float: left;
|
||||
margin: 10px;
|
||||
/* border: 1px solid red;*/
|
||||
}
|
||||
.sheet-center {
|
||||
text-align: center;
|
||||
}
|
||||
.sheet-border {
|
||||
border : 2px solid indigo;
|
||||
margin-bottom: 3px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.sheet-stunts tr td {
|
||||
width: 80px;
|
||||
}
|
||||
input[type="number"] {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
margin: 1px;
|
||||
background: palevioletred;
|
||||
}
|
||||
|
||||
.sheet-conditions input[type="text"] {
|
||||
width: 91%;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
border-top-style: hidden;
|
||||
border-right-style: hidden;
|
||||
border-left-style: hidden;
|
||||
border-bottom-style: hidden;
|
||||
background-color: #b3d4fc;
|
||||
width: 95%;
|
||||
margin: 2px;
|
||||
color: indigo;
|
||||
}
|
||||
textarea {
|
||||
width: 293px;
|
||||
color: indigo;
|
||||
|
||||
}
|
||||
.sheet-gears_h3 {
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
.sheet-gears {
|
||||
height: 200px;
|
||||
resize: none;
|
||||
}
|
||||
.sheet-nickname {
|
||||
background-color: blueviolet;
|
||||
}
|
||||
.sheet-nickname input{
|
||||
background-color: blueviolet;
|
||||
color: white;
|
||||
font-size: large;
|
||||
}
|
||||
.sheet-nickname input::placeholder{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sheet-description{
|
||||
height:160px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.sheet-image img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sheet-edit {
|
||||
visibility: hidden;
|
||||
}
|
||||
.sheet-edit:after {
|
||||
content: "Edit";
|
||||
visibility: visible;
|
||||
color: palevioletred;
|
||||
}
|
||||
|
||||
.sheet-edit:checked:after {
|
||||
color: indigo;
|
||||
font-weight: bold;
|
||||
}
|
||||
.sheet-edit:not(checked) + .sheet-columns input[type="text"],
|
||||
.sheet-edit:not(checked) + .sheet-columns textarea {
|
||||
pointer-events: none;
|
||||
}
|
||||
.sheet-edit:checked + .sheet-columns input[type="text"],
|
||||
.sheet-edit:checked + .sheet-columns textarea {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
border: 2px solid indigo;
|
||||
background-color: #b3d4fc;
|
||||
color: indigo;
|
||||
left: 290px;
|
||||
top: 96px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-roll div.sheet-template-container {
|
||||
background-color: #FFF !important;
|
||||
border: 2px solid #000 !important;
|
||||
border-right: 4px solid #000 !important;
|
||||
border-bottom: 4px solid #000 !important;
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-roll div.sheet-template-container div.sheet-results {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-roll div.sheet-template-container div.sheet-results h4 {
|
||||
background-color: #fff !important;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-roll div.sheet-template-container h3 {
|
||||
background-color: #8824a9 !important;
|
||||
color: #fff;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"html": "NCO_charactersheet.html",
|
||||
"css": "NCO_stylesheet.css",
|
||||
"authors": "micka9fr",
|
||||
"roll20userid": "812421",
|
||||
"preview": "preview.png",
|
||||
"instructions": "It's non official sheet for the game Neon City Overdrive (NCO) written by Nathan RUSSELL.",
|
||||
"legacy": true
|
||||
}
|
||||
Reference in New Issue
Block a user