118 lines
3.2 KiB
JavaScript
118 lines
3.2 KiB
JavaScript
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`
|
|
<div class="infobox">
|
|
<div class="hintbox">
|
|
<div class="hinttext">▶ ${this.horizontal_hint}</div>
|
|
<div class="hinttext">▼ ${this.vertical_hint}</div>
|
|
</div>
|
|
<div class="buttonbox">
|
|
<button class="button" @click=${this.onNew}> new Crossword </button>
|
|
<button class="button" @click=${this.onShare}> share session</button>
|
|
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
}
|
|
|
|
customElements.define('info-box', InfoBox);
|