121 lines
3.1 KiB
TypeScript
121 lines
3.1 KiB
TypeScript
import { LitElement, html, css } from 'lit';
|
|
import { customElement } from 'lit/decorators.js';
|
|
import { Spell } from './Spell';
|
|
|
|
@customElement('spell-scryer')
|
|
export class Scryer extends LitElement {
|
|
isSpellPaneOpen: boolean = false;
|
|
currentSpell: Spell | null = null;
|
|
spellCount: number = 0;
|
|
|
|
getCurrentSpell() {
|
|
if (this.currentSpell) {
|
|
const spell = { ...this.currentSpell };
|
|
this.currentSpell = null;
|
|
return spell;
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
setCurrentSpell(spell: Spell) {
|
|
this.currentSpell = spell;
|
|
this.spellCount = 1;
|
|
if (this.isSpellPaneOpen) {
|
|
this.toggleSpellPane();
|
|
}
|
|
}
|
|
|
|
dismissAddModal() {
|
|
this.currentSpell = null;
|
|
this.spellCount = 0;
|
|
this.requestUpdate();
|
|
}
|
|
|
|
setSpellCount() {
|
|
this.spellCount = 1;
|
|
}
|
|
|
|
toggleSpellPane() {
|
|
this.isSpellPaneOpen = !this.isSpellPaneOpen;
|
|
this.requestUpdate();
|
|
}
|
|
|
|
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`
|
|
@media (min-width: 501px) {
|
|
.the_board >* {
|
|
width: 15em;
|
|
}
|
|
}
|
|
|
|
.spell_scryer {
|
|
width: 100%;
|
|
}
|
|
|
|
a, a:hover, a:visited {
|
|
color: black;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.spell_list {
|
|
position: fixed;
|
|
z-index: 9999;
|
|
background-color: white;
|
|
}
|
|
|
|
.the_board {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
text-align: center;
|
|
}
|
|
|
|
.the_board >* {
|
|
padding: .25em;
|
|
}
|
|
`
|
|
];
|
|
}
|
|
|
|
override render() {
|
|
return html`
|
|
<div class="spell_scryer">
|
|
<div class="container spell_list" style="display: ${this.isSpellPaneOpen ? 'block' : 'none'}">
|
|
<a href="#" @click="${this.toggleSpellPane}">Close <i class="bi bi-x-circle-fill"></i></a>
|
|
<spell-list .selectSpell="${(spell: Spell) => this.setCurrentSpell(spell)}"></spell-list>
|
|
</div>
|
|
<a href="#" @click="${this.toggleSpellPane}">Spells <i class="bi bi-magic"></i></a>
|
|
<div class="the_board">
|
|
<dd-place .getCurrentSpell="${() => this.getCurrentSpell()}" location="Player 1 Reserves"></dd-place>
|
|
<dd-place .getCurrentSpell="${() => this.getCurrentSpell()}" location="Player 1 Home"></dd-place>
|
|
<dd-place .getCurrentSpell="${() => this.getCurrentSpell()}" location="Frontier"></dd-place>
|
|
<dd-place .getCurrentSpell="${() => this.getCurrentSpell()}" location="Player 2 Home"></dd-place>
|
|
<dd-place .getCurrentSpell="${() => this.getCurrentSpell()}" location="Player 2 Reserves"></dd-place>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'spell-scryer': Scryer;
|
|
}
|
|
}
|