Files
roll20-character-sheets-tester/Prose Descriptive Qualities (hbCyber)/sheet.html
T
jean.s.lemay eb2acb0002 [Prose Descriptive Qualities (hbCyber)] v1.1
- Added automated calculation of target difficulty number
2020-09-19 16:57:10 +08:00

621 lines
20 KiB
HTML

<div class="sheet-wrapper">
<!-- Headers -->
<div class="sheet-panel-container sheet-panel-container--center">
<!-- Header: Player -->
<div class="sheet-id-header-player
sheet-panel sheet-flex sheet-flex-row sheet-flex-no-wrap sheet-items-center sheet-justify-between">
<!-- Logo -->
<img class="sheet-flex-none sheet-h-20"
src="https://i.imgur.com/ZOMDMvX.png" />
<!-- Roll Average -->
<div class="sheet-flex-none sheet-flex sheet-flex-row sheet-flex-no-wrap sheet-items-center sheet-pr-4">
<span class="sheet-flex-none sheet-text-sm sheet-font-bold sheet-mr-2">
Roll Average <span class="sheet-font-mono">[0]</span>:
</span>
<!-- Button: Roll -->
<button class="sheet-col-span-1 sheet-button sheet-button--roll"
type="roll"
title="Roll"
value="&{template:roll} {{subtitle=Average [0]}} {{rollStr=2d6}} {{rollValue=[[2d6]]}}"></button>
</div>
</div>
</div>
<!-- Views -->
<div class="sheet-panel-container sheet-mt-8">
<!-- View: Player -->
<div class="sheet-id-view-player sheet-panel">
<!-- Qualities -->
<!-- Container: Headers -->
<div class="sheet-container-quality-headers sheet-mb-2">
<!-- Header: Quality -->
<span class="sheet-col-span-1 sheet-font-bold">Quality</span>
<!-- Header: Rank -->
<span class="sheet-col-span-1 sheet-font-bold sheet-text-sm">Rank</span>
<!-- Spacer -->
<div class="sheet-col-span-1"></div>
<!-- Header: Damage -->
<span class="sheet-col-span-1 sheet-font-bold sheet-text-sm sheet-text-red-700">Damage</span>
<!-- Spacer -->
<div class="sheet-col-span-1"></div>
<!-- Header: Downshift(s) -->
<span class="sheet-col-span-1 sheet-font-bold sheet-text-sm sheet-text-red-700">Downshift(s)</span>
<!-- Spacer -->
<div class="sheet-col-span-1"></div>
<!-- Header: Upshift(s) -->
<span class="sheet-col-span-1 sheet-font-bold sheet-text-sm sheet-text-green-700">Upshift(s)</span>
<!-- Spacer -->
<div class="sheet-col-span-1"></div>
<!-- Spacer: Computed Value -->
<div class="sheet-col-span-1"></div>
<!-- Spacer: Button: Roll -->
<button class="sheet-col-span-1 sheet-button sheet-button--hidden"></button>
<!-- Spacer: Button: Chat -->
<button class="sheet-col-span-1 sheet-button sheet-button--hidden"></button>
</div>
<fieldset class="repeating_qualities">
<!-- Container: Row -->
<div class="sheet-container-quality sheet-mb-2">
<!-- Hidden Fields -->
<input type="hidden"
name="attr_quality_effective_rank"
value="1" />
<input type="hidden"
name="attr_quality_status"
value="" />
<input type="hidden"
name="attr_quality_status_downshifted"
value="" />
<input type="hidden"
name="attr_quality_status_upshifted"
value="" />
<input type="hidden"
name="attr_quality_out_of_scene"
value="" />
<input type="hidden"
name="attr_quality_roll_str"
value="2d6 +2" />
<input type="hidden"
name="attr_quality_target_num"
value="9" />
<!-- Name -->
<input type="text"
class="sheet-col-span-1 sheet-w-full sheet-text-sm"
name="attr_quality_name"
spellcheck="false" />
<!-- Rank -->
<select class="sheet-col-span-1 sheet-w-full sheet-text-sm sheet-mb-0"
name="attr_quality_rank">
<option value="Poor [-2]">Poor [-2]</option>
<option value="Average [0]">Average [0]</option>
<option value="Good [+2]" selected>Good [+2]</option>
<option value="Expert [+4]">Expert [+4]</option>
<option value="Master [+6]">Master [+6]</option>
</select>
<!-- Spacer -->
<div class="sheet-col-span-1"></div>
<!-- Damage -->
<div class="sheet-col-span-1 sheet-w-full sheet-flex sheet-flex-row sheet-flex-no-wrap sheet-items-center">
<input type="number"
class="sheet-flex-1 sheet-mr-2"
name="attr_quality_damage" />
<!-- Button: Clear -->
<button class="sheet-flex-none sheet-button sheet-button--action-roll sheet-button--remove"
type="action"
title="Clear"
name="act_cleardamage"></button>
</div>
<!-- Spacer -->
<div class="sheet-col-span-1"></div>
<!-- Downshift(s) -->
<div class="sheet-col-span-1 sheet-w-full sheet-flex sheet-flex-row sheet-flex-no-wrap sheet-items-center">
<input type="number"
class="sheet-flex-1 sheet-mr-2"
name="attr_quality_downshift" />
<!-- Button: Clear -->
<button class="sheet-flex-none sheet-button sheet-button--action-roll sheet-button--remove"
type="action"
title="Clear"
name="act_cleardownshift"></button>
</div>
<!-- Spacer -->
<div class="sheet-col-span-1"></div>
<!-- Upshift(s) -->
<div class="sheet-col-span-1 sheet-w-full sheet-flex sheet-flex-row sheet-flex-no-wrap sheet-items-center">
<input type="number"
class="sheet-flex-1 sheet-mr-2"
name="attr_quality_upshift" />
<!-- Button: Clear -->
<button class="sheet-flex-none sheet-button sheet-button--action-roll sheet-button--remove"
type="action"
title="Clear"
name="act_clearupshift"></button>
</div>
<!-- Spacer -->
<div class="sheet-col-span-1"></div>
<!-- Computed Roll & Target Number Display -->
<div class="sheet-col-span-1 sheet-flex sheet-flex-row sheet-flex-no-wrap sheet-items-center">
<!-- Hidden Field(s) -->
<input type="hidden"
class="sheet-id-attr-quality-out-of-scene"
name="attr_quality_out_of_scene"
value="" />
<!-- Arrow -->
<span class="sheet-flex-none sheet-mr-3" style="font-family: 'Pictos'">]</span>
<!-- Out of Scene -->
<span class="sheet-id-label-out-of-scene
sheet-flex-none sheet-font-bold sheet-text-center sheet-text-red-700">
Out!
</span>
<!-- Roll String & Target Number -->
<div class="sheet-id-container-roll-str
sheet-flex-1 sheet-relative">
<!-- Hidden Field(s) -->
<input type="hidden"
class="sheet-id-attr-quality-status"
name="attr_quality_status"
value="" />
<!-- Roll String -->
<span class="sheet-id-label-roll-str
sheet-absolute sheet-left-0 sheet-top-0
sheet-leading-none sheet-text-sm sheet-font-bold sheet-font-mono"
name="attr_quality_roll_str"
value="2d6 +2">2d6 +2</span>
<!-- Target Number -->
<span class="sheet-id-label-target-num
sheet-absolute sheet-left-0 sheet-bottom-0
sheet-leading-none sheet-font-bold">
<span class="sheet-text-xs">Diff. Num.</span>
<span class="sheet-text-sm sheet-font-mono" name="attr_quality_target_num" value="9">9</span>
</span>
</div>
</div>
<!-- Button: Roll -->
<button class="sheet-col-span-1 sheet-button sheet-button--roll"
type="roll"
title="Roll"
value="&{template:roll} {{title=@{quality_name}}} {{subtitle=@{quality_rank}}} {{damage=@{quality_damage}}} {{downshift=@{quality_downshift}}} {{upshift=@{quality_upshift}}} {{rollStr=@{quality_roll_str}}} {{statusDownshifted=@{quality_status_downshifted}}} {{statusUpshifted=@{quality_status_upshifted}}} {{rollValue=[[@{quality_roll_str}]]}} {{outOfScene=@{quality_out_of_scene}}} {{targetNum=@{quality_target_num}}}"></button>
<!-- Button: Chat -->
<button class="sheet-col-span-1 sheet-button sheet-button--chat"
type="roll"
title="Send to chat"
value="&{template:chat} {{title=@{quality_name}}} {{subtitle=@{quality_rank}}} {{damage=@{quality_damage}}} {{downshift=@{quality_downshift}}} {{upshift=@{quality_upshift}}} {{rollStr=@{quality_roll_str}}} {{statusDownshifted=@{quality_status_downshifted}}} {{statusUpshifted=@{quality_status_upshifted}}} {{outOfScene=@{quality_out_of_scene}}} {{targetNum=@{quality_target_num}}}"></button>
</div>
</fieldset>
</div>
</div>
</div>
<!-- Roll Template: Chat -->
<rolltemplate class="sheet-rolltemplate-chat">
{{#title}}
<!-- Header -->
<div class="sheet-rt-header">
<span class="sheet-rt-header__title">{{title}}</span>
{{#subtitle}}
<span class="sheet-rt-header__subtitle">{{subtitle}}</span>
{{/subtitle}}
</div>
{{/title}}
{{^title}}
{{#subtitle}}
<!-- Header -->
<div class="sheet-rt-header">
<span class="sheet-rt-header__title"></span>
<span class="sheet-rt-header__subtitle">{{subtitle}}</span>
</div>
{{/subtitle}}
{{/title}}
<!-- Grid: Damage, Downshift, Upshift, Roll String & Target Number -->
<div class="sheet-rt-grid">
<!-- Damage -->
{{#damage}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--2/3
sheet-font-bold sheet-text-red-700">Damage</span>
<span class="sheet-rt-grid__item sheet-rt-grid__item--1/3
sheet-text-right sheet-font-bold sheet-font-mono sheet-text-red-700">
{{damage}}
</span>
{{/damage}}
<!-- Downshift(s) -->
{{#downshift}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--2/3
sheet-font-bold sheet-text-red-700">Downshift(s)</span>
<span class="sheet-rt-grid__item sheet-rt-grid__item--1/3
sheet-text-right sheet-font-bold sheet-font-mono sheet-text-red-700">
{{downshift}}
</span>
{{/downshift}}
<!-- Upshift(s) -->
{{#upshift}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--2/3
sheet-font-bold sheet-text-green-700">Upshift(s)</span>
<span class="sheet-rt-grid__item sheet-rt-grid__item--1/3
sheet-text-right sheet-font-bold sheet-font-mono sheet-text-green-700">
{{upshift}}
</span>
{{/upshift}}
<!-- Target Number -->
{{#targetNum}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--2/3
sheet-font-bold">Difficulty Number</span>
<!-- Downshifted -->
{{#statusDownshifted}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--1/3
sheet-text-right sheet-font-bold sheet-font-mono sheet-text-red-700">
{{targetNum}}
</span>
{{/statusDownshifted}}
<!-- Upshifted -->
{{#statusUpshifted}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--1/3
sheet-text-right sheet-font-bold sheet-font-mono sheet-text-green-700">
{{targetNum}}
</span>
{{/statusUpshifted}}
<!-- Normal -->
{{^statusDownshifted}}
{{^statusUpshifted}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--1/3
sheet-text-right sheet-font-bold sheet-font-mono">
{{targetNum}}
</span>
{{/statusUpshifted}}
{{/statusDownshifted}}
{{/targetNum}}
<!-- Roll String -->
{{#rollStr}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--2/3
sheet-font-bold">Roll</span>
<!-- Downshifted -->
{{#statusDownshifted}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--1/3
sheet-text-right sheet-font-bold sheet-font-mono sheet-text-red-700">
{{rollStr}}
</span>
{{/statusDownshifted}}
<!-- Upshifted -->
{{#statusUpshifted}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--1/3
sheet-text-right sheet-font-bold sheet-font-mono sheet-text-green-700">
{{rollStr}}
</span>
{{/statusUpshifted}}
<!-- Normal -->
{{^statusDownshifted}}
{{^statusUpshifted}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--1/3
sheet-text-right sheet-font-bold sheet-font-mono">
{{rollStr}}
</span>
{{/statusUpshifted}}
{{/statusDownshifted}}
{{/rollStr}}
</div>
<!-- Out of Scene -->
{{#outOfScene}}
<span class="sheet-rt-text sheet-text-center sheet-font-bold sheet-text-red-700">Out of Scene!</span>
<div class="sheet-rt-separator"></div>
{{/outOfScene}}
</rolltemplate>
<!-- Roll Template: Roll -->
<rolltemplate class="sheet-rolltemplate-roll">
{{#title}}
<!-- Header -->
<div class="sheet-rt-header">
<span class="sheet-rt-header__title">{{title}}</span>
{{#subtitle}}
<span class="sheet-rt-header__subtitle">{{subtitle}}</span>
{{/subtitle}}
</div>
{{/title}}
{{^title}}
{{#subtitle}}
<!-- Header -->
<div class="sheet-rt-header">
<span class="sheet-rt-header__title"></span>
<span class="sheet-rt-header__subtitle">{{subtitle}}</span>
</div>
{{/subtitle}}
{{/title}}
<!-- Grid: Damage, Downshift, Upshift, Roll String & Target Number -->
<div class="sheet-rt-grid">
<!-- Damage -->
{{#damage}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--2/3
sheet-font-bold sheet-text-red-700">Damage</span>
<span class="sheet-rt-grid__item sheet-rt-grid__item--1/3
sheet-text-right sheet-font-bold sheet-font-mono sheet-text-red-700">
{{damage}}
</span>
{{/damage}}
<!-- Downshift(s) -->
{{#downshift}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--2/3
sheet-font-bold sheet-text-red-700">Downshift(s)</span>
<span class="sheet-rt-grid__item sheet-rt-grid__item--1/3
sheet-text-right sheet-font-bold sheet-font-mono sheet-text-red-700">
{{downshift}}
</span>
{{/downshift}}
<!-- Upshift(s) -->
{{#upshift}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--2/3
sheet-font-bold sheet-text-green-700">Upshift(s)</span>
<span class="sheet-rt-grid__item sheet-rt-grid__item--1/3
sheet-text-right sheet-font-bold sheet-font-mono sheet-text-green-700">
{{upshift}}
</span>
{{/upshift}}
<!-- Target Number -->
{{#targetNum}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--2/3
sheet-font-bold">Difficulty Number</span>
<!-- Downshifted -->
{{#statusDownshifted}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--1/3
sheet-text-right sheet-font-bold sheet-font-mono sheet-text-red-700">
{{targetNum}}
</span>
{{/statusDownshifted}}
<!-- Upshifted -->
{{#statusUpshifted}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--1/3
sheet-text-right sheet-font-bold sheet-font-mono sheet-text-green-700">
{{targetNum}}
</span>
{{/statusUpshifted}}
<!-- Normal -->
{{^statusDownshifted}}
{{^statusUpshifted}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--1/3
sheet-text-right sheet-font-bold sheet-font-mono">
{{targetNum}}
</span>
{{/statusUpshifted}}
{{/statusDownshifted}}
{{/targetNum}}
<!-- Roll String -->
{{#rollStr}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--2/3
sheet-font-bold">Roll</span>
<!-- Downshifted -->
{{#statusDownshifted}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--1/3
sheet-text-right sheet-font-bold sheet-font-mono sheet-text-red-700">
{{rollStr}}
</span>
{{/statusDownshifted}}
<!-- Upshifted -->
{{#statusUpshifted}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--1/3
sheet-text-right sheet-font-bold sheet-font-mono sheet-text-green-700">
{{rollStr}}
</span>
{{/statusUpshifted}}
<!-- Normal -->
{{^statusDownshifted}}
{{^statusUpshifted}}
<span class="sheet-rt-grid__item sheet-rt-grid__item--1/3
sheet-text-right sheet-font-bold sheet-font-mono">
{{rollStr}}
</span>
{{/statusUpshifted}}
{{/statusDownshifted}}
{{/rollStr}}
</div>
<!-- Out of Scene -->
{{#outOfScene}}
<span class="sheet-rt-text sheet-text-center sheet-font-bold sheet-text-red-700">Out of Scene!</span>
{{/outOfScene}}
<!-- Roll Value -->
{{#rollValue}}
<div class="sheet-rt-separator"></div>
<span class="sheet-rt-text
sheet-text-xl sheet-text-center sheet-py-4">
{{rollValue}}
</span>
{{/rollValue}}
</rolltemplate>
<!-- Sheet Worker Script -->
<script type="text/worker">
// Function(s)
var toInt = function(value) {
return (parseInt(value, 10) || 0);
};
var isBlank = function(value) {
return ((value || '').toString().trim().length === 0);
};
// ---------------------------------------------------------------------
// Auto-calc: Quality: Effective Rank
// Auto-calc: Quality: Status
// Auto-calc: Quality: Out of Scene
// Auto-calc: Quality: Roll String
on('change:repeating_qualities:quality_rank '
+ 'change:repeating_qualities:quality_damage '
+ 'change:repeating_qualities:quality_downshift '
+ 'change:repeating_qualities:quality_upshift',
function(event) {
getAttrs([
'repeating_qualities_quality_rank',
'repeating_qualities_quality_damage',
'repeating_qualities_quality_downshift',
'repeating_qualities_quality_upshift'],
function(attrs) {
// Compute the effective rank.
var initialRank = 0;
if (attrs['repeating_qualities_quality_rank'] === 'Poor [-2]') initialRank = -1;
if (attrs['repeating_qualities_quality_rank'] === 'Good [+2]') initialRank = 1;
if (attrs['repeating_qualities_quality_rank'] === 'Expert [+4]') initialRank = 2;
if (attrs['repeating_qualities_quality_rank'] === 'Master [+6]') initialRank = 3;
var effectiveRank = initialRank;
var damage = toInt(attrs['repeating_qualities_quality_damage']);
effectiveRank -= Math.abs(damage);
var downshift = toInt(attrs['repeating_qualities_quality_downshift']);
effectiveRank -= Math.abs(downshift);
var upshift = toInt(attrs['repeating_qualities_quality_upshift']);
effectiveRank += Math.abs(upshift);
// Compute other values based on effective rank.
var status = '';
if (effectiveRank < initialRank) status = 'downshifted';
if (effectiveRank > initialRank) status = 'upshifted';
var statusDownshifted = (status === 'downshifted')? 'true': '';
var statusUpshifted = (status === 'upshifted')? 'true' : '';
var outOfScene = (effectiveRank < -1)? 'true' : '';
var numDice = 2;
if (effectiveRank > 3) numDice = 2 + (effectiveRank - 3);
var rollModifier = 0;
if (effectiveRank <= -1) rollModifier = -2;
if (effectiveRank == 1) rollModifier = 2;
if (effectiveRank == 2) rollModifier = 4;
if (effectiveRank >= 3) rollModifier = 6;
var rollModifierStr;
if (rollModifier < 0) rollModifierStr = rollModifier.toString();
else if (rollModifier > 0) rollModifierStr = '+' + rollModifier.toString();
var rollStr = numDice.toString() + 'd6';
if (rollModifier !== 0) rollStr += ' ' + rollModifierStr;
var targetNumber = 7;
if (effectiveRank <= -1) targetNumber = 5;
if (effectiveRank == 1) targetNumber = 9;
if (effectiveRank == 2) targetNumber = 11;
if (effectiveRank >= 3) targetNumber = 13;
setAttrs({
'repeating_qualities_quality_effective_rank': effectiveRank,
'repeating_qualities_quality_status': status,
'repeating_qualities_quality_status_downshifted': statusDownshifted,
'repeating_qualities_quality_status_upshifted': statusUpshifted,
'repeating_qualities_quality_out_of_scene': outOfScene,
'repeating_qualities_quality_roll_str': rollStr,
'repeating_qualities_quality_target_num': targetNumber
});
});
});
// ---------------------------------------------------------------------
// Action: Quality: Clear Damage
on('clicked:repeating_qualities:cleardamage', function(eventInfo) {
var key = (eventInfo.sourceAttribute)
.slice(0, -1*('cleardamage'.length))
+ 'quality_damage';
setAttrs({
[key]: ''
});
});
// ---------------------------------------------------------------------
// Action: Quality: Clear Downshift
on('clicked:repeating_qualities:cleardownshift', function(eventInfo) {
var key = (eventInfo.sourceAttribute)
.slice(0, -1*('cleardownshift'.length))
+ 'quality_downshift';
setAttrs({
[key]: ''
});
});
// ---------------------------------------------------------------------
// Action: Quality: Clear Upshift
on('clicked:repeating_qualities:clearupshift', function(eventInfo) {
var key = (eventInfo.sourceAttribute)
.slice(0, -1*('clearupshift'.length))
+ 'quality_upshift';
setAttrs({
[key]: ''
});
});
</script>