dd-spell-scry/src/SpellCard.ts

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

import { Spell } from './Spell';

@customElement('dd-spell')
export class SpellCard extends LitElement {
  name: string = '';
  cost: number = 0;
  color: string = '';
  category: string = '';
  description: string = '';
  cantripMagic: boolean = false;
  reserveMagic: boolean = false;
  @property() spellRemover: any = null;
  @property() selectSpell: any = null;

  showDesc: string = 'none';

  static get properties() {
    return {
      name: {
        type: String
      },
      cost: {
        type: Number
      },
      color: {
        type: String
      },
      category: {
        type: String
      },
      description: {
        type: String
      },
      cantripMagic: {
        type: Boolean
      },
      reserveMagic: {
        type: Boolean
      },
    }
  };

  openSpellDescription() {
    if (this.showDesc === 'none') {
      this.showDesc = 'block';
    } else {
      this.showDesc = 'none';
    }

    this.requestUpdate();
  }

  removeSpell(event: any) {
    if (this.spellRemover && typeof this.spellRemover === 'function') {
      this.spellRemover(this.name);
      event.preventDefault();
    }
  }

  selectASpell(event: any) {
    if (this.selectSpell && typeof this.selectSpell === 'function') {
      this.selectSpell({
        name: this.name,
        cost: this.cost,
        color: this.color,
        category: this.category,
        description: this.description,
        cantripMagic: this.cantripMagic,
        reserveMagic: this.reserveMagic,
      });

      event.preventDefault();
    }
  }

  getColor() {
    switch (this.color) {
      case 'Black':
        return 'black';
      case 'Blue':
        return 'blue';
      case 'Green':
        return 'green';
      case 'Red':
        return 'red';
      case 'Yellow':
        return '#FFDB58';
      case 'Gold':
        return '#FFD700';
      case 'Bronze':
        return '#CD7F32';
      case 'Silver':
        return '#BCC6CC';
      default:
        return 'grey';
    }
  }

  static styles = [
    css`
      .spell-card {
        border: .1em solid black;
        border-radius: .25em;
        padding: .25em;
      }
    `
  ];

  override render() {
    return html`
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" crossorigin="anonymous">

      <div class="spell-card">
        <div style="padding: .5em; background-color: ${this.getColor()}; color: white; text-align: right;" @click="${(event: any) => this.selectSpell ? this.selectASpell(event) : this.removeSpell(event)}"><i class="bi bi-plus-circle-fill" style="display: ${this.selectSpell ? 'inner-block' : 'none'}"></i><i style="display: ${this.spellRemover ? 'inner-block' : 'none'}" class="bi bi-trash-fill"></i></div>
        <div @click="${this.openSpellDescription}">
          <div><b><u>${this.name} - ${this.color} (${this.cost})</u></b></div>
          <div style="display: ${this.showDesc}; text-align: left;">
            <div><b>Category</b>: ${this.category}</div>
            ${this.cantripMagic ? html`<div><b>Cantrip Castable</b></div>` : ''}
            ${this.reserveMagic ? html`<div><b>Reserve Castable</b></div>` : ''}
            <div>${this.description}</div>
          </div>
        </div>
      </div>
      `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'dd-spell': SpellCard;
  }
}