@mborecki/crossword 0.4.0 → 0.5.0

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mb-crossword.cjs",[[529,"mb-crossword",{"init":[4],"data":[16],"showCluePreview":[4,"show-clue-preview"],"clueListStyle":[1,"clue-list-style"],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"specialBorders":[32],"specialCells":[32],"labels":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"floatingPreviewHackParams":[32],"initGame":[64],"checkAnswer":[64],"selectClue":[64]},null,{"data":[{"watchData":0}]}]]]], options);
+  return index.bootstrapLazy([["mb-crossword.cjs",[[529,"mb-crossword",{"init":[4],"data":[16],"showCluePreview":[4,"show-clue-preview"],"clueListStyle":[1,"clue-list-style"],"compareFunction":[16],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"specialBorders":[32],"specialCells":[32],"labels":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"floatingPreviewHackParams":[32],"initGame":[64],"checkAnswer":[64],"selectClue":[64]},null,{"data":[{"watchData":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/mb-crossword.cjs.entry.js

@@ -67,6 +67,7 @@ const MBCrossword = class {
     data;
     showCluePreview = true;
     clueListStyle = 'ol';
+    compareFunction = (a, b) => { return a === b; };
     clueSelected;
     textInput;
     hWords = [];
@@ -81,7 +82,7 @@ const MBCrossword = class {
         if (this.init && this.data) {
             this.initGame();
         }
-        if (this.useStickyBottomHack && typeof window !== 'undefined') {
+        if (this.useStickyBottomHack && typeof window !== 'undefined' && window.visualViewport) {
             window.visualViewport.addEventListener('resize', this.updateFloatingPreview.bind(this), { signal: this.abortController.signal });
             window.visualViewport.addEventListener('scroll', this.updateFloatingPreview.bind(this), { signal: this.abortController.signal });
             this.updateFloatingPreview();
@@ -126,7 +127,7 @@ const MBCrossword = class {
     }
     async checkAnswer() {
         const cells = this.cells.filter(c => !c.isBlocked);
-        return cells.every(c => c.value === c.answer);
+        return cells.every(c => this.compareFunction(c.value, c.answer));
     }
     specialBorders = [];
     specialCells = [];
@@ -140,11 +141,13 @@ const MBCrossword = class {
         offsetTop: 0
     };
     updateFloatingPreview(_event) {
-        this.floatingPreviewHackParams = {
-            ...this.floatingPreviewHackParams,
-            height: window.visualViewport.height,
-            offsetTop: window.visualViewport.offsetTop
-        };
+        if (window.visualViewport) {
+            this.floatingPreviewHackParams = {
+                ...this.floatingPreviewHackParams,
+                height: window.visualViewport.height,
+                offsetTop: window.visualViewport.offsetTop
+            };
+        }
     }
     buildBoard() {
         let boardWidth = 0;
@@ -316,29 +319,64 @@ const MBCrossword = class {
     onFocusOut() {
         this.isFocused = false;
     }
-    async selectClue(id, { row, col } = {}) {
+    async selectClue(id, cell = null) {
         if (!id)
             return;
-        this.currentClueId = id;
-        const clue = this.allWords.find(w => w.id === id);
+        const clue = this.getClueById(id);
         if (!clue) {
             this.currentClueId = null;
             this.currentClue = null;
+            return;
         }
+        this.currentClueId = id;
         this.currentClue = clue;
         const selectCell = [clue.x, clue.y];
-        if (typeof row !== 'undefined' && clue.orientation === 'vertical') {
-            if (row >= clue.y && row < clue.y + clue.word.length) {
-                selectCell[1] = row;
+        if (cell && clue.orientation === 'vertical') {
+            if (cell.y >= clue.y && cell.y < clue.y + clue.word.length) {
+                selectCell[1] = cell.y;
             }
         }
-        if (typeof col !== 'undefined' && clue.orientation === 'horizontal') {
-            if (col >= clue.x && col < clue.x + clue.word.length) {
-                selectCell[0] = col;
+        if (cell && clue.orientation === 'horizontal') {
+            if (cell.x >= clue.x && cell.x < clue.x + clue.word.length) {
+                selectCell[0] = cell.x;
             }
         }
         this.selectCellByXY(index$1.Vec2.from(selectCell));
     }
+    selectClueFromCell(cell) {
+        const clue = this.getClueByXV(cell);
+        if (!clue)
+            return;
+        const preview = this.getCluePreview(clue);
+        console.log('selectClueFromCell', cell, clue, preview);
+        if (preview.replaceAll('_', '').length === 0) {
+            this.selectClue(clue.id, index$1.Vec2.from(clue));
+        }
+        else {
+            this.selectClue(clue.id, cell);
+        }
+    }
+    selectClueByXY(v) {
+        const clue = this.getClueByXV(v);
+        if (!clue)
+            return;
+        this.selectClue(clue.id, v);
+    }
+    getClueByXV(v) {
+        const clues = this.allWords.filter(w => this.isInClue(v, w));
+        console.log('getClueXY', clues);
+        if (!clues.length) {
+            return;
+        }
+        if (this.selectedCell && clues.length === 2 && v.eq(index$1.Vec2.from(this.selectedCell))) {
+            const betterClue = clues.find(c => c.orientation !== this.currentClue?.orientation);
+            return betterClue ?? clues[0];
+        }
+        else {
+            const betterClue = clues.find(c => c.orientation === this.currentClue?.orientation);
+            return betterClue ?? clues[0];
+        }
+    }
     selectCellByXY(v) {
         const selectCellIndex = index$1.indexFromXY(v, this.boardWidth);
         this.selectedCell = this.cells[selectCellIndex] ?? null;
@@ -370,20 +408,6 @@ const MBCrossword = class {
         const cell = this.cells[index$1.indexFromXY(v, this.boardWidth)];
         return cell?.isBlocked ?? true;
     }
-    selectClueByXY(v) {
-        const clues = this.allWords.filter(w => this.isInClue(v, w));
-        if (!clues.length) {
-            return;
-        }
-        if (this.selectedCell && clues.length === 2 && v.eq(index$1.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 '_';
@@ -442,14 +466,14 @@ const MBCrossword = class {
         const hideList = this.clueListStyle === 'none';
         const twoLists = hasHWords && hasVWords;
         const showFloatingClue = this.isFocused && this.currentClue && this.bowserParser.isPlatform('mobile');
-        return index.h("div", { key: 'b18bbd3453ad8c96cf6b5f04903380b0357d5842', part: "main", class: {
+        return index.h("div", { key: '6fed5a87911f7be97155b1f0f854266ffc618f7d', part: "main", class: {
                 "--focused": this.isFocused,
                 "--only-board": hideList,
                 "--sticky-bottom-hack": this.useStickyBottomHack
             }, onFocusin: this.onFocusin.bind(this), onFocusout: this.onFocusOut.bind(this), onClick: () => {
                 this.textInput.blur();
                 this.textInput.focus();
-            } }, index.h("input", { key: '59e427026f09803d1077d1c36f95284fe8d1b8ae', type: "text", class: "dummy", ref: (el) => this.textInput = el, onKeyDown: this.onKeyPress.bind(this), onInput: this.onInput.bind(this) }), hideList ? '' : index.h("div", { part: "clues", class: {
+            } }, index.h("input", { key: 'bffd1c704603b35b54f59c35092edb984a7adccb', type: "text", class: "dummy", ref: (el) => this.textInput = el, onKeyDown: this.onKeyPress.bind(this), onInput: this.onInput.bind(this) }), hideList ? '' : index.h("div", { part: "clues", class: {
                 twoLists,
                 oneList: !twoLists
             } }, hasHWords ? index.h(ClueList, { type: this.clueListStyle }, this.hWords.map(w => {
@@ -458,7 +482,7 @@ const MBCrossword = class {
         })) : '', hasVWords ? index.h(ClueList, { type: this.clueListStyle }, this.vWords.map(w => {
             const isCurrent = w.id === this.currentClueId;
             return index.h(Clue, { showPreview: this.showCluePreview, preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id), tagName: this.clueListStyle === 'ol' ? 'li' : undefined });
-        })) : ''), index.h("div", { key: 'a4803d792f38119e3ba78584acdbb0db677b4869', part: "board", style: {
+        })) : ''), index.h("div", { key: '9842d788d6e6a8df712c025474303ad0b0cf4f4b', part: "board", style: {
                 '--board-width': `${this.boardWidth}`,
                 'grid-template-columns': `repeat(${this.boardWidth}, 1fr)`,
                 aspectRatio: `${this.boardWidth / this.boardHeight}`
@@ -466,7 +490,7 @@ const MBCrossword = class {
             const isInCurrentClue = this.isInClue(cell);
             const isSelected = this.isSelectedCell(cell);
             const isSpecial = this.specialCells.some(c => c.x === cell.x && c.y === cell.y);
-            return index.h(Cell, { isSpecial: isSpecial, onPointerDown: () => this.selectClueByXY(index$1.Vec2.from(cell)), isInCurrentClue: isInCurrentClue, isSelected: isSelected, data: cell });
+            return index.h(Cell, { isSpecial: isSpecial, onPointerDown: () => this.selectClueFromCell(index$1.Vec2.from(cell)), isInCurrentClue: isInCurrentClue, isSelected: isSelected, data: cell });
         }), this.specialBorders.map((b, index$1) => {
             return index.h("div", { key: index$1, part: "special-border", class: {
                     'top': Boolean(b.border & 0x1000),

package/dist/cjs/mb-crossword.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mb-crossword.cjs",[[529,"mb-crossword",{"init":[4],"data":[16],"showCluePreview":[4,"show-clue-preview"],"clueListStyle":[1,"clue-list-style"],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"specialBorders":[32],"specialCells":[32],"labels":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"floatingPreviewHackParams":[32],"initGame":[64],"checkAnswer":[64],"selectClue":[64]},null,{"data":[{"watchData":0}]}]]]], options);
+  return index.bootstrapLazy([["mb-crossword.cjs",[[529,"mb-crossword",{"init":[4],"data":[16],"showCluePreview":[4,"show-clue-preview"],"clueListStyle":[1,"clue-list-style"],"compareFunction":[16],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"specialBorders":[32],"specialCells":[32],"labels":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"floatingPreviewHackParams":[32],"initGame":[64],"checkAnswer":[64],"selectClue":[64]},null,{"data":[{"watchData":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -10,6 +10,7 @@ export class MBCrossword {
     data;
     showCluePreview = true;
     clueListStyle = 'ol';
+    compareFunction = (a, b) => { return a === b; };
     clueSelected;
     textInput;
     hWords = [];
@@ -24,7 +25,7 @@ export class MBCrossword {
         if (this.init && this.data) {
             this.initGame();
         }
-        if (this.useStickyBottomHack && typeof window !== 'undefined') {
+        if (this.useStickyBottomHack && typeof window !== 'undefined' && window.visualViewport) {
             window.visualViewport.addEventListener('resize', this.updateFloatingPreview.bind(this), { signal: this.abortController.signal });
             window.visualViewport.addEventListener('scroll', this.updateFloatingPreview.bind(this), { signal: this.abortController.signal });
             this.updateFloatingPreview();
@@ -69,7 +70,7 @@ export class MBCrossword {
     }
     async checkAnswer() {
         const cells = this.cells.filter(c => !c.isBlocked);
-        return cells.every(c => c.value === c.answer);
+        return cells.every(c => this.compareFunction(c.value, c.answer));
     }
     specialBorders = [];
     specialCells = [];
@@ -83,11 +84,13 @@ export class MBCrossword {
         offsetTop: 0
     };
     updateFloatingPreview(_event) {
-        this.floatingPreviewHackParams = {
-            ...this.floatingPreviewHackParams,
-            height: window.visualViewport.height,
-            offsetTop: window.visualViewport.offsetTop
-        };
+        if (window.visualViewport) {
+            this.floatingPreviewHackParams = {
+                ...this.floatingPreviewHackParams,
+                height: window.visualViewport.height,
+                offsetTop: window.visualViewport.offsetTop
+            };
+        }
     }
     buildBoard() {
         let boardWidth = 0;
@@ -259,29 +262,64 @@ export class MBCrossword {
     onFocusOut() {
         this.isFocused = false;
     }
-    async selectClue(id, { row, col } = {}) {
+    async selectClue(id, cell = null) {
         if (!id)
             return;
-        this.currentClueId = id;
-        const clue = this.allWords.find(w => w.id === id);
+        const clue = this.getClueById(id);
         if (!clue) {
             this.currentClueId = null;
             this.currentClue = null;
+            return;
         }
+        this.currentClueId = id;
         this.currentClue = clue;
         const selectCell = [clue.x, clue.y];
-        if (typeof row !== 'undefined' && clue.orientation === 'vertical') {
-            if (row >= clue.y && row < clue.y + clue.word.length) {
-                selectCell[1] = row;
+        if (cell && clue.orientation === 'vertical') {
+            if (cell.y >= clue.y && cell.y < clue.y + clue.word.length) {
+                selectCell[1] = cell.y;
             }
         }
-        if (typeof col !== 'undefined' && clue.orientation === 'horizontal') {
-            if (col >= clue.x && col < clue.x + clue.word.length) {
-                selectCell[0] = col;
+        if (cell && clue.orientation === 'horizontal') {
+            if (cell.x >= clue.x && cell.x < clue.x + clue.word.length) {
+                selectCell[0] = cell.x;
             }
         }
         this.selectCellByXY(Vec2.from(selectCell));
     }
+    selectClueFromCell(cell) {
+        const clue = this.getClueByXV(cell);
+        if (!clue)
+            return;
+        const preview = this.getCluePreview(clue);
+        console.log('selectClueFromCell', cell, clue, preview);
+        if (preview.replaceAll('_', '').length === 0) {
+            this.selectClue(clue.id, Vec2.from(clue));
+        }
+        else {
+            this.selectClue(clue.id, cell);
+        }
+    }
+    selectClueByXY(v) {
+        const clue = this.getClueByXV(v);
+        if (!clue)
+            return;
+        this.selectClue(clue.id, v);
+    }
+    getClueByXV(v) {
+        const clues = this.allWords.filter(w => this.isInClue(v, w));
+        console.log('getClueXY', clues);
+        if (!clues.length) {
+            return;
+        }
+        if (this.selectedCell && clues.length === 2 && v.eq(Vec2.from(this.selectedCell))) {
+            const betterClue = clues.find(c => c.orientation !== this.currentClue?.orientation);
+            return betterClue ?? clues[0];
+        }
+        else {
+            const betterClue = clues.find(c => c.orientation === this.currentClue?.orientation);
+            return betterClue ?? clues[0];
+        }
+    }
     selectCellByXY(v) {
         const selectCellIndex = indexFromXY(v, this.boardWidth);
         this.selectedCell = this.cells[selectCellIndex] ?? null;
@@ -313,20 +351,6 @@ export class MBCrossword {
         const cell = this.cells[indexFromXY(v, this.boardWidth)];
         return cell?.isBlocked ?? true;
     }
-    selectClueByXY(v) {
-        const clues = this.allWords.filter(w => this.isInClue(v, w));
-        if (!clues.length) {
-            return;
-        }
-        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 '_';
@@ -385,14 +409,14 @@ export class MBCrossword {
         const hideList = this.clueListStyle === 'none';
         const twoLists = hasHWords && hasVWords;
         const showFloatingClue = this.isFocused && this.currentClue && this.bowserParser.isPlatform('mobile');
-        return h("div", { key: 'b18bbd3453ad8c96cf6b5f04903380b0357d5842', part: "main", class: {
+        return h("div", { key: '6fed5a87911f7be97155b1f0f854266ffc618f7d', part: "main", class: {
                 "--focused": this.isFocused,
                 "--only-board": hideList,
                 "--sticky-bottom-hack": this.useStickyBottomHack
             }, onFocusin: this.onFocusin.bind(this), onFocusout: this.onFocusOut.bind(this), onClick: () => {
                 this.textInput.blur();
                 this.textInput.focus();
-            } }, h("input", { key: '59e427026f09803d1077d1c36f95284fe8d1b8ae', type: "text", class: "dummy", ref: (el) => this.textInput = el, onKeyDown: this.onKeyPress.bind(this), onInput: this.onInput.bind(this) }), hideList ? '' : h("div", { part: "clues", class: {
+            } }, h("input", { key: 'bffd1c704603b35b54f59c35092edb984a7adccb', type: "text", class: "dummy", ref: (el) => this.textInput = el, onKeyDown: this.onKeyPress.bind(this), onInput: this.onInput.bind(this) }), hideList ? '' : h("div", { part: "clues", class: {
                 twoLists,
                 oneList: !twoLists
             } }, hasHWords ? h(ClueList, { type: this.clueListStyle }, this.hWords.map(w => {
@@ -401,7 +425,7 @@ export class MBCrossword {
         })) : '', hasVWords ? h(ClueList, { type: this.clueListStyle }, this.vWords.map(w => {
             const isCurrent = w.id === this.currentClueId;
             return h(Clue, { showPreview: this.showCluePreview, preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id), tagName: this.clueListStyle === 'ol' ? 'li' : undefined });
-        })) : ''), h("div", { key: 'a4803d792f38119e3ba78584acdbb0db677b4869', part: "board", style: {
+        })) : ''), h("div", { key: '9842d788d6e6a8df712c025474303ad0b0cf4f4b', part: "board", style: {
                 '--board-width': `${this.boardWidth}`,
                 'grid-template-columns': `repeat(${this.boardWidth}, 1fr)`,
                 aspectRatio: `${this.boardWidth / this.boardHeight}`
@@ -409,7 +433,7 @@ export class MBCrossword {
             const isInCurrentClue = this.isInClue(cell);
             const isSelected = this.isSelectedCell(cell);
             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 });
+            return h(Cell, { isSpecial: isSpecial, onPointerDown: () => this.selectClueFromCell(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),
@@ -530,6 +554,24 @@ export class MBCrossword {
                 "reflect": false,
                 "attribute": "clue-list-style",
                 "defaultValue": "'ol'"
+            },
+            "compareFunction": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(a: string, b: string) => boolean",
+                    "resolved": "(a: string, b: string) => boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "(a,b) => {return a === b}"
             }
         };
     }
@@ -616,20 +658,26 @@ export class MBCrossword {
             },
             "selectClue": {
                 "complexType": {
-                    "signature": "(id: string, { row, col }?: { row?: number; col?: number; }) => Promise<void>",
+                    "signature": "(id: string, cell?: Vec2 | null) => Promise<void>",
                     "parameters": [{
                             "name": "id",
                             "type": "string",
                             "docs": ""
                         }, {
-                            "name": "__1",
-                            "type": "{ row?: number; col?: number; }",
+                            "name": "cell",
+                            "type": "Vec2",
                             "docs": ""
                         }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "Vec2": {
+                            "location": "import",
+                            "path": "@mb-puzzle/vec2",
+                            "id": "../../shared/vec2/src/vec2.ts::Vec2",
+                            "referenceLocation": "Vec2"
                         }
                     },
                     "return": "Promise<void>"