@mborecki/crossword 0.0.2 → 0.2.0

package/dist/collection/components/crossword/mb-crossword.css

@@ -1,44 +1,86 @@
 *[part=main] {
+  position: relative;
   display: grid;
-  grid-template-areas: "clues board";
-  grid-template-columns: 1fr 1fr;
+  grid-template-areas: "board" "clues";
+  grid-template-columns: 1fr;
+}
+@media (min-width: 768px) {
+  *[part=main] {
+    grid-template-areas: "clues board" "clues .";
+    grid-template-columns: 1fr 1fr;
+  }
 }
 *[part=main].--focused {
   background: lightgrey;
 }
+*[part=main] input.dummy {
+  pointer-events: none;
+  opacity: 0.2;
+  z-index: 100;
+  grid-area: board;
+  border: none;
+}
 
 [part=clues] {
   grid-area: clues;
   display: grid;
   grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+[part=clues].oneList {
+  grid-template-columns: 1fr;
 }
 
 [part=clue].--current {
-  background: lightcyan;
+  background: var(--clue-current-background, lightcyan);
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+[part=clue] .preview {
+  font-weight: bold;
+  letter-spacing: 0.2em;
+  text-align: center;
+  display: block;
+  text-transform: uppercase;
 }
 
 [part=board] {
   grid-area: board;
-  display: grid;
+  display: block;
+  position: relative;
+  container-type: size;
+  background: var(--board-background, darkgoldenrod);
+  --cell-border-width: 2px;
+  --cell-width-temp: calc((100cqw - var(--cell-border-width)) / var(--board-width, 10));
+  --cell-width: var(--cell-width-temp);
+  --cell-width: round(var(--cell-width-temp), 1px);
 }
 
 [part=cell] {
+  display: block;
+  color: var(--cell-color, #11138d);
+  width: calc(var(--cell-width) - var(--cell-border-width));
   aspect-ratio: 1;
-  background: #d9d9d9;
-  position: relative;
+  background: var(--cell-background, #d9d9d9);
+  position: absolute;
   container-type: size;
+  top: calc(var(--y, 0) * var(--cell-width));
+  left: calc(var(--x, 0) * var(--cell-width));
+  border: var(--cell-border-width) solid var(--cell-border-color, red);
 }
-[part=cell]:nth-child(2n) {
-  background: #999;
-}
-[part=cell].--blocked {
-  background: black;
+[part=cell].--alt {
+  background: var(--cell-background-alt, #999);
 }
 [part=cell].--in-current-clue {
-  box-shadow: inset 0 0 2px 2px lightblue;
+  box-shadow: inset 0 0 2px 2px var(--cell-selected-background, lightblue);
 }
 [part=cell].--selected {
-  background: lightblue;
+  background: var(--cell-selected-background, lightblue);
+}
+[part=cell].--special {
+  background: var(--cell-special-background, lightgreen);
 }
 [part=cell] ._inner {
   position: absolute;
@@ -54,4 +96,56 @@
 
 [part=preview] {
   display: none;
+}
+
+[part=special-border] {
+  display: block;
+  background: black;
+  position: absolute;
+  z-index: 100;
+  --s-border: max(2px, var(--cell-border-width));
+}
+[part=special-border].left, [part=special-border].right {
+  width: var(--s-border);
+  height: calc(var(--cell-width) - var(--cell-border-width));
+  top: calc(var(--y, 0) * var(--cell-width) + var(--cell-border-width));
+}
+[part=special-border].left {
+  left: calc(var(--x, 0) * var(--cell-width) - var(--s-border) / 2);
+}
+[part=special-border].right {
+  left: calc((var(--x, 0) + 1) * var(--cell-width) - var(--s-border) / 2);
+}
+[part=special-border].top, [part=special-border].bottom {
+  width: calc(var(--cell-width) - var(--cell-border-width));
+  height: var(--s-border);
+  left: calc(var(--x, 0) * var(--cell-width) + var(--cell-border-width));
+}
+[part=special-border].top {
+  top: calc(var(--y, 0) * var(--cell-width));
+}
+[part=special-border].bottom {
+  top: calc((var(--y, 0) + 1) * var(--cell-width));
+}
+
+[part=label] {
+  display: grid;
+  place-content: center;
+  position: absolute;
+  container-type: size;
+  top: calc(var(--y, 0) * var(--cell-width));
+  left: calc(var(--x, 0) * var(--cell-width));
+  width: calc(var(--cell-width) - var(--cell-border-width));
+  aspect-ratio: 1;
+}
+[part=label] ._inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  place-content: center;
+  text-transform: uppercase;
+  font-size: 60cqh;
 }

package/dist/collection/components/crossword/mb-crossword.js

@@ -1,11 +1,13 @@
 import { forceUpdate, h } from "@stencil/core";
 import { Clue } from "./clue";
 import { Cell } from "./cell";
-import { indexFromXY, isKeyboardEventLetter, Vec2fromIndex } from "../../utils/utils";
+import { indexFromXY, isInputEventLetter, Vec2fromIndex } from "../../utils/utils";
 import { Vec2 } from "@mb-puzzle/vec2";
 export class MBCrossword {
     init = true;
     data;
+    showCluePreview = true;
+    textInput;
     hWords = [];
     vWords = [];
     currentClueId = null;
@@ -13,6 +15,12 @@ export class MBCrossword {
     isFocused = false;
     selectedCell = null;
     componentWillLoad() {
+        console.log('componentWillLoad', this.init, this.data);
+        if (this.init && this.data) {
+            this.initGame();
+        }
+    }
+    watchData() {
         if (this.init && this.data) {
             this.initGame();
         }
@@ -24,6 +32,7 @@ export class MBCrossword {
         ];
     }
     async initGame(data = this.data) {
+        console.log('initGame');
         if (!data.words) {
             throw new Error('Words definition missing');
         }
@@ -41,8 +50,22 @@ export class MBCrossword {
                 this.vWords = [...this.vWords, w];
             }
         });
+        this.specialBorders = data.specialBorders ?? [];
+        this.specialCells = data.specialCells ?? [];
+        this.labels = data.labels ?? [];
         this.buildBoard();
     }
+    async checkAnswer() {
+        const cells = this.cells.filter(c => !c.isBlocked);
+        console.log(cells);
+        cells.forEach(c => {
+            console.log(`${c.value} === ${c.answer}`, `${c.x},${c.y}`, c.value === c.answer);
+        });
+        return cells.every(c => c.value === c.answer);
+    }
+    specialBorders = [];
+    specialCells = [];
+    labels = [];
     boardWidth = 0;
     boardHeight = 0;
     cells = [];
@@ -77,6 +100,7 @@ export class MBCrossword {
                     const v = Vec2.from(w);
                     const cellIndex = indexFromXY(new Vec2(v.x + i, v.y), boardWidth);
                     cells[cellIndex].isBlocked = false;
+                    cells[cellIndex].answer = w.word[i];
                 }
             }
             if (w.orientation === 'vertical') {
@@ -84,6 +108,7 @@ export class MBCrossword {
                     const v = Vec2.from(w);
                     const cellIndex = indexFromXY(new Vec2(v.x, v.y + i), boardWidth);
                     cells[cellIndex].isBlocked = false;
+                    cells[cellIndex].answer = w.word[i];
                 }
             }
         });
@@ -91,6 +116,9 @@ export class MBCrossword {
         this.boardWidth = boardWidth;
         this.boardHeight = boardHeight;
     }
+    getClueById(id) {
+        return this.allWords.find(c => c.id === id) ?? null;
+    }
     isInClue(xy, clue = this.currentClue) {
         if (clue === null)
             return false;
@@ -147,25 +175,58 @@ export class MBCrossword {
         this.selectNextCell();
         forceUpdate(this);
     }
+    backspace() {
+        if (!this.selectedCell)
+            return;
+        if (this.selectedCell.value) {
+            this.selectedCell.value = '';
+            this.selectPrevCell();
+        }
+        else {
+            this.selectPrevCell();
+            this.selectedCell.value = '';
+        }
+        forceUpdate(this);
+    }
     selectNextCell() {
         if (!this.selectedCell || !this.currentClue)
             return;
         const currentOrientation = this.currentClue.orientation;
-        if (isLastCellInWord(this.currentClue, this.selectedCell)) {
+        if (isLastCellInClue(this.currentClue, this.selectedCell)) {
             const nextClueId = this.getNextClueId();
-            if (nextClueId) {
-                this.selectClue(nextClueId);
-            }
-            else {
-                this.selectClue(this.hWords[0]?.id ?? this.vWords[0]?.id);
+            const clue = this.getClueById(nextClueId);
+            if (clue) {
+                this.selectClueByXY(Vec2.from(clue));
+                return;
             }
             return;
         }
         if (currentOrientation === 'horizontal') {
-            this.selectCellByXY(new Vec2(this.selectedCell.x + 1, this.selectedCell.y));
+            this.selectClueByXY(new Vec2(this.selectedCell.x + 1, this.selectedCell.y));
         }
         if (currentOrientation === 'vertical') {
-            this.selectCellByXY(new Vec2(this.selectedCell.x, this.selectedCell.y + 1));
+            this.selectClueByXY(new Vec2(this.selectedCell.x, this.selectedCell.y + 1));
+        }
+    }
+    selectPrevCell() {
+        if (!this.selectedCell || !this.currentClue)
+            return;
+        const currentOrientation = this.currentClue.orientation;
+        if (isFirstCellInWord(this.currentClue, this.selectedCell)) {
+            const prevClueId = this.getPrevClueId();
+            const clue = this.getClueById(prevClueId);
+            if (clue) {
+                const cell = getClueLastCell(clue);
+                console.log(cell);
+                this.selectClueByXY(cell);
+                return;
+            }
+        }
+        if (currentOrientation === 'horizontal') {
+            this.selectClueByXY(new Vec2(this.selectedCell.x - 1, this.selectedCell.y));
+        }
+        if (currentOrientation === 'vertical') {
+            this.selectClueByXY(new Vec2(this.selectedCell.x, this.selectedCell.y - 1));
         }
     }
     onFocusin() {
@@ -173,6 +234,7 @@ export class MBCrossword {
         if (!this.currentClueId) {
             this.currentClueId = this.allWords[0]?.id ?? null;
         }
+        this.textInput.focus();
     }
     onFocusOut() {
         this.isFocused = false;
@@ -236,8 +298,27 @@ export class MBCrossword {
         if (!clues.length) {
             return;
         }
-        const betterClue = clues.find(c => c.orientation === this.currentClue?.orientation);
-        this.selectClue(betterClue?.id ?? clues[0].id, { row: v.y, col: v.x });
+        if (this.selectedCell && clues.length === 2 && v.eq(Vec2.from(this.selectedCell))) {
+            const betterClue = clues.find(c => c.orientation !== this.currentClue?.orientation);
+            this.selectClue(betterClue?.id ?? clues[0].id, { row: v.y, col: v.x });
+        }
+        else {
+            const betterClue = clues.find(c => c.orientation === this.currentClue?.orientation);
+            this.selectClue(betterClue?.id ?? clues[0].id, { row: v.y, col: v.x });
+        }
+    }
+    getCluePreview(clue) {
+        if (!clue)
+            return '_';
+        const letters = Array(clue.word.length).fill('_');
+        for (let i = 0; i < clue.word.length; i++) {
+            const pointer = new Vec2(clue.x, clue.y).add(clue.orientation === 'vertical' ? new Vec2(0, 1 * i) : new Vec2(1 * i, 0));
+            const cell = this.cells[indexFromXY(pointer, this.boardWidth)];
+            if (cell.value) {
+                letters[i] = cell.value;
+            }
+        }
+        return letters.join('');
     }
     onKeyPress(event) {
         console.log(event);
@@ -248,9 +329,6 @@ export class MBCrossword {
                 this.selectClue(nextClue);
             }
         }
-        if (isKeyboardEventLetter(event)) {
-            this.inputLetter(event.key.toLowerCase()[0]);
-        }
         if (this.selectedCell) {
             switch (event.key) {
                 case 'ArrowLeft':
@@ -269,29 +347,61 @@ export class MBCrossword {
                     this.selectClueByXY(this.findNonblockedCell(new Vec2(this.selectedCell.x, this.selectedCell.y), new Vec2(0, 1)));
                     event.preventDefault();
                     return;
+                case 'Backspace':
+                    console.log('BACKSPACE!');
+                    this.backspace();
             }
         }
     }
+    onInput(event) {
+        if (isInputEventLetter(event)) {
+            this.inputLetter(event.data.toLowerCase()[0]);
+        }
+        this.textInput.value = '';
+    }
     render() {
-        return h("div", { key: 'e298ac6f3a1d95bc41c4854b39600f8ac7f1696d', part: "main", class: {
+        const hasVWords = Boolean(this.vWords.length);
+        const hasHWords = Boolean(this.hWords.length);
+        const twoLists = hasHWords && hasVWords;
+        return h("div", { key: '87d88806305c6102eeb76c3984d4b9c2ad2d9759', part: "main", class: {
                 "--focused": this.isFocused
-            }, onFocusin: this.onFocusin.bind(this), onFocusout: this.onFocusOut.bind(this), tabIndex: 0, onKeyDown: this.onKeyPress.bind(this) }, h("div", { key: '74be935779266effb4605f2aa5883bf564610bc0', part: "clues" }, h("div", { key: '125d8938e4f084562b54794158074bdaeda722b5', part: "clue-list" }, this.hWords.map(w => {
+            }, onFocusin: this.onFocusin.bind(this), onFocusout: this.onFocusOut.bind(this) }, h("input", { key: '49cdb053a4d2c4ad2c7eb881488b18c68e31fe65', type: "text", class: "dummy", ref: (el) => this.textInput = el, onKeyDown: this.onKeyPress.bind(this), onInput: this.onInput.bind(this) }), h("div", { key: '0ca71a907f70e17a6d2d10bff9462bd0b2284007', part: "clues", class: {
+                twoLists, oneList: !twoLists
+            } }, hasHWords ? h("div", { part: "clue-list" }, this.hWords.map(w => {
             const isCurrent = w.id === this.currentClueId;
-            return h(Clue, { word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
-        })), h("div", { key: '4469227db5156a2d0b30e4dc7ef9ea8f8a1fc3bc', part: "clue-list" }, this.vWords.map(w => {
+            return h(Clue, { showPreview: this.showCluePreview, preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
+        })) : '', hasVWords ? h("div", { part: "clue-list" }, this.vWords.map(w => {
             const isCurrent = w.id === this.currentClueId;
-            return h(Clue, { word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
-        }))), h("div", { key: '965b2e99d1fbf273907f722e8b15749fbd728070', part: "board", style: {
-                '--test': '12',
-                'grid-template-columns': `repeat(${this.boardWidth}, 1fr)`
-            } }, this.cells.map(cell => {
+            return h(Clue, { showPreview: this.showCluePreview, preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
+        })) : ''), h("div", { key: 'ea16dca25fe7884d25f9748f98740ad83e25293e', part: "board", style: {
+                '--board-width': `${this.boardWidth}`,
+                'grid-template-columns': `repeat(${this.boardWidth}, 1fr)`,
+                aspectRatio: `${this.boardWidth / this.boardHeight}`
+            } }, this.cells.filter(c => !c.isBlocked).map(cell => {
             const isInCurrentClue = this.isInClue(cell);
             const isSelected = this.isSelectedCell(cell);
-            return h(Cell, { isInCurrentClue: isInCurrentClue, isSelected: isSelected, data: cell });
-        })), h("div", { key: '3d97bcc65c5eb1d25b60aa5183a7c63f6eecebf9', part: "preview" }, "Tu bedzie podgl\u0105d: ", this.currentClueId));
+            const isSpecial = this.specialCells.some(c => c.x === cell.x && c.y === cell.y);
+            return h(Cell, { isSpecial: isSpecial, onPointerDown: () => this.selectClueByXY(Vec2.from(cell)), isInCurrentClue: isInCurrentClue, isSelected: isSelected, data: cell });
+        }), this.specialBorders.map((b, index) => {
+            return h("div", { key: index, part: "special-border", class: {
+                    'top': Boolean(b.border & 0x1000),
+                    'right': Boolean(b.border & 0x0100),
+                    'bottom': Boolean(b.border & 0x0010),
+                    'left': Boolean(b.border & 0x0001),
+                }, style: {
+                    "--x": `${b.x}`,
+                    "--y": `${b.y}`
+                } });
+        }), this.labels.map((label) => {
+            return h("div", { part: "label", style: {
+                    "--x": `${label.x}`,
+                    "--y": `${label.y}`
+                }, onPointerDown: () => this.selectClue(label.clueId) }, h("div", { class: "_inner" }, label.text));
+        })), h("div", { key: 'd391413e7be3dee148f2f5e6d8fbf22742278a0c', part: "preview" }, "Tu bedzie podgl\u0105d: ", this.currentClueId));
     }
     static get is() { return "mb-crossword"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["mb-crossword.scss"]
@@ -347,6 +457,26 @@ export class MBCrossword {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "showCluePreview": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-clue-preview",
+                "defaultValue": "true"
             }
         };
     }
@@ -358,6 +488,9 @@ export class MBCrossword {
             "currentClue": {},
             "isFocused": {},
             "selectedCell": {},
+            "specialBorders": {},
+            "specialCells": {},
+            "labels": {},
             "boardWidth": {},
             "boardHeight": {},
             "cells": {}
@@ -391,15 +524,39 @@ export class MBCrossword {
                     "text": "",
                     "tags": []
                 }
+            },
+            "checkAnswer": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "watchData"
+            }];
+    }
+}
+function isLastCellInClue(clue, cell) {
+    return getClueLastCell(clue).eq(Vec2.from(cell));
+}
+function isFirstCellInWord(clue, cell) {
+    return Vec2.from(clue).eq(Vec2.from(cell));
 }
-function isLastCellInWord(word, cell) {
-    const lastCellXY = [
-        word.x + (word.orientation === 'horizontal' ? (word.word.length - 1) : 0),
-        word.y + (word.orientation === 'vertical' ? (word.word.length - 1) : 0),
-    ];
-    const result = cell.x === lastCellXY[0] && cell.y === lastCellXY[1];
-    return result;
+function getClueLastCell(clue) {
+    return new Vec2(clue.x + (clue.orientation === 'horizontal' ? (clue.word.length - 1) : 0), clue.y + (clue.orientation === 'vertical' ? (clue.word.length - 1) : 0));
 }

package/dist/collection/utils/utils.js

@@ -13,3 +13,9 @@ export function isKeyboardEventLetter(event) {
     const key = event.key.toLowerCase();
     return /[0-9a-zA-Z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u024F]/.test(key);
 }
+export function isInputEventLetter(event) {
+    if (event.data.length !== 1)
+        return false;
+    const key = event.data.toLowerCase();
+    return /[0-9a-zA-Z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u024F]/.test(key);
+}