Support des propriétés d'items

Amélioration de l'interface d'édition d'items
This commit is contained in:
ZigmundKreud
2021-12-24 16:06:26 +01:00
parent 7531937e52
commit 7f6f813734
25 changed files with 680 additions and 442 deletions

View File

@ -0,0 +1,7 @@
<ol class="items-list">
<li class="item flexrow item-header">
<div class="item-name flex2">{{localize "BOL.ui.maneuvers"}}</div>
</li>
<li class="item flexrow"><div class="item-image roll-weapon"><img src="icons/skills/melee/unarmed-punch-fist.webp" title="Attaque à mains nues"/></div><h4 class="item-name flex2"><a class="item-edit">Attaque à mains nues</a></h4></li>
</ol>

View File

@ -2,7 +2,10 @@
<li class="item flexrow item-header">
<div class="item-name flex2">{{localize "BOL.ui.maneuvers"}}</div>
</li>
<li class="item flexrow"><div class="item-image roll-weapon"><img src="icons/skills/melee/unarmed-punch-fist.webp" title="Attaque à mains nues"/></div><h4 class="item-name flex2"><a class="item-edit">Attaque à mains nues</a></h4></li>
<li class="item flexrow">
<div class="item-image roll-weapon"><img src="icons/skills/melee/unarmed-punch-fist.webp" title="Attaque à mains nues"/></div>
<h4 class="item-name flex2"><a class="item-edit">Attaque à mains nues</a></h4>
</li>
</ol>
{{#each data.combat as | combat id|}}

View File

@ -1,22 +1,326 @@
<!--ARMES-->
<ol class="items-list">
<li class="item flexrow item-header">
<div class="item-name flex3">{{localize "BOL.itemCategory.equipment"}}</div>
<div class="item-field">{{localize "BOL.ui.quantity"}}</div>
<div class="item-field"></div>
<div class="item-name flex4 left">{{localize "BOL.ui.weapons"}}</div>
<div class="item-field flex2 center">{{localize "BOL.ui.slot"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.qty"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.price"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.equip"}}</div>
<div class="item-field flex1 right"></div>
</li>
{{#each data.equipment as |item id|}}
<li class="item flexrow" data-item-id="{{item._id}}">
{{#each weapons as |item id|}}
<li class="item flexrow" data-item-id="{{item._id}}">
<h4 class="item-name flex4 left">
<div class="item-image"><img src="{{item.img}}" title="{{item.name}}"/></div>
<h4 class="item-name flex3"><a class="item-edit">{{item.name}}</a></h4>
<div class="item-field">{{item.data.quantity}}</div>
<a class="item-edit">{{item.name}}</a>
</h4>
<div class="item-field flex2 center">
{{#if item.data.properties.equipable}}
<span class="item-field" style="font-size: smaller; font-style: italic; color:#4b4a44">{{localize (concat "BOL.equipmentSlots." item.data.properties.slot)}}</span>
{{/if}}
</div>
<div class="item-field group-btns flex1 center">
{{#if item.data.properties.stackable}}
<a class="inc-dec-btns" data-operator="minus" data-target="data.quantity" data-incr="1" data-min="0" data-max="{{item.data.properties.stacksize}}"><i class="fas fa-minus-square"></i></a>&nbsp;
<span class="item-field">{{item.data.quantity}}</span>&nbsp;
<a class="inc-dec-btns" data-operator="plus" data-target="data.quantity" data-incr="1" data-min="0" data-max="{{item.data.properties.stacksize}}"><i class="fas fa-plus-square"></i></a>
{{/if}}
</div>
<div class="item-field flex1 center">
<span class="item-field">{{item.data.price}}</span>
</div>
<div class="item-field flex1 center">
{{#if data.properties.equipable}}
{{#if data.worn}}
<div class="item-controls-1"><a class="item-control item-equip" title="{{localize "BOL.ui.unequip"}}"><i class="fas fa-shield-alt"></i></a></div>
<span class="item-field"><a class="item-control item-equip" title="{{localize "BOL.ui.unequip"}}"><i class="fas fa-shield-alt"></i></a></span>
{{else}}
<div class="item-controls-1"><a class="item-control item-equip" title="{{localize "BOL.ui.equip"}}" style="color:lightgray;"><i class="fas fa-shield-alt"></i></a></div>
<span class="item-field"><a class="item-control item-equip" title="{{localize "BOL.ui.equip"}}" style="color:lightgray;"><i class="fas fa-shield-alt"></i></a></span>
{{/if}}
{{/if}}
<div class="item-controls-1">
</div>
<div class="item-field flex1 right">
<a class="item-control item-delete" title="{{localize "BOL.ui.delete"}}"><i class="fas fa-trash"></i></a>
</div>
</li>
{{/each}}
</ol>
<!--PROTECTIONS-->
<ol class="items-list">
<li class="item flexrow item-header">
<div class="item-name flex4 left">{{localize "BOL.ui.protections"}}</div>
<div class="item-field flex2 center">{{localize "BOL.ui.slot"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.qty"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.price"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.equip"}}</div>
<div class="item-field flex1 right"></div>
</li>
{{#each protections as |item id|}}
<li class="item flexrow" data-item-id="{{item._id}}">
<h4 class="item-name flex4 left">
<div class="item-image"><img src="{{item.img}}" title="{{item.name}}"/></div>
<a class="item-edit">{{item.name}}</a>
</h4>
<div class="item-field flex2 center">
{{#if item.data.properties.equipable}}
<span class="item-field" style="font-size: smaller; font-style: italic; color:#4b4a44">{{localize (concat "BOL.equipmentSlots." item.data.properties.slot)}}</span>
{{/if}}
</div>
<div class="item-field group-btns flex1 center">
{{#if item.data.properties.stackable}}
<a class="inc-dec-btns" data-operator="minus" data-target="data.quantity" data-incr="1" data-min="0" data-max="{{item.data.properties.stacksize}}"><i class="fas fa-minus-square"></i></a>&nbsp;
<span class="item-field">{{item.data.quantity}}</span>&nbsp;
<a class="inc-dec-btns" data-operator="plus" data-target="data.quantity" data-incr="1" data-min="0" data-max="{{item.data.properties.stacksize}}"><i class="fas fa-plus-square"></i></a>
{{/if}}
</div>
<div class="item-field flex1 center">
<span class="item-field">{{item.data.price}}</span>
</div>
<div class="item-field flex1 center">
{{#if data.properties.equipable}}
{{#if data.worn}}
<span class="item-field"><a class="item-control item-equip" title="{{localize "BOL.ui.unequip"}}"><i class="fas fa-shield-alt"></i></a></span>
{{else}}
<span class="item-field"><a class="item-control item-equip" title="{{localize "BOL.ui.equip"}}" style="color:lightgray;"><i class="fas fa-shield-alt"></i></a></span>
{{/if}}
{{/if}}
</div>
<div class="item-field flex1 right">
<a class="item-control item-delete" title="{{localize "BOL.ui.delete"}}"><i class="fas fa-trash"></i></a>
</div>
</li>
{{/each}}
</ol>
<!--MUNITIONS-->
<ol class="items-list">
<li class="item flexrow item-header">
<div class="item-name flex4 left">{{localize "BOL.ui.ammos"}}</div>
<div class="item-field flex2 center">{{localize "BOL.ui.slot"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.qty"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.price"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.equip"}}</div>
<div class="item-field flex1 right"></div>
</li>
{{#each ammos as |item id|}}
<li class="item flexrow" data-item-id="{{item._id}}">
<h4 class="item-name flex4 left">
<div class="item-image"><img src="{{item.img}}" title="{{item.name}}"/></div>
<a class="item-edit">{{item.name}}</a>
</h4>
<div class="item-field flex2 center">
{{#if item.data.properties.equipable}}
<span class="item-field" style="font-size: smaller; font-style: italic; color:#4b4a44">{{localize (concat "BOL.equipmentSlots." item.data.properties.slot)}}</span>
{{/if}}
</div>
<div class="item-field group-btns flex1 center">
{{#if item.data.properties.stackable}}
<a class="inc-dec-btns" data-operator="minus" data-target="data.quantity" data-incr="1" data-min="0" data-max="{{item.data.properties.stacksize}}"><i class="fas fa-minus-square"></i></a>&nbsp;
<span class="item-field">{{item.data.quantity}}</span>&nbsp;
<a class="inc-dec-btns" data-operator="plus" data-target="data.quantity" data-incr="1" data-min="0" data-max="{{item.data.properties.stacksize}}"><i class="fas fa-plus-square"></i></a>
{{/if}}
</div>
<div class="item-field flex1 center">
<span class="item-field">{{item.data.price}}</span>
</div>
<div class="item-field flex1 center">
{{#if data.properties.equipable}}
{{#if data.worn}}
<span class="item-field"><a class="item-control item-equip" title="{{localize "BOL.ui.unequip"}}"><i class="fas fa-shield-alt"></i></a></span>
{{else}}
<span class="item-field"><a class="item-control item-equip" title="{{localize "BOL.ui.equip"}}" style="color:lightgray;"><i class="fas fa-shield-alt"></i></a></span>
{{/if}}
{{/if}}
</div>
<div class="item-field flex1 right">
<a class="item-control item-delete" title="{{localize "BOL.ui.delete"}}"><i class="fas fa-trash"></i></a>
</div>
</li>
{{/each}}
</ol>
<!--CONTENEURS-->
<ol class="items-list">
<li class="item flexrow item-header">
<div class="item-name flex4 left">{{localize "BOL.ui.containers"}}</div>
<div class="item-field flex2 center">{{localize "BOL.ui.slot"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.qty"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.price"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.equip"}}</div>
<div class="item-field flex1 right"></div>
</li>
{{#each containers as |item id|}}
<li class="item flexrow" data-item-id="{{item._id}}">
<h4 class="item-name flex4 left">
<div class="item-image"><img src="{{item.img}}" title="{{item.name}}"/></div>
<a class="item-edit">{{item.name}}</a>
</h4>
<div class="item-field flex2 center">
{{#if item.data.properties.equipable}}
<span class="item-field" style="font-size: smaller; font-style: italic; color:#4b4a44">{{localize (concat "BOL.equipmentSlots." item.data.properties.slot)}}</span>
{{/if}}
</div>
<div class="item-field group-btns flex1 center">
{{#if item.data.properties.stackable}}
<a class="inc-dec-btns" data-operator="minus" data-target="data.quantity" data-incr="1" data-min="0" data-max="{{item.data.properties.stacksize}}"><i class="fas fa-minus-square"></i></a>&nbsp;
<span class="item-field">{{item.data.quantity}}</span>&nbsp;
<a class="inc-dec-btns" data-operator="plus" data-target="data.quantity" data-incr="1" data-min="0" data-max="{{item.data.properties.stacksize}}"><i class="fas fa-plus-square"></i></a>
{{/if}}
</div>
<div class="item-field flex1 center">
<span class="item-field">{{item.data.price}}</span>
</div>
<div class="item-field flex1 center">
{{#if data.properties.equipable}}
{{#if data.worn}}
<span class="item-field"><a class="item-control item-equip" title="{{localize "BOL.ui.unequip"}}"><i class="fas fa-shield-alt"></i></a></span>
{{else}}
<span class="item-field"><a class="item-control item-equip" title="{{localize "BOL.ui.equip"}}" style="color:lightgray;"><i class="fas fa-shield-alt"></i></a></span>
{{/if}}
{{/if}}
</div>
<div class="item-field flex1 right">
<a class="item-control item-delete" title="{{localize "BOL.ui.delete"}}"><i class="fas fa-trash"></i></a>
</div>
</li>
{{/each}}
</ol>
<!--TRESOR-->
<ol class="items-list">
<li class="item flexrow item-header">
<div class="item-name flex4 left">{{localize "BOL.ui.treasure"}}</div>
<div class="item-field flex2 center">{{localize "BOL.ui.slot"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.qty"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.price"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.equip"}}</div>
<div class="item-field flex1 right"></div>
</li>
{{#each treasure as |item id|}}
<li class="item flexrow" data-item-id="{{item._id}}">
<h4 class="item-name flex4 left">
<div class="item-image"><img src="{{item.img}}" title="{{item.name}}"/></div>
<a class="item-edit">{{item.name}}</a>
</h4>
<div class="item-field flex2 center">
{{#if item.data.properties.equipable}}
<span class="item-field" style="font-size: smaller; font-style: italic; color:#4b4a44">{{localize (concat "BOL.equipmentSlots." item.data.properties.slot)}}</span>
{{/if}}
</div>
<div class="item-field group-btns flex1 center">
{{#if item.data.properties.stackable}}
<a class="inc-dec-btns" data-operator="minus" data-target="data.quantity" data-incr="1" data-min="0" data-max="{{item.data.properties.stacksize}}"><i class="fas fa-minus-square"></i></a>&nbsp;
<span class="item-field">{{item.data.quantity}}</span>&nbsp;
<a class="inc-dec-btns" data-operator="plus" data-target="data.quantity" data-incr="1" data-min="0" data-max="{{item.data.properties.stacksize}}"><i class="fas fa-plus-square"></i></a>
{{/if}}
</div>
<div class="item-field flex1 center">
<span class="item-field">{{item.data.price}}</span>
</div>
<div class="item-field flex1 center">
{{#if data.properties.equipable}}
{{#if data.worn}}
<span class="item-field"><a class="item-control item-equip" title="{{localize "BOL.ui.unequip"}}"><i class="fas fa-shield-alt"></i></a></span>
{{else}}
<span class="item-field"><a class="item-control item-equip" title="{{localize "BOL.ui.equip"}}" style="color:lightgray;"><i class="fas fa-shield-alt"></i></a></span>
{{/if}}
{{/if}}
</div>
<div class="item-field flex1 right">
<a class="item-control item-delete" title="{{localize "BOL.ui.delete"}}"><i class="fas fa-trash"></i></a>
</div>
</li>
{{/each}}
</ol>
<!--VEHICULES-->
<ol class="items-list">
<li class="item flexrow item-header">
<div class="item-name flex4 left">{{localize "BOL.ui.vehicles"}}</div>
<div class="item-field flex2 center">{{localize "BOL.ui.slot"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.qty"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.price"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.equip"}}</div>
<div class="item-field flex1 right"></div>
</li>
{{#each vehicles as |item id|}}
<li class="item flexrow" data-item-id="{{item._id}}">
<h4 class="item-name flex4 left">
<div class="item-image"><img src="{{item.img}}" title="{{item.name}}"/></div>
<a class="item-edit">{{item.name}}</a>
</h4>
<div class="item-field flex2 center">
{{#if item.data.properties.equipable}}
<span class="item-field" style="font-size: smaller; font-style: italic; color:#4b4a44">{{localize (concat "BOL.equipmentSlots." item.data.properties.slot)}}</span>
{{/if}}
</div>
<div class="item-field group-btns flex1 center">
{{#if item.data.properties.stackable}}
<a class="inc-dec-btns" data-operator="minus" data-target="data.quantity" data-incr="1" data-min="0" data-max="{{item.data.properties.stacksize}}"><i class="fas fa-minus-square"></i></a>&nbsp;
<span class="item-field">{{item.data.quantity}}</span>&nbsp;
<a class="inc-dec-btns" data-operator="plus" data-target="data.quantity" data-incr="1" data-min="0" data-max="{{item.data.properties.stacksize}}"><i class="fas fa-plus-square"></i></a>
{{/if}}
</div>
<div class="item-field flex1 center">
<span class="item-field">{{item.data.price}}</span>
</div>
<div class="item-field flex1 center">
{{#if data.properties.equipable}}
{{#if data.worn}}
<span class="item-field"><a class="item-control item-equip" title="{{localize "BOL.ui.unequip"}}"><i class="fas fa-shield-alt"></i></a></span>
{{else}}
<span class="item-field"><a class="item-control item-equip" title="{{localize "BOL.ui.equip"}}" style="color:lightgray;"><i class="fas fa-shield-alt"></i></a></span>
{{/if}}
{{/if}}
</div>
<div class="item-field flex1 right">
<a class="item-control item-delete" title="{{localize "BOL.ui.delete"}}"><i class="fas fa-trash"></i></a>
</div>
</li>
{{/each}}
</ol>
<!--DIVERS-->
<ol class="items-list">
<li class="item flexrow item-header">
<div class="item-name flex4 left">{{localize "BOL.ui.misc"}}</div>
<div class="item-field flex2 center">{{localize "BOL.ui.slot"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.qty"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.price"}}</div>
<div class="item-field flex1 center">{{localize "BOL.ui.equip"}}</div>
<div class="item-field flex1 right"></div>
</li>
{{#each misc as |item id|}}
<li class="item flexrow" data-item-id="{{item._id}}">
<h4 class="item-name flex4 left">
<div class="item-image"><img src="{{item.img}}" title="{{item.name}}"/></div>
<a class="item-edit">{{item.name}}</a>
</h4>
<div class="item-field flex2 center">
{{#if item.data.properties.equipable}}
<span class="item-field" style="font-size: smaller; font-style: italic; color:#4b4a44">{{localize (concat "BOL.equipmentSlots." item.data.properties.slot)}}</span>
{{/if}}
</div>
<div class="item-field group-btns flex1 center">
{{#if item.data.properties.stackable}}
<a class="inc-dec-btns" data-operator="minus" data-target="data.quantity" data-incr="1" data-min="0" data-max="{{item.data.properties.stacksize}}"><i class="fas fa-minus-square"></i></a>&nbsp;
<span class="item-field">{{item.data.quantity}}</span>&nbsp;
<a class="inc-dec-btns" data-operator="plus" data-target="data.quantity" data-incr="1" data-min="0" data-max="{{item.data.properties.stacksize}}"><i class="fas fa-plus-square"></i></a>
{{/if}}
</div>
<div class="item-field flex1 center">
<span class="item-field">{{item.data.price}}</span>
</div>
<div class="item-field flex1 center">
{{#if data.properties.equipable}}
{{#if data.worn}}
<span class="item-field"><a class="item-control item-equip" title="{{localize "BOL.ui.unequip"}}"><i class="fas fa-shield-alt"></i></a></span>
{{else}}
<span class="item-field"><a class="item-control item-equip" title="{{localize "BOL.ui.equip"}}" style="color:lightgray;"><i class="fas fa-shield-alt"></i></a></span>
{{/if}}
{{/if}}
</div>
<div class="item-field flex1 right">
<a class="item-control item-delete" title="{{localize "BOL.ui.delete"}}"><i class="fas fa-trash"></i></a>
</div>
</li>

View File

@ -1,20 +1,28 @@
{{#each data.features as | features key|}}
{{#each features as | features key|}}
{{#if (gt (count features.items) 0)}}
<ol class="items-list">
<li class="item flexrow item-header">
<div class="item-name flex2">{{localize features.label}}</div>
<div class="item-name flex4 left">{{localize features.label}}</div>
{{#if ranked}}
<div class="item-field">{{localize "BOL.ui.rank"}}</div>
<div class="item-field flex2 center">{{localize "BOL.ui.rank"}}</div>
{{/if}}
<div class="item-field flex1 right"></div>
</li>
{{#each features.items as |item id|}}
<li class="item flexrow" data-item-id="{{item._id}}">
<div class="item-image {{#if (equals key "careers")}}roll-career{{/if}}"><img src="{{item.img}}" title="{{item.name}}"/></div>
<h4 class="item-name flex2"><a class="item-edit">{{item.name}}</a></h4>
<h4 class="item-name flex4 left">
<div class="item-image {{#if (equals key "careers")}}roll-career{{/if}}"><img src="{{item.img}}" title="{{item.name}}"/></div>
<a class="item-edit">{{item.name}}</a>
</h4>
<div class="item-field group-btns center flex2">
{{#if (equals key "careers")}}
<span class="item-field">{{item.data.rank}}</span>
<a class="inc-dec-btns" data-operator="minus" data-target="data.rank" data-incr="1" data-min="0" data-max="5"><i class="fas fa-minus-square"></i></a>&nbsp;
<span class="item-field">{{item.data.rank}}</span>&nbsp;
<a class="inc-dec-btns" data-operator="plus" data-target="data.rank" data-incr="1" data-min="0" data-max="5"><i class="fas fa-plus-square"></i></a>
{{/if}}
<div class="item-controls-1">
</div>
<div class="item-field flex1 right">
<a class="item-control item-log" title="Log Item"><i class="far fa-comment"></i></a>
<a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
</div>
</li>