Recoloring

This commit is contained in:
walcutt 2024-12-13 22:43:24 -05:00
parent 31f29772f1
commit 9d07ec2ce0
2 changed files with 62 additions and 48 deletions

View File

@ -3,7 +3,7 @@
<!-- ID row --> <!-- ID row -->
<div class="hench-row hench-gap-wide"> <div class="hench-row hench-gap-wide">
<!-- core--> <!-- core-->
<div class="hench-box hench-flex-resizeable hench-l-grey hench-padding-wide hench-gap-narrow"> <div class="hench-box hench-flex-resizeable hench-m-grey hench-padding-wide hench-gap-narrow">
<!-- Name --> <!-- Name -->
<div class="hench-field hench-row hench-gap-narrow"> <div class="hench-field hench-row hench-gap-narrow">
<label class="hench-flex-fixed" for="hench-name">Name: </label> <label class="hench-flex-fixed" for="hench-name">Name: </label>
@ -56,63 +56,77 @@
</div> </div>
<!-- Heat --> <!-- Heat -->
<div class="hench-row hench-flex-resizeable"> <div class="hench-row hench-flex-resizeable">
<div class="hench-box hench-l-grey hench-flex-resizeable hench-padding-wide hench-gap-narrow"> <div class="hench-box hench-box-stretch hench-d-grey hench-flex-resizeable hench-padding-narrow hench-gap-narrow">
<div class="hench-row hench-flex-resizeable"> <div class="hench-row hench-flex-fixed hench-padding-wide">
<div class="hench-centered hench-title hench-flex-resizeable"> <div class="hench-centered hench-title hench-flex-resizeable">
Heat Heat
</div> </div>
</div> </div>
<div class="hench-row hench-centered hench-flex-resizeable"> <!-- tier 1 -->
<div class="hench-flex-resizeable hench-centered"> <div class="hench-row hench-flex-resizeable">
<strong>Tier I</strong> <div class="hench-box hench-flex-resizeable hench-m-grey hench-padding-narrow hench-gap-narrow">
<div class="hench-row hench-centered hench-flex-resizeable">
<div class="hench-flex-resizeable hench-centered">
<strong>Tier I</strong>
</div>
</div>
<div class="hench-row hench-centered hench-flex-resizeable">
<div class="hench-flex-resizeable hench-centered">
<em>(Nuisance, low-stakes, local cops)</em>
</div>
</div>
<div class="hench-row hench-flex-resizeable hench-row-even hench-gap-narrow">
{{#partialint2checkbox maxHeat actor.system.heat 0 6}}
<input type="checkbox" class="hench-checkbox-int-field" data-field-path="system.heat" data-value="{{index}}" {{#if marked}} checked {{/if}} />
{{/partialint2checkbox}}
</div>
</div> </div>
</div> </div>
<div class="hench-row hench-centered hench-flex-resizeable"> <!-- tier 2 -->
<div class="hench-flex-resizeable hench-centered"> <div class="hench-row hench-flex-resizeable">
<em>(Nuisance, low-stakes, local cops)</em> <div class="hench-box hench-flex-resizeable hench-m-grey hench-padding-narrow hench-gap-narrow">
<div class="hench-row hench-centered hench-flex-resizeable">
<div class="hench-flex-resizeable hench-centered">
<strong>Tier II</strong>
</div>
</div>
<div class="hench-row hench-centered hench-flex-resizeable">
<div class="hench-flex-resizeable hench-centered">
<em>(Full-time, classic stakes, local super)</em>
</div>
</div>
<div class="hench-row hench-flex-resizeable hench-row-even hench-gap-narrow">
{{#partialint2checkbox maxHeat actor.system.heat 6 12}}
<input type="checkbox" class="hench-checkbox-int-field" data-field-path="system.heat" data-value="{{index}}" {{#if marked}} checked {{/if}} />
{{/partialint2checkbox}}
</div>
</div> </div>
</div> </div>
<div class="hench-row hench-flex-resizeable hench-row-even hench-gap-narrow"> <!-- tier 3 -->
{{#partialint2checkbox maxHeat actor.system.heat 0 6}} <div class="hench-row hench-flex-resizeable">
<input type="checkbox" class="hench-checkbox-int-field" data-field-path="system.heat" data-value="{{index}}" {{#if marked}} checked {{/if}} /> <div class="hench-box hench-flex-resizeable hench-m-grey hench-padding-narrow hench-gap-narrow">
{{/partialint2checkbox}} <div class="hench-row hench-centered hench-flex-resizeable">
</div> <div class="hench-flex-resizeable hench-centered">
<div class="hench-row hench-centered hench-flex-resizeable"> <strong>Tier III</strong>
<div class="hench-flex-resizeable hench-centered"> </div>
<strong>Tier II</strong> </div>
<div class="hench-row hench-centered hench-flex-resizeable">
<div class="hench-flex-resizeable hench-centered">
<em>(Top-class, high-stakes, world's finest heroes)</em>
</div>
</div>
<div class="hench-row hench-flex-resizeable hench-row-even hench-gap-narrow">
{{#partialint2checkbox maxHeat actor.system.heat 12 18}}
<input type="checkbox" class="hench-checkbox-int-field" data-field-path="system.heat" data-value="{{index}}" {{#if marked}} checked {{/if}} />
{{/partialint2checkbox}}
</div>
</div> </div>
</div> </div>
<div class="hench-row hench-centered hench-flex-resizeable">
<div class="hench-flex-resizeable hench-centered">
<em>(Full-time, classic stakes, local super)</em>
</div>
</div>
<div class="hench-row hench-flex-resizeable hench-row-even hench-gap-narrow">
{{#partialint2checkbox maxHeat actor.system.heat 6 12}}
<input type="checkbox" class="hench-checkbox-int-field" data-field-path="system.heat" data-value="{{index}}" {{#if marked}} checked {{/if}} />
{{/partialint2checkbox}}
</div>
<div class="hench-row hench-centered hench-flex-resizeable">
<div class="hench-flex-resizeable hench-centered">
<strong>Tier III</strong>
</div>
</div>
<div class="hench-row hench-centered hench-flex-resizeable">
<div class="hench-flex-resizeable hench-centered">
<em>(Top-class, high-stakes, world's finest heroes)</em>
</div>
</div>
<div class="hench-row hench-flex-resizeable hench-row-even hench-gap-narrow">
{{#partialint2checkbox maxHeat actor.system.heat 12 18}}
<input type="checkbox" class="hench-checkbox-int-field" data-field-path="system.heat" data-value="{{index}}" {{#if marked}} checked {{/if}} />
{{/partialint2checkbox}}
</div>
<!-- maybe add guidelines down here? -->
</div> </div>
</div> </div>
<!-- Experience --> <!-- Experience -->
<div class="hench-row hench-flex-resizeable"> <div class="hench-row hench-flex-resizeable">
<div class="hench-box hench-l-grey hench-flex-resizeable hench-padding-narrow hench-gap-narrow"> <div class="hench-box hench-m-grey hench-flex-resizeable hench-padding-narrow hench-gap-narrow">
<div class="hench-row hench-flex-resizeable"> <div class="hench-row hench-flex-resizeable">
<div class="hench-centered hench-title hench-flex-resizeable"> <div class="hench-centered hench-title hench-flex-resizeable">
Experience Experience
@ -124,7 +138,7 @@
{{/int2checkbox}} {{/int2checkbox}}
</div> </div>
{{#each actor.system.experienceTriggers}} {{#each actor.system.experienceTriggers}}
<div class="hench-row hench-m-grey hench-flex-resizeable hench-padding-narrow hench-gap-narrow"> <div class="hench-row hench-l-grey hench-flex-resizeable hench-padding-narrow hench-gap-narrow">
<div class="hench-box hench-flex-fixed"> <div class="hench-box hench-flex-fixed">
<input type="checkbox" class="hench-checkbox hench-checkbox-toggle-field" data-field-path="system.experienceTriggers[{{@index}}].marked" {{#if this.marked}} checked {{/if}} /> <input type="checkbox" class="hench-checkbox hench-checkbox-toggle-field" data-field-path="system.experienceTriggers[{{@index}}].marked" {{#if this.marked}} checked {{/if}} />
</div> </div>

View File

@ -3,7 +3,7 @@
<!-- ID row --> <!-- ID row -->
<div class="hench-row hench-gap-wide"> <div class="hench-row hench-gap-wide">
<!-- Core - Name, Look, Playbook --> <!-- Core - Name, Look, Playbook -->
<div class="hench-box hench-l-grey hench-flex-resizeable hench-padding-wide hench-gap-narrow"> <div class="hench-box hench-m-grey hench-flex-resizeable hench-padding-wide hench-gap-narrow">
<!-- Name --> <!-- Name -->
<div class="hench-field hench-row hench-gap-narrow"> <div class="hench-field hench-row hench-gap-narrow">
<label class="hench-flex-fixed" for="hench-name">Name: </label> <label class="hench-flex-fixed" for="hench-name">Name: </label>
@ -64,7 +64,7 @@
{{/each}} {{/each}}
</div> </div>
<!-- Mission Planning --> <!-- Mission Planning -->
<div class="hench-box hench-l-grey hench-flex-resizeable hench-padding-wide hench-gap-narrow"> <div class="hench-box hench-m-grey hench-flex-resizeable hench-padding-wide hench-gap-narrow">
<div class="hench-centered hench-title"> <div class="hench-centered hench-title">
Mission Planning Mission Planning
</div> </div>
@ -77,7 +77,7 @@
</div> </div>
<!-- Stress --> <!-- Stress -->
<div class="hench-row hench-gap-wide"> <div class="hench-row hench-gap-wide">
<div class="hench-box hench-l-grey hench-flex-resizeable hench-padding-narrow hench-gap-narrow"> <div class="hench-box hench-m-grey hench-flex-resizeable hench-padding-narrow hench-gap-narrow">
<div class="hench-centered hench-title"> <div class="hench-centered hench-title">
<label for="hench-stress"> <label for="hench-stress">
Stress Stress