135 lines
3.4 KiB
HTML
135 lines
3.4 KiB
HTML
{include "layout.html"}
|
|
|
|
{block "content"}
|
|
<div class="town shop">
|
|
<div class="title"><h3>{town.Name} Shop</h3></div>
|
|
{error_message}
|
|
<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 at this town:</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}
|
|
<span class="light">{if item.Type == 1}Attack{else}Defense{/if}</span>
|
|
</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 id="shop-modal" class="modal">
|
|
<div class="content">
|
|
<p id="msg">Are you sure you want to buy this item?</p>
|
|
<div class="buttons">
|
|
<button id="confirm" class="btn btn-primary">Buy Now</button>
|
|
<button id="cancel" class="btn">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/block}
|
|
|
|
{block "scripts"}
|
|
<script>
|
|
class ShopModal {
|
|
constructor() {
|
|
this.modal = document.querySelector("#shop-modal")
|
|
this.message = this.modal.querySelector("#msg")
|
|
this.confirmBtn = this.modal.querySelector("#confirm")
|
|
this.cancelBtn = this.modal.querySelector("#cancel")
|
|
this.currentUrl = null
|
|
|
|
this.init()
|
|
}
|
|
|
|
init() {
|
|
document.querySelectorAll('.buy-item').forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault()
|
|
this.show(link.href, link.dataset.item, link.dataset.cost)
|
|
})
|
|
})
|
|
|
|
this.confirmBtn.addEventListener('click', () => this.confirm())
|
|
this.cancelBtn.addEventListener('click', () => this.hide())
|
|
|
|
this.modal.addEventListener('click', (e) => {
|
|
if (e.target === this.modal) this.hide()
|
|
})
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && this.modal.style.display === 'block') {
|
|
this.hide()
|
|
}
|
|
})
|
|
}
|
|
|
|
show(url, itemName, itemCost) {
|
|
this.currentUrl = url
|
|
this.message.textContent = `Are you sure you want to buy ${itemName} for ${itemCost}G?`
|
|
this.modal.style.display = 'block'
|
|
this.confirmBtn.focus()
|
|
}
|
|
|
|
hide() {
|
|
this.modal.style.display = 'none'
|
|
this.currentUrl = null
|
|
}
|
|
|
|
confirm() {
|
|
if (this.currentUrl) {
|
|
window.location.href = this.currentUrl
|
|
}
|
|
this.hide()
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
new ShopModal()
|
|
})
|
|
</script>
|
|
{/block}
|