import { html, css, LitElement, unsafeCSS } from 'https://unpkg.com/lit-element/lit-element.js?module'; import { getCookie, setCookie } from './cookie.js'; function copyToClipboard(text) { var input = document.body.appendChild(document.createElement("input")); input.value = text; input.focus(); input.select(); document.execCommand('copy'); input.parentNode.removeChild(input); alert("copied url to clipboard, you can share this link to work collaboratively on this puzzle in real time"); } export class InfoBox extends LitElement { static get styles() { return css` .hinttext { color: white; margin-left: 1em; margin-top: 0.5em; } .hintbox { grid-column: 1; grid-row: 1; position: relative; display: block; overflow-y: scroll; height: 8em; } .infobox { font-size = 1em; z-index: 20; position: fixed; display: grid; grid-template-columns: auto min-content; top: 0em; left: 0em; right: 0em; min-height: 8em; border-style: none; border-color: white; border-width: 0.2 em; background-color: #333; color: white; } .buttonbox { grid-column: 2; grid-row: 1; padding: 0.3em; } .button { background-color: #222; border-color: white; border-width: 0.2em; border-style: none; min-width: 10em; min-height: 3.5em; box-shadow: none; outline: none; margin: 0.1em 0.1em; color: white; font-size: 1em; } `; } static get properties() { return { horizontal_hint: { type: String }, vertical_hint: { type: String } }; } constructor() { super(); this.vertical_hint = ""; this.horizontal_hint = ""; } onNew() { setCookie("session", ""); var crosswordRoot = location.pathname.substr(0, location.pathname.lastIndexOf("/")); window.location.href = location.protocol + '//' + location.host + crosswordRoot; } onShare() { copyToClipboard(window.location.href); } render() { return html`
▶ ${this.horizontal_hint}
▼ ${this.vertical_hint}
`; } } customElements.define('info-box', InfoBox);