mirror of
https://github.com/RoY7x/worldbuilding.git
synced 2025-09-06 23:27:43 -04:00
10: Add attribute groups base implementation
- Added support for attribute groups - Added rollable buttons to formula attributes - Added additional i18n translation strings
This commit is contained in:
parent
c515f8d5b7
commit
f69e3841ff
13 changed files with 827 additions and 151 deletions
|
@ -2,18 +2,18 @@
|
|||
|
||||
{{!-- Sheet Header --}}
|
||||
<header class="sheet-header">
|
||||
<img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="100" width="100"/>
|
||||
<img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="100" width="100" />
|
||||
<div class="header-fields">
|
||||
<h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name"/></h1>
|
||||
<h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name" /></h1>
|
||||
<div class="resource">
|
||||
<input type="text" name="data.health.value" value="{{data.health.value}}" data-dtype="Number"/>
|
||||
<input type="text" name="data.health.value" value="{{data.health.value}}" data-dtype="Number" />
|
||||
<span> / </span>
|
||||
<input type="text" name="data.health.max" value="{{data.health.max}}" data-dtype="Number"/>
|
||||
<input type="text" name="data.health.max" value="{{data.health.max}}" data-dtype="Number" />
|
||||
</div>
|
||||
<div class="resource">
|
||||
<input type="text" name="data.power.value" value="{{data.power.value}}" data-dtype="Number"/>
|
||||
<input type="text" name="data.power.value" value="{{data.power.value}}" data-dtype="Number" />
|
||||
<span> / </span>
|
||||
<input type="text" name="data.power.max" value="{{data.power.max}}" data-dtype="Number"/>
|
||||
<input type="text" name="data.power.max" value="{{data.power.max}}" data-dtype="Number" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
@ -36,46 +36,58 @@
|
|||
{{!-- Owned Items Tab --}}
|
||||
<div class="tab items" data-group="primary" data-tab="items">
|
||||
<ol class="item-list">
|
||||
{{#each actor.items as |item id|}}
|
||||
{{#each actor.items as |item id|}}
|
||||
<li class="item flexrow" data-item-id="{{item._id}}">
|
||||
<img src="{{item.img}}" title="{{item.name}}" width="24" height="24"/>
|
||||
<img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
|
||||
<h4 class="item-name">{{item.name}}</h4>
|
||||
{{!-- Iterate through all attributes on the item and output buttons for any that are formula. --}}
|
||||
<div class="item-buttons">
|
||||
{{#each item.data.attributes as |itemAttr key|}}
|
||||
{{#each item.data.attributes as |itemAttr key|}}
|
||||
{{#if (eq itemAttr.dtype "Formula")}}
|
||||
{{!-- Use the items.name.key format for shorthand. --}}
|
||||
{{#if ../../shorthand}}
|
||||
<button class="item-button rollable" data-roll="@items.{{slugify item.name}}.{{key}}" title="{{itemAttr.value}}">{{itemAttr.label}}</button>
|
||||
{{!-- Use the items.name.attributes.key.value format otherwise. --}}
|
||||
{{else}}
|
||||
<button class="item-button rollable" data-roll="@items.{{slugify item.name}}.attributes.{{key}}.value" title="{{itemAttr.value}}">{{itemAttr.label}}</button>
|
||||
{{/if}}
|
||||
{{!-- Use the items.name.key format for shorthand. --}}
|
||||
{{#if ../../shorthand}}
|
||||
<button class="item-button rollable" data-roll="@items.{{slugify item.name}}.{{key}}" data-label="{{ itemAttr.label }}"
|
||||
title="{{itemAttr.value}}">{{itemAttr.label}}</button>
|
||||
{{!-- Use the items.name.attributes.key.value format otherwise. --}}
|
||||
{{else}}
|
||||
<button class="item-button rollable"
|
||||
data-roll="@items.{{slugify item.name}}.attributes.{{key}}.value" data-label="{{ itemAttr.label }}"
|
||||
title="{{itemAttr.value}}">{{itemAttr.label}}</button>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="item-controls">
|
||||
<a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
|
||||
<a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
{{/each}}
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
{{!-- Attributes Tab --}}
|
||||
<div class="tab attributes" data-group="primary" data-tab="attributes">
|
||||
<header class="attributes-header flexrow">
|
||||
<span class="attribute-key">Attribute Key</span>
|
||||
<span class="attribute-value">Value</span>
|
||||
<span class="attribute-label">Label</span>
|
||||
<span class="attribute-dtype">Data Type</span>
|
||||
<a class="attribute-control" data-action="create"><i class="fas fa-plus"></i></a>
|
||||
<span class="attribute-key">{{localize "SIMPLE.AttributeKey"}}</span>
|
||||
<span class="attribute-value">{{localize "SIMPLE.AttributeValue"}}</span>
|
||||
<span class="attribute-label">{{localize "SIMPLE.AttributeLabel"}}</span>
|
||||
<span class="attribute-dtype">{{localize "SIMPLE.AttributeDtype"}}</span>
|
||||
<a class="attribute-control" data-action="create" data-group="{{group}}"><i class="fas fa-plus"></i></a>
|
||||
</header>
|
||||
|
||||
{{!-- Render the attribute list partial. --}}
|
||||
{{> "systems/worldbuilding/templates/parts/sheet-attributes.html" attributes=data.attributes dtypes=dtypes}}
|
||||
{{> "systems/worldbuilding/templates/parts/sheet-attributes.html" attributes=data.ungroupedAttributes dtypes=dtypes}}
|
||||
|
||||
{{!-- Render the grouped attributes partial and control. --}}
|
||||
<div class="groups">
|
||||
{{> "systems/worldbuilding/templates/parts/sheet-groups.html" attributes=data.groupedAttributes groups=data.groups dtypes=dtypes}}
|
||||
|
||||
<div class="group-controls flexrow">
|
||||
<input class="group-prefix" type="text" val=""/>
|
||||
<a class="button group-control" data-action="create-group"><i class="fas fa-plus"></i>Add Attribute Group</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
|
||||
</form>
|
|
@ -1,15 +1,15 @@
|
|||
<form class="{{cssClass}}" autocomplete="off">
|
||||
<header class="sheet-header">
|
||||
<img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}"/>
|
||||
<img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" />
|
||||
<div class="header-fields">
|
||||
<h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeholder="Name"/></h1>
|
||||
<h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeholder="Name" /></h1>
|
||||
<div class="resource">
|
||||
<label>Quantity</label>
|
||||
<input type="text" name="data.quantity" value="{{data.quantity}}" data-dtype="Number"/>
|
||||
<label>Quantity</label>
|
||||
<input type="text" name="data.quantity" value="{{data.quantity}}" data-dtype="Number" />
|
||||
</div>
|
||||
<div class="resource">
|
||||
<label>Weight</label>
|
||||
<input type="text" name="data.weight" value="{{data.weight}}" data-dtype="Number"/>
|
||||
<label>Weight</label>
|
||||
<input type="text" name="data.weight" value="{{data.weight}}" data-dtype="Number" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
@ -31,6 +31,7 @@
|
|||
{{!-- Attributes Tab --}}
|
||||
<div class="tab attributes" data-group="primary" data-tab="attributes">
|
||||
<header class="attributes-header flexrow">
|
||||
<span class="attribute-roll"></span>
|
||||
<span class="attribute-key">Attribute Key</span>
|
||||
<span class="attribute-value">Value</span>
|
||||
<span class="attribute-label">Label</span>
|
||||
|
@ -42,4 +43,4 @@
|
|||
{{> "systems/worldbuilding/templates/parts/sheet-attributes.html" attributes=data.attributes dtypes=dtypes}}
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</form>
|
|
@ -1,41 +1,55 @@
|
|||
<ol class="attributes-list">
|
||||
{{#each attributes as |attr key|}}
|
||||
<li class="attribute flexrow" data-attribute="{{key}}">
|
||||
<input class="attribute-key" type="text" name="data.attributes.{{key}}.key" value="{{key}}"/>
|
||||
{{!-- Handle booleans. --}}
|
||||
{{#if attr.isCheckbox}}
|
||||
<label class="attribute-value checkbox"><input type="checkbox" name="data.attributes.{{key}}.value" {{checked attr.value}}/></label>
|
||||
{{else}}
|
||||
{{!-- Handle resources. --}}
|
||||
{{#if attr.isResource}}
|
||||
<div class="attribute-group flexrow">
|
||||
<span class="attribute-col flexcol">
|
||||
<label for="data.attributes.{{key}}.min">{{localize "SIMPLE.ResourceMin"}}</label>
|
||||
<input class="attribute-value" type="text" name="data.attributes.{{key}}.min" value="{{attr.min}}" data-dtype="{{attr.dtype}}"/>
|
||||
</span>
|
||||
<span class="attribute-col flexcol">
|
||||
<label for="data.attributes.{{key}}.value">{{localize "SIMPLE.ResourceValue"}}</label>
|
||||
<input class="attribute-value" type="text" name="data.attributes.{{key}}.value" value="{{attr.value}}" data-dtype="{{attr.dtype}}"/>
|
||||
</span>
|
||||
<span class="attribute-col flexcol">
|
||||
<label for="data.attributes.{{key}}.max">{{localize "SIMPLE.ResourceMax"}}</label>
|
||||
<input class="attribute-value" type="text" name="data.attributes.{{key}}.max" value="{{attr.max}}" data-dtype="{{attr.dtype}}"/>
|
||||
</span>
|
||||
<section class="attributes-group">
|
||||
<ol class="attributes-list">
|
||||
{{#each attributes as |attr key|}}
|
||||
<li class="attribute flexrow" data-attribute="{{#if attr.group}}{{attr.group}}.{{/if}}{{key}}">
|
||||
<div class="attribute-key-wrapper flexrow">
|
||||
{{#if (eq attr.dtype "Formula")}}
|
||||
<a class="attribute-roll" data-label="{{attr.label}}" data-roll="{{attr.value}}"><i class="fas fa-dice-d20"></i></a>
|
||||
{{/if}}
|
||||
<input class="attribute-key" type="text" name="data.attributes.{{#if attr.group}}{{attr.group}}.{{/if}}{{key}}.key" value="{{key}}" placeholder="{{localize "SIMPLE.AttributeKey"}}"/>
|
||||
</div>
|
||||
{{!-- Handle other input types. --}}
|
||||
{{else}}
|
||||
<input class="attribute-value" type="text" name="data.attributes.{{key}}.value" value="{{attr.value}}" data-dtype="{{attr.dtype}}"/>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
<input class="attribute-label" type="text" name="data.attributes.{{key}}.label" value="{{attr.label}}"/>
|
||||
<select class="attribute-dtype" name="data.attributes.{{key}}.dtype">
|
||||
{{#select attr.dtype}}
|
||||
{{#each ../dtypes as |t|}}
|
||||
<option value="{{t}}">{{t}}</option>
|
||||
{{/each}}
|
||||
{{/select}}
|
||||
</select>
|
||||
<a class="attribute-control" data-action="delete"><i class="fas fa-trash"></i></a>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ol>
|
||||
{{!-- Handle booleans. --}}
|
||||
{{#if attr.isCheckbox}}
|
||||
<label class="attribute-value checkbox"><input type="checkbox" name="data.attributes.{{#if attr.group}}{{attr.group}}.{{/if}}{{key}}.value"
|
||||
{{checked attr.value}} /></label>
|
||||
{{else}}
|
||||
{{!-- Handle resources. --}}
|
||||
{{#if attr.isResource}}
|
||||
<div class="attribute-group flexrow">
|
||||
<span class="attribute-col flexcol">
|
||||
<label for="data.attributes.{{#if attr.group}}{{attr.group}}.{{/if}}{{key}}.min">{{localize "SIMPLE.ResourceMin"}}</label>
|
||||
<input class="attribute-value" type="text" name="data.attributes.{{#if attr.group}}{{attr.group}}.{{/if}}{{key}}.min" value="{{attr.min}}"
|
||||
data-dtype="Number" />
|
||||
</span>
|
||||
<span class="attribute-col flexcol">
|
||||
<label for="data.attributes.{{#if attr.group}}{{attr.group}}.{{/if}}{{key}}.value">{{localize "SIMPLE.ResourceValue"}}</label>
|
||||
<input class="attribute-value" type="text" name="data.attributes.{{#if attr.group}}{{attr.group}}.{{/if}}{{key}}.value"
|
||||
value="{{attr.value}}" data-dtype="Number" />
|
||||
</span>
|
||||
<span class="attribute-col flexcol">
|
||||
<label for="data.attributes.{{#if attr.group}}{{attr.group}}.{{/if}}{{key}}.max">{{localize "SIMPLE.ResourceMax"}}</label>
|
||||
<input class="attribute-value" type="text" name="data.attributes.{{#if attr.group}}{{attr.group}}.{{/if}}{{key}}.max" value="{{attr.max}}"
|
||||
data-dtype="Number" />
|
||||
</span>
|
||||
</div>
|
||||
{{!-- Handle other input types. --}}
|
||||
{{else}}
|
||||
<input class="attribute-value" type="text" name="data.attributes.{{#if attr.group}}{{attr.group}}.{{/if}}{{key}}.value" value="{{attr.value}}"
|
||||
data-dtype="{{attr.dtype}}" placeholder="{{localize "SIMPLE.AttributeValue"}}"/>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
<input class="attribute-label" type="text" name="data.attributes.{{#if attr.group}}{{attr.group}}.{{/if}}{{key}}.label" value="{{attr.label}}"
|
||||
placeholder="{{localize "SIMPLE.AttributeLabel"}}"/>
|
||||
<select class="attribute-dtype" name="data.attributes.{{#if attr.group}}{{attr.group}}.{{/if}}{{key}}.dtype">
|
||||
{{#select attr.dtype}}
|
||||
{{#each ../dtypes as |t|}}
|
||||
<option value="{{t}}">{{t}}</option>
|
||||
{{/each}}
|
||||
{{/select}}
|
||||
</select>
|
||||
<input type="hidden" name="data.attributes.{{#if attr.group}}{{attr.group}}.{{/if}}{{key}}.group" value="{{attr.group}}" />
|
||||
<a class="attribute-control" data-action="delete"><i class="fas fa-trash"></i></a>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ol>
|
||||
</section>
|
21
templates/parts/sheet-groups.html
Normal file
21
templates/parts/sheet-groups.html
Normal file
|
@ -0,0 +1,21 @@
|
|||
<ol class="groups-list">
|
||||
{{#each groups as |group groupKey|}}
|
||||
<li class="group" data-group="{{groupKey}}">
|
||||
<div class="group-header flexrow">
|
||||
<input class="group-key" type="text" readonly name="data.groups.{{groupKey}}.key" value="{{groupKey}}" />
|
||||
<input class="group-label" type="text" name="data.groups.{{groupKey}}.label" value="{{group.label}}" placeholder="Group Label" />
|
||||
<select class="group-dtype" name="data.groups.{{groupKey}}.dtype">
|
||||
{{#select group.dtype}}
|
||||
{{#each ../dtypes as |t|}}
|
||||
<option value="{{t}}">{{t}}</option>
|
||||
{{/each}}
|
||||
{{/select}}
|
||||
</select>
|
||||
<a class="attribute-control" data-action="create" data-group="{{groupKey}}" data-dtype="{{group.dtype}}"><i class="fas fa-plus"></i></a>
|
||||
<a class="group-control" data-action="delete-group"><i class="fas fa-trash"></i></a>
|
||||
</div>
|
||||
|
||||
{{> "systems/worldbuilding/templates/parts/sheet-attributes.html" attributes=group.attributes group=groupKey dtypes=../dtypes}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ol>
|
Loading…
Add table
Add a link
Reference in a new issue