61 lines
1.5 KiB
HTML

{include "layout.html"}
{block "content"}
<div class="town shop">
<div class="title"><h3>{town.Name} Maps</h3></div>
<section>
<p>Buying maps will put the town in your Travel To box, and it won't cost you as many TP to get there.</p>
<p>Click a town name to purchase its map.</p>
</section>
<section>
<table class="shop">
{for map in maplist}
<tr>
<td>
{if map.Owned == false}
{if user.Gold >= map.Cost}
<a class="buy-item" data-town="{map.Name}" data-cost="{map.Cost}" href="/town/maps/buy/{map.ID}">{map.Name}</a>
{else}
<span class="light">{map.Name}</span>
{/if}
{else}
{map.Name}
{/if}
</td>
<td>
{if map.Owned == false}
{if user.Gold >= map.Cost}
{map.Cost}G
{else}
{map.Cost}G <span class="light">(can't afford)</span>
{/if}
{else}
<span>{map.X}, {map.Y}</span><br>
<span>TP Cost: {map.TP}</span>
{/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 the map to ${link.dataset.town} for ${link.dataset.cost}G?`,
confirmText: 'Buy Now',
cancelText: 'Nevermind'
})
})
</script>
{/block}