|
|
{% 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 %}
|