Dragon-Knight/templates/leftside.html
2025-08-22 15:03:34 -05:00

67 lines
2.0 KiB
HTML

<section>
<div class="title"><img src="/assets/images/button_location.gif" alt="Location" title="Location"></div>
<div><b>
{if user.Currently == "In Town" and town != nil}
In {town.Name}
{else}
{user.Currently}
{/if}
</b></div>
<div>{user.X}{if user.X < 0}W{else}E{/if}, {user.Y}{if user.Y < 0}S{else}N{/if}</div>
{if user.Currently != "Fighting"}
<form id="move-compass" action="/move" method="post" >
{csrf}
<button id="north" name="direction" value="0">North</button>
<div class="mid">
<button id="west" name="direction" value="3">West</button>
<button id="east" name="direction" value="1">East</button>
</div>
<button id="south" name="direction" value="2">South</button>
</form>
{else}
<img id="move-compass-disabled" src="/assets/images/compass.webp" alt="Can't run!" title="Can't run!">
{/if}
</section>
<section>
<div class="title"><img src="/assets/images/button_towns.gif" alt="Towns" title="Towns"></div>
{if #_towns > 0}
<i>Teleport to:</i>
{for t in _towns}
{if town != nil and t.Name == town.Name}
<span>{t.Name} <i>(here)</i></span>
{else}
{if user.TP < t.TPCost}
<span class="light">{t.Name}</span>
{else}
<a class="teleport-link" href="/teleport/{t.ID}" data-town="{t.Name}" data-cost="{t.TPCost}">{t.Name}</a>
{/if}
{/if}
{/for}
{else}
<i>No town maps</i>
{/if}
</section>
<section id="functions">
<div class="title"><img src="/assets/images/button_functions.gif" alt="Functions" title="Functions"></div>
<a href="/">Home</a>
<a href="/forum">Forum</a>
<a href="/change-password">Change Password</a>
<a href="#">Log Out</a>
<a href="/help">Help</a>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
const teleportModal = new ConfirmModal({
linkSelector: '.teleport-link',
messageGenerator: (link) => `Are you sure you want to teleport to ${link.dataset.town} for ${link.dataset.cost} TP?`,
confirmText: 'Teleport',
cancelText: 'Stay'
})
})
</script>