137 lines
3.4 KiB
TypeScript
137 lines
3.4 KiB
TypeScript
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 | null = false;
|
|
reserveMagic: boolean | null = 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;
|
|
}
|
|
}
|