mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
[Heartbeats] Adding character sheet for Heartbeats in Perfect Sync
This commit is contained in:
AuthorX
@@ -0,0 +1,104 @@
|
||||
.page-container {
|
||||
display: block;
|
||||
}
|
||||
:checked ~ .usable_input,
|
||||
.used_checkbox:checked ~ .premade_move,
|
||||
.used_checkbox:checked ~ .custom_move {
|
||||
color: #808080;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.is_move_custom:checked ~ .premade_move {
|
||||
display: none;
|
||||
}
|
||||
.is_move_custom:not(:checked) ~ .custom_move {
|
||||
display: none;
|
||||
}
|
||||
.title-header {
|
||||
font-size: 0px;
|
||||
width: 90%;
|
||||
height: 150px;
|
||||
}
|
||||
header {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.title-header:before {
|
||||
background: url("https://i.imgur.com/7dWqdaS.png") no-repeat;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
content: "";
|
||||
}
|
||||
.characterviewer {
|
||||
height: 100%;
|
||||
}
|
||||
.characterviewer .tab-content {
|
||||
height: calc(100% - 82px);
|
||||
}
|
||||
.characterviewer .tab-content .sheetform {
|
||||
height: 100%;
|
||||
}
|
||||
.characterviewer .tab-content .sheetform .charsheet {
|
||||
background: url("https://i.imgur.com/M9O9v83.png") no-repeat right;
|
||||
background-size: 50px 100%;
|
||||
/* background url("https://i.imgur.com/a3c9e6c.png") no-repeat right top 20px,␍url("https://i.imgur.com/M9O9v83.png") no-repeat right
|
||||
background-size 50px, 50px 100% */
|
||||
padding-right: 25px;
|
||||
height: 100%;
|
||||
}
|
||||
aside {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-evenly;
|
||||
float: right;
|
||||
margin-right: -25px;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
}
|
||||
.slider-value,
|
||||
.slider-max,
|
||||
.slider-icon {
|
||||
display: none;
|
||||
}
|
||||
.slider-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.slider-value:checked + .slider-icon {
|
||||
background: url("https://i.imgur.com/CTU31sw.png") no-repeat;
|
||||
background-size: 50px 100%;
|
||||
}
|
||||
.slider-max:checked ~ .slider-icon {
|
||||
display: block;
|
||||
}
|
||||
main {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.col2 {
|
||||
flex: 50%;
|
||||
min-width: 350px;
|
||||
}
|
||||
.characterviewer .row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 1em;
|
||||
}
|
||||
.characterviewer .row label {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.characterviewer .row input[type='text'] {
|
||||
flex: 1 1;
|
||||
}
|
||||
.characterviewer .row * {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
.component {
|
||||
display: block;
|
||||
}
|
||||
.sheet-rolltemplate-sheetname {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,184 @@
|
||||
|
||||
<aside>
|
||||
<input class="slider-max" type="checkbox" name="attr_heartrate_max" value="16"/>
|
||||
<input class="slider-value" type="checkbox" name="attr_heartrate" value="16"/>
|
||||
<div class="slider-icon"></div>
|
||||
<input class="slider-max" type="checkbox" name="attr_heartrate_max" value="15"/>
|
||||
<input class="slider-value" type="checkbox" name="attr_heartrate" value="15"/>
|
||||
<div class="slider-icon"></div>
|
||||
<input class="slider-max" type="checkbox" name="attr_heartrate_max" value="14"/>
|
||||
<input class="slider-value" type="checkbox" name="attr_heartrate" value="14"/>
|
||||
<div class="slider-icon"></div>
|
||||
<input class="slider-max" type="checkbox" name="attr_heartrate_max" value="13"/>
|
||||
<input class="slider-value" type="checkbox" name="attr_heartrate" value="13"/>
|
||||
<div class="slider-icon"></div>
|
||||
<input class="slider-max" type="checkbox" name="attr_heartrate_max" value="12"/>
|
||||
<input class="slider-value" type="checkbox" name="attr_heartrate" value="12"/>
|
||||
<div class="slider-icon"></div>
|
||||
<input class="slider-max" type="checkbox" name="attr_heartrate_max" value="11"/>
|
||||
<input class="slider-value" type="checkbox" name="attr_heartrate" value="11"/>
|
||||
<div class="slider-icon"></div>
|
||||
<input class="slider-max" type="checkbox" name="attr_heartrate_max" value="10"/>
|
||||
<input class="slider-value" type="checkbox" name="attr_heartrate" value="10"/>
|
||||
<div class="slider-icon"></div>
|
||||
<input class="slider-value" type="checkbox" name="attr_heartrate" value="9"/>
|
||||
<div class="slider-icon"></div>
|
||||
<input class="slider-value" type="checkbox" name="attr_heartrate" value="8"/>
|
||||
<div class="slider-icon"></div>
|
||||
<input class="slider-value" type="checkbox" name="attr_heartrate" value="7"/>
|
||||
<div class="slider-icon"></div>
|
||||
<input class="slider-value" type="checkbox" name="attr_heartrate" value="6"/>
|
||||
<div class="slider-icon"></div>
|
||||
<input class="slider-value" type="checkbox" name="attr_heartrate" value="5"/>
|
||||
<div class="slider-icon"></div>
|
||||
<input class="slider-value" type="checkbox" name="attr_heartrate" value="4"/>
|
||||
<div class="slider-icon"></div>
|
||||
<input class="slider-value" type="checkbox" name="attr_heartrate" value="3"/>
|
||||
<div class="slider-icon"></div>
|
||||
<input class="slider-value" type="checkbox" name="attr_heartrate" value="2"/>
|
||||
<div class="slider-icon"></div>
|
||||
<input class="slider-value" type="checkbox" name="attr_heartrate" value="1"/>
|
||||
<div class="slider-icon"></div>
|
||||
</aside>
|
||||
<header>
|
||||
<h1 class="title-header">Heartbeats in Perfect Sync</h1>
|
||||
<h3>
|
||||
<span>Dice Roller</span>
|
||||
<button class="sheet-d6-dice" type="roll" value="/roll [[@{heartrate} + ?{Your heartrate is @{heartrate}. How many bonus dice?|0}]]d6>5" name="roll_BluffCheck"></button>
|
||||
</h3>
|
||||
<h3><span name="attr_description"></span></h3>
|
||||
</header>
|
||||
<main>
|
||||
<div class="col2">
|
||||
<div class="row">
|
||||
<label for="character_name"><span class="input-label">Name:</span>
|
||||
<input id="character_name" type="text" name="attr_character_name"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="job">
|
||||
<input id="job_used" type="checkbox" name="attr_job_used"/><span class="input-label">Job:</span>
|
||||
<input class="usable_input" id="job" type="text" name="attr_job"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="weapon">
|
||||
<input id="weapon_used" type="checkbox" name="attr_weapon_used"/><span class="input-label">Weapon:</span>
|
||||
<input class="usable_input" id="weapon" type="text" name="attr_weapon"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="fighting-style">
|
||||
<h2>Fighting Styles</h2>
|
||||
<div class="row">
|
||||
<input id="style_used1" type="checkbox" name="attr_style_used1"/>
|
||||
<input class="usable_input" id="style_1" type="text" name="attr_style_1"/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<input id="style_used2" type="checkbox" name="attr_style_used2"/>
|
||||
<input class="usable_input" id="style_2" type="text" name="attr_style_2"/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<input id="style_used3" type="checkbox" name="attr_style_used3"/>
|
||||
<input class="usable_input" id="style_3" type="text" name="attr_style_3"/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<input id="style_used4" type="checkbox" name="attr_style_used4"/>
|
||||
<input class="usable_input" id="style_4" type="text" name="attr_style_4"/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<input id="style_used5" type="checkbox" name="attr_style_used5"/>
|
||||
<input class="usable_input" id="style_5" type="text" name="attr_style_5"/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<input id="style_used6" type="checkbox" name="attr_style_used6"/>
|
||||
<input class="usable_input" id="style_6" type="text" name="attr_style_6"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="Heart Rate"><span class="input-label">Heart Rate:</span>
|
||||
<input type="number" name="attr_heartrate" step="any" value="5" min="1" max="16"/><span>/</span>
|
||||
<input type="number" name="attr_heartrate_max" step="any" value="10" min="10" max="16"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col2">
|
||||
<div class="row">
|
||||
<label for="move_select"><span class="input-label">Special Move:
|
||||
<select name="attr_move_name" id="move_select">
|
||||
<option value="Burning Drive">Burning Drive</option>
|
||||
<option value="Cool Tactics">Cool Tactics</option>
|
||||
<option value="Pure Soul">Pure Soul</option>
|
||||
<option value="Stalwart Aegis">Stalwart Aegis</option>
|
||||
<option value="Arcane Mystery">Arcane Mystery</option>
|
||||
<option value="Custom">Custom</option>
|
||||
</select></span></label>
|
||||
</div>
|
||||
<div class="input" type="hidden" name="attr_move">
|
||||
<div class="h2"><span name="attr_move_name">Burning Drive</span></div>
|
||||
<div class="row">
|
||||
<input class="is_move_custom" type="checkbox" name="attr_move_name" value="Custom" style="display: none"/>
|
||||
<input class="used_checkbox" type="checkbox" name="attr_move_used"/><span class="premade_move" name="attr_move_text">You can push yourself past a setback with violent force. Place yourself anywhere in the scene, breaking from any restraints.</span>
|
||||
<textarea class="custom_move" name="attr_move_text_custom"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<rolltemplate class="sheet-rolltemplate-heartbeats">
|
||||
{{#rollName}}
|
||||
{{/rollName}}
|
||||
</rolltemplate>
|
||||
<script type="text/worker">var moves = {
|
||||
'Burning Drive':'You can push yourself past a setback with violent force. Place yourself anywhere in the scene, breaking from any restraints.',
|
||||
'Cool Tactics':'You can detail an elaborate trap you left in the scene in flashback. Describe how at least one of your allies assisted you.',
|
||||
'Pure Soul':'You can call to an ally and they’ll hear you, no matter where they are. Shift their Heart Rate by 3.',
|
||||
'Stalwart Aegis':'When an ally is in peril you may appear where they are and weather their struggle. The peril is now affecting you instead.',
|
||||
'Arcane Mystery':'You recall a spell that harnesses the energy of the Pulse. Tell the GM what you’d like the spell to do, they’ll tell you what rituals or sacrifices are needed to cast it'
|
||||
};
|
||||
|
||||
on('change:move_name',function(eventInfo) {
|
||||
if (eventInfo.newValue in moves) {
|
||||
let output = {move_text: moves[eventInfo.newValue]};
|
||||
setAttrs(output);
|
||||
}
|
||||
});
|
||||
|
||||
on('change:heartrate change:heartrate_max',function(eventInfo) {
|
||||
getAttrs(['heartrate','heartrate_max'],function(values) {
|
||||
if (values.heartrate > values.heartrate_max) {
|
||||
let output = {heartrate: values.heartrate_max};
|
||||
setAttrs(output);
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
on('sheet:opened',function(eventInfo) {
|
||||
getAttrs(['heartrate','heartrate_max','move_name'],function(values) {
|
||||
let output = {};
|
||||
output.heartrate = values.heartrate ? values.heartrate : 5;
|
||||
output.heartrate_max = values.heartrate_max ? values.heartrate_max : 10;
|
||||
if (values.move_name == 0) {
|
||||
output.move_name = 'Burning Drive';
|
||||
output.move_text = moves[output.move_name];
|
||||
};
|
||||
setAttrs(output);
|
||||
});
|
||||
});
|
||||
|
||||
const descs = ['character_name','job','weapon','style_1','style_2','style_3','style_4','style_5','style_6'];
|
||||
const listeners = descs.map(stat => 'change:' + stat).join(' ') + ' sheet:opened';
|
||||
on(listeners, function() {
|
||||
getAttrs(descs,function(values) {
|
||||
let name = values.character_name ? values.character_name : '[Name]';
|
||||
let job = values.job ? values.job : '[Mundane Job]';
|
||||
let weapon = values.weapon ? values.weapon : '[Outlandish Weapon]';
|
||||
let style_arr = [values.style_1,values.style_2,values.style_3,values.style_4,values.style_5,values.style_6];
|
||||
for (var i = 0; i < 3; i++)
|
||||
style_arr[i] = style_arr[i] ? style_arr[i] : '[Style '+ (i + 1) +']';
|
||||
style_arr = style_arr.filter(item => item);
|
||||
let styles = style_arr.slice(0,style_arr.length - 1).join(', ') + ', and ' + style_arr[style_arr.length - 1];
|
||||
let output = {description: `${name} is ${job} who summons ${weapon} and fights Pulse with ${styles}`};
|
||||
setAttrs(output);
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 320 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"html": "heartbeats.html",
|
||||
"css": "heartbeats.css",
|
||||
"authors": "Dana Lexa",
|
||||
"roll20userid": "1332302",
|
||||
"preview": "heartbeats.png",
|
||||
"instructions": "A sheet for Heartbeats in Perfect Sync by Nathan Blades."
|
||||
}
|
||||
Reference in New Issue
Block a user