import { html, css, LitElement, unsafeCSS } from 'https://unpkg.com/lit-element/lit-element.js?module'; export class InfoBox extends LitElement { static get styles() { return css` .hinttext { color: white; margin-left: 1em; margin-top: 0.8em; } .infobox { z-index: 20; position: fixed; top: 0em; left: 0em; right: 0em; height: 6em; border-style: solid; border-color: white; border-width: 0.2 em; background-color: #333; color: white; } `; } static get properties() { return { horizontal_hint: { type: String }, vertical_hint: { type: String } }; } constructor() { super(); this.vertical_hint = ""; this.horizontal_hint = ""; } render() { return html`
▶ ${this.horizontal_hint}
▼ ${this.vertical_hint}
`; } } customElements.define('info-box', InfoBox);