76 lines
2.1 KiB
HTML

{include "layout.html"}
{block "content"}
<div class="town shop">
<div class="title"><h3>{town.Name} Shop</h3></div>
<section>
<p>Buying weapons will increase your Attack. Buying armor and shields will increase your Defense.</p>
<p>Click an item name to purchase it.</p>
<p>The following items are available in {town.Name}:</p>
</section>
<section>
<table class="item-shop">
{for item in itemlist}
<tr>
<td>
{if item.Type == 1}
<img src="/assets/images/icon_weapon.gif" alt="Weapon" title="Weapon">
{/if}
{if item.Type == 2}
<img src="/assets/images/icon_armor.gif" alt="Armor" title="Armor">
{/if}
{if item.Type == 3}
<img src="/assets/images/icon_shield.gif" alt="Shield" title="Shield">
{/if}
</td>
<td>
{if user.WeaponID == item.ID or user.ArmorID == item.ID or user.ShieldID == item.ID}
<span class="light">{item.Name}</span>
{else}
{if user.Gold >= item.Value}
<a class="buy-item" data-item="{item.Name}" data-cost="{item.Value}" href="/town/shop/buy/{item.ID}">{item.Name}</a>
{else}
<span class="light">{item.Name}</span>
{/if}
{/if}
</td>
<td>
{item.Att}
{if item.Type == 1}Attack{else}Defense{/if}
</td>
<td>
{if user.WeaponID == item.ID or user.ArmorID == item.ID or user.ShieldID == item.ID}
<span class="light">Already owned</span>
{else}
{if user.Gold >= item.Value}
{item.Value}G
{else}
<span class="light">{item.Value}G (can't afford)</span>
{/if}
{/if}
</td>
</tr>
{/for}
</table>
</section>
<section>
<p>If you've changed your mind, you may also return back to <a href="/town">town</a>.</p>
</section>
</div>
{/block}
{block "scripts"}
<script>
document.addEventListener('DOMContentLoaded', () => {
const shopModal = new ConfirmModal({
linkSelector: '.buy-item',
messageGenerator: (link) => `Are you sure you want to buy ${link.dataset.item} for ${link.dataset.cost}G?`,
confirmText: 'Buy Now',
cancelText: 'Nevermind'
})
})
</script>
{/block}