@mborecki/crossword 0.1.0 → 0.2.1

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],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"specialBorders":[32],"specialCells":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"initGame":[64]},null,{"data":[{"watchData":0}]}]]]], options);
+  return index.bootstrapLazy([["mb-crossword.cjs",[[529,"mb-crossword",{"init":[4],"data":[16],"showCluePreview":[4,"show-clue-preview"],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"specialBorders":[32],"specialCells":[32],"labels":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"initGame":[64],"checkAnswer":[64]},null,{"data":[{"watchData":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -3,10 +3,10 @@
 var index = require('./index-BlTGwvVC.js');
 var index$1 = require('./index-CEGyCfpa.js');
 
-function Clue({ isCurrent, word, onPointerDown, preview }) {
+function Clue({ isCurrent, word, onPointerDown, preview, showPreview }) {
     return index.h("p", { onPointerDown: onPointerDown, part: "clue", class: {
             "--current": isCurrent
-        } }, word.clue, index.h("span", { class: "preview" }, preview));
+        } }, word.clue, showPreview && index.h("span", { class: "preview" }, preview));
 }
 
 function Cell({ data, isInCurrentClue, isSelected, isSpecial, onPointerDown }) {
@@ -22,7 +22,7 @@ function Cell({ data, isInCurrentClue, isSelected, isSpecial, onPointerDown }) {
         } }, index.h("div", { class: "_inner", style: { position: 'absolute', width: '100%' } }, data.value));
 }
 
-const mbCrosswordCss = () => `*[part=main]{position:relative;display:grid;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}[part=clues]{grid-area:clues;display:grid;grid-template-columns:1fr 1fr}[part=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:block;position:relative;container-type:size;background:darkgoldenrod;--border:1px;--cell-width:calc((100cqw - var(--border)) / var(--board-width, 10))}[part=cell]{display:block;width:calc(var(--cell-width) - var(--border));aspect-ratio:1;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(--border) solid red}[part=cell].--alt{background:#999}[part=cell].--in-current-clue{box-shadow:inset 0 0 2px 2px lightblue}[part=cell].--selected{background:lightblue}[part=cell].--special{background:lightgreen}[part=cell] ._inner{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-content:center;text-transform:uppercase;font-size:80cqh}[part=preview]{display:none}[part=special-border]{display:block;background:black;position:absolute;z-index:100;--s-border:max(2px, var(--border))}[part=special-border].left,[part=special-border].right{width:var(--s-border);height:calc(var(--cell-width) - var(--border));top:calc(var(--y, 0) * var(--cell-width) + var(--border))}[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(--border));height:var(--s-border);left:calc(var(--x, 0) * var(--cell-width) + var(--border))}[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))}`;
+const mbCrosswordCss = () => `*[part=main]{position:relative;display:grid;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;outline: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: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: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: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].--alt{background:var(--cell-background-alt, #999)}[part=cell].--in-current-clue{box-shadow:inset 0 0 2px 2px var(--cell-selected-background, lightblue)}[part=cell].--selected{background:var(--cell-selected-background, lightblue)}[part=cell].--special{background:var(--cell-special-background, lightgreen)}[part=cell] ._inner{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-content:center;text-transform:uppercase;font-size:80cqh}[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;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;border:var(--cell-border-width) solid transparent;--label-place-content:center end}[part=label] ._inner{position:absolute;top:var(--label-padding, 10cqh);left:var(--label-padding, 10cqh);right:var(--label-padding, 10cqh);bottom:var(--label-padding, 10cqh);display:grid;place-content:var(--label-place-content, center);text-transform:uppercase;font-size:var(--label-font-size, 60cqh)}`;
 
 const MBCrossword = class {
     constructor(hostRef) {
@@ -30,6 +30,7 @@ const MBCrossword = class {
     }
     init = true;
     data;
+    showCluePreview = true;
     textInput;
     hWords = [];
     vWords = [];
@@ -75,10 +76,20 @@ const MBCrossword = class {
         });
         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 = [];
@@ -113,6 +124,7 @@ const MBCrossword = class {
                     const v = index$1.Vec2.from(w);
                     const cellIndex = index$1.indexFromXY(new index$1.Vec2(v.x + i, v.y), boardWidth);
                     cells[cellIndex].isBlocked = false;
+                    cells[cellIndex].answer = w.word[i];
                 }
             }
             if (w.orientation === 'vertical') {
@@ -120,6 +132,7 @@ const MBCrossword = class {
                     const v = index$1.Vec2.from(w);
                     const cellIndex = index$1.indexFromXY(new index$1.Vec2(v.x, v.y + i), boardWidth);
                     cells[cellIndex].isBlocked = false;
+                    cells[cellIndex].answer = w.word[i];
                 }
             }
         });
@@ -340,9 +353,6 @@ const MBCrossword = class {
                 this.selectClue(nextClue);
             }
         }
-        // if (isKeyboardEventLetter(event)) {
-        //   this.inputLetter(event.key.toLowerCase()[0]);
-        // }
         if (this.selectedCell) {
             switch (event.key) {
                 case 'ArrowLeft':
@@ -374,15 +384,20 @@ const MBCrossword = class {
         this.textInput.value = '';
     }
     render() {
-        return index.h("div", { key: '1dec8e0d58c347be7a44c19c416d3940c37ccf0c', part: "main", class: {
+        const hasVWords = Boolean(this.vWords.length);
+        const hasHWords = Boolean(this.hWords.length);
+        const twoLists = hasHWords && hasVWords;
+        return index.h("div", { key: '87d88806305c6102eeb76c3984d4b9c2ad2d9759', part: "main", class: {
                 "--focused": this.isFocused
-            }, onFocusin: this.onFocusin.bind(this), onFocusout: this.onFocusOut.bind(this) }, index.h("input", { key: '40c9f176b21072bcd084871b9caff7add03c9680', type: "text", class: "dummy", ref: (el) => this.textInput = el, onKeyDown: this.onKeyPress.bind(this), onInput: this.onInput.bind(this) }), index.h("div", { key: '14eb06bad93227192ea299ecd27f12cf58304cea', part: "clues" }, index.h("div", { key: 'e58b0150ff780acd6f770b009d3936a3a7195138', part: "clue-list" }, this.hWords.map(w => {
+            }, onFocusin: this.onFocusin.bind(this), onFocusout: this.onFocusOut.bind(this) }, index.h("input", { key: '49cdb053a4d2c4ad2c7eb881488b18c68e31fe65', type: "text", class: "dummy", ref: (el) => this.textInput = el, onKeyDown: this.onKeyPress.bind(this), onInput: this.onInput.bind(this) }), index.h("div", { key: '0ca71a907f70e17a6d2d10bff9462bd0b2284007', part: "clues", class: {
+                twoLists, oneList: !twoLists
+            } }, hasHWords ? index.h("div", { part: "clue-list" }, this.hWords.map(w => {
             const isCurrent = w.id === this.currentClueId;
-            return index.h(Clue, { preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
-        })), index.h("div", { key: '13c5ca874d95561654096aa09d5b715576d4392d', part: "clue-list" }, this.vWords.map(w => {
+            return index.h(Clue, { showPreview: this.showCluePreview, preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
+        })) : '', hasVWords ? index.h("div", { part: "clue-list" }, this.vWords.map(w => {
             const isCurrent = w.id === this.currentClueId;
-            return index.h(Clue, { preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
-        }))), index.h("div", { key: '02b43a7a46253d36ad8975d8ab9426af208e82f4', part: "board", style: {
+            return index.h(Clue, { showPreview: this.showCluePreview, preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
+        })) : ''), index.h("div", { key: 'ea16dca25fe7884d25f9748f98740ad83e25293e', part: "board", style: {
                 '--board-width': `${this.boardWidth}`,
                 'grid-template-columns': `repeat(${this.boardWidth}, 1fr)`,
                 aspectRatio: `${this.boardWidth / this.boardHeight}`
@@ -401,7 +416,12 @@ const MBCrossword = class {
                     "--x": `${b.x}`,
                     "--y": `${b.y}`
                 } });
-        })), index.h("div", { key: '24818d75c9ecf6df2f4e1044ab8d74e1e413f29e', part: "preview" }, "Tu bedzie podgl\u0105d: ", this.currentClueId));
+        }), this.labels.map((label) => {
+            return index.h("div", { part: "label", style: {
+                    "--x": `${label.x}`,
+                    "--y": `${label.y}`
+                }, onPointerDown: () => this.selectClue(label.clueId) }, index.h("div", { class: "_inner" }, label.text));
+        })), index.h("div", { key: 'd391413e7be3dee148f2f5e6d8fbf22742278a0c', part: "preview" }, "Tu bedzie podgl\u0105d: ", this.currentClueId));
     }
     static get delegatesFocus() { return true; }
     static get watchers() { return {

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],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"specialBorders":[32],"specialCells":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"initGame":[64]},null,{"data":[{"watchData":0}]}]]]], options);
+  return index.bootstrapLazy([["mb-crossword.cjs",[[529,"mb-crossword",{"init":[4],"data":[16],"showCluePreview":[4,"show-clue-preview"],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"specialBorders":[32],"specialCells":[32],"labels":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"initGame":[64],"checkAnswer":[64]},null,{"data":[{"watchData":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/crossword/clue.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-export function Clue({ isCurrent, word, onPointerDown, preview }) {
+export function Clue({ isCurrent, word, onPointerDown, preview, showPreview }) {
     return h("p", { onPointerDown: onPointerDown, part: "clue", class: {
             "--current": isCurrent
-        } }, word.clue, h("span", { class: "preview" }, preview));
+        } }, word.clue, showPreview && h("span", { class: "preview" }, preview));
 }

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

@@ -18,16 +18,22 @@
   opacity: 0.2;
   z-index: 100;
   grid-area: board;
+  border: none;
+  outline: 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;
@@ -46,33 +52,36 @@
   display: block;
   position: relative;
   container-type: size;
-  background: darkgoldenrod;
-  --border: 1px;
-  --cell-width: calc((100cqw - var(--border)) / var(--board-width, 10));
+  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;
-  width: calc(var(--cell-width) - var(--border));
+  color: var(--cell-color, #11138d);
+  width: calc(var(--cell-width) - var(--cell-border-width));
   aspect-ratio: 1;
-  background: #d9d9d9;
+  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(--border) solid red;
+  border: var(--cell-border-width) solid var(--cell-border-color, red);
 }
 [part=cell].--alt {
-  background: #999;
+  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: lightgreen;
+  background: var(--cell-special-background, lightgreen);
 }
 [part=cell] ._inner {
   position: absolute;
@@ -95,12 +104,12 @@
   background: black;
   position: absolute;
   z-index: 100;
-  --s-border: max(2px, var(--border));
+  --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(--border));
-  top: calc(var(--y, 0) * var(--cell-width) + var(--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);
@@ -109,13 +118,36 @@
   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(--border));
+  width: calc(var(--cell-width) - var(--cell-border-width));
   height: var(--s-border);
-  left: calc(var(--x, 0) * var(--cell-width) + var(--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;
+  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;
+  border: var(--cell-border-width) solid transparent;
+  --label-place-content: center end;
+}
+[part=label] ._inner {
+  position: absolute;
+  top: var(--label-padding, 10cqh);
+  left: var(--label-padding, 10cqh);
+  right: var(--label-padding, 10cqh);
+  bottom: var(--label-padding, 10cqh);
+  display: grid;
+  place-content: var(--label-place-content, center);
+  text-transform: uppercase;
+  font-size: var(--label-font-size, 60cqh);
 }

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

@@ -6,6 +6,7 @@ import { Vec2 } from "@mb-puzzle/vec2";
 export class MBCrossword {
     init = true;
     data;
+    showCluePreview = true;
     textInput;
     hWords = [];
     vWords = [];
@@ -51,10 +52,20 @@ export class MBCrossword {
         });
         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 = [];
@@ -89,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') {
@@ -96,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];
                 }
             }
         });
@@ -316,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':
@@ -350,15 +360,20 @@ export class MBCrossword {
         this.textInput.value = '';
     }
     render() {
-        return h("div", { key: '1dec8e0d58c347be7a44c19c416d3940c37ccf0c', 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) }, h("input", { key: '40c9f176b21072bcd084871b9caff7add03c9680', type: "text", class: "dummy", ref: (el) => this.textInput = el, onKeyDown: this.onKeyPress.bind(this), onInput: this.onInput.bind(this) }), h("div", { key: '14eb06bad93227192ea299ecd27f12cf58304cea', part: "clues" }, h("div", { key: 'e58b0150ff780acd6f770b009d3936a3a7195138', 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, { preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
-        })), h("div", { key: '13c5ca874d95561654096aa09d5b715576d4392d', 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, { preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
-        }))), h("div", { key: '02b43a7a46253d36ad8975d8ab9426af208e82f4', part: "board", style: {
+            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}`
@@ -377,7 +392,12 @@ export class MBCrossword {
                     "--x": `${b.x}`,
                     "--y": `${b.y}`
                 } });
-        })), h("div", { key: '24818d75c9ecf6df2f4e1044ab8d74e1e413f29e', part: "preview" }, "Tu bedzie podgl\u0105d: ", this.currentClueId));
+        }), 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"; }
@@ -437,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"
             }
         };
     }
@@ -450,6 +490,7 @@ export class MBCrossword {
             "selectedCell": {},
             "specialBorders": {},
             "specialCells": {},
+            "labels": {},
             "boardWidth": {},
             "boardHeight": {},
             "cells": {}
@@ -483,6 +524,23 @@ export class MBCrossword {
                     "text": "",
                     "tags": []
                 }
+            },
+            "checkAnswer": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }

package/dist/components/mb-crossword.js

@@ -1 +1 @@
-import{h as t,t as e,p as i,H as s,Vec2fromIndex as r,V as l,f as o,isInputEventLetter as a,indexFromXY as n}from"./index.js";function c({isCurrent:e,word:i,onPointerDown:s,preview:r}){return t("p",{onPointerDown:s,part:"clue",class:{"--current":e}},i.clue,t("span",{class:"preview"},r))}function h({data:e,isInCurrentClue:i,isSelected:s,isSpecial:r,onPointerDown:l}){return t("div",{onPointerDown:l,part:"cell",class:{"--blocked":e.isBlocked,"--in-current-clue":i,"--selected":s,"--alt":!((e.x+e.y)%2),"--special":r},style:{"--x":""+e.x,"--y":""+e.y}},t("div",{class:"_inner",style:{position:"absolute",width:"100%"}},e.value))}const d=i(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}init=!0;data;textInput;hWords=[];vWords=[];currentClueId=null;currentClue=null;isFocused=!1;selectedCell=null;componentWillLoad(){console.log("componentWillLoad",this.init,this.data),this.init&&this.data&&this.initGame()}watchData(){this.init&&this.data&&this.initGame()}get allWords(){return[...this.hWords,...this.vWords]}async initGame(t=this.data){if(console.log("initGame"),!t.words)throw Error("Words definition missing");this.hWords=[],this.vWords=[],t.words.forEach(((t,e)=>{const i=Math.random();void 0===t.id&&(t.id=`${i}_${e}`),"horizontal"===t.orientation&&(this.hWords=[...this.hWords,t]),"vertical"===t.orientation&&(this.vWords=[...this.vWords,t])})),this.specialBorders=t.specialBorders??[],this.specialCells=t.specialCells??[],this.buildBoard()}specialBorders=[];specialCells=[];boardWidth=0;boardHeight=0;cells=[];buildBoard(){let t=0,e=0;this.allWords.forEach((i=>{"horizontal"===i.orientation&&(t=Math.max(t,i.x+i.word.length),e=Math.max(e,i.y+1)),"vertical"===i.orientation&&(t=Math.max(t,i.x+1),e=Math.max(e,i.y+i.word.length))}));const i=Array(e*t).fill(null).map(((e,i)=>{const[s,l]=r(i,t);return{index:i,x:s,y:l,value:null,isCurrent:!1,isInCurrentWord:!1,isBlocked:!0}}));this.allWords.forEach((e=>{if("horizontal"===e.orientation)for(let s=0;s<e.word.length;s++){const r=l.from(e),o=n(new l(r.x+s,r.y),t);i[o].isBlocked=!1}if("vertical"===e.orientation)for(let s=0;s<e.word.length;s++){const r=l.from(e),o=n(new l(r.x,r.y+s),t);i[o].isBlocked=!1}})),this.cells=i,this.boardWidth=t,this.boardHeight=e}getClueById(t){return this.allWords.find((e=>e.id===t))??null}isInClue(t,e=this.currentClue){return null!==e&&(t.x===e.x||t.y===e.y)&&("horizontal"===e.orientation?!(t.y!==e.y||t.x<e.x||t.x>=e.x+e.word.length):"vertical"===e.orientation?!(t.x!==e.x||t.y<e.y||t.y>=e.y+e.word.length):void 0)}isSelectedCell(t){return!!this.selectedCell&&t.x===this.selectedCell.x&&t.y===this.selectedCell.y}getNextClueId(){if(!this.currentClueId)return this.allWords[0]?.id??null;const t=this.allWords.findIndex((t=>t.id===this.currentClueId));return t<0?this.allWords[0]?.id??null:this.allWords[t+1]?.id??null}getPrevClueId(){if(!this.currentClueId)return this.allWords[0]?.id??null;const t=this.allWords.findIndex((t=>t.id===this.currentClueId));return t<0?this.allWords[0]?.id??null:this.allWords[t-1]?.id??null}inputLetter(t){this.selectedCell&&(this.selectedCell.value=t,this.selectNextCell(),o(this))}backspace(){this.selectedCell&&(this.selectedCell.value?(this.selectedCell.value="",this.selectPrevCell()):(this.selectPrevCell(),this.selectedCell.value=""),o(this))}selectNextCell(){if(!this.selectedCell||!this.currentClue)return;const t=this.currentClue.orientation;if(function(t,e){return u(t).eq(l.from(e))}(this.currentClue,this.selectedCell)){const t=this.getNextClueId(),e=this.getClueById(t);return e?void this.selectClueByXY(l.from(e)):void 0}"horizontal"===t&&this.selectClueByXY(new l(this.selectedCell.x+1,this.selectedCell.y)),"vertical"===t&&this.selectClueByXY(new l(this.selectedCell.x,this.selectedCell.y+1))}selectPrevCell(){if(!this.selectedCell||!this.currentClue)return;const t=this.currentClue.orientation;if(function(t,e){return l.from(t).eq(l.from(e))}(this.currentClue,this.selectedCell)){const t=this.getPrevClueId(),e=this.getClueById(t);if(e){const t=u(e);return console.log(t),void this.selectClueByXY(t)}}"horizontal"===t&&this.selectClueByXY(new l(this.selectedCell.x-1,this.selectedCell.y)),"vertical"===t&&this.selectClueByXY(new l(this.selectedCell.x,this.selectedCell.y-1))}onFocusin(){this.isFocused=!0,this.currentClueId||(this.currentClueId=this.allWords[0]?.id??null),this.textInput.focus()}onFocusOut(){this.isFocused=!1}selectClue(t,{row:e,col:i}={}){if(!t)return;this.currentClueId=t;const s=this.allWords.find((e=>e.id===t));s||(this.currentClueId=null,this.currentClue=null),this.currentClue=s;const r=[s.x,s.y];void 0!==e&&"vertical"===s.orientation&&e>=s.y&&e<s.y+s.word.length&&(r[1]=e),void 0!==i&&"horizontal"===s.orientation&&i>=s.x&&i<s.x+s.word.length&&(r[0]=i),this.selectCellByXY(l.from(r))}selectCellByXY(t){const e=n(t,this.boardWidth);this.selectedCell=this.cells[e]??null}findNonblockedCell(t,e){const i=new l(t[0]+e[0],t[1]+e[1]),s=this.boardWidth*this.boardHeight;let r=0;for(;this.isCellBlocked(i)&&r<s;)r++,i[0]+=e[0],i[1]+=e[1],i[0]<0&&(i[0]=this.boardWidth-1),i[0]>=this.boardWidth&&(i[0]=0),i[1]<0&&(i[1]=this.boardHeight-1),i[1]>=this.boardHeight&&(i[1]=0);return i}isCellBlocked(t){const e=this.cells[n(t,this.boardWidth)];return e?.isBlocked??!0}selectClueByXY(t){const e=this.allWords.filter((e=>this.isInClue(t,e)));if(e.length)if(this.selectedCell&&2===e.length&&t.eq(l.from(this.selectedCell))){const i=e.find((t=>t.orientation!==this.currentClue?.orientation));this.selectClue(i?.id??e[0].id,{row:t.y,col:t.x})}else{const i=e.find((t=>t.orientation===this.currentClue?.orientation));this.selectClue(i?.id??e[0].id,{row:t.y,col:t.x})}}getCluePreview(t){if(!t)return"_";const e=Array(t.word.length).fill("_");for(let i=0;i<t.word.length;i++){const s=new l(t.x,t.y).add("vertical"===t.orientation?new l(0,1*i):new l(1*i,0)),r=this.cells[n(s,this.boardWidth)];r.value&&(e[i]=r.value)}return e.join("")}onKeyPress(t){if(console.log(t),"Tab"===t.key){const e=t.shiftKey?this.getPrevClueId():this.getNextClueId();e&&(t.preventDefault(),this.selectClue(e))}if(this.selectedCell)switch(t.key){case"ArrowLeft":return this.selectClueByXY(this.findNonblockedCell(new l(this.selectedCell.x,this.selectedCell.y),new l(-1,0))),void t.preventDefault();case"ArrowRight":return this.selectClueByXY(this.findNonblockedCell(new l(this.selectedCell.x,this.selectedCell.y),new l(1,0))),void t.preventDefault();case"ArrowUp":return this.selectClueByXY(this.findNonblockedCell(new l(this.selectedCell.x,this.selectedCell.y),new l(0,-1))),void t.preventDefault();case"ArrowDown":return this.selectClueByXY(this.findNonblockedCell(new l(this.selectedCell.x,this.selectedCell.y),new l(0,1))),void t.preventDefault();case"Backspace":console.log("BACKSPACE!"),this.backspace()}}onInput(t){a(t)&&this.inputLetter(t.data.toLowerCase()[0]),this.textInput.value=""}render(){return t("div",{key:"1dec8e0d58c347be7a44c19c416d3940c37ccf0c",part:"main",class:{"--focused":this.isFocused},onFocusin:this.onFocusin.bind(this),onFocusout:this.onFocusOut.bind(this)},t("input",{key:"40c9f176b21072bcd084871b9caff7add03c9680",type:"text",class:"dummy",ref:t=>this.textInput=t,onKeyDown:this.onKeyPress.bind(this),onInput:this.onInput.bind(this)}),t("div",{key:"14eb06bad93227192ea299ecd27f12cf58304cea",part:"clues"},t("div",{key:"e58b0150ff780acd6f770b009d3936a3a7195138",part:"clue-list"},this.hWords.map((e=>{const i=e.id===this.currentClueId;return t(c,{preview:this.getCluePreview(e),word:e,isCurrent:i,onPointerDown:()=>this.selectClue(e.id)})}))),t("div",{key:"13c5ca874d95561654096aa09d5b715576d4392d",part:"clue-list"},this.vWords.map((e=>{const i=e.id===this.currentClueId;return t(c,{preview:this.getCluePreview(e),word:e,isCurrent:i,onPointerDown:()=>this.selectClue(e.id)})})))),t("div",{key:"02b43a7a46253d36ad8975d8ab9426af208e82f4",part:"board",style:{"--board-width":""+this.boardWidth,"grid-template-columns":`repeat(${this.boardWidth}, 1fr)`,aspectRatio:""+this.boardWidth/this.boardHeight}},this.cells.filter((t=>!t.isBlocked)).map((e=>{const i=this.isInClue(e),s=this.isSelectedCell(e),r=this.specialCells.some((t=>t.x===e.x&&t.y===e.y));return t(h,{isSpecial:r,onPointerDown:()=>this.selectClueByXY(l.from(e)),isInCurrentClue:i,isSelected:s,data:e})})),this.specialBorders.map(((e,i)=>t("div",{key:i,part:"special-border",class:{top:!!(4096&e.border),right:!!(256&e.border),bottom:!!(16&e.border),left:!!(1&e.border)},style:{"--x":""+e.x,"--y":""+e.y}})))),t("div",{key:"24818d75c9ecf6df2f4e1044ab8d74e1e413f29e",part:"preview"},"Tu bedzie podgląd: ",this.currentClueId))}static get delegatesFocus(){return!0}static get watchers(){return{data:[{watchData:0}]}}static get style(){return'*[part=main]{position:relative;display:grid;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}[part=clues]{grid-area:clues;display:grid;grid-template-columns:1fr 1fr}[part=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:block;position:relative;container-type:size;background:darkgoldenrod;--border:1px;--cell-width:calc((100cqw - var(--border)) / var(--board-width, 10))}[part=cell]{display:block;width:calc(var(--cell-width) - var(--border));aspect-ratio:1;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(--border) solid red}[part=cell].--alt{background:#999}[part=cell].--in-current-clue{box-shadow:inset 0 0 2px 2px lightblue}[part=cell].--selected{background:lightblue}[part=cell].--special{background:lightgreen}[part=cell] ._inner{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-content:center;text-transform:uppercase;font-size:80cqh}[part=preview]{display:none}[part=special-border]{display:block;background:black;position:absolute;z-index:100;--s-border:max(2px, var(--border))}[part=special-border].left,[part=special-border].right{width:var(--s-border);height:calc(var(--cell-width) - var(--border));top:calc(var(--y, 0) * var(--cell-width) + var(--border))}[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(--border));height:var(--s-border);left:calc(var(--x, 0) * var(--cell-width) + var(--border))}[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))}'}},[529,"mb-crossword",{init:[4],data:[16],hWords:[32],vWords:[32],currentClueId:[32],currentClue:[32],isFocused:[32],selectedCell:[32],specialBorders:[32],specialCells:[32],boardWidth:[32],boardHeight:[32],cells:[32],initGame:[64]},void 0,{data:[{watchData:0}]}]);function u(t){return new l(t.x+("horizontal"===t.orientation?t.word.length-1:0),t.y+("vertical"===t.orientation?t.word.length-1:0))}function p(){"undefined"!=typeof customElements&&["mb-crossword"].forEach((t=>{"mb-crossword"===t&&(customElements.get(e(t))||customElements.define(e(t),d))}))}p();const b=d,v=p;export{b as MbCrossword,v as defineCustomElement}
+import{h as t,t as e,p as i,H as r,Vec2fromIndex as s,V as l,f as a,isInputEventLetter as o,indexFromXY as n}from"./index.js";function c({isCurrent:e,word:i,onPointerDown:r,preview:s,showPreview:l}){return t("p",{onPointerDown:r,part:"clue",class:{"--current":e}},i.clue,l&&t("span",{class:"preview"},s))}function h({data:e,isInCurrentClue:i,isSelected:r,isSpecial:s,onPointerDown:l}){return t("div",{onPointerDown:l,part:"cell",class:{"--blocked":e.isBlocked,"--in-current-clue":i,"--selected":r,"--alt":!((e.x+e.y)%2),"--special":s},style:{"--x":""+e.x,"--y":""+e.y}},t("div",{class:"_inner",style:{position:"absolute",width:"100%"}},e.value))}const d=i(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}init=!0;data;showCluePreview=!0;textInput;hWords=[];vWords=[];currentClueId=null;currentClue=null;isFocused=!1;selectedCell=null;componentWillLoad(){console.log("componentWillLoad",this.init,this.data),this.init&&this.data&&this.initGame()}watchData(){this.init&&this.data&&this.initGame()}get allWords(){return[...this.hWords,...this.vWords]}async initGame(t=this.data){if(console.log("initGame"),!t.words)throw Error("Words definition missing");this.hWords=[],this.vWords=[],t.words.forEach(((t,e)=>{const i=Math.random();void 0===t.id&&(t.id=`${i}_${e}`),"horizontal"===t.orientation&&(this.hWords=[...this.hWords,t]),"vertical"===t.orientation&&(this.vWords=[...this.vWords,t])})),this.specialBorders=t.specialBorders??[],this.specialCells=t.specialCells??[],this.labels=t.labels??[],this.buildBoard()}async checkAnswer(){const t=this.cells.filter((t=>!t.isBlocked));return console.log(t),t.forEach((t=>{console.log(`${t.value} === ${t.answer}`,`${t.x},${t.y}`,t.value===t.answer)})),t.every((t=>t.value===t.answer))}specialBorders=[];specialCells=[];labels=[];boardWidth=0;boardHeight=0;cells=[];buildBoard(){let t=0,e=0;this.allWords.forEach((i=>{"horizontal"===i.orientation&&(t=Math.max(t,i.x+i.word.length),e=Math.max(e,i.y+1)),"vertical"===i.orientation&&(t=Math.max(t,i.x+1),e=Math.max(e,i.y+i.word.length))}));const i=Array(e*t).fill(null).map(((e,i)=>{const[r,l]=s(i,t);return{index:i,x:r,y:l,value:null,isCurrent:!1,isInCurrentWord:!1,isBlocked:!0}}));this.allWords.forEach((e=>{if("horizontal"===e.orientation)for(let r=0;r<e.word.length;r++){const s=l.from(e),a=n(new l(s.x+r,s.y),t);i[a].isBlocked=!1,i[a].answer=e.word[r]}if("vertical"===e.orientation)for(let r=0;r<e.word.length;r++){const s=l.from(e),a=n(new l(s.x,s.y+r),t);i[a].isBlocked=!1,i[a].answer=e.word[r]}})),this.cells=i,this.boardWidth=t,this.boardHeight=e}getClueById(t){return this.allWords.find((e=>e.id===t))??null}isInClue(t,e=this.currentClue){return null!==e&&(t.x===e.x||t.y===e.y)&&("horizontal"===e.orientation?!(t.y!==e.y||t.x<e.x||t.x>=e.x+e.word.length):"vertical"===e.orientation?!(t.x!==e.x||t.y<e.y||t.y>=e.y+e.word.length):void 0)}isSelectedCell(t){return!!this.selectedCell&&t.x===this.selectedCell.x&&t.y===this.selectedCell.y}getNextClueId(){if(!this.currentClueId)return this.allWords[0]?.id??null;const t=this.allWords.findIndex((t=>t.id===this.currentClueId));return t<0?this.allWords[0]?.id??null:this.allWords[t+1]?.id??null}getPrevClueId(){if(!this.currentClueId)return this.allWords[0]?.id??null;const t=this.allWords.findIndex((t=>t.id===this.currentClueId));return t<0?this.allWords[0]?.id??null:this.allWords[t-1]?.id??null}inputLetter(t){this.selectedCell&&(this.selectedCell.value=t,this.selectNextCell(),a(this))}backspace(){this.selectedCell&&(this.selectedCell.value?(this.selectedCell.value="",this.selectPrevCell()):(this.selectPrevCell(),this.selectedCell.value=""),a(this))}selectNextCell(){if(!this.selectedCell||!this.currentClue)return;const t=this.currentClue.orientation;if(function(t,e){return u(t).eq(l.from(e))}(this.currentClue,this.selectedCell)){const t=this.getNextClueId(),e=this.getClueById(t);return e?void this.selectClueByXY(l.from(e)):void 0}"horizontal"===t&&this.selectClueByXY(new l(this.selectedCell.x+1,this.selectedCell.y)),"vertical"===t&&this.selectClueByXY(new l(this.selectedCell.x,this.selectedCell.y+1))}selectPrevCell(){if(!this.selectedCell||!this.currentClue)return;const t=this.currentClue.orientation;if(function(t,e){return l.from(t).eq(l.from(e))}(this.currentClue,this.selectedCell)){const t=this.getPrevClueId(),e=this.getClueById(t);if(e){const t=u(e);return console.log(t),void this.selectClueByXY(t)}}"horizontal"===t&&this.selectClueByXY(new l(this.selectedCell.x-1,this.selectedCell.y)),"vertical"===t&&this.selectClueByXY(new l(this.selectedCell.x,this.selectedCell.y-1))}onFocusin(){this.isFocused=!0,this.currentClueId||(this.currentClueId=this.allWords[0]?.id??null),this.textInput.focus()}onFocusOut(){this.isFocused=!1}selectClue(t,{row:e,col:i}={}){if(!t)return;this.currentClueId=t;const r=this.allWords.find((e=>e.id===t));r||(this.currentClueId=null,this.currentClue=null),this.currentClue=r;const s=[r.x,r.y];void 0!==e&&"vertical"===r.orientation&&e>=r.y&&e<r.y+r.word.length&&(s[1]=e),void 0!==i&&"horizontal"===r.orientation&&i>=r.x&&i<r.x+r.word.length&&(s[0]=i),this.selectCellByXY(l.from(s))}selectCellByXY(t){const e=n(t,this.boardWidth);this.selectedCell=this.cells[e]??null}findNonblockedCell(t,e){const i=new l(t[0]+e[0],t[1]+e[1]),r=this.boardWidth*this.boardHeight;let s=0;for(;this.isCellBlocked(i)&&s<r;)s++,i[0]+=e[0],i[1]+=e[1],i[0]<0&&(i[0]=this.boardWidth-1),i[0]>=this.boardWidth&&(i[0]=0),i[1]<0&&(i[1]=this.boardHeight-1),i[1]>=this.boardHeight&&(i[1]=0);return i}isCellBlocked(t){const e=this.cells[n(t,this.boardWidth)];return e?.isBlocked??!0}selectClueByXY(t){const e=this.allWords.filter((e=>this.isInClue(t,e)));if(e.length)if(this.selectedCell&&2===e.length&&t.eq(l.from(this.selectedCell))){const i=e.find((t=>t.orientation!==this.currentClue?.orientation));this.selectClue(i?.id??e[0].id,{row:t.y,col:t.x})}else{const i=e.find((t=>t.orientation===this.currentClue?.orientation));this.selectClue(i?.id??e[0].id,{row:t.y,col:t.x})}}getCluePreview(t){if(!t)return"_";const e=Array(t.word.length).fill("_");for(let i=0;i<t.word.length;i++){const r=new l(t.x,t.y).add("vertical"===t.orientation?new l(0,1*i):new l(1*i,0)),s=this.cells[n(r,this.boardWidth)];s.value&&(e[i]=s.value)}return e.join("")}onKeyPress(t){if(console.log(t),"Tab"===t.key){const e=t.shiftKey?this.getPrevClueId():this.getNextClueId();e&&(t.preventDefault(),this.selectClue(e))}if(this.selectedCell)switch(t.key){case"ArrowLeft":return this.selectClueByXY(this.findNonblockedCell(new l(this.selectedCell.x,this.selectedCell.y),new l(-1,0))),void t.preventDefault();case"ArrowRight":return this.selectClueByXY(this.findNonblockedCell(new l(this.selectedCell.x,this.selectedCell.y),new l(1,0))),void t.preventDefault();case"ArrowUp":return this.selectClueByXY(this.findNonblockedCell(new l(this.selectedCell.x,this.selectedCell.y),new l(0,-1))),void t.preventDefault();case"ArrowDown":return this.selectClueByXY(this.findNonblockedCell(new l(this.selectedCell.x,this.selectedCell.y),new l(0,1))),void t.preventDefault();case"Backspace":console.log("BACKSPACE!"),this.backspace()}}onInput(t){o(t)&&this.inputLetter(t.data.toLowerCase()[0]),this.textInput.value=""}render(){const e=!!this.vWords.length,i=!!this.hWords.length,r=i&&e;return t("div",{key:"87d88806305c6102eeb76c3984d4b9c2ad2d9759",part:"main",class:{"--focused":this.isFocused},onFocusin:this.onFocusin.bind(this),onFocusout:this.onFocusOut.bind(this)},t("input",{key:"49cdb053a4d2c4ad2c7eb881488b18c68e31fe65",type:"text",class:"dummy",ref:t=>this.textInput=t,onKeyDown:this.onKeyPress.bind(this),onInput:this.onInput.bind(this)}),t("div",{key:"0ca71a907f70e17a6d2d10bff9462bd0b2284007",part:"clues",class:{twoLists:r,oneList:!r}},i?t("div",{part:"clue-list"},this.hWords.map((e=>{const i=e.id===this.currentClueId;return t(c,{showPreview:this.showCluePreview,preview:this.getCluePreview(e),word:e,isCurrent:i,onPointerDown:()=>this.selectClue(e.id)})}))):"",e?t("div",{part:"clue-list"},this.vWords.map((e=>{const i=e.id===this.currentClueId;return t(c,{showPreview:this.showCluePreview,preview:this.getCluePreview(e),word:e,isCurrent:i,onPointerDown:()=>this.selectClue(e.id)})}))):""),t("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((t=>!t.isBlocked)).map((e=>{const i=this.isInClue(e),r=this.isSelectedCell(e),s=this.specialCells.some((t=>t.x===e.x&&t.y===e.y));return t(h,{isSpecial:s,onPointerDown:()=>this.selectClueByXY(l.from(e)),isInCurrentClue:i,isSelected:r,data:e})})),this.specialBorders.map(((e,i)=>t("div",{key:i,part:"special-border",class:{top:!!(4096&e.border),right:!!(256&e.border),bottom:!!(16&e.border),left:!!(1&e.border)},style:{"--x":""+e.x,"--y":""+e.y}}))),this.labels.map((e=>t("div",{part:"label",style:{"--x":""+e.x,"--y":""+e.y},onPointerDown:()=>this.selectClue(e.clueId)},t("div",{class:"_inner"},e.text))))),t("div",{key:"d391413e7be3dee148f2f5e6d8fbf22742278a0c",part:"preview"},"Tu bedzie podgląd: ",this.currentClueId))}static get delegatesFocus(){return!0}static get watchers(){return{data:[{watchData:0}]}}static get style(){return'*[part=main]{position:relative;display:grid;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;outline: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: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: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: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].--alt{background:var(--cell-background-alt, #999)}[part=cell].--in-current-clue{box-shadow:inset 0 0 2px 2px var(--cell-selected-background, lightblue)}[part=cell].--selected{background:var(--cell-selected-background, lightblue)}[part=cell].--special{background:var(--cell-special-background, lightgreen)}[part=cell] ._inner{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-content:center;text-transform:uppercase;font-size:80cqh}[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;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;border:var(--cell-border-width) solid transparent;--label-place-content:center end}[part=label] ._inner{position:absolute;top:var(--label-padding, 10cqh);left:var(--label-padding, 10cqh);right:var(--label-padding, 10cqh);bottom:var(--label-padding, 10cqh);display:grid;place-content:var(--label-place-content, center);text-transform:uppercase;font-size:var(--label-font-size, 60cqh)}'}},[529,"mb-crossword",{init:[4],data:[16],showCluePreview:[4,"show-clue-preview"],hWords:[32],vWords:[32],currentClueId:[32],currentClue:[32],isFocused:[32],selectedCell:[32],specialBorders:[32],specialCells:[32],labels:[32],boardWidth:[32],boardHeight:[32],cells:[32],initGame:[64],checkAnswer:[64]},void 0,{data:[{watchData:0}]}]);function u(t){return new l(t.x+("horizontal"===t.orientation?t.word.length-1:0),t.y+("vertical"===t.orientation?t.word.length-1:0))}function p(){"undefined"!=typeof customElements&&["mb-crossword"].forEach((t=>{"mb-crossword"===t&&(customElements.get(e(t))||customElements.define(e(t),d))}))}p();const w=d,b=p;export{w as MbCrossword,b as defineCustomElement}

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["mb-crossword",[[529,"mb-crossword",{"init":[4],"data":[16],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"specialBorders":[32],"specialCells":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"initGame":[64]},null,{"data":[{"watchData":0}]}]]]], options);
+  return bootstrapLazy([["mb-crossword",[[529,"mb-crossword",{"init":[4],"data":[16],"showCluePreview":[4,"show-clue-preview"],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"specialBorders":[32],"specialCells":[32],"labels":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"initGame":[64],"checkAnswer":[64]},null,{"data":[{"watchData":0}]}]]]], options);
 };
 
 export { defineCustomElements };

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

@@ -1,10 +1,10 @@
 import { h, r as registerInstance, f as forceUpdate } from './index-BGHKtxML.js';
 import { V as Vec2fromIndex, a as Vec2, i as isInputEventLetter, b as indexFromXY } from './index-Dn3GSx6U.js';
 
-function Clue({ isCurrent, word, onPointerDown, preview }) {
+function Clue({ isCurrent, word, onPointerDown, preview, showPreview }) {
     return h("p", { onPointerDown: onPointerDown, part: "clue", class: {
             "--current": isCurrent
-        } }, word.clue, h("span", { class: "preview" }, preview));
+        } }, word.clue, showPreview && h("span", { class: "preview" }, preview));
 }
 
 function Cell({ data, isInCurrentClue, isSelected, isSpecial, onPointerDown }) {
@@ -20,7 +20,7 @@ function Cell({ data, isInCurrentClue, isSelected, isSpecial, onPointerDown }) {
         } }, h("div", { class: "_inner", style: { position: 'absolute', width: '100%' } }, data.value));
 }
 
-const mbCrosswordCss = () => `*[part=main]{position:relative;display:grid;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}[part=clues]{grid-area:clues;display:grid;grid-template-columns:1fr 1fr}[part=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:block;position:relative;container-type:size;background:darkgoldenrod;--border:1px;--cell-width:calc((100cqw - var(--border)) / var(--board-width, 10))}[part=cell]{display:block;width:calc(var(--cell-width) - var(--border));aspect-ratio:1;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(--border) solid red}[part=cell].--alt{background:#999}[part=cell].--in-current-clue{box-shadow:inset 0 0 2px 2px lightblue}[part=cell].--selected{background:lightblue}[part=cell].--special{background:lightgreen}[part=cell] ._inner{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-content:center;text-transform:uppercase;font-size:80cqh}[part=preview]{display:none}[part=special-border]{display:block;background:black;position:absolute;z-index:100;--s-border:max(2px, var(--border))}[part=special-border].left,[part=special-border].right{width:var(--s-border);height:calc(var(--cell-width) - var(--border));top:calc(var(--y, 0) * var(--cell-width) + var(--border))}[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(--border));height:var(--s-border);left:calc(var(--x, 0) * var(--cell-width) + var(--border))}[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))}`;
+const mbCrosswordCss = () => `*[part=main]{position:relative;display:grid;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;outline: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: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: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: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].--alt{background:var(--cell-background-alt, #999)}[part=cell].--in-current-clue{box-shadow:inset 0 0 2px 2px var(--cell-selected-background, lightblue)}[part=cell].--selected{background:var(--cell-selected-background, lightblue)}[part=cell].--special{background:var(--cell-special-background, lightgreen)}[part=cell] ._inner{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-content:center;text-transform:uppercase;font-size:80cqh}[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;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;border:var(--cell-border-width) solid transparent;--label-place-content:center end}[part=label] ._inner{position:absolute;top:var(--label-padding, 10cqh);left:var(--label-padding, 10cqh);right:var(--label-padding, 10cqh);bottom:var(--label-padding, 10cqh);display:grid;place-content:var(--label-place-content, center);text-transform:uppercase;font-size:var(--label-font-size, 60cqh)}`;
 
 const MBCrossword = class {
     constructor(hostRef) {
@@ -28,6 +28,7 @@ const MBCrossword = class {
     }
     init = true;
     data;
+    showCluePreview = true;
     textInput;
     hWords = [];
     vWords = [];
@@ -73,10 +74,20 @@ const MBCrossword = class {
         });
         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 = [];
@@ -111,6 +122,7 @@ const MBCrossword = class {
                     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') {
@@ -118,6 +130,7 @@ const MBCrossword = class {
                     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];
                 }
             }
         });
@@ -338,9 +351,6 @@ const MBCrossword = class {
                 this.selectClue(nextClue);
             }
         }
-        // if (isKeyboardEventLetter(event)) {
-        //   this.inputLetter(event.key.toLowerCase()[0]);
-        // }
         if (this.selectedCell) {
             switch (event.key) {
                 case 'ArrowLeft':
@@ -372,15 +382,20 @@ const MBCrossword = class {
         this.textInput.value = '';
     }
     render() {
-        return h("div", { key: '1dec8e0d58c347be7a44c19c416d3940c37ccf0c', 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) }, h("input", { key: '40c9f176b21072bcd084871b9caff7add03c9680', type: "text", class: "dummy", ref: (el) => this.textInput = el, onKeyDown: this.onKeyPress.bind(this), onInput: this.onInput.bind(this) }), h("div", { key: '14eb06bad93227192ea299ecd27f12cf58304cea', part: "clues" }, h("div", { key: 'e58b0150ff780acd6f770b009d3936a3a7195138', 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, { preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
-        })), h("div", { key: '13c5ca874d95561654096aa09d5b715576d4392d', 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, { preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
-        }))), h("div", { key: '02b43a7a46253d36ad8975d8ab9426af208e82f4', part: "board", style: {
+            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}`
@@ -399,7 +414,12 @@ const MBCrossword = class {
                     "--x": `${b.x}`,
                     "--y": `${b.y}`
                 } });
-        })), h("div", { key: '24818d75c9ecf6df2f4e1044ab8d74e1e413f29e', part: "preview" }, "Tu bedzie podgl\u0105d: ", this.currentClueId));
+        }), 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 delegatesFocus() { return true; }
     static get watchers() { return {

package/dist/esm/mb-crossword.js

@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["mb-crossword",[[529,"mb-crossword",{"init":[4],"data":[16],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"specialBorders":[32],"specialCells":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"initGame":[64]},null,{"data":[{"watchData":0}]}]]]], options);
+  return bootstrapLazy([["mb-crossword",[[529,"mb-crossword",{"init":[4],"data":[16],"showCluePreview":[4,"show-clue-preview"],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"specialBorders":[32],"specialCells":[32],"labels":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"initGame":[64],"checkAnswer":[64]},null,{"data":[{"watchData":0}]}]]]], options);
 });

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

@@ -1 +1 @@
-import{p as e,b as t}from"./p-BGHKtxML.js";export{s as setNonce}from"./p-BGHKtxML.js";import{g as r}from"./p-DQuL1Twl.js";(()=>{const s=import.meta.url,t={};return""!==s&&(t.resourcesUrl=new URL(".",s).href),e(t)})().then((async s=>(await r(),t([["p-162bd00d",[[529,"mb-crossword",{init:[4],data:[16],hWords:[32],vWords:[32],currentClueId:[32],currentClue:[32],isFocused:[32],selectedCell:[32],specialBorders:[32],specialCells:[32],boardWidth:[32],boardHeight:[32],cells:[32],initGame:[64]},null,{data:[{watchData:0}]}]]]],s))));
+import{p as e,b as r}from"./p-BGHKtxML.js";export{s as setNonce}from"./p-BGHKtxML.js";import{g as t}from"./p-DQuL1Twl.js";(()=>{const s=import.meta.url,r={};return""!==s&&(r.resourcesUrl=new URL(".",s).href),e(r)})().then((async e=>(await t(),r([["p-b4b191b9",[[529,"mb-crossword",{init:[4],data:[16],showCluePreview:[4,"show-clue-preview"],hWords:[32],vWords:[32],currentClueId:[32],currentClue:[32],isFocused:[32],selectedCell:[32],specialBorders:[32],specialCells:[32],labels:[32],boardWidth:[32],boardHeight:[32],cells:[32],initGame:[64],checkAnswer:[64]},null,{data:[{watchData:0}]}]]]],e))));

package/dist/mb-crossword/p-b4b191b9.entry.js

@@ -0,0 +1 @@
+import{h as t,r as e,f as i}from"./p-BGHKtxML.js";import{V as r,a as s,i as l,b as a}from"./p-Dn3GSx6U.js";function o({isCurrent:e,word:i,onPointerDown:r,preview:s,showPreview:l}){return t("p",{onPointerDown:r,part:"clue",class:{"--current":e}},i.clue,l&&t("span",{class:"preview"},s))}function n({data:e,isInCurrentClue:i,isSelected:r,isSpecial:s,onPointerDown:l}){return t("div",{onPointerDown:l,part:"cell",class:{"--blocked":e.isBlocked,"--in-current-clue":i,"--selected":r,"--alt":!((e.x+e.y)%2),"--special":s},style:{"--x":`${e.x}`,"--y":`${e.y}`}},t("div",{class:"_inner",style:{position:"absolute",width:"100%"}},e.value))}const c=class{constructor(t){e(this,t)}init=!0;data;showCluePreview=!0;textInput;hWords=[];vWords=[];currentClueId=null;currentClue=null;isFocused=!1;selectedCell=null;componentWillLoad(){console.log("componentWillLoad",this.init,this.data),this.init&&this.data&&this.initGame()}watchData(){this.init&&this.data&&this.initGame()}get allWords(){return[...this.hWords,...this.vWords]}async initGame(t=this.data){if(console.log("initGame"),!t.words)throw new Error("Words definition missing");this.hWords=[],this.vWords=[],t.words.forEach(((t,e)=>{const i=Math.random();void 0===t.id&&(t.id=`${i}_${e}`),"horizontal"===t.orientation&&(this.hWords=[...this.hWords,t]),"vertical"===t.orientation&&(this.vWords=[...this.vWords,t])})),this.specialBorders=t.specialBorders??[],this.specialCells=t.specialCells??[],this.labels=t.labels??[],this.buildBoard()}async checkAnswer(){const t=this.cells.filter((t=>!t.isBlocked));return console.log(t),t.forEach((t=>{console.log(`${t.value} === ${t.answer}`,`${t.x},${t.y}`,t.value===t.answer)})),t.every((t=>t.value===t.answer))}specialBorders=[];specialCells=[];labels=[];boardWidth=0;boardHeight=0;cells=[];buildBoard(){let t=0,e=0;this.allWords.forEach((i=>{"horizontal"===i.orientation&&(t=Math.max(t,i.x+i.word.length),e=Math.max(e,i.y+1)),"vertical"===i.orientation&&(t=Math.max(t,i.x+1),e=Math.max(e,i.y+i.word.length))}));const i=Array(e*t).fill(null).map(((e,i)=>{const[s,l]=r(i,t);return{index:i,x:s,y:l,value:null,isCurrent:!1,isInCurrentWord:!1,isBlocked:!0}}));this.allWords.forEach((e=>{if("horizontal"===e.orientation)for(let r=0;r<e.word.length;r++){const l=s.from(e),o=a(new s(l.x+r,l.y),t);i[o].isBlocked=!1,i[o].answer=e.word[r]}if("vertical"===e.orientation)for(let r=0;r<e.word.length;r++){const l=s.from(e),o=a(new s(l.x,l.y+r),t);i[o].isBlocked=!1,i[o].answer=e.word[r]}})),this.cells=i,this.boardWidth=t,this.boardHeight=e}getClueById(t){return this.allWords.find((e=>e.id===t))??null}isInClue(t,e=this.currentClue){return null!==e&&(t.x===e.x||t.y===e.y)&&("horizontal"===e.orientation?!(t.y!==e.y||t.x<e.x||t.x>=e.x+e.word.length):"vertical"===e.orientation?!(t.x!==e.x||t.y<e.y||t.y>=e.y+e.word.length):void 0)}isSelectedCell(t){return!!this.selectedCell&&t.x===this.selectedCell.x&&t.y===this.selectedCell.y}getNextClueId(){if(!this.currentClueId)return this.allWords[0]?.id??null;const t=this.allWords.findIndex((t=>t.id===this.currentClueId));return t<0?this.allWords[0]?.id??null:this.allWords[t+1]?.id??null}getPrevClueId(){if(!this.currentClueId)return this.allWords[0]?.id??null;const t=this.allWords.findIndex((t=>t.id===this.currentClueId));return t<0?this.allWords[0]?.id??null:this.allWords[t-1]?.id??null}inputLetter(t){this.selectedCell&&(this.selectedCell.value=t,this.selectNextCell(),i(this))}backspace(){this.selectedCell&&(this.selectedCell.value?(this.selectedCell.value="",this.selectPrevCell()):(this.selectPrevCell(),this.selectedCell.value=""),i(this))}selectNextCell(){if(!this.selectedCell||!this.currentClue)return;const t=this.currentClue.orientation;if(e=this.selectedCell,h(this.currentClue).eq(s.from(e))){const t=this.getNextClueId(),e=this.getClueById(t);return e?void this.selectClueByXY(s.from(e)):void 0}var e;"horizontal"===t&&this.selectClueByXY(new s(this.selectedCell.x+1,this.selectedCell.y)),"vertical"===t&&this.selectClueByXY(new s(this.selectedCell.x,this.selectedCell.y+1))}selectPrevCell(){if(!this.selectedCell||!this.currentClue)return;const t=this.currentClue.orientation;if(e=this.selectedCell,s.from(this.currentClue).eq(s.from(e))){const t=this.getPrevClueId(),e=this.getClueById(t);if(e){const t=h(e);return console.log(t),void this.selectClueByXY(t)}}var e;"horizontal"===t&&this.selectClueByXY(new s(this.selectedCell.x-1,this.selectedCell.y)),"vertical"===t&&this.selectClueByXY(new s(this.selectedCell.x,this.selectedCell.y-1))}onFocusin(){this.isFocused=!0,this.currentClueId||(this.currentClueId=this.allWords[0]?.id??null),this.textInput.focus()}onFocusOut(){this.isFocused=!1}selectClue(t,{row:e,col:i}={}){if(!t)return;this.currentClueId=t;const r=this.allWords.find((e=>e.id===t));r||(this.currentClueId=null,this.currentClue=null),this.currentClue=r;const l=[r.x,r.y];void 0!==e&&"vertical"===r.orientation&&e>=r.y&&e<r.y+r.word.length&&(l[1]=e),void 0!==i&&"horizontal"===r.orientation&&i>=r.x&&i<r.x+r.word.length&&(l[0]=i),this.selectCellByXY(s.from(l))}selectCellByXY(t){const e=a(t,this.boardWidth);this.selectedCell=this.cells[e]??null}findNonblockedCell(t,e){const i=new s(t[0]+e[0],t[1]+e[1]),r=this.boardWidth*this.boardHeight;let l=0;for(;this.isCellBlocked(i)&&l<r;)l++,i[0]+=e[0],i[1]+=e[1],i[0]<0&&(i[0]=this.boardWidth-1),i[0]>=this.boardWidth&&(i[0]=0),i[1]<0&&(i[1]=this.boardHeight-1),i[1]>=this.boardHeight&&(i[1]=0);return i}isCellBlocked(t){const e=this.cells[a(t,this.boardWidth)];return e?.isBlocked??!0}selectClueByXY(t){const e=this.allWords.filter((e=>this.isInClue(t,e)));if(e.length)if(this.selectedCell&&2===e.length&&t.eq(s.from(this.selectedCell))){const i=e.find((t=>t.orientation!==this.currentClue?.orientation));this.selectClue(i?.id??e[0].id,{row:t.y,col:t.x})}else{const i=e.find((t=>t.orientation===this.currentClue?.orientation));this.selectClue(i?.id??e[0].id,{row:t.y,col:t.x})}}getCluePreview(t){if(!t)return"_";const e=Array(t.word.length).fill("_");for(let i=0;i<t.word.length;i++){const r=new s(t.x,t.y).add("vertical"===t.orientation?new s(0,1*i):new s(1*i,0)),l=this.cells[a(r,this.boardWidth)];l.value&&(e[i]=l.value)}return e.join("")}onKeyPress(t){if(console.log(t),"Tab"===t.key){const e=t.shiftKey?this.getPrevClueId():this.getNextClueId();e&&(t.preventDefault(),this.selectClue(e))}if(this.selectedCell)switch(t.key){case"ArrowLeft":return this.selectClueByXY(this.findNonblockedCell(new s(this.selectedCell.x,this.selectedCell.y),new s(-1,0))),void t.preventDefault();case"ArrowRight":return this.selectClueByXY(this.findNonblockedCell(new s(this.selectedCell.x,this.selectedCell.y),new s(1,0))),void t.preventDefault();case"ArrowUp":return this.selectClueByXY(this.findNonblockedCell(new s(this.selectedCell.x,this.selectedCell.y),new s(0,-1))),void t.preventDefault();case"ArrowDown":return this.selectClueByXY(this.findNonblockedCell(new s(this.selectedCell.x,this.selectedCell.y),new s(0,1))),void t.preventDefault();case"Backspace":console.log("BACKSPACE!"),this.backspace()}}onInput(t){l(t)&&this.inputLetter(t.data.toLowerCase()[0]),this.textInput.value=""}render(){const e=Boolean(this.vWords.length),i=Boolean(this.hWords.length),r=i&&e;return t("div",{key:"87d88806305c6102eeb76c3984d4b9c2ad2d9759",part:"main",class:{"--focused":this.isFocused},onFocusin:this.onFocusin.bind(this),onFocusout:this.onFocusOut.bind(this)},t("input",{key:"49cdb053a4d2c4ad2c7eb881488b18c68e31fe65",type:"text",class:"dummy",ref:t=>this.textInput=t,onKeyDown:this.onKeyPress.bind(this),onInput:this.onInput.bind(this)}),t("div",{key:"0ca71a907f70e17a6d2d10bff9462bd0b2284007",part:"clues",class:{twoLists:r,oneList:!r}},i?t("div",{part:"clue-list"},this.hWords.map((e=>{const i=e.id===this.currentClueId;return t(o,{showPreview:this.showCluePreview,preview:this.getCluePreview(e),word:e,isCurrent:i,onPointerDown:()=>this.selectClue(e.id)})}))):"",e?t("div",{part:"clue-list"},this.vWords.map((e=>{const i=e.id===this.currentClueId;return t(o,{showPreview:this.showCluePreview,preview:this.getCluePreview(e),word:e,isCurrent:i,onPointerDown:()=>this.selectClue(e.id)})}))):""),t("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((t=>!t.isBlocked)).map((e=>{const i=this.isInClue(e),r=this.isSelectedCell(e),l=this.specialCells.some((t=>t.x===e.x&&t.y===e.y));return t(n,{isSpecial:l,onPointerDown:()=>this.selectClueByXY(s.from(e)),isInCurrentClue:i,isSelected:r,data:e})})),this.specialBorders.map(((e,i)=>t("div",{key:i,part:"special-border",class:{top:Boolean(4096&e.border),right:Boolean(256&e.border),bottom:Boolean(16&e.border),left:Boolean(1&e.border)},style:{"--x":`${e.x}`,"--y":`${e.y}`}}))),this.labels.map((e=>t("div",{part:"label",style:{"--x":`${e.x}`,"--y":`${e.y}`},onPointerDown:()=>this.selectClue(e.clueId)},t("div",{class:"_inner"},e.text))))),t("div",{key:"d391413e7be3dee148f2f5e6d8fbf22742278a0c",part:"preview"},"Tu bedzie podgląd: ",this.currentClueId))}static get delegatesFocus(){return!0}static get watchers(){return{data:[{watchData:0}]}}};function h(t){return new s(t.x+("horizontal"===t.orientation?t.word.length-1:0),t.y+("vertical"===t.orientation?t.word.length-1:0))}c.style='*[part=main]{position:relative;display:grid;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;outline: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: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: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: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].--alt{background:var(--cell-background-alt, #999)}[part=cell].--in-current-clue{box-shadow:inset 0 0 2px 2px var(--cell-selected-background, lightblue)}[part=cell].--selected{background:var(--cell-selected-background, lightblue)}[part=cell].--special{background:var(--cell-special-background, lightgreen)}[part=cell] ._inner{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-content:center;text-transform:uppercase;font-size:80cqh}[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;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;border:var(--cell-border-width) solid transparent;--label-place-content:center end}[part=label] ._inner{position:absolute;top:var(--label-padding, 10cqh);left:var(--label-padding, 10cqh);right:var(--label-padding, 10cqh);bottom:var(--label-padding, 10cqh);display:grid;place-content:var(--label-place-content, center);text-transform:uppercase;font-size:var(--label-font-size, 60cqh)}';export{c as mb_crossword}

package/dist/types/components/crossword/clue.d.ts

@@ -4,5 +4,6 @@ export interface Props {
     word: PuzzleClue;
     onPointerDown(event: PointerEvent): void;
     preview: string;
+    showPreview: boolean;
 }
-export declare function Clue({ isCurrent, word, onPointerDown, preview }: Props): any;
+export declare function Clue({ isCurrent, word, onPointerDown, preview, showPreview }: Props): any;

package/dist/types/components/crossword/mb-crossword.d.ts

@@ -1,8 +1,9 @@
-import { CellData, PuzzleData, PuzzleClue, Border, SpecialCell } from './types';
+import { CellData, PuzzleData, PuzzleClue, Border, SpecialCell, PuzzleLabel } from './types';
 import { Vec2 } from '@mb-puzzle/vec2';
 export declare class MBCrossword {
     init: boolean;
     data: PuzzleData;
+    showCluePreview: boolean;
     textInput: HTMLInputElement;
     hWords: PuzzleClue[];
     vWords: PuzzleClue[];
@@ -14,8 +15,10 @@ export declare class MBCrossword {
     watchData(): void;
     get allWords(): PuzzleClue[];
     initGame(data?: PuzzleData): Promise<void>;
+    checkAnswer(): Promise<boolean>;
     specialBorders: Border[];
     specialCells: SpecialCell[];
+    labels: PuzzleLabel[];
     boardWidth: number;
     boardHeight: number;
     cells: CellData[];

package/dist/types/components/crossword/types.d.ts

@@ -2,6 +2,7 @@ export interface PuzzleData {
     words: PuzzleClue[];
     specialBorders?: Border[];
     specialCells?: SpecialCell[];
+    labels?: PuzzleLabel[];
 }
 export interface Border {
     x: number;
@@ -20,6 +21,12 @@ export interface PuzzleClue {
     orientation: 'horizontal' | 'vertical';
     clue: string;
 }
+export interface PuzzleLabel {
+    text: string;
+    x: number;
+    y: number;
+    clueId: string;
+}
 export interface CellData {
     index: number;
     x: number;
@@ -28,4 +35,5 @@ export interface CellData {
     isCurrent: boolean;
     isInCurrentWord: boolean;
     isBlocked: boolean;
+    answer?: string;
 }

package/dist/types/components.d.ts

@@ -9,12 +9,17 @@ import { PuzzleData } from "./components/crossword/types";
 export { PuzzleData } from "./components/crossword/types";
 export namespace Components {
     interface MbCrossword {
+        "checkAnswer": () => Promise<boolean>;
         "data": PuzzleData;
         /**
           * @default true
          */
         "init": boolean;
         "initGame": (data?: PuzzleData) => Promise<void>;
+        /**
+          * @default true
+         */
+        "showCluePreview": boolean;
     }
 }
 declare global {
@@ -35,6 +40,10 @@ declare namespace LocalJSX {
           * @default true
          */
         "init"?: boolean;
+        /**
+          * @default true
+         */
+        "showCluePreview"?: boolean;
     }
     interface IntrinsicElements {
         "mb-crossword": MbCrossword;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mborecki/crossword",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "private": false,
   "type": "module",
   "description": "Crossword Puzzle",

package/dist/mb-crossword/p-162bd00d.entry.js

@@ -1 +0,0 @@
-import{h as t,r as i,f as e}from"./p-BGHKtxML.js";import{V as r,a as s,i as a,b as l}from"./p-Dn3GSx6U.js";function o({isCurrent:i,word:e,onPointerDown:r,preview:s}){return t("p",{onPointerDown:r,part:"clue",class:{"--current":i}},e.clue,t("span",{class:"preview"},s))}function n({data:i,isInCurrentClue:e,isSelected:r,isSpecial:s,onPointerDown:a}){return t("div",{onPointerDown:a,part:"cell",class:{"--blocked":i.isBlocked,"--in-current-clue":e,"--selected":r,"--alt":!((i.x+i.y)%2),"--special":s},style:{"--x":`${i.x}`,"--y":`${i.y}`}},t("div",{class:"_inner",style:{position:"absolute",width:"100%"}},i.value))}const c=class{constructor(t){i(this,t)}init=!0;data;textInput;hWords=[];vWords=[];currentClueId=null;currentClue=null;isFocused=!1;selectedCell=null;componentWillLoad(){console.log("componentWillLoad",this.init,this.data),this.init&&this.data&&this.initGame()}watchData(){this.init&&this.data&&this.initGame()}get allWords(){return[...this.hWords,...this.vWords]}async initGame(t=this.data){if(console.log("initGame"),!t.words)throw new Error("Words definition missing");this.hWords=[],this.vWords=[],t.words.forEach(((t,i)=>{const e=Math.random();void 0===t.id&&(t.id=`${e}_${i}`),"horizontal"===t.orientation&&(this.hWords=[...this.hWords,t]),"vertical"===t.orientation&&(this.vWords=[...this.vWords,t])})),this.specialBorders=t.specialBorders??[],this.specialCells=t.specialCells??[],this.buildBoard()}specialBorders=[];specialCells=[];boardWidth=0;boardHeight=0;cells=[];buildBoard(){let t=0,i=0;this.allWords.forEach((e=>{"horizontal"===e.orientation&&(t=Math.max(t,e.x+e.word.length),i=Math.max(i,e.y+1)),"vertical"===e.orientation&&(t=Math.max(t,e.x+1),i=Math.max(i,e.y+e.word.length))}));const e=Array(i*t).fill(null).map(((i,e)=>{const[s,a]=r(e,t);return{index:e,x:s,y:a,value:null,isCurrent:!1,isInCurrentWord:!1,isBlocked:!0}}));this.allWords.forEach((i=>{if("horizontal"===i.orientation)for(let r=0;r<i.word.length;r++){const a=s.from(i),o=l(new s(a.x+r,a.y),t);e[o].isBlocked=!1}if("vertical"===i.orientation)for(let r=0;r<i.word.length;r++){const a=s.from(i),o=l(new s(a.x,a.y+r),t);e[o].isBlocked=!1}})),this.cells=e,this.boardWidth=t,this.boardHeight=i}getClueById(t){return this.allWords.find((i=>i.id===t))??null}isInClue(t,i=this.currentClue){return null!==i&&(t.x===i.x||t.y===i.y)&&("horizontal"===i.orientation?!(t.y!==i.y||t.x<i.x||t.x>=i.x+i.word.length):"vertical"===i.orientation?!(t.x!==i.x||t.y<i.y||t.y>=i.y+i.word.length):void 0)}isSelectedCell(t){return!!this.selectedCell&&t.x===this.selectedCell.x&&t.y===this.selectedCell.y}getNextClueId(){if(!this.currentClueId)return this.allWords[0]?.id??null;const t=this.allWords.findIndex((t=>t.id===this.currentClueId));return t<0?this.allWords[0]?.id??null:this.allWords[t+1]?.id??null}getPrevClueId(){if(!this.currentClueId)return this.allWords[0]?.id??null;const t=this.allWords.findIndex((t=>t.id===this.currentClueId));return t<0?this.allWords[0]?.id??null:this.allWords[t-1]?.id??null}inputLetter(t){this.selectedCell&&(this.selectedCell.value=t,this.selectNextCell(),e(this))}backspace(){this.selectedCell&&(this.selectedCell.value?(this.selectedCell.value="",this.selectPrevCell()):(this.selectPrevCell(),this.selectedCell.value=""),e(this))}selectNextCell(){if(!this.selectedCell||!this.currentClue)return;const t=this.currentClue.orientation;if(i=this.selectedCell,h(this.currentClue).eq(s.from(i))){const t=this.getNextClueId(),i=this.getClueById(t);return i?void this.selectClueByXY(s.from(i)):void 0}var i;"horizontal"===t&&this.selectClueByXY(new s(this.selectedCell.x+1,this.selectedCell.y)),"vertical"===t&&this.selectClueByXY(new s(this.selectedCell.x,this.selectedCell.y+1))}selectPrevCell(){if(!this.selectedCell||!this.currentClue)return;const t=this.currentClue.orientation;if(i=this.selectedCell,s.from(this.currentClue).eq(s.from(i))){const t=this.getPrevClueId(),i=this.getClueById(t);if(i){const t=h(i);return console.log(t),void this.selectClueByXY(t)}}var i;"horizontal"===t&&this.selectClueByXY(new s(this.selectedCell.x-1,this.selectedCell.y)),"vertical"===t&&this.selectClueByXY(new s(this.selectedCell.x,this.selectedCell.y-1))}onFocusin(){this.isFocused=!0,this.currentClueId||(this.currentClueId=this.allWords[0]?.id??null),this.textInput.focus()}onFocusOut(){this.isFocused=!1}selectClue(t,{row:i,col:e}={}){if(!t)return;this.currentClueId=t;const r=this.allWords.find((i=>i.id===t));r||(this.currentClueId=null,this.currentClue=null),this.currentClue=r;const a=[r.x,r.y];void 0!==i&&"vertical"===r.orientation&&i>=r.y&&i<r.y+r.word.length&&(a[1]=i),void 0!==e&&"horizontal"===r.orientation&&e>=r.x&&e<r.x+r.word.length&&(a[0]=e),this.selectCellByXY(s.from(a))}selectCellByXY(t){const i=l(t,this.boardWidth);this.selectedCell=this.cells[i]??null}findNonblockedCell(t,i){const e=new s(t[0]+i[0],t[1]+i[1]),r=this.boardWidth*this.boardHeight;let a=0;for(;this.isCellBlocked(e)&&a<r;)a++,e[0]+=i[0],e[1]+=i[1],e[0]<0&&(e[0]=this.boardWidth-1),e[0]>=this.boardWidth&&(e[0]=0),e[1]<0&&(e[1]=this.boardHeight-1),e[1]>=this.boardHeight&&(e[1]=0);return e}isCellBlocked(t){const i=this.cells[l(t,this.boardWidth)];return i?.isBlocked??!0}selectClueByXY(t){const i=this.allWords.filter((i=>this.isInClue(t,i)));if(i.length)if(this.selectedCell&&2===i.length&&t.eq(s.from(this.selectedCell))){const e=i.find((t=>t.orientation!==this.currentClue?.orientation));this.selectClue(e?.id??i[0].id,{row:t.y,col:t.x})}else{const e=i.find((t=>t.orientation===this.currentClue?.orientation));this.selectClue(e?.id??i[0].id,{row:t.y,col:t.x})}}getCluePreview(t){if(!t)return"_";const i=Array(t.word.length).fill("_");for(let e=0;e<t.word.length;e++){const r=new s(t.x,t.y).add("vertical"===t.orientation?new s(0,1*e):new s(1*e,0)),a=this.cells[l(r,this.boardWidth)];a.value&&(i[e]=a.value)}return i.join("")}onKeyPress(t){if(console.log(t),"Tab"===t.key){const i=t.shiftKey?this.getPrevClueId():this.getNextClueId();i&&(t.preventDefault(),this.selectClue(i))}if(this.selectedCell)switch(t.key){case"ArrowLeft":return this.selectClueByXY(this.findNonblockedCell(new s(this.selectedCell.x,this.selectedCell.y),new s(-1,0))),void t.preventDefault();case"ArrowRight":return this.selectClueByXY(this.findNonblockedCell(new s(this.selectedCell.x,this.selectedCell.y),new s(1,0))),void t.preventDefault();case"ArrowUp":return this.selectClueByXY(this.findNonblockedCell(new s(this.selectedCell.x,this.selectedCell.y),new s(0,-1))),void t.preventDefault();case"ArrowDown":return this.selectClueByXY(this.findNonblockedCell(new s(this.selectedCell.x,this.selectedCell.y),new s(0,1))),void t.preventDefault();case"Backspace":console.log("BACKSPACE!"),this.backspace()}}onInput(t){a(t)&&this.inputLetter(t.data.toLowerCase()[0]),this.textInput.value=""}render(){return t("div",{key:"1dec8e0d58c347be7a44c19c416d3940c37ccf0c",part:"main",class:{"--focused":this.isFocused},onFocusin:this.onFocusin.bind(this),onFocusout:this.onFocusOut.bind(this)},t("input",{key:"40c9f176b21072bcd084871b9caff7add03c9680",type:"text",class:"dummy",ref:t=>this.textInput=t,onKeyDown:this.onKeyPress.bind(this),onInput:this.onInput.bind(this)}),t("div",{key:"14eb06bad93227192ea299ecd27f12cf58304cea",part:"clues"},t("div",{key:"e58b0150ff780acd6f770b009d3936a3a7195138",part:"clue-list"},this.hWords.map((i=>{const e=i.id===this.currentClueId;return t(o,{preview:this.getCluePreview(i),word:i,isCurrent:e,onPointerDown:()=>this.selectClue(i.id)})}))),t("div",{key:"13c5ca874d95561654096aa09d5b715576d4392d",part:"clue-list"},this.vWords.map((i=>{const e=i.id===this.currentClueId;return t(o,{preview:this.getCluePreview(i),word:i,isCurrent:e,onPointerDown:()=>this.selectClue(i.id)})})))),t("div",{key:"02b43a7a46253d36ad8975d8ab9426af208e82f4",part:"board",style:{"--board-width":`${this.boardWidth}`,"grid-template-columns":`repeat(${this.boardWidth}, 1fr)`,aspectRatio:""+this.boardWidth/this.boardHeight}},this.cells.filter((t=>!t.isBlocked)).map((i=>{const e=this.isInClue(i),r=this.isSelectedCell(i),a=this.specialCells.some((t=>t.x===i.x&&t.y===i.y));return t(n,{isSpecial:a,onPointerDown:()=>this.selectClueByXY(s.from(i)),isInCurrentClue:e,isSelected:r,data:i})})),this.specialBorders.map(((i,e)=>t("div",{key:e,part:"special-border",class:{top:Boolean(4096&i.border),right:Boolean(256&i.border),bottom:Boolean(16&i.border),left:Boolean(1&i.border)},style:{"--x":`${i.x}`,"--y":`${i.y}`}})))),t("div",{key:"24818d75c9ecf6df2f4e1044ab8d74e1e413f29e",part:"preview"},"Tu bedzie podgląd: ",this.currentClueId))}static get delegatesFocus(){return!0}static get watchers(){return{data:[{watchData:0}]}}};function h(t){return new s(t.x+("horizontal"===t.orientation?t.word.length-1:0),t.y+("vertical"===t.orientation?t.word.length-1:0))}c.style='*[part=main]{position:relative;display:grid;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}[part=clues]{grid-area:clues;display:grid;grid-template-columns:1fr 1fr}[part=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:block;position:relative;container-type:size;background:darkgoldenrod;--border:1px;--cell-width:calc((100cqw - var(--border)) / var(--board-width, 10))}[part=cell]{display:block;width:calc(var(--cell-width) - var(--border));aspect-ratio:1;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(--border) solid red}[part=cell].--alt{background:#999}[part=cell].--in-current-clue{box-shadow:inset 0 0 2px 2px lightblue}[part=cell].--selected{background:lightblue}[part=cell].--special{background:lightgreen}[part=cell] ._inner{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-content:center;text-transform:uppercase;font-size:80cqh}[part=preview]{display:none}[part=special-border]{display:block;background:black;position:absolute;z-index:100;--s-border:max(2px, var(--border))}[part=special-border].left,[part=special-border].right{width:var(--s-border);height:calc(var(--cell-width) - var(--border));top:calc(var(--y, 0) * var(--cell-width) + var(--border))}[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(--border));height:var(--s-border);left:calc(var(--x, 0) * var(--cell-width) + var(--border))}[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))}';export{c as mb_crossword}