You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
155 lines
4.6 KiB
155 lines
4.6 KiB
{% extends "base.html" %}
|
|
{% set active_page = "spells" %}
|
|
|
|
{% block title %}Spell List{% endblock %}
|
|
{% block content %}
|
|
<div class="uk-flex uk-flex-center uk-margin-bottom uk-margin-top">
|
|
<h1 class="uk-text-center"><strong>Adventurer Conqueror King</strong>Spell Reference</h1>
|
|
</div>
|
|
<div class="uk-flex uk-flex-bottom uk-flex-center uk-margin-small-bottom">
|
|
<div>
|
|
<label for="spell_level">Spell Level</label>
|
|
<input type="number" name="spell_level" id="spell_level" class="uk-input" value="0">
|
|
</div>
|
|
<div class="uk-margin-left">
|
|
<div>
|
|
<label for="divine_toggle">Divine</label>
|
|
<input type="checkbox" name="divine_toggle" id="divine_toggle" class="uk-checkbox" checked>
|
|
</div>
|
|
<div>
|
|
<label for="arcane_toggle">Arcane</label>
|
|
<input type="checkbox" name="arcane_toggle" id="arcane_toggle" class="uk-checkbox" checked>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-flex uk-flex-bottom uk-flex-center uk-margin-large-bottom">
|
|
<div>
|
|
<label for="spell_query">Name Search</label>
|
|
<input type="text" name="spell_query" id="spell_query" class="uk-input"/>
|
|
</div>
|
|
<div class="uk-margin-left">
|
|
<button class="uk-button uk-button-primary" onclick="applyFilters();">Filter</button>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="uk-divider-icon">
|
|
|
|
{% if spells %}
|
|
<div class="uk-grid-medium uk-grid-match uk-flex-center" uk-grid>
|
|
{% for spell in spells %}
|
|
<div class="acks-npc-card" id="{{ spell.dom_id }}">
|
|
<div class="uk-card uk-card-body uk-card-default uk-box-shadow-hover-large">
|
|
<h4 class="uk-card-title uk-margin-small-top">{{ spell.name }}</h4>
|
|
<ul>
|
|
<li>Arcane: {{ spell.arcane }}</li>
|
|
<li>Divine: {{ spell.divine }}</li>
|
|
<li>Duration: {{ spell.duration }}</li>
|
|
<li>Range: {{ spell.range }}</li>
|
|
</ul>
|
|
<div>
|
|
{{ spell.description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<script type="text/javascript">
|
|
var spells = [{% for spell in spells %} {{ spell.roll20_format | tojson }}, {% endfor %}];
|
|
|
|
function filterSpell(filters, spell) {
|
|
function name2id(name) {
|
|
return "#" + name.toLowerCase().replace(/[\*',]/g, "").replace(/\s/g, "_");
|
|
}
|
|
|
|
let hide = false;
|
|
|
|
// Handle search query filtering
|
|
if(filters.spell_query) {
|
|
if(spell.name.toLowerCase().indexOf(filters.spell_query.toLowerCase()) < 0) {
|
|
hide = true;
|
|
}
|
|
}
|
|
|
|
// Handle school and level filtering
|
|
if(!filters.arcane_included && spell.is_arcane) {
|
|
hide = true;
|
|
}
|
|
|
|
if(!filters.divine_included && spell.is_divine) {
|
|
hide = true;
|
|
}
|
|
|
|
if(filters.spell_level > 0) {
|
|
if(spell.is_arcane && spell.arcane != filters.spell_level) {
|
|
hide = true;
|
|
}
|
|
if(spell.is_divine && spell.divine != filters.spell_level) {
|
|
hide = true;
|
|
}
|
|
}
|
|
|
|
// Hide this spell-card if appropriate
|
|
if(hide) {
|
|
document.querySelector(name2id(spell.name)).classList.add('uk-hidden');
|
|
}
|
|
}
|
|
|
|
function resetFiltering() {
|
|
var hidden_spells = document.querySelectorAll("div.acks-npc-card.uk-hidden");
|
|
for(let hd of hidden_spells) {
|
|
hd.classList.remove('uk-hidden');
|
|
}
|
|
}
|
|
|
|
function applyFilters() {
|
|
resetFiltering();
|
|
|
|
filters = {
|
|
spell_level: document.querySelector('#spell_level').value,
|
|
spell_query: document.querySelector('#spell_query').value,
|
|
arcane_included: document.querySelector('#arcane_toggle').checked,
|
|
divine_included: document.querySelector('#divine_toggle').checked,
|
|
};
|
|
|
|
spells.forEach((spell, index) => { filterSpell(filters, spell); });
|
|
}
|
|
</script>
|
|
<style>
|
|
table.item-table, table.item-table th {
|
|
font-size: 12px;
|
|
}
|
|
div.stat-block > div {
|
|
text-align: center;
|
|
padding: 3px;
|
|
width: 26px;
|
|
}
|
|
div.stat-block > div > div:first-child {
|
|
font-weight: bold;
|
|
color: green;
|
|
}
|
|
div.stat-block > div > div:last-child {
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
color: #888;
|
|
}
|
|
div.save-block > div > div:first-child {
|
|
font-weight: bold;
|
|
color: purple;
|
|
}
|
|
div.save-block > div > div:last-child {
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
color: #888;
|
|
}
|
|
div.acks-npc-card {
|
|
width: 400px;
|
|
}
|
|
h1 strong {
|
|
display: block;
|
|
font-size: 50%;
|
|
opacity: 0.65;
|
|
}
|
|
</style>
|
|
{% endblock %}
|