- Add inline header with item slots and currency inputs (gold/silver/copper) - Style item sections (weapons, armor, equipment) with proper list layout - Constrain item thumbnails to 32x32px - Add colored stat badges for damage (red) and armor (blue) - Style equip toggle and delete buttons with hover states - Add responsive layout for narrow containers 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
124 lines
5.3 KiB
Handlebars
124 lines
5.3 KiB
Handlebars
{{!-- Character Sheet Inventory Tab --}}
|
|
<section class="sheet-body tab-content inventory-tab">
|
|
{{!-- Item Slots & Wealth Header --}}
|
|
<div class="inventory-header">
|
|
<div class="header-stat item-slots {{#if itemSlots.overburdened}}overburdened{{/if}}">
|
|
<label>{{localize "VAGABOND.ItemSlots"}}</label>
|
|
<div class="stat-value">
|
|
<span class="current">{{itemSlots.used}}</span>
|
|
<span class="separator">/</span>
|
|
<span class="max">{{itemSlots.max}}</span>
|
|
</div>
|
|
{{#if itemSlots.overburdened}}
|
|
<span class="overburdened-warning" data-tooltip="{{localize 'VAGABOND.Overburdened'}}">
|
|
<i class="fa-solid fa-exclamation-triangle"></i>
|
|
</span>
|
|
{{/if}}
|
|
</div>
|
|
|
|
<div class="header-stat gold">
|
|
<label>{{localize "VAGABOND.Gold"}}</label>
|
|
<input type="number" name="system.wealth.gold" value="{{wealth.gold}}" min="0" />
|
|
</div>
|
|
|
|
<div class="header-stat silver">
|
|
<label>{{localize "VAGABOND.Silver"}}</label>
|
|
<input type="number" name="system.wealth.silver" value="{{wealth.silver}}" min="0" />
|
|
</div>
|
|
|
|
<div class="header-stat copper">
|
|
<label>{{localize "VAGABOND.Copper"}}</label>
|
|
<input type="number" name="system.wealth.copper" value="{{wealth.copper}}" min="0" />
|
|
</div>
|
|
</div>
|
|
|
|
{{!-- Weapons Section --}}
|
|
<div class="inventory-section weapons">
|
|
<div class="section-header-row">
|
|
<h2 class="section-header">{{localize "VAGABOND.Weapons"}}</h2>
|
|
<button type="button" class="item-create" data-action="itemCreate" data-type="weapon"
|
|
data-tooltip="{{localize 'VAGABOND.CreateWeapon'}}">
|
|
<i class="fa-solid fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
<ul class="item-list">
|
|
{{#each items.weapons}}
|
|
<li class="item-row" data-item-id="{{this.id}}">
|
|
<img class="item-img" src="{{this.img}}" alt="{{this.name}}" />
|
|
<span class="item-name" data-action="itemEdit">{{this.name}}</span>
|
|
<span class="item-damage">{{this.system.damage}}</span>
|
|
<span class="item-slots">{{this.system.slots}} slot{{#if (gt this.system.slots 1)}}s{{/if}}</span>
|
|
<button type="button" class="item-equipped {{#if this.system.equipped}}active{{/if}}"
|
|
data-action="itemToggleEquipped" data-tooltip="{{localize 'VAGABOND.ToggleEquipped'}}">
|
|
<i class="fa-solid fa-shield-halved"></i>
|
|
</button>
|
|
<button type="button" class="item-delete" data-action="itemDelete"
|
|
data-tooltip="{{localize 'VAGABOND.DeleteItem'}}">
|
|
<i class="fa-solid fa-trash"></i>
|
|
</button>
|
|
</li>
|
|
{{else}}
|
|
<li class="item-row empty">{{localize "VAGABOND.NoWeapons"}}</li>
|
|
{{/each}}
|
|
</ul>
|
|
</div>
|
|
|
|
{{!-- Armor Section --}}
|
|
<div class="inventory-section armor">
|
|
<div class="section-header-row">
|
|
<h2 class="section-header">{{localize "VAGABOND.Armor"}}</h2>
|
|
<button type="button" class="item-create" data-action="itemCreate" data-type="armor"
|
|
data-tooltip="{{localize 'VAGABOND.CreateArmor'}}">
|
|
<i class="fa-solid fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
<ul class="item-list">
|
|
{{#each items.armor}}
|
|
<li class="item-row" data-item-id="{{this.id}}">
|
|
<img class="item-img" src="{{this.img}}" alt="{{this.name}}" />
|
|
<span class="item-name" data-action="itemEdit">{{this.name}}</span>
|
|
<span class="item-armor-value">+{{this.system.armorValue}} Armor</span>
|
|
<span class="item-slots">{{this.system.slots}} slot{{#if (gt this.system.slots 1)}}s{{/if}}</span>
|
|
<button type="button" class="item-equipped {{#if this.system.equipped}}active{{/if}}"
|
|
data-action="itemToggleEquipped" data-tooltip="{{localize 'VAGABOND.ToggleEquipped'}}">
|
|
<i class="fa-solid fa-shield-halved"></i>
|
|
</button>
|
|
<button type="button" class="item-delete" data-action="itemDelete"
|
|
data-tooltip="{{localize 'VAGABOND.DeleteItem'}}">
|
|
<i class="fa-solid fa-trash"></i>
|
|
</button>
|
|
</li>
|
|
{{else}}
|
|
<li class="item-row empty">{{localize "VAGABOND.NoArmor"}}</li>
|
|
{{/each}}
|
|
</ul>
|
|
</div>
|
|
|
|
{{!-- Equipment Section --}}
|
|
<div class="inventory-section equipment">
|
|
<div class="section-header-row">
|
|
<h2 class="section-header">{{localize "VAGABOND.Equipment"}}</h2>
|
|
<button type="button" class="item-create" data-action="itemCreate" data-type="equipment"
|
|
data-tooltip="{{localize 'VAGABOND.CreateEquipment'}}">
|
|
<i class="fa-solid fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
<ul class="item-list">
|
|
{{#each items.equipment}}
|
|
<li class="item-row" data-item-id="{{this.id}}">
|
|
<img class="item-img" src="{{this.img}}" alt="{{this.name}}" />
|
|
<span class="item-name" data-action="itemEdit">{{this.name}}</span>
|
|
<span class="item-quantity">x{{this.system.quantity}}</span>
|
|
<span class="item-slots">{{this.system.slots}} slot{{#if (gt this.system.slots 1)}}s{{/if}}</span>
|
|
<button type="button" class="item-delete" data-action="itemDelete"
|
|
data-tooltip="{{localize 'VAGABOND.DeleteItem'}}">
|
|
<i class="fa-solid fa-trash"></i>
|
|
</button>
|
|
</li>
|
|
{{else}}
|
|
<li class="item-row empty">{{localize "VAGABOND.NoEquipment"}}</li>
|
|
{{/each}}
|
|
</ul>
|
|
</div>
|
|
</section>
|