90 lines
2.2 KiB
JavaScript
90 lines
2.2 KiB
JavaScript
|
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`
|
||
|
|
||
|
`;
|
||
|
}
|
||
|
}
|