dd-spell-scry/src/SpellList.ts

import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { Spell, spellSort } from './Spell';
import { Modal } from 'bootstrap';

@customElement('spell-list')
export class SpellList extends LitElement {
  allSpells: Spell[] = [
    {
      name: 'Palsy',
      cost: 2,
      color: 'Black',
      category: 'Basic',
      cantripMagic: true,
      description: 'Target any opposing army. Subtract one result from the target\'s non-maneuver rolls until the beginning of your next turn.',
    },
    {
      name: 'Decay',
      cost: 3,
      color: 'Black',
      category: 'Goblins',
      description: 'Targt any opposing army. Subtract two melee results from the target\'s rolls until the beginning of your next turn.',
    },
    {
      name: 'Evil Eye',
      cost: 3,
      color: 'Black',
      category: 'Undead',
      description: 'Target any opposing army. Subtract two save results from the target\'s rolls until the beginning of your next turn.',
    },
    {
      name: 'Magic Drain',
      cost: 3,
      color: 'Black',
      category: 'Frostwings',
      description: 'Target any terrain. Subtract two magic results from all army rolls at that terrain until the beginning of your next turn.',
    },
    {
      name: 'Restless Dead',
      cost: 3,
      color: 'Black',
      category: 'Undead',
      cantripMagic: true,
      reserveMagic: true,
      description: 'Target any army. Add three maneuver to the target\'s rolls until the beginning of your next turn.',
    },
    {
      name: 'Necromantic Wave',
      cost: 5,
      color: 'Black',
      category: 'Lava Elves',
      reserveMagic: true,
      description: 'Target any army. All units in the target army may count magic results as if they were melee or missile results until the beginning of your next turn.',
    },
    {
      name: 'Open Grave',
      cost: 6,
      color: 'Black',
      category: 'Undead',
      reserveMagic: true,
      description: 'Target any army. Until the beginning of your next turn, units in the targt army that are killed following a save roll by any army-targeting effects (including melee and missile damage) go to their owner\'s Reserve Area instead of the DUA. If no save roll is possible when units are killed, Open Grave does nothing.',
    },
    {
      name: 'Soiled Ground',
      cost: 6,
      color: 'Black',
      category: 'Basic',
      description: 'Target any terrain. Until the beginning of your next turn, any unit killed at that terrain that goes into the DUA must make a save roll. Those that o not generate a save result are buried.',
    },
    {
      name: 'Blizzard',
      cost: 3,
      color: 'Blue',
      category: 'Coral Elves',
      description: 'Target any terrain. Subtract three melee results from all army rolls at that terrain until the beginning of your next turn.',
    },
    {
      name: 'Wilding',
      cost: 3,
      color: 'Blue',
      category: 'Feral',
      reserveMagic: true,
      description: 'Target any army. The target army may double the melee and save results of any one unit until the beginning of your next turn. Select the unit to double its results after the army makes the roll.',
    },
    {
      name: 'Wind Walk',
      cost: 4,
      color: 'Blue',
      category: 'Basic',
      reserveMagic: true,
      description: 'Target any army. Add four maneuver results to the target\'s rolls until the beginning of your next turn.',
    },
    {
      name: 'Fields of Ice',
      cost: 5,
      color: 'Blue',
      category: 'Frostwings',
      description: 'Target any terrain. Subtract four maneuver results from all army rolls at that terrain until the beginning of your next turn. Ties in maneuver roll sat that terrain are won by the counter-maneuvering army while the terrain is under the effect of Fields of Ice.',
    },
    {
      name: 'Watery Double',
      cost: 2,
      color: 'Green',
      category: 'Basic',
      cantripMagic: true,
      reserveMagic: true,
      description: 'Target any army. Add one save result to the target\'s rolls until the beginning of your next turn.',
    },
    {
      name: 'Accelerated Growth',
      cost: 3,
      color: 'Green',
      category: 'Treefolk',
      cantripMagic: true,
      reserveMagic: true,
      description: 'Target your DUA. When a two (or greaterS) health Treefolk unit is killed, you ma instead exchange it with a one health Treefolk unit from your DUA. This effect lasts until the beginning of your next turn.',
    },
    {
      name: 'Deluge',
      cost: 5,
      color: 'Green',
      category: 'Coral Elves',
      description: 'Target any terrain. Subtract three maneuver and three missile results from all army rolls at that terrain until the beginning of your next turn.',
    },
    {
      name: 'Mire',
      cost: 5,
      color: 'Green',
      category: 'Swamp Stalkers',
      description: 'Target any terrain. Until the beginning of your next turn, any army marching at that terrain must first make a maneuver roll. The marching player then selects health-worth of units up to the maneuver results generated by this first roll. The army uses only those units, and items they carry, for any rolls in the march for both the maneuver step and the action step.',
    },
    {
      name: 'Wall of Fog',
      cost: 6,
      color: 'Green',
      category: 'Basic',
      description: 'Target any terrain. Subtract six missile results from any missile attack targeting an army at that terrain until the beginning of your next turn.',
    },
    {
      name: 'Ash Storm',
      cost: 2,
      color: 'Red',
      category: 'Basic',
      cantripMagic: true,
      description: 'Target any terrain. Subtract one result from army rolls at that terrain until the beginning of your next turn.',
    },
    {
      name: 'Flash Fire',
      cost: 3,
      color: 'Red',
      category: 'Firewalkers',
      cantripMagic: true,
      reserveMagic: true,
      description: 'Target any army. During any non-maneuver army roll, the target\'s owner may re-roll any one unit in the target army once, ignoring the previous result. This effecdt lasts until the beginning of your next turn.',
    },
    {
      name: 'Fiery Weapon',
      cost: 4,
      color: 'Red',
      category: 'Basic',
      reserveMagic: true,
      description: 'Target any army. Add two melee or missile results to any roll the target makes until the beginning of your next turn.',
    },
    {
      name: 'Dancing Lights',
      cost: 6,
      color: 'Red',
      category: 'Basic',
      description: 'Target any opposing army. Subtract six results from the target\'s rolls until the beginning of your next turn.',
    },
    {
      name: 'Stone Skin',
      cost: 2,
      color: 'Yellow',
      category: 'Basic',
      cantripMagic: true,
      reserveMagic: true,
      description: 'Target any army. Add one save result to the target\'s army rolls until the beginning of your next turn.',
    },
    {
      name: 'Berzerker Rage',
      cost: 5,
      color: 'Yellow',
      category: 'Feral',
      reserveMagic: true,
      description: 'Target any army containing at least one Feral unit. All Feral units in the target army may count save results as if they were melee results during all counter-attacks until the beginning of your next turn.',
    },
    {
      name: 'Higher Ground',
      cost: 5,
      color: 'Yellow',
      category: 'Dwarves',
      description: 'Target any opposing army. Subtract five melee result to the target\'s rolls until the beginning of your next turn.',
    },
    {
      name: 'Wall of Thorns',
      cost: 5,
      color: 'Yellow',
      category: 'Treefolk',
      description: 'Target any terrain not at its eighth face. Any army that successfully maneuvers that terrain takes six points of damage. The army makes a melee roll instead of a save roll. Reduce the damage taken by the number of melee results generated. This effect lasts until the beginning of your next turn.',
    },
    {
      name: 'Transmute Rock to Mud',
      cost: 6,
      color: 'Yellow',
      category: 'Basic',
      description: 'Target any opposing army. Subtract six maneuver results from the target\'s rolls until the beginning of your next turn.',
    },
    {
      name: 'Anti-Magic Surge',
      cost: 5,
      color: 'Bronze',
      category: 'Dracolem',
      description: 'Target any terrain. Subtract four magic results from all army rolls at that terrain until the beginning of your next turn.',
    },
    {
      name: 'Escape Portal',
      cost: 5,
      color: 'Gold',
      category: 'Dracolem',
      description: 'Target any army. Until the beginning of your next turn, units in the target arm ythat are killed by any army-targeting effecdts (including melee and missile damage) should make another save roll before being moved to the DUA. Any units that generate a save result are instead moved to your Reserve Area. Any units that do not generate a save result may instead be exchanged with a smaller health unit of the same species from your DUA. If no save roll was possible when the units are killed, Escape Portal does nothing.',
    },
    {
      name: 'Knock Out',
      cost: 5,
      color: 'Any Alloy',
      category: 'Dracolem',
      description: 'Target up to three health-worth of units in any opposing asrmy. The targets are knocked out and cannot be rolled until the beginning of your next turn, unless they are the target of an individual-targeting effect which forces them to. Knocked out units that leave the terrain through any means are no longer knocked out.',
    },
  ];

  filteredSpells: Spell[] = [
    ...this.allSpells,
  ];

  @property() selectSpell: any;

  spell: Spell | null = null;

  selectASpell(spell: Spell) {
    this.spell = spell;
    if (typeof this.selectSpell === 'function') {
      this.selectSpell(spell);
    }
  }

  static get styles() {
    let globalStyle = '';
    for (let styleSheetI = 0; styleSheetI < document.styleSheets.length; styleSheetI++) {
      const { cssRules } = document.styleSheets[styleSheetI];
      globalStyle = `${globalStyle}\n${Object.values(cssRules).map(rule => rule.cssText).join('\n')}`;
    }

    const stringArray = [globalStyle] as any;
    stringArray.raw = [globalStyle];

    return [
      css(stringArray as TemplateStringsArray),
      css`
        .modal {
          z-index: 99999;
        }
        .spells {
            overflow: auto;
            position: relative;
            height: 70vh;
        }
      `
    ];
  }

  filterText(event: any) {
    const textToFilterBy = event.target.value.toUpperCase();
    this.filteredSpells = this.allSpells.filter(spell => spell.name.toUpperCase().includes(textToFilterBy) || spell.category.toUpperCase().includes(textToFilterBy) || spell.color.toUpperCase().includes(textToFilterBy) || spell.description.toUpperCase().includes(textToFilterBy));
    this.requestUpdate();
  }

  override render() {
    return html`
      <h2 style="text-align: center;">Spells</h2>
      <input type="text" @keyup="${(event: any) => this.filterText(event)}" />
      <div class="spells">
        ${this.filteredSpells.sort(spellSort).map(spell => html`<dd-spell name="${spell.name}" cost=${spell.cost} color="${spell.color}" category="${spell.category}" ?cantripMagic="${spell.cantripMagic ?? false}" ?reserveMagic="${spell.reserveMagic ?? false}" description="${spell.description}" .selectSpell="${() => this.selectASpell(spell)}"></dd-spell>`)}
      </div>
      `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'spell-list': SpellList;
  }
}