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

  1. {% extends "base.html" %}
  2. {% set active_page = "spells" %}
  3. {% block title %}Spell List{% endblock %}
  4. {% block content %}
  5. <div class="uk-flex uk-flex-center uk-margin-bottom uk-margin-top">
  6. <h1 class="uk-text-center"><strong>Legends of Palisma</strong>Spell Reference</h1>
  7. </div>
  8. <div class="uk-flex uk-flex-bottom uk-flex-center uk-margin-small-bottom">
  9. <div>
  10. <label for="spell_level">Spell Level</label>
  11. <input type="number" name="spell_level" id="spell_level" class="uk-input" value="0">
  12. </div>
  13. <div class="uk-margin-left">
  14. <div>
  15. <label for="divine_toggle">Divine</label>
  16. <input type="checkbox" name="divine_toggle" id="divine_toggle" class="uk-checkbox" checked>
  17. </div>
  18. <div>
  19. <label for="arcane_toggle">Arcane</label>
  20. <input type="checkbox" name="arcane_toggle" id="arcane_toggle" class="uk-checkbox" checked>
  21. </div>
  22. </div>
  23. </div>
  24. <div class="uk-flex uk-flex-bottom uk-flex-center uk-margin-large-bottom">
  25. <div>
  26. <label for="spell_query">Name Search</label>
  27. <input type="text" name="spell_query" id="spell_query" class="uk-input"/>
  28. </div>
  29. <div class="uk-margin-left">
  30. <button class="uk-button uk-button-primary" onclick="applyFilters();">Filter</button>
  31. </div>
  32. </div>
  33. <hr class="uk-divider-icon">
  34. {% if spells %}
  35. <div class="uk-grid-medium uk-grid-match uk-flex-center" uk-grid>
  36. {% for spell in spells %}
  37. <div class="acks-npc-card" id="{{ spell.dom_id }}">
  38. <div class="uk-card uk-card-body uk-card-default uk-box-shadow-hover-large">
  39. <h4 class="uk-card-title uk-margin-small-top">{{ spell.name }}</h4>
  40. <ul>
  41. <li>Arcane: {{ spell.arcane }}</li>
  42. <li>Divine: {{ spell.divine }}</li>
  43. <li>Duration: {{ spell.duration }}</li>
  44. <li>Range: {{ spell.range }}</li>
  45. </ul>
  46. <div>
  47. {{ spell.description }}
  48. </div>
  49. </div>
  50. </div>
  51. {% endfor %}
  52. </div>
  53. {% endif %}
  54. <script type="text/javascript">
  55. var spells = [{% for spell in spells %} {{ spell.roll20_format | tojson }}, {% endfor %}];
  56. function filterSpell(filters, spell) {
  57. function name2id(name) {
  58. return "#" + name.toLowerCase().replace(/[\*',]/g, "").replace(/\s/g, "_");
  59. }
  60. let hide = false;
  61. // Handle search query filtering
  62. if(filters.spell_query) {
  63. if(spell.name.toLowerCase().indexOf(filters.spell_query.toLowerCase()) < 0) {
  64. hide = true;
  65. }
  66. }
  67. // Handle school and level filtering
  68. if(!filters.arcane_included && spell.is_arcane) {
  69. hide = true;
  70. }
  71. if(!filters.divine_included && spell.is_divine) {
  72. hide = true;
  73. }
  74. if(filters.spell_level > 0) {
  75. if(spell.is_arcane && spell.arcane != filters.spell_level) {
  76. hide = true;
  77. }
  78. if(spell.is_divine && spell.divine != filters.spell_level) {
  79. hide = true;
  80. }
  81. }
  82. // Hide this spell-card if appropriate
  83. if(hide) {
  84. document.querySelector(name2id(spell.name)).classList.add('uk-hidden');
  85. }
  86. }
  87. function resetFiltering() {
  88. var hidden_spells = document.querySelectorAll("div.acks-npc-card.uk-hidden");
  89. for(let hd of hidden_spells) {
  90. hd.classList.remove('uk-hidden');
  91. }
  92. }
  93. function applyFilters() {
  94. resetFiltering();
  95. filters = {
  96. spell_level: document.querySelector('#spell_level').value,
  97. spell_query: document.querySelector('#spell_query').value,
  98. arcane_included: document.querySelector('#arcane_toggle').checked,
  99. divine_included: document.querySelector('#divine_toggle').checked,
  100. };
  101. spells.forEach((spell, index) => { filterSpell(filters, spell); });
  102. }
  103. </script>
  104. <style>
  105. table.item-table, table.item-table th {
  106. font-size: 12px;
  107. }
  108. div.stat-block > div {
  109. text-align: center;
  110. padding: 3px;
  111. width: 26px;
  112. }
  113. div.stat-block > div > div:first-child {
  114. font-weight: bold;
  115. color: green;
  116. }
  117. div.stat-block > div > div:last-child {
  118. font-weight: bold;
  119. font-size: 12px;
  120. color: #888;
  121. }
  122. div.save-block > div > div:first-child {
  123. font-weight: bold;
  124. color: purple;
  125. }
  126. div.save-block > div > div:last-child {
  127. font-weight: bold;
  128. font-size: 12px;
  129. color: #888;
  130. }
  131. div.acks-npc-card {
  132. width: 400px;
  133. }
  134. h1 strong {
  135. display: block;
  136. font-size: 50%;
  137. opacity: 0.65;
  138. }
  139. </style>
  140. {% endblock %}