Charakterbogen anpassen #7 (#9)

- Use of flexboxes in two columns for better display
- Introduction of item containers for the different storage of items

Co-authored-by: Ender <harald@drueppels.de>
Co-authored-by: Byroks <byroks@gmail.com>
Reviewed-on: Byroks/foundry-vtt-system-midgard5#9
Reviewed-by: Byroks <byroks@gmail.com>
This commit was merged in pull request #9.
This commit is contained in:
2024-01-03 15:57:15 +01:00
co-authored by Ender Byroks
parent 6baf9a0269
commit b945f22710
15 changed files with 466 additions and 166 deletions
+157 -152
View File
@@ -1,157 +1,162 @@
<table>
<thead>
<tr>
<th class="title" style="text-align: center">{{localize "midgard5.currency-gold"}}</th>
<th class="title" style="text-align: center">{{localize "midgard5.currency-silver"}}</th>
<th class="title" style="text-align: center">{{localize "midgard5.currency-copper"}}</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fixed-value"><input type="number" name="data.info.gold" value="{{data.info.gold}}"></td>
<td class="fixed-value"><input type="number" name="data.info.silver" value="{{data.info.silver}}"></td>
<td class="fixed-value"><input type="number" name="data.info.copper" value="{{data.info.copper}}"></td>
</tr>
</tbody>
</table>
<div class="flexbox">
<div class="flexcolumn-2">
<table>
<thead>
<tr>
<th class="title">{{localize "TYPES.Item.weapon"}}</th>
<th class="title">{{localize "midgard5.ew"}}</th>
<th class="title"></th>
<th class="title"></th>
</tr>
</thead>
<tbody>
{{#each data.calc.gear.weapons as |item itemId|}}
<tr data-item="{{itemId}}">
<td class="padding edit-item">{{item.label}}</td>
<td class="fixed-value">{{item.calc.ew}}</td>
<td class="fixed-value"><button class="roll-button roll-weapon-button"></button></td>
<td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
</tr>
{{/each}}
<div class="flexpart">
<div class="flexpart-header"><img src="icons/commodities/currency/coins-assorted-mix-copper-silver-gold.webp" class="flexpart-icon">Geld</div>
<table>
<thead class="theader">
<tr>
<th class="title" style="text-align: center">{{localize "midgard5.currency-gold"}}</th>
<th class="title" style="text-align: center">{{localize "midgard5.currency-silver"}}</th>
<th class="title" style="text-align: center">{{localize "midgard5.currency-copper"}}</th>
</tr>
</thead>
<tbody>
<tr height = 10px></tr>
<tr>
<td class="fixed-value"><input type="number" name="data.info.gold" value="{{data.info.gold}}"></td>
<td class="fixed-value"><input type="number" name="data.info.silver" value="{{data.info.silver}}"></td>
<td class="fixed-value"><input type="number" name="data.info.copper" value="{{data.info.copper}}"></td>
</tr>
</tbody>
</table>
</div>
<tr data-item="{{itemId}}">
<td class="padding edit-item">{{localize "midgard5.brawl"}}</td>
<td class="center">{{data.calc.stats.brawlFw}}</td>
<td class="fixed-value"><button class="roll-button roll-brawl-button"></button></td>
<td class="fixed-value"></td>
</tr>
</tbody>
</table>
<div class="flexpart">
<div class="flexpart-header"><img src="icons/tools/hand/scale-balances-merchant-brown.webp" class="flexpart-icon">{{localize "TYPES.Item.item"}}</div>
<table>
<thead class="theader">
<tr>
<th class="title">{{localize "TYPES.Item.item"}}</th>
<th class="title center">{{localize "midgard5.equipped"}}</th>
<th class="title center">{{localize "midgard5.item-quantity"}}</th>
<th class="title center">{{localize "midgard5.item-value"}}</th>
<th class="title"></th>
<th class="title"></th>
</tr>
</thead>
<tbody>
<tr height = 10px></tr>
</tr>
{{#each data.calc.gear.items as |item itemId|}}
<tr data-item="{{itemId}}">
<td class="padding">
<span class="edit-item">{{item.label}}</span>
</td>
<td>
{{#if item.equipped}}
<img src="/systems/midgard5/assets/icons/icon/black-hand-shield.svg" class="table-icon">
{{/if}}
</td>
<td>
<i class="fa fa-minus-circle quantity-decrease" style="cursor: pointer"></i>
<span>{{item.quantity}}</span>
<i class="fa fa-plus-circle quantity-increase" style="cursor: pointer"></i>
</td>
<td style="text-align: start">
{{#unless (or (eq item.value 0) (eq item.currency ""))}}
<span class="spell-process">{{item.value}} {{localize (m5concat "midgard5.currency-" item.currency)}}</span>
{{/unless}}
</td>
<td class="fixed-value">{{#if item.rollExist}}<button class="roll-button roll-consumable-item"></button>{{/if}}</td>
<td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
<table>
<thead>
<tr>
<th class="title">{{localize "TYPES.Item.defensiveWeapon"}}</th>
<th class="title">{{localize "midgard5.ew"}}</th>
<th class="title"></th>
<th class="title"></th>
</tr>
</thead>
<tbody>
{{#each data.calc.gear.defensiveWeapons as |item itemId|}}
<tr data-item="{{itemId}}">
<td class="padding edit-item">{{item.label}}</td>
<td class="fixed-value">{{item.calc.ew}}</td>
<td class="fixed-value"><button class="roll-button roll-weapon-button"></button></td>
<td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
</tr>
{{/each}}
<div class="flexcolumn-2">
<tr data-item="{{itemId}}">
<td class="padding edit-item">{{localize "midgard5.defense"}}</td>
<td class="center">{{add data.calc.stats.defense.value data.calc.stats.defenseBonus.value}}</td>
<td class="fixed-value"><button class="roll-button roll-defense-button"></button></td>
<td class="fixed-value"></td>
</tr>
<div class="flexpart">
<div class="flexpart-header"><img src="icons/containers/chest/chest-simple-box-brown.webp" class="flexpart-icon">{{localize "TYPES.Item.container"}}</div>
<table>
<thead class="theader">
<tr>
<th class="title">{{localize "TYPES.Item.container"}}</th>
<th class="title center">{{localize "midgard5.equipped"}}</th>
<th class="title center">{{localize "midgard5.item-value"}}</th>
<th class="title"></th>
<th class="title"></th>
</tr>
</thead>
<tbody>
<tr height = 10px></tr>
</tr>
{{#each data.calc.gear.containers as |item itemId|}}
<tr data-item="{{itemId}}">
<td class="padding">
<span class="edit-item">{{item.label}}</span>
</td>
<td>
{{#if item.equipped}}
<img src="/systems/midgard5/assets/icons/icon/black-hand-shield.svg" class="table-icon">
{{/if}}
</td>
<td style="text-align: start">
{{#unless (or (eq item.value 0) (eq item.currency ""))}}
<span class="spell-process">{{item.value}} {{localize (m5concat "midgard5.currency-" item.currency)}}</span>
{{/unless}}
</td>
<td class="fixed-value">{{#if item.rollExist}}<button class="roll-button roll-consumable-item"></button>{{/if}}</td>
<td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<tr data-item="{{itemId}}">
<td class="padding edit-item">{{localize "midgard5.resistanceMind"}}</td>
<td class="center">{{data.calc.stats.resistanceMind.value}}</td>
<td class="fixed-value"><button class="roll-button roll-resistanceMind-button"></button></td>
<td class="fixed-value"></td>
</tr>
<tr data-item="{{itemId}}">
<td class="padding edit-item">{{localize "midgard5.resistanceBody"}}</td>
<td class="center">{{data.calc.stats.resistanceBody.value}}</td>
<td class="fixed-value"><button class="roll-button roll-resistanceBody-button"></button></td>
<td class="fixed-value"></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th class="title">{{localize "TYPES.Item.armor"}}</th>
<th class="title">{{localize "midgard5.actor-lp-short"}}</th>
<th class="title">{{localize "midgard5.actor-ap-short"}}</th>
<th class="title">{{localize "midgard5.attackBonus-short"}}</th>
<th class="title">{{localize "midgard5.defenseBonus-short"}}</th>
<th class="title">B</th>
<th class="title">Gw</th>
<th class="title"></th>
</tr>
</thead>
<tbody>
{{#each data.calc.gear.armor as |item itemId|}}
<tr data-item="{{itemId}}">
<td class="padding">
<span class="edit-item">{{item.label}}</span>
{{#if item.equipped}}
<span class="spell-process">{{localize "midgard5.equipped"}}</span>
{{/if}}
</td>
<td class="fixed-value">{{actorItemValue ../actor._id itemId "lpProtection" ../actor.isToken}}</td>
<td class="fixed-value">{{actorItemValue ../actor._id itemId "apProtection"}}</td>
<td class="fixed-value">{{actorItemValue ../actor._id itemId "stats.attackBonus"}}</td>
<td class="fixed-value">{{actorItemValue ../actor._id itemId "stats.defenseBonus"}}</td>
<td class="fixed-value">{{actorItemValue ../actor._id itemId "stats.movementBonus"}}</td>
<td class="fixed-value">{{actorItemValue ../actor._id itemId "attributeMod.gw"}}</td>
<td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
</tr>
{{/each}}
</tbody>
</table>
<table>
<thead>
<tr>
<th class="title">{{localize "TYPES.Item.item"}}</th>
<th class="title center">{{localize "midgard5.item-quantity"}}</th>
<th class="title center">{{localize "midgard5.item-value"}}</th>
<th class="title"></th>
<th class="title"></th>
</tr>
</thead>
<tbody>
</tr>
{{#each data.calc.gear.items as |item itemId|}}
<tr data-item="{{itemId}}">
<td class="padding">
<span class="edit-item">{{item.label}}</span>
{{#if item.equipped}}
<span class="spell-process">{{localize "midgard5.equipped"}}</span>
{{/if}}
</td>
<td>
<i class="fa fa-minus-circle quantity-decrease" style="cursor: pointer"></i>
<span>{{item.quantity}}</span>
<i class="fa fa-plus-circle quantity-increase" style="cursor: pointer"></i>
</td>
<td style="text-align: start">
{{#unless (or (eq item.value 0) (eq item.currency ""))}}
<span class="spell-process">{{item.value}} {{localize (m5concat "midgard5.currency-" item.currency)}}</span>
{{/unless}}
</td>
<td class="fixed-value">{{#if item.rollExist}}<button class="roll-button roll-consumable-item"></button>{{/if}}</td>
<td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
</tr>
{{/each}}
</tbody>
</table>
{{#each data.calc.gear.containers as |container containerId|}}
<div class="flexpart">
<div class="flexpart-header"><img src="{{container.icon}}" class="flexpart-icon">{{container.label}}</div>
<table>
<thead class="theader">
<tr>
<th class="title">{{localize "TYPES.Item.item"}}</th>
<th class="title center">{{localize "midgard5.equipped"}}</th>
<th class="title center">{{localize "TYPES.Item.container"}}</th>
<th class="title center">{{localize "midgard5.item-quantity"}}</th>
<th class="title center">{{localize "midgard5.item-value"}}</th>
<th class="title"></th>
<th class="title"></th>
</tr>
</thead>
<tbody>
<tr height = 10px></tr>
</tr>
{{#each ../data.calc.gear.items as |item itemId|}}
{{#if (eq item.containerId containerId)}}
<tr data-item="{{itemId}}">
<td class="padding">
<span class="edit-item">{{item.label}}</span>
</td>
<td>
{{#if item.equipped}}
<img src="/systems/midgard5/assets/icons/icon/black-hand-shield.svg" class="table-icon">
{{/if}}
</td>
<td>
{{localize "TYPES.Item.container"}}
</td>
<td>
<i class="fa fa-minus-circle quantity-decrease" style="cursor: pointer"></i>
<span>{{item.quantity}}</span>
<i class="fa fa-plus-circle quantity-increase" style="cursor: pointer"></i>
</td>
<td style="text-align: start">
{{#unless (or (eq item.value 0) (eq item.currency ""))}}
<span class="spell-process">{{item.value}} {{localize (m5concat "midgard5.currency-" item.currency)}}</span>
{{/unless}}
</td>
<td class="fixed-value">{{#if item.rollExist}}<button class="roll-button roll-consumable-item"></button>{{/if}}</td>
<td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
</tr>
{{/if}}
{{/each}}
</tbody>
</table>
</div>
{{/each}}
</div>
</div>
+103
View File
@@ -30,4 +30,107 @@
</tr>
{{/each}}
</tbody>
</table>
<table>
<thead>
<tr>
<th class="title">{{localize "TYPES.Item.weapon"}}</th>
<th class="title">{{localize "midgard5.ew"}}</th>
<th class="title"></th>
<th class="title"></th>
</tr>
</thead>
<tbody>
{{#each data.calc.gear.weapons as |item itemId|}}
<tr data-item="{{itemId}}">
<td class="padding edit-item">{{item.label}}</td>
<td class="fixed-value">{{item.calc.ew}}</td>
<td class="fixed-value"><button class="roll-button roll-weapon-button"></button></td>
<td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
</tr>
{{/each}}
<tr data-item="{{itemId}}">
<td class="padding edit-item">{{localize "midgard5.brawl"}}</td>
<td class="center">{{data.calc.stats.brawlFw}}</td>
<td class="fixed-value"><button class="roll-button roll-brawl-button"></button></td>
<td class="fixed-value"></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th class="title">{{localize "TYPES.Item.defensiveWeapon"}}</th>
<th class="title">{{localize "midgard5.ew"}}</th>
<th class="title"></th>
<th class="title"></th>
</tr>
</thead>
<tbody>
{{#each data.calc.gear.defensiveWeapons as |item itemId|}}
<tr data-item="{{itemId}}">
<td class="padding edit-item">{{item.label}}</td>
<td class="fixed-value">{{item.calc.ew}}</td>
<td class="fixed-value"><button class="roll-button roll-weapon-button"></button></td>
<td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
</tr>
{{/each}}
<tr data-item="{{itemId}}">
<td class="padding edit-item">{{localize "midgard5.defense"}}</td>
<td class="center">{{add data.calc.stats.defense.value data.calc.stats.defenseBonus.value}}</td>
<td class="fixed-value"><button class="roll-button roll-defense-button"></button></td>
<td class="fixed-value"></td>
</tr>
<tr data-item="{{itemId}}">
<td class="padding edit-item">{{localize "midgard5.resistanceMind"}}</td>
<td class="center">{{data.calc.stats.resistanceMind.value}}</td>
<td class="fixed-value"><button class="roll-button roll-resistanceMind-button"></button></td>
<td class="fixed-value"></td>
</tr>
<tr data-item="{{itemId}}">
<td class="padding edit-item">{{localize "midgard5.resistanceBody"}}</td>
<td class="center">{{data.calc.stats.resistanceBody.value}}</td>
<td class="fixed-value"><button class="roll-button roll-resistanceBody-button"></button></td>
<td class="fixed-value"></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th class="title">{{localize "TYPES.Item.armor"}}</th>
<th class="title">{{localize "midgard5.actor-lp-short"}}</th>
<th class="title">{{localize "midgard5.actor-ap-short"}}</th>
<th class="title">{{localize "midgard5.attackBonus-short"}}</th>
<th class="title">{{localize "midgard5.defenseBonus-short"}}</th>
<th class="title">B</th>
<th class="title">Gw</th>
<th class="title"></th>
</tr>
</thead>
<tbody>
{{#each data.calc.gear.armor as |item itemId|}}
<tr data-item="{{itemId}}">
<td class="padding">
<span class="edit-item">{{item.label}}</span>
{{#if item.equipped}}
<span class="spell-process">{{localize "midgard5.equipped"}}</span>
{{/if}}
</td>
<td class="fixed-value">{{actorItemValue ../actor._id itemId "lpProtection" ../actor.isToken}}</td>
<td class="fixed-value">{{actorItemValue ../actor._id itemId "apProtection"}}</td>
<td class="fixed-value">{{actorItemValue ../actor._id itemId "stats.attackBonus"}}</td>
<td class="fixed-value">{{actorItemValue ../actor._id itemId "stats.defenseBonus"}}</td>
<td class="fixed-value">{{actorItemValue ../actor._id itemId "stats.movementBonus"}}</td>
<td class="fixed-value">{{actorItemValue ../actor._id itemId "attributeMod.gw"}}</td>
<td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
</tr>
{{/each}}
</tbody>
</table>
+1 -1
View File
@@ -15,7 +15,7 @@
</tr>
<tr height = 10px></tr>
<tr>
<td rowspan="8" width=128><img style="max-width: 128px; height: 160px; border: 0px solid black;" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" /></td>
<td rowspan="8" width=128><img style="max-width: 128px; height: 128px; border: 0px solid black;" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" /></td>
<td></td>
<td colspan="3">
<input list="races" type="search" name="data.info.race" value="{{data.info.race}}" />