@mborecki/crossword 0.0.2 → 0.1.0

package/dist/cjs/{index-TyGpRn4d.js → index-BlTGwvVC.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const NAMESPACE = 'mb-crossword';
-const BUILD = /* mb-crossword */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: false, state: true, updatable: true};
+const BUILD = /* mb-crossword */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, state: true, updatable: true};
 
 /*
  Stencil Client Platform v4.41.0 | MIT Licensed | https://stenciljs.com
@@ -1848,6 +1848,9 @@ var globalStyleSheet;
 function createShadowRoot(cmpMeta) {
   var _a;
   const opts = { mode: "open" };
+  {
+    opts.delegatesFocus = !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */);
+  }
   const shadowRoot = this.attachShadow(opts);
   if (globalStyleSheet === void 0) globalStyleSheet = (_a = createStyleSheetIfNeededAndSupported()) != null ? _a : null;
   if (globalStyleSheet) {
@@ -2196,7 +2199,11 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
         }
       }
     }
-  } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+  } else if (memberName === "key") ; else if (memberName === "ref") {
+    if (newValue) {
+      newValue(elm);
+    }
+  } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
     if (memberName[2] === "-") {
       memberName = memberName.slice(3);
     } else if (isMemberInElement(win, ln)) {
@@ -2357,6 +2364,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
+      nullifyVNodeRefs(vnode);
       if (elm) {
         elm.remove();
       }
@@ -2486,6 +2494,12 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     elm.data = text;
   }
 };
+var nullifyVNodeRefs = (vNode) => {
+  {
+    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
+  }
+};
 var insertBefore = (parent, newNode, reference, isInitialLoad) => {
   if (typeof newNode["s-sn"] === "string") {
     parent.insertBefore(newNode, reference);
@@ -2709,6 +2723,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
       `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`
     );
   }
+  const elm = hostRef.$hostElement$ ;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
   const instance = hostRef.$lazyInstance$ ;
@@ -2719,6 +2734,27 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   const didValueChange = newVal !== oldVal && !areBothNaN;
   if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
+    if (cmpMeta.$watchers$) {
+      const watchMethods = cmpMeta.$watchers$[propName];
+      if (watchMethods) {
+        watchMethods.map((watcher) => {
+          try {
+            const [[watchMethodName, watcherFlags]] = Object.entries(watcher);
+            if (flags & 128 /* isWatchReady */ || watcherFlags & 1 /* Immediate */) {
+              if (!instance) {
+                hostRef.$fetchedCbList$.push(() => {
+                  hostRef.$lazyInstance$[watchMethodName](newVal, oldVal, propName);
+                });
+              } else {
+                instance[watchMethodName](newVal, oldVal, propName);
+              }
+            }
+          } catch (e) {
+            consoleError(e, elm);
+          }
+        });
+      }
+    }
     if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
       if (instance.componentShouldUpdate) {
         if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
@@ -2735,6 +2771,17 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
   if (cmpMeta.$members$ || BUILD.propChangeCallback) {
+    {
+      if (Cstr.watchers && !cmpMeta.$watchers$) {
+        cmpMeta.$watchers$ = Cstr.watchers;
+      }
+      if (Cstr.deserializers && !cmpMeta.$deserializers$) {
+        cmpMeta.$deserializers$ = Cstr.deserializers;
+      }
+      if (Cstr.serializers && !cmpMeta.$serializers$) {
+        cmpMeta.$serializers$ = Cstr.serializers;
+      }
+    }
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
       if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
@@ -2895,6 +2942,11 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
       }
       if (!Cstr.isProxied) {
+        {
+          cmpMeta.$watchers$ = Cstr.watchers;
+          cmpMeta.$serializers$ = Cstr.serializers;
+          cmpMeta.$deserializers$ = Cstr.deserializers;
+        }
         proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
         Cstr.isProxied = true;
       }
@@ -2910,6 +2962,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       {
         hostRef.$flags$ &= -9 /* isConstructingInstance */;
       }
+      {
+        hostRef.$flags$ |= 128 /* isWatchReady */;
+      }
       endNewInstance();
       {
         fireConnectedCallback(hostRef.$lazyInstance$, elm);
@@ -3032,6 +3087,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
+      var _a2, _b, _c;
       const cmpMeta = {
         $flags$: compactMeta[0],
         $tagName$: compactMeta[1],
@@ -3044,6 +3100,11 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$members$ = compactMeta[2];
       }
+      {
+        cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
+        cmpMeta.$serializers$ = (_b = compactMeta[5]) != null ? _b : {};
+        cmpMeta.$deserializers$ = (_c = compactMeta[6]) != null ? _c : {};
+      }
       const tagName = transformTag(cmpMeta.$tagName$);
       const HostElement = class extends HTMLElement {
         ["s-p"];

package/dist/cjs/{index-CwHIXXW5.js → index-CEGyCfpa.js}

@@ -15,6 +15,18 @@ class Vec2 {
     set 1(y) {
         this.y = y;
     }
+    get width() {
+        return this.x;
+    }
+    set width(x) {
+        this.x = x;
+    }
+    get height() {
+        return this.y;
+    }
+    set height(y) {
+        this.y = y;
+    }
     get xy() {
         return [this.x, this.y];
     }
@@ -26,12 +38,21 @@ class Vec2 {
         this.x = x;
         this.y = y;
     }
+    add(v) {
+        return new Vec2(this.x + v.x, this.y + v.y);
+    }
+    eq(v) {
+        return this.x === v.x && this.y === v.y;
+    }
+    clone() {
+        return new Vec2(this.x, this.y);
+    }
     static from(source) {
         if (typeof source === 'number') {
             return new Vec2(source, source);
         }
         if (Array.isArray(source)) {
-            return new Vec2(source[0], source[1]);
+            return new Vec2(source[0] ?? 0, source[1] ?? 0);
         }
         if (typeof source === 'object' && typeof source.x === 'number' && typeof source.y === 'number') {
             return new Vec2(source.x, source.y);
@@ -54,8 +75,15 @@ function isKeyboardEventLetter(event) {
     const key = event.key.toLowerCase();
     return /[0-9a-zA-Z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u024F]/.test(key);
 }
+function isInputEventLetter(event) {
+    if (event.data.length !== 1)
+        return false;
+    const key = event.data.toLowerCase();
+    return /[0-9a-zA-Z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u024F]/.test(key);
+}
 
 exports.Vec2 = Vec2;
 exports.Vec2fromIndex = Vec2fromIndex;
 exports.indexFromXY = indexFromXY;
+exports.isInputEventLetter = isInputEventLetter;
 exports.isKeyboardEventLetter = isKeyboardEventLetter;

package/dist/cjs/index.cjs.js

@@ -1,9 +1,10 @@
 'use strict';
 
-var index = require('./index-CwHIXXW5.js');
+var index = require('./index-CEGyCfpa.js');
 
 
 
 exports.Vec2fromIndex = index.Vec2fromIndex;
 exports.indexFromXY = index.indexFromXY;
+exports.isInputEventLetter = index.isInputEventLetter;
 exports.isKeyboardEventLetter = index.isKeyboardEventLetter;

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-TyGpRn4d.js');
+var index = require('./index-BlTGwvVC.js');
 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",[[513,"mb-crossword",{"init":[4],"data":[16],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"initGame":[64]}]]]], options);
+  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);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -1,23 +1,28 @@
 'use strict';
 
-var index = require('./index-TyGpRn4d.js');
-var index$1 = require('./index-CwHIXXW5.js');
+var index = require('./index-BlTGwvVC.js');
+var index$1 = require('./index-CEGyCfpa.js');
 
-function Clue({ isCurrent, word, onPointerDown }) {
+function Clue({ isCurrent, word, onPointerDown, preview }) {
     return index.h("p", { onPointerDown: onPointerDown, part: "clue", class: {
             "--current": isCurrent
-        } }, word.clue);
+        } }, word.clue, index.h("span", { class: "preview" }, preview));
 }
 
-function Cell({ data, isInCurrentClue, isSelected }) {
-    return index.h("div", { part: "cell", class: {
+function Cell({ data, isInCurrentClue, isSelected, isSpecial, onPointerDown }) {
+    return index.h("div", { onPointerDown: onPointerDown, part: "cell", class: {
             "--blocked": data.isBlocked,
             '--in-current-clue': isInCurrentClue,
             '--selected': isSelected,
+            '--alt': !((data.x + data.y) % 2),
+            '--special': isSpecial
+        }, style: {
+            "--x": `${data.x}`,
+            "--y": `${data.y}`
         } }, index.h("div", { class: "_inner", style: { position: 'absolute', width: '100%' } }, data.value));
 }
 
-const mbCrosswordCss = () => `*[part=main]{display:grid;grid-template-areas:"clues board";grid-template-columns:1fr 1fr}*[part=main].--focused{background:lightgrey}[part=clues]{grid-area:clues;display:grid;grid-template-columns:1fr 1fr}[part=clue].--current{background:lightcyan}[part=board]{grid-area:board;display:grid}[part=cell]{aspect-ratio:1;background:#d9d9d9;position:relative;container-type:size}[part=cell]:nth-child(2n){background:#999}[part=cell].--blocked{background:black}[part=cell].--in-current-clue{box-shadow:inset 0 0 2px 2px lightblue}[part=cell].--selected{background:lightblue}[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}`;
+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 MBCrossword = class {
     constructor(hostRef) {
@@ -25,6 +30,7 @@ const MBCrossword = class {
     }
     init = true;
     data;
+    textInput;
     hWords = [];
     vWords = [];
     currentClueId = null;
@@ -32,6 +38,12 @@ const MBCrossword = class {
     isFocused = false;
     selectedCell = null;
     componentWillLoad() {
+        console.log('componentWillLoad', this.init, this.data);
+        if (this.init && this.data) {
+            this.initGame();
+        }
+    }
+    watchData() {
         if (this.init && this.data) {
             this.initGame();
         }
@@ -43,6 +55,7 @@ const MBCrossword = class {
         ];
     }
     async initGame(data = this.data) {
+        console.log('initGame');
         if (!data.words) {
             throw new Error('Words definition missing');
         }
@@ -60,8 +73,12 @@ const MBCrossword = class {
                 this.vWords = [...this.vWords, w];
             }
         });
+        this.specialBorders = data.specialBorders ?? [];
+        this.specialCells = data.specialCells ?? [];
         this.buildBoard();
     }
+    specialBorders = [];
+    specialCells = [];
     boardWidth = 0;
     boardHeight = 0;
     cells = [];
@@ -110,6 +127,9 @@ const MBCrossword = class {
         this.boardWidth = boardWidth;
         this.boardHeight = boardHeight;
     }
+    getClueById(id) {
+        return this.allWords.find(c => c.id === id) ?? null;
+    }
     isInClue(xy, clue = this.currentClue) {
         if (clue === null)
             return false;
@@ -166,25 +186,58 @@ const MBCrossword = class {
         this.selectNextCell();
         index.forceUpdate(this);
     }
+    backspace() {
+        if (!this.selectedCell)
+            return;
+        if (this.selectedCell.value) {
+            this.selectedCell.value = '';
+            this.selectPrevCell();
+        }
+        else {
+            this.selectPrevCell();
+            this.selectedCell.value = '';
+        }
+        index.forceUpdate(this);
+    }
     selectNextCell() {
         if (!this.selectedCell || !this.currentClue)
             return;
         const currentOrientation = this.currentClue.orientation;
-        if (isLastCellInWord(this.currentClue, this.selectedCell)) {
+        if (isLastCellInClue(this.currentClue, this.selectedCell)) {
             const nextClueId = this.getNextClueId();
-            if (nextClueId) {
-                this.selectClue(nextClueId);
-            }
-            else {
-                this.selectClue(this.hWords[0]?.id ?? this.vWords[0]?.id);
+            const clue = this.getClueById(nextClueId);
+            if (clue) {
+                this.selectClueByXY(index$1.Vec2.from(clue));
+                return;
             }
             return;
         }
         if (currentOrientation === 'horizontal') {
-            this.selectCellByXY(new index$1.Vec2(this.selectedCell.x + 1, this.selectedCell.y));
+            this.selectClueByXY(new index$1.Vec2(this.selectedCell.x + 1, this.selectedCell.y));
+        }
+        if (currentOrientation === 'vertical') {
+            this.selectClueByXY(new index$1.Vec2(this.selectedCell.x, this.selectedCell.y + 1));
+        }
+    }
+    selectPrevCell() {
+        if (!this.selectedCell || !this.currentClue)
+            return;
+        const currentOrientation = this.currentClue.orientation;
+        if (isFirstCellInWord(this.currentClue, this.selectedCell)) {
+            const prevClueId = this.getPrevClueId();
+            const clue = this.getClueById(prevClueId);
+            if (clue) {
+                const cell = getClueLastCell(clue);
+                console.log(cell);
+                this.selectClueByXY(cell);
+                return;
+            }
+        }
+        if (currentOrientation === 'horizontal') {
+            this.selectClueByXY(new index$1.Vec2(this.selectedCell.x - 1, this.selectedCell.y));
         }
         if (currentOrientation === 'vertical') {
-            this.selectCellByXY(new index$1.Vec2(this.selectedCell.x, this.selectedCell.y + 1));
+            this.selectClueByXY(new index$1.Vec2(this.selectedCell.x, this.selectedCell.y - 1));
         }
     }
     onFocusin() {
@@ -192,6 +245,7 @@ const MBCrossword = class {
         if (!this.currentClueId) {
             this.currentClueId = this.allWords[0]?.id ?? null;
         }
+        this.textInput.focus();
     }
     onFocusOut() {
         this.isFocused = false;
@@ -255,8 +309,27 @@ const MBCrossword = class {
         if (!clues.length) {
             return;
         }
-        const betterClue = clues.find(c => c.orientation === this.currentClue?.orientation);
-        this.selectClue(betterClue?.id ?? clues[0].id, { row: v.y, col: v.x });
+        if (this.selectedCell && clues.length === 2 && v.eq(index$1.Vec2.from(this.selectedCell))) {
+            const betterClue = clues.find(c => c.orientation !== this.currentClue?.orientation);
+            this.selectClue(betterClue?.id ?? clues[0].id, { row: v.y, col: v.x });
+        }
+        else {
+            const betterClue = clues.find(c => c.orientation === this.currentClue?.orientation);
+            this.selectClue(betterClue?.id ?? clues[0].id, { row: v.y, col: v.x });
+        }
+    }
+    getCluePreview(clue) {
+        if (!clue)
+            return '_';
+        const letters = Array(clue.word.length).fill('_');
+        for (let i = 0; i < clue.word.length; i++) {
+            const pointer = new index$1.Vec2(clue.x, clue.y).add(clue.orientation === 'vertical' ? new index$1.Vec2(0, 1 * i) : new index$1.Vec2(1 * i, 0));
+            const cell = this.cells[index$1.indexFromXY(pointer, this.boardWidth)];
+            if (cell.value) {
+                letters[i] = cell.value;
+            }
+        }
+        return letters.join('');
     }
     onKeyPress(event) {
         console.log(event);
@@ -267,9 +340,9 @@ const MBCrossword = class {
                 this.selectClue(nextClue);
             }
         }
-        if (index$1.isKeyboardEventLetter(event)) {
-            this.inputLetter(event.key.toLowerCase()[0]);
-        }
+        // if (isKeyboardEventLetter(event)) {
+        //   this.inputLetter(event.key.toLowerCase()[0]);
+        // }
         if (this.selectedCell) {
             switch (event.key) {
                 case 'ArrowLeft':
@@ -288,35 +361,63 @@ const MBCrossword = class {
                     this.selectClueByXY(this.findNonblockedCell(new index$1.Vec2(this.selectedCell.x, this.selectedCell.y), new index$1.Vec2(0, 1)));
                     event.preventDefault();
                     return;
+                case 'Backspace':
+                    console.log('BACKSPACE!');
+                    this.backspace();
             }
         }
     }
+    onInput(event) {
+        if (index$1.isInputEventLetter(event)) {
+            this.inputLetter(event.data.toLowerCase()[0]);
+        }
+        this.textInput.value = '';
+    }
     render() {
-        return index.h("div", { key: 'e298ac6f3a1d95bc41c4854b39600f8ac7f1696d', part: "main", class: {
+        return index.h("div", { key: '1dec8e0d58c347be7a44c19c416d3940c37ccf0c', part: "main", class: {
                 "--focused": this.isFocused
-            }, onFocusin: this.onFocusin.bind(this), onFocusout: this.onFocusOut.bind(this), tabIndex: 0, onKeyDown: this.onKeyPress.bind(this) }, index.h("div", { key: '74be935779266effb4605f2aa5883bf564610bc0', part: "clues" }, index.h("div", { key: '125d8938e4f084562b54794158074bdaeda722b5', part: "clue-list" }, this.hWords.map(w => {
+            }, 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 => {
             const isCurrent = w.id === this.currentClueId;
-            return index.h(Clue, { word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
-        })), index.h("div", { key: '4469227db5156a2d0b30e4dc7ef9ea8f8a1fc3bc', part: "clue-list" }, this.vWords.map(w => {
+            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 => {
             const isCurrent = w.id === this.currentClueId;
-            return index.h(Clue, { word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
-        }))), index.h("div", { key: '965b2e99d1fbf273907f722e8b15749fbd728070', part: "board", style: {
-                '--test': '12',
-                'grid-template-columns': `repeat(${this.boardWidth}, 1fr)`
-            } }, this.cells.map(cell => {
+            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: {
+                '--board-width': `${this.boardWidth}`,
+                'grid-template-columns': `repeat(${this.boardWidth}, 1fr)`,
+                aspectRatio: `${this.boardWidth / this.boardHeight}`
+            } }, this.cells.filter(c => !c.isBlocked).map(cell => {
             const isInCurrentClue = this.isInClue(cell);
             const isSelected = this.isSelectedCell(cell);
-            return index.h(Cell, { isInCurrentClue: isInCurrentClue, isSelected: isSelected, data: cell });
-        })), index.h("div", { key: '3d97bcc65c5eb1d25b60aa5183a7c63f6eecebf9', part: "preview" }, "Tu bedzie podgl\u0105d: ", this.currentClueId));
+            const isSpecial = this.specialCells.some(c => c.x === cell.x && c.y === cell.y);
+            return index.h(Cell, { isSpecial: isSpecial, onPointerDown: () => this.selectClueByXY(index$1.Vec2.from(cell)), isInCurrentClue: isInCurrentClue, isSelected: isSelected, data: cell });
+        }), this.specialBorders.map((b, index$1) => {
+            return index.h("div", { key: index$1, part: "special-border", class: {
+                    'top': Boolean(b.border & 0x1000),
+                    'right': Boolean(b.border & 0x0100),
+                    'bottom': Boolean(b.border & 0x0010),
+                    'left': Boolean(b.border & 0x0001),
+                }, style: {
+                    "--x": `${b.x}`,
+                    "--y": `${b.y}`
+                } });
+        })), index.h("div", { key: '24818d75c9ecf6df2f4e1044ab8d74e1e413f29e', part: "preview" }, "Tu bedzie podgl\u0105d: ", this.currentClueId));
     }
+    static get delegatesFocus() { return true; }
+    static get watchers() { return {
+        "data": [{
+                "watchData": 0
+            }]
+    }; }
 };
-function isLastCellInWord(word, cell) {
-    const lastCellXY = [
-        word.x + (word.orientation === 'horizontal' ? (word.word.length - 1) : 0),
-        word.y + (word.orientation === 'vertical' ? (word.word.length - 1) : 0),
-    ];
-    const result = cell.x === lastCellXY[0] && cell.y === lastCellXY[1];
-    return result;
+function isLastCellInClue(clue, cell) {
+    return getClueLastCell(clue).eq(index$1.Vec2.from(cell));
+}
+function isFirstCellInWord(clue, cell) {
+    return index$1.Vec2.from(clue).eq(index$1.Vec2.from(cell));
+}
+function getClueLastCell(clue) {
+    return new index$1.Vec2(clue.x + (clue.orientation === 'horizontal' ? (clue.word.length - 1) : 0), clue.y + (clue.orientation === 'vertical' ? (clue.word.length - 1) : 0));
 }
 MBCrossword.style = mbCrosswordCss();
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-TyGpRn4d.js');
+var index = require('./index-BlTGwvVC.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mb-crossword.cjs",[[513,"mb-crossword",{"init":[4],"data":[16],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"initGame":[64]}]]]], options);
+  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);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -1,8 +1,13 @@
 import { h } from "@stencil/core";
-export function Cell({ data, isInCurrentClue, isSelected }) {
-    return h("div", { part: "cell", class: {
+export function Cell({ data, isInCurrentClue, isSelected, isSpecial, onPointerDown }) {
+    return h("div", { onPointerDown: onPointerDown, part: "cell", class: {
             "--blocked": data.isBlocked,
             '--in-current-clue': isInCurrentClue,
             '--selected': isSelected,
+            '--alt': !((data.x + data.y) % 2),
+            '--special': isSpecial
+        }, style: {
+            "--x": `${data.x}`,
+            "--y": `${data.y}`
         } }, h("div", { class: "_inner", style: { position: 'absolute', width: '100%' } }, data.value));
 }

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

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