import { html, css, LitElement, unsafeCSS } from 'https://unpkg.com/lit-element/lit-element.js?module'; import { GridLetter } from './gridBoxes.js'; export class SolutionLetter extends LitElement { static get styles() { return GridLetter.styles; } static get properties() { return { solutionIndex: { type: Number }, grid_id: { type: String } }; } constructor() { super(); this._letter = ""; this.solutionIndex = 0; this.grid_id = ""; this.grid = null; this.revealed = false; } update(props) { if (props.has("grid_id")) { this.grid = document.getElementById(this.grid_id); } super.update(props); } reveal(letter) { var el = this.shadowRoot.getElementById("solution" + this.solutionIndex); this.letter = letter; el.readOnly = true; this.revealed = true; } set letter(letter) { this._letter = letter var e = this.shadowRoot.getElementById("solution" + this.solutionIndex); if (e.value != this.letter) e.value = this.letter } get letter(){ return this._letter; } onFocus(e) { e.target.select(); } onInput(e) { if (this.revealed) { e.handled = true; return; } var val = e.target.value; var el = this.shadowRoot.getElementById("solution" + this.solutionIndex); if (val.length > 1) { val = val[0]; } if (e.target.value != this.letter){ this.letter = val; this.grid.setSolutionLetter(this.solutionIndex, this.letter); } e.target.select(); e.handled = true; } render() { console.log("render solution letter"); return html`
${this.solutionIndex + 1}
`; } } customElements.define('solution-letter', SolutionLetter); export class SolutionBox extends LitElement { static get styles() { return css` body { background-color: black; } .codewordlabel { z-index: 5; position: relative; top: 5em; font-size: 1.5em; color: white; text-color: white; } table { position: relative; top: 7em; border-spacing: 0px; border-style: solid; border-color: black; border-width: 1em; } td { padding: 0px; } `; } static get properties() { return { length: { type: Number }, grid_id: { type: String } }; } constructor() { super(); this.length = 0; this.values = [] this.grid_id = ""; this.grid = null; } update(props) { console.log("update colution, grid is " + this.grid_id); if (this.grid_id.length > 0) { this.grid = document.getElementById(this.grid_id); this.grid.setSolutionBox(this); console.log("updated grid parent"); this.values = []; var i; for (i = 0; i < this.length; i++) { this.values.push(""); } this.requestUpdate(); console.log("update length"); } super.update(props); } setLetter(solutionIndex, letter, revealed = false) { var solutionBox = this.shadowRoot.getElementById("solutionLetter" + solutionIndex) solutionBox.letter = letter; if (revealed) { solutionBox.reveal(letter); } } render() { console.log("rerender box"); return html`
Codeword
${this.values.map((el, i) => html``)}
`; } } customElements.define('solution-box', SolutionBox);