crosswords/js_client/solutionBox.js

90 lines
2.2 KiB
JavaScript
Raw Normal View History

2021-06-23 19:11:34 +02:00
import { html, css, LitElement, unsafeCSS } from 'https://unpkg.com/lit-element/lit-element.js?module';
export class SolutionBox extends LitElement {
static get styles() {
return css`
.letter {
display: grid;
}
input[type='text'] {
grid-column: 1;
grid-row: 1;
width: 1.5em;
height: 1.5em;
text-align: center;
border-style: solid;
border-width: 0.2 em;
border-color: black;
outline: none;
color: black;
font-size: 2em;
user-select: none;
text-transform: capitalize;
}
input[type='text']:read-only {
grid-column: 1;
grid-row: 1;
background-color: LightGreen;
}
input[type='text']:selection {
grid-column: 1;
grid-row: 1;
background: transparent;
}
.circle {
margin: auto;
text-align: left;
vertical-align: bottom;
bottom: 0;
position: relative;
z-index: 0;
pointer-events: none;
grid-column: 1;
grid-row: 1;
border: 0.1em solid lightGray;
color: black;
height: 80%;
width: 80%;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
background: transparent;
}
`;
}
static get properties() {
return {
length: { type: Number }
};
}
constructor() {
super();
this.length = 0;
this.values = [];
}
update(props) {
if (props.has("length")) {
var i;
for (i = 0; i < this.length; i++) {
this.values.push("");
}
}
super.update()
}
render() {
return html`
`;
}
}