212 lines
11 KiB
Handlebars
212 lines
11 KiB
Handlebars
<div class="cr-config">
|
|
<header class="cr-header">
|
|
<h2>{{localize "CONFIGURABLE_REACTIONS.App.Title"}}</h2>
|
|
<button type="button" data-action="createReaction">
|
|
<i class="fa-solid fa-plus"></i> {{localize "CONFIGURABLE_REACTIONS.Reactions.Create"}}
|
|
</button>
|
|
</header>
|
|
|
|
<section class="cr-grid">
|
|
<aside class="cr-sidebar">
|
|
<div class="form-group">
|
|
<label>{{localize "CONFIGURABLE_REACTIONS.Reactions.Selected"}}</label>
|
|
<select name="selectedReactionId">
|
|
{{#each reactions}}
|
|
<option value="{{this.id}}" {{#if (eq this.id ../selectedReaction.id)}}selected{{/if}}>{{this.name}}</option>
|
|
{{/each}}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="cr-button-column">
|
|
<button type="button" data-action="assignSelectedTokens" {{#unless selectedReaction}}disabled{{/unless}}>
|
|
<i class="fa-solid fa-crosshairs"></i> {{localize "CONFIGURABLE_REACTIONS.Assignments.AssignSelectedTokens"}}
|
|
</button>
|
|
<button type="button" data-action="deleteReaction" {{#unless selectedReaction}}disabled{{/unless}}>
|
|
<i class="fa-solid fa-trash"></i> {{localize "CONFIGURABLE_REACTIONS.Reactions.Delete"}}
|
|
</button>
|
|
</div>
|
|
|
|
<h3>{{localize "CONFIGURABLE_REACTIONS.Builder.Palette"}}</h3>
|
|
<p class="notes">{{localize "CONFIGURABLE_REACTIONS.Builder.DragHint"}}</p>
|
|
|
|
<h4>{{localize "CONFIGURABLE_REACTIONS.Builder.TriggerPalette"}}</h4>
|
|
<div class="cr-palette">
|
|
{{#each triggerPalette}}
|
|
<article class="cr-palette-tile" data-cr-drag="trigger" data-cr-type="{{this.type}}" title="{{this.hint}}">
|
|
<i class="{{this.icon}}"></i>
|
|
<span>{{this.label}}</span>
|
|
<code>{{this.type}}</code>
|
|
</article>
|
|
{{/each}}
|
|
</div>
|
|
|
|
<h4>{{localize "CONFIGURABLE_REACTIONS.Builder.ActionPalette"}}</h4>
|
|
<div class="cr-palette">
|
|
{{#each actionPalette}}
|
|
<article class="cr-palette-tile" data-cr-drag="action" data-cr-type="{{this.type}}" title="{{this.hint}}">
|
|
<i class="{{this.icon}}"></i>
|
|
<span>{{this.label}}</span>
|
|
<code>{{this.type}}</code>
|
|
</article>
|
|
{{/each}}
|
|
</div>
|
|
|
|
<h3>{{localize "CONFIGURABLE_REACTIONS.Assignments.Title"}}</h3>
|
|
<ol class="cr-assignment-list">
|
|
{{#each assignments}}
|
|
<li>
|
|
<div>
|
|
<strong>{{this.name}}</strong>
|
|
<small>{{this.mode}} · {{this.reactionName}}</small>
|
|
</div>
|
|
<button type="button" data-action="removeAssignment" data-assignment-id="{{this.id}}" title="{{localize 'CONFIGURABLE_REACTIONS.Common.Remove'}}">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
</li>
|
|
{{/each}}
|
|
</ol>
|
|
</aside>
|
|
|
|
<main class="cr-main">
|
|
{{#if selectedReaction}}
|
|
<section class="cr-card cr-basics">
|
|
<div class="form-group">
|
|
<label>{{localize "CONFIGURABLE_REACTIONS.Reactions.Name"}}</label>
|
|
<input type="text" name="reactionName" value="{{selectedReaction.name}}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>{{localize "CONFIGURABLE_REACTIONS.Reactions.Enabled"}}</label>
|
|
<input type="checkbox" name="reactionEnabled" {{#if selectedReaction.enabled}}checked{{/if}}>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cr-builder-grid">
|
|
<div class="cr-drop-card" data-cr-drop="trigger">
|
|
<h3><i class="fa-solid fa-bolt"></i> {{localize "CONFIGURABLE_REACTIONS.Builder.TriggerArea"}}</h3>
|
|
{{#if activeTrigger}}
|
|
<div class="cr-flow-node cr-trigger-node">
|
|
<i class="{{activeTrigger.icon}}"></i>
|
|
<div>
|
|
<strong>{{activeTrigger.label}}</strong>
|
|
<code>{{selectedReaction.trigger.type}}</code>
|
|
{{#if triggerSpellName}}
|
|
<span class="cr-spell-chip"><i class="fa-solid fa-book-sparkles"></i> {{triggerSpellName}}</span>
|
|
{{else}}
|
|
{{#if activeTriggerAcceptsSpell}}
|
|
<small class="cr-inline-drop">{{localize "CONFIGURABLE_REACTIONS.Builder.DropSpellOnTrigger"}}</small>
|
|
{{/if}}
|
|
{{/if}}
|
|
|
|
{{#if activeTriggerIsDamage}}
|
|
<div class="cr-damage-builder">
|
|
<small class="cr-chip-label">{{localize "CONFIGURABLE_REACTIONS.Conditions.Damage.SelectedTypes"}}</small>
|
|
<div class="cr-chip-list cr-damage-chip-list">
|
|
{{#if selectedDamageTypes.length}}
|
|
{{#each selectedDamageTypes}}
|
|
<span class="cr-chip cr-damage-chip" title="{{this.label}}">
|
|
<span>{{this.label}}</span>
|
|
<button type="button" data-action="removeDamageType" data-damage-type="{{this.id}}" title="{{localize 'CONFIGURABLE_REACTIONS.Conditions.Damage.RemoveType' type=this.label}}">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
</span>
|
|
{{/each}}
|
|
{{else}}
|
|
<small class="cr-inline-drop">{{localize "CONFIGURABLE_REACTIONS.Conditions.Damage.NoTypes"}}</small>
|
|
{{/if}}
|
|
</div>
|
|
<select data-cr-damage-type-select>
|
|
<option value="">{{localize "CONFIGURABLE_REACTIONS.Conditions.Damage.SelectPlaceholder"}}</option>
|
|
{{#each availableDamageTypes}}
|
|
<option value="{{this.id}}">{{this.label}}</option>
|
|
{{/each}}
|
|
</select>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
{{#if triggerSpellName}}
|
|
<button type="button" data-action="clearTriggerSpell" title="{{localize 'CONFIGURABLE_REACTIONS.Common.Remove'}}">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
{{/if}}
|
|
</div>
|
|
{{else}}
|
|
<p class="cr-empty-drop">{{localize "CONFIGURABLE_REACTIONS.Builder.DropTriggerHere"}}</p>
|
|
{{/if}}
|
|
</div>
|
|
|
|
<div class="cr-drop-card" data-cr-drop="actions">
|
|
<h3><i class="fa-solid fa-list-check"></i> {{localize "CONFIGURABLE_REACTIONS.Builder.ActionArea"}}</h3>
|
|
<p class="notes">{{localize "CONFIGURABLE_REACTIONS.Builder.DropSpellCreatesAction"}}</p>
|
|
{{#if visualActions.length}}
|
|
<ol class="cr-action-flow">
|
|
{{#each visualActions}}
|
|
<li class="cr-flow-node cr-action-node" data-cr-drag="existingAction" data-action-index="{{this.index}}" {{#if this.isSpellAction}}data-cr-drop="action-spell"{{/if}}>
|
|
<i class="{{this.icon}}"></i>
|
|
<div>
|
|
<strong>{{this.label}}</strong>
|
|
<small>{{this.summary}}</small>
|
|
<code>{{this.type}}</code>
|
|
{{#if this.isSpellAction}}
|
|
{{#if this.spellName}}
|
|
<span class="cr-spell-chip"><i class="fa-solid fa-book-sparkles"></i> {{this.spellName}}</span>
|
|
{{else}}
|
|
<small class="cr-inline-drop">{{localize "CONFIGURABLE_REACTIONS.Builder.DropSpellOnAction"}}</small>
|
|
{{/if}}
|
|
{{/if}}
|
|
{{#if this.isStatusAction}}
|
|
<div class="cr-status-builder">
|
|
<small class="cr-chip-label">{{localize "CONFIGURABLE_REACTIONS.Actions.ApplyStatus.SelectedStatuses"}}</small>
|
|
<div class="cr-chip-list cr-status-chip-list">
|
|
{{#if this.selectedStatuses.length}}
|
|
{{#each this.selectedStatuses}}
|
|
<span class="cr-chip cr-status-chip" title="{{this.label}}">
|
|
<img src="{{this.icon}}" alt="">
|
|
<span>{{this.label}}</span>
|
|
<button type="button" data-action="removeActionStatus" data-action-index="{{../index}}" data-status-id="{{this.id}}" title="{{localize 'CONFIGURABLE_REACTIONS.Actions.ApplyStatus.RemoveStatus' status=this.label}}">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
</span>
|
|
{{/each}}
|
|
{{else}}
|
|
<small class="cr-inline-drop">{{localize "CONFIGURABLE_REACTIONS.Actions.ApplyStatus.NoStatuses"}}</small>
|
|
{{/if}}
|
|
</div>
|
|
<select data-cr-status-select data-action-index="{{this.index}}">
|
|
<option value="">{{localize "CONFIGURABLE_REACTIONS.Actions.ApplyStatus.SelectPlaceholder"}}</option>
|
|
{{#each this.availableStatuses}}
|
|
<option value="{{this.id}}">{{this.label}}</option>
|
|
{{/each}}
|
|
</select>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
<div class="cr-action-buttons">
|
|
{{#if this.spellName}}
|
|
<button type="button" data-action="clearActionSpell" data-action-index="{{this.index}}" title="{{localize 'CONFIGURABLE_REACTIONS.Common.Remove'}}">
|
|
<i class="fa-solid fa-book-xmark"></i>
|
|
</button>
|
|
{{/if}}
|
|
<button type="button" data-action="removeAction" data-action-index="{{this.index}}" title="{{localize 'CONFIGURABLE_REACTIONS.Common.Remove'}}">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
</div>
|
|
</li>
|
|
{{/each}}
|
|
</ol>
|
|
{{else}}
|
|
<p class="cr-empty-drop">{{localize "CONFIGURABLE_REACTIONS.Builder.DropActionHere"}}</p>
|
|
{{/if}}
|
|
</div>
|
|
</section>
|
|
|
|
<div class="form-group stacked cr-json-editor">
|
|
<label>{{localize "CONFIGURABLE_REACTIONS.Reactions.JsonEditor"}}</label>
|
|
<textarea name="reactionJson" spellcheck="false">{{selectedReactionJson}}</textarea>
|
|
</div>
|
|
{{else}}
|
|
<p>{{localize "CONFIGURABLE_REACTIONS.Reactions.None"}}</p>
|
|
{{/if}}
|
|
</main>
|
|
</section>
|
|
</div>
|