772 lines
19 KiB
JavaScript
772 lines
19 KiB
JavaScript
import { html, css, LitElement, unsafeCSS } from 'https://unpkg.com/lit-element/lit-element.js?module';
|
|
import './infoBox.js'
|
|
|
|
const gridType = {
|
|
EMPTY: 0,
|
|
HINT: 1,
|
|
LETTER: 2
|
|
};
|
|
|
|
export class GridElement {
|
|
constructor(x, y, grid, type) {
|
|
this.x = x;
|
|
this.y = y;
|
|
this.type = type
|
|
this.grid = grid;
|
|
|
|
|
|
this.gridLetter = null;
|
|
this.hintBox = null;
|
|
this.emptyBox = null;
|
|
}
|
|
|
|
setGridLetter(gridLetter) {
|
|
this.gridLetter = gridLetter;
|
|
}
|
|
|
|
getGridLetter() {
|
|
return this.gridLetter;
|
|
}
|
|
|
|
setHintBox(hintBox) {
|
|
this.hintBox = hintBox;
|
|
}
|
|
|
|
getHintBox() {
|
|
return this.hintBox;
|
|
}
|
|
|
|
setEmptyBox(emptyBox) {
|
|
this.emptyBox = emptyBox;
|
|
}
|
|
|
|
getEmptyBox() {
|
|
return this.emptyBox;
|
|
}
|
|
|
|
getGridType() {
|
|
return this.type;
|
|
}
|
|
|
|
}
|
|
|
|
export class GridBox extends LitElement {
|
|
static get styles() {
|
|
return css`
|
|
input[type='text'] {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
text-align: center;
|
|
border-style: solid;
|
|
border-color: black;
|
|
border-width: 0.2 em;
|
|
background-color: black;
|
|
outline: none;
|
|
color: transparent;
|
|
text-shadow: 0 0 1 black;
|
|
font-size: 2em;
|
|
user-select: none;
|
|
text-transform: uppercase;
|
|
}
|
|
`;
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
x: { type: Number },
|
|
y: { type: Number },
|
|
grid_id: { type: String }
|
|
}
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.x = 0;
|
|
this.y = 0;
|
|
this.gridElement = null;
|
|
this.grid_id = null;
|
|
this.crosswordGrid = null;
|
|
this.isRevealed = false;
|
|
}
|
|
|
|
update(props) {
|
|
super.update();
|
|
if (props.has("grid_id")) {
|
|
this.updateGridElement();
|
|
}
|
|
}
|
|
|
|
updateGridElement() {
|
|
if (this.grid_id != null) {
|
|
|
|
this.crosswordGrid = document.getElementById(this.grid_id);
|
|
this.gridElement = this.crosswordGrid.getGridElement(this.x, this.y);
|
|
this.gridElement.setEmptyBox(this);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return html`<input type="text" id="${this.x}-${this.y}" maxlength="1" value="" disabled></input>`;
|
|
}
|
|
}
|
|
|
|
customElements.define('grid-box', GridBox);
|
|
|
|
|
|
export class GridLetter extends GridBox {
|
|
static get styles() {
|
|
return css`
|
|
input[type='text'] {
|
|
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']:focus {
|
|
background-color: LightYellow;
|
|
border-color: Yellow;
|
|
|
|
}
|
|
|
|
input[type='text']:read-only {
|
|
background-color: LightGreen;
|
|
}
|
|
|
|
input[type='text']:selection {
|
|
background: transparent;
|
|
}
|
|
`;
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
letter: { type: String },
|
|
x: { type: Number },
|
|
y: { type: Number },
|
|
grid_id: { type: String }
|
|
}
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this._value = '';
|
|
this.is_focused = false;
|
|
this.key_delay = false;
|
|
this.updateGridElement();
|
|
}
|
|
|
|
|
|
|
|
set value(value) {
|
|
const oldValue = this.value;
|
|
console.log("update value to: " + value);
|
|
|
|
this._value = value;
|
|
this.requestUpdate('value', oldValue);
|
|
}
|
|
|
|
get value() {
|
|
return this._value;
|
|
}
|
|
|
|
onInput(e) {
|
|
|
|
if (!this.is_focused) {
|
|
return;
|
|
}
|
|
|
|
//if (this.key_delay){
|
|
// var el = this.shadowRoot.getElementById(`${this.x}-${this.y}`);
|
|
// el.value = this.value;
|
|
// el.select();
|
|
// e.handled = true;
|
|
// return;
|
|
//}
|
|
|
|
var oldVal = this.value;
|
|
this.value = e.target.value
|
|
|
|
if (this.revealed) {
|
|
this.value = oldVal;
|
|
return
|
|
}
|
|
|
|
if (this.value.length > 1) {
|
|
this.value = str.slice(0);
|
|
e.target.value = this.value
|
|
e.handled = true;
|
|
}
|
|
|
|
if (!e.handled && this.value === " ") {
|
|
this.value = "";
|
|
e.target.value = "";
|
|
e.handled = true;
|
|
}
|
|
|
|
if (!e.handled && this.value.length === 0) {
|
|
this.crosswordGrid.focusPrevCell(this.x, this.y);
|
|
e.handled = true;
|
|
}
|
|
else if (!e.handled && this.value.length === 1) {
|
|
this.crosswordGrid.focusNextCell(this.x, this.y);
|
|
e.handled = true;
|
|
}
|
|
else {
|
|
this.focus();
|
|
}
|
|
|
|
if (oldVal != this.value) {
|
|
this.crosswordGrid.sendMessage({
|
|
'type': 'update',
|
|
'x': this.x,
|
|
'y': this.y,
|
|
'letter': this.value
|
|
})
|
|
}
|
|
|
|
if (!e.handled){
|
|
|
|
e.target.select();
|
|
|
|
e.handled = true;
|
|
}
|
|
|
|
}
|
|
|
|
onKeydown(e) {
|
|
|
|
if (!this.is_focused) {
|
|
return;
|
|
}
|
|
|
|
this.key_delay = false;
|
|
|
|
var key = e.key;
|
|
|
|
console.log(key);
|
|
|
|
|
|
if (this.value.length == 0) {
|
|
if (key === 'Backspace' || key === 'Delete') {
|
|
this.crosswordGrid.focusPrevCell(this.x, this.y);
|
|
e.handled = true;
|
|
return
|
|
|
|
}
|
|
}
|
|
|
|
// check arrow keys
|
|
if (key === "ArrowLeft") {
|
|
// left
|
|
this.crosswordGrid.focusPrevCellHorizontal(this.x, this.y);
|
|
e.handled = true;
|
|
return;
|
|
}
|
|
else if (key === "ArrowUp") {
|
|
// up
|
|
this.crosswordGrid.focusPrevCellVertical(this.x, this.y);
|
|
e.handled = true;
|
|
return;
|
|
|
|
}
|
|
else if (key === "ArrowRight") {
|
|
//right
|
|
this.crosswordGrid.focusNextCellHorizontal(this.x, this.y);
|
|
e.handled = true;
|
|
return;
|
|
}
|
|
else if (key === "ArrowDown") {
|
|
//down
|
|
this.crosswordGrid.focusNextCellVertical(this.x, this.y);
|
|
e.handled = true;
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
e.target.select();
|
|
|
|
|
|
}
|
|
|
|
onFocus(e) {
|
|
e.target.select();
|
|
this.is_focused = true;
|
|
this.key_delay = true;
|
|
|
|
this.crosswordGrid.updateHints(this.x, this.y);
|
|
}
|
|
|
|
focus() {
|
|
var element = this.shadowRoot.getElementById(`${this.x}-${this.y}`);
|
|
element.focus();
|
|
}
|
|
|
|
blur() {
|
|
var element = this.shadowRoot.getElementById(`${this.x}-${this.y}`);
|
|
element.blur();
|
|
this.is_focused = false;
|
|
}
|
|
|
|
updateGridElement() {
|
|
super.updateGridElement()
|
|
|
|
if (this.grid_id != null) {
|
|
|
|
this.gridElement.setGridLetter(this);
|
|
}
|
|
}
|
|
|
|
updateLetter(letter, revealed) {
|
|
this.value = letter;
|
|
if (revealed)
|
|
{
|
|
console.log("rec")
|
|
this.shadowRoot.getElementById(`${this.x}-${this.y}`).readOnly = true;
|
|
this.blur();
|
|
this.revealed = true;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
this.updateGridElement();
|
|
return html`<input type="text" id="${this.x}-${this.y}" value="${this.value}" @input=${this.onInput} @focus=${this.onFocus} @keydown=${this.onKeydown} autocomplete="off"></input>`;
|
|
}
|
|
}
|
|
|
|
customElements.define('grid-letter', GridLetter);
|
|
|
|
|
|
|
|
export class HintBox extends GridBox {
|
|
|
|
static get styles() {
|
|
|
|
return css`
|
|
|
|
.hint {
|
|
display: grid;
|
|
}
|
|
|
|
|
|
.triangle-down {
|
|
position: relative;
|
|
top: 3em;
|
|
left: 1em;
|
|
z-index: 10;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 0.75em solid transparent;
|
|
border-right: 0.75em solid transparent;
|
|
border-top: 1.3em solid #555;
|
|
|
|
}
|
|
|
|
.triangle-right {
|
|
position: relative;
|
|
top: 1em;
|
|
left: 3em;
|
|
z-index: 10;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 0.75em solid transparent;
|
|
border-bottom: 0.75em solid transparent;
|
|
border-left: 1.3em solid #555;
|
|
|
|
}
|
|
|
|
input[type='text']{
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
text-align: center;
|
|
border-style: solid;
|
|
border-color: black;
|
|
border-width: 0.2 em;
|
|
background-color: #555;
|
|
outline: none;
|
|
color: white;
|
|
text-shadow: 0 0 1 black;
|
|
font-size: 2em;
|
|
user-select: none;
|
|
text-transform: uppercase;
|
|
}
|
|
`;
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
x: { type: Number },
|
|
y: { type: Number },
|
|
grid_id: { type: String },
|
|
horizontal_hint: { type: String },
|
|
vertical_hint: { type: String },
|
|
hint_id: { type: String }
|
|
}
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.vertical_hint = "";
|
|
this.horizontal_hint = "";
|
|
this.hint_id = 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
getVerticalHint() {
|
|
return this.vertical_hint;
|
|
}
|
|
|
|
getHorizontalHint() {
|
|
return this.horizontal_hint;
|
|
}
|
|
|
|
hasVerticalHint() {
|
|
return this.vertical_hint.length > 0;
|
|
}
|
|
|
|
hasHorizontalHint() {
|
|
return this.horizontal_hint.length > 0;
|
|
}
|
|
|
|
updateGridElement() {
|
|
super.updateGridElement()
|
|
|
|
if (this.grid_id != null) {
|
|
|
|
this.gridElement.setHintBox(this);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
|
|
this.updateGridElement();
|
|
|
|
var verticalArrow = html``;
|
|
var horizontalArrow = html``;
|
|
|
|
if (this.hasVerticalHint()) {
|
|
verticalArrow = html`<div class="triangle-down"></div>`;
|
|
}
|
|
|
|
if (this.hasHorizontalHint()) {
|
|
horizontalArrow = html`<div class="triangle-right"></div>`;
|
|
}
|
|
|
|
return html`
|
|
<div class="hint">
|
|
<input type="text" id="${this.x}-${this.y}" value="${this.hint_id}" disabled></input>
|
|
${verticalArrow}
|
|
${horizontalArrow}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('hint-box', HintBox);
|
|
|
|
export class CrosswordGrid extends LitElement {
|
|
static get styles() {
|
|
return css`
|
|
body {
|
|
background-color: black;
|
|
}
|
|
|
|
table {
|
|
position: relative;
|
|
top: 5em;
|
|
border-spacing: 0px;
|
|
border-style: solid;
|
|
border-color: black;
|
|
border-width: 1em;
|
|
}
|
|
|
|
td {
|
|
padding: 0px;
|
|
}
|
|
`;
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
id: { type: String },
|
|
width: { type: Number },
|
|
height: { type: Number },
|
|
infobox_id: {type: String}
|
|
}
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.width = 10;
|
|
this.height = 10;
|
|
this.grid = [];
|
|
|
|
this.json_grid = null;
|
|
|
|
this.num_hints = 0;
|
|
|
|
this.lastMoveVertical = false;
|
|
|
|
this.infobox = null;
|
|
|
|
this.serverConnection = null;
|
|
}
|
|
|
|
createGridByJson(json_grid) {
|
|
this.num_hints = 0;
|
|
this.json_grid = json_grid;
|
|
this.grid = [];
|
|
const width = json_grid.w;
|
|
const height = json_grid.h;
|
|
|
|
var y;
|
|
var x;
|
|
|
|
for (y = 0; y < height; y++) {
|
|
var row = [];
|
|
for (x = 0; x < width; x++) {
|
|
const json_cell = json_grid.grid[y][x];
|
|
const cell_type = json_cell.cell_type;
|
|
|
|
switch (cell_type) {
|
|
case "empty": {
|
|
row.push(new GridElement(x, y, this, gridType.EMPTY));
|
|
break;
|
|
}
|
|
case "hint": {
|
|
row.push(new GridElement(x, y, this, gridType.HINT));
|
|
break;
|
|
}
|
|
case "letter": {
|
|
row.push(new GridElement(x, y, this, gridType.LETTER));
|
|
break;
|
|
}
|
|
|
|
};
|
|
}
|
|
this.grid.push(row);
|
|
}
|
|
|
|
this.width = width;
|
|
this.height = height;
|
|
}
|
|
|
|
focusNextCellHorizontal(x, y) {
|
|
if (x + 1 < this.width && this.grid[y][x + 1].getGridType() === gridType.LETTER) {
|
|
if (this.grid[y][x].getGridType() === gridType.LETTER) {
|
|
this.grid[y][x].getGridLetter().blur();
|
|
}
|
|
this.grid[y][x + 1].getGridLetter().focus();
|
|
|
|
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
focusPrevCellHorizontal(x, y) {
|
|
if (x - 1 >= 0 && this.grid[y][x - 1].getGridType() === gridType.LETTER) {
|
|
if (this.grid[y][x].getGridType() === gridType.LETTER) {
|
|
this.grid[y][x].getGridLetter().blur();
|
|
}
|
|
this.grid[y][x - 1].getGridLetter().focus();
|
|
|
|
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
focusNextCellVertical(x, y) {
|
|
if (y + 1 < this.height && this.grid[y + 1][x].getGridType() === gridType.LETTER) {
|
|
if (this.grid[y][x].getGridType() === gridType.LETTER) {
|
|
this.grid[y][x].getGridLetter().blur();
|
|
}
|
|
this.grid[y + 1][x].getGridLetter().focus();
|
|
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
focusPrevCellVertical(x, y) {
|
|
if (y - 1 >= 0 && this.grid[y - 1][x].getGridType() === gridType.LETTER) {
|
|
if (this.grid[y][x].getGridType() === gridType.LETTER) {
|
|
this.grid[y][x].getGridLetter().blur();
|
|
}
|
|
this.grid[y - 1][x].getGridLetter().focus();
|
|
|
|
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
focusNextCell(x, y) {
|
|
if (this.lastMoveVertical) {
|
|
if (this.focusNextCellVertical(x, y)) {
|
|
return;
|
|
}
|
|
if (this.focusNextCellHorizontal(x, y)) {
|
|
this.lastMoveVertical = false;
|
|
}
|
|
}
|
|
else {
|
|
if (this.focusNextCellHorizontal(x, y)) {
|
|
return;
|
|
}
|
|
if (this.focusNextCellVertical(x, y)) {
|
|
this.lastMoveVertical = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
focusPrevCell(x, y) {
|
|
if (this.lastMoveVertical) {
|
|
if (this.focusPrevCellVertical(x, y)) {
|
|
return;
|
|
}
|
|
if (this.focusPrevCellHorizontal(x, y)) {
|
|
this.lastMoveVertical = false;
|
|
}
|
|
}
|
|
else {
|
|
if (this.focusPrevCellHorizontal(x, y)) {
|
|
return;
|
|
}
|
|
if (this.focusPrevCellVertical(x, y)) {
|
|
this.lastMoveVertical = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
getGridElement(x, y) {
|
|
return this.grid[y][x];
|
|
}
|
|
|
|
update(props) {
|
|
if (props.has("width") || props.has("height")) {
|
|
//
|
|
}
|
|
if (props.has("infobox_id")) {
|
|
this.infobox = document.getElementById(this.infobox_id);
|
|
}
|
|
super.update()
|
|
}
|
|
|
|
updateHints(x,y) {
|
|
var cell = this.grid[y][x];
|
|
if (cell.getGridType() != gridType.LETTER){
|
|
console.error("cannot get hints for non letter cell");
|
|
}
|
|
|
|
//get horizontal hint:
|
|
var upper_end = cell;
|
|
while (upper_end.getGridType() === gridType.LETTER) {
|
|
upper_end = this.grid[upper_end.y - 1][x]
|
|
}
|
|
|
|
var left_end = cell;
|
|
while (left_end.getGridType() === gridType.LETTER) {
|
|
left_end = this.grid[y][left_end.x - 1]
|
|
}
|
|
|
|
var hHint = "";
|
|
var vHint = "";
|
|
|
|
if (left_end.getGridType() === gridType.HINT) {
|
|
var box = left_end.getHintBox();
|
|
hHint = `${box.hint_id}: ${box.horizontal_hint}`;
|
|
}
|
|
|
|
if (upper_end.getGridType() === gridType.HINT) {
|
|
var box = upper_end.getHintBox()
|
|
vHint = `${box.hint_id}: ${box.vertical_hint}`;
|
|
}
|
|
|
|
this.infobox.horizontal_hint = hHint;
|
|
this.infobox.vertical_hint = vHint;
|
|
}
|
|
|
|
renderCell(el) {
|
|
switch (el.type) {
|
|
case gridType.LETTER: {
|
|
return html`<grid-letter grid_id='${this.id}' x='${el.x}' y='${el.y}' ></grid-letter>`;
|
|
|
|
}
|
|
case gridType.EMPTY: {
|
|
return html`<grid-box grid_id='${this.id}' x='${el.x}' y='${el.y}' ></grid-box>`;
|
|
|
|
}
|
|
case gridType.HINT: {
|
|
var vertical_hint = this.json_grid.grid[el.y][el.x].vertical_hint;
|
|
var horizontal_hint = this.json_grid.grid[el.y][el.x].horizontal_hint;
|
|
|
|
if (!vertical_hint){
|
|
vertical_hint = "";
|
|
}
|
|
if (!horizontal_hint){
|
|
horizontal_hint = "";
|
|
}
|
|
|
|
this.num_hints += 1;
|
|
|
|
return html`
|
|
<hint-box grid_id='${this.id}' x='${el.x}' y='${el.y}' horizontal_hint='${horizontal_hint}' vertical_hint='${vertical_hint}' hint_id=${this.num_hints}></hint-box>
|
|
`;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
updateLetter(x,y,letter,revealed) {
|
|
var cell = this.grid[y][x];
|
|
if (cell.getGridType() != gridType.LETTER){
|
|
console.error("received bad message");
|
|
}
|
|
cell.getGridLetter().updateLetter(letter, revealed)
|
|
}
|
|
|
|
registerServerConnection(connection){
|
|
this.serverConnection = connection
|
|
}
|
|
|
|
sendMessage(msg){
|
|
if (!this.serverConnection) {
|
|
console.error("no server connection registered")
|
|
}
|
|
this.serverConnection.sendMessage(msg)
|
|
}
|
|
|
|
render() {
|
|
this.num_hints = 0;
|
|
console.log("refreshing grid");
|
|
return html`
|
|
<table>
|
|
${this.grid.map((row) => html`<tr>${row.map((el) => html`<td>${this.renderCell(el)}</td>`)}</tr>`)}
|
|
</table>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('crossword-grid', CrosswordGrid); |