vagabond-rpg-foundryvtt/templates/actor/character-inventory.hbs
Cal Corum 7489b60281 Style inventory tab with item lists and header
- 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>
2025-12-14 21:19:00 -06:00

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>