@mborecki/crossword 0.0.2 → 0.1.0

package/dist/components/mb-crossword.js

@@ -1 +1 @@
-import{h as t,t as i,p as s,H as e,Vec2fromIndex as r,V as n,f as l,isKeyboardEventLetter as o,indexFromXY as h}from"./index.js";function c({isCurrent:i,word:s,onPointerDown:e}){return t("p",{onPointerDown:e,part:"clue",class:{"--current":i}},s.clue)}function a({data:i,isInCurrentClue:s,isSelected:e}){return t("div",{part:"cell",class:{"--blocked":i.isBlocked,"--in-current-clue":s,"--selected":e}},t("div",{class:"_inner",style:{position:"absolute",width:"100%"}},i.value))}const d=s(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}init=!0;data;hWords=[];vWords=[];currentClueId=null;currentClue=null;isFocused=!1;selectedCell=null;componentWillLoad(){this.init&&this.data&&this.initGame()}get allWords(){return[...this.hWords,...this.vWords]}async initGame(t=this.data){if(!t.words)throw Error("Words definition missing");this.hWords=[],this.vWords=[],t.words.forEach(((t,i)=>{const s=Math.random();void 0===t.id&&(t.id=`${s}_${i}`),"horizontal"===t.orientation&&(this.hWords=[...this.hWords,t]),"vertical"===t.orientation&&(this.vWords=[...this.vWords,t])})),this.buildBoard()}boardWidth=0;boardHeight=0;cells=[];buildBoard(){let t=0,i=0;this.allWords.forEach((s=>{"horizontal"===s.orientation&&(t=Math.max(t,s.x+s.word.length),i=Math.max(i,s.y+1)),"vertical"===s.orientation&&(t=Math.max(t,s.x+1),i=Math.max(i,s.y+s.word.length))}));const s=Array(i*t).fill(null).map(((i,s)=>{const[e,n]=r(s,t);return{index:s,x:e,y:n,value:null,isCurrent:!1,isInCurrentWord:!1,isBlocked:!0}}));this.allWords.forEach((i=>{if("horizontal"===i.orientation)for(let e=0;e<i.word.length;e++){const r=n.from(i),l=h(new n(r.x+e,r.y),t);s[l].isBlocked=!1}if("vertical"===i.orientation)for(let e=0;e<i.word.length;e++){const r=n.from(i),l=h(new n(r.x,r.y+e),t);s[l].isBlocked=!1}})),this.cells=s,this.boardWidth=t,this.boardHeight=i}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(),l(this))}selectNextCell(){if(!this.selectedCell||!this.currentClue)return;const t=this.currentClue.orientation;if(function(t,i){const s=[t.x+("horizontal"===t.orientation?t.word.length-1:0),t.y+("vertical"===t.orientation?t.word.length-1:0)];return i.x===s[0]&&i.y===s[1]}(this.currentClue,this.selectedCell)){const t=this.getNextClueId();this.selectClue(t||(this.hWords[0]?.id??this.vWords[0]?.id))}else"horizontal"===t&&this.selectCellByXY(new n(this.selectedCell.x+1,this.selectedCell.y)),"vertical"===t&&this.selectCellByXY(new n(this.selectedCell.x,this.selectedCell.y+1))}onFocusin(){this.isFocused=!0,this.currentClueId||(this.currentClueId=this.allWords[0]?.id??null)}onFocusOut(){this.isFocused=!1}selectClue(t,{row:i,col:s}={}){if(!t)return;this.currentClueId=t;const e=this.allWords.find((i=>i.id===t));e||(this.currentClueId=null,this.currentClue=null),this.currentClue=e;const r=[e.x,e.y];void 0!==i&&"vertical"===e.orientation&&i>=e.y&&i<e.y+e.word.length&&(r[1]=i),void 0!==s&&"horizontal"===e.orientation&&s>=e.x&&s<e.x+e.word.length&&(r[0]=s),this.selectCellByXY(n.from(r))}selectCellByXY(t){const i=h(t,this.boardWidth);this.selectedCell=this.cells[i]??null}findNonblockedCell(t,i){const s=new n(t[0]+i[0],t[1]+i[1]),e=this.boardWidth*this.boardHeight;let r=0;for(;this.isCellBlocked(s)&&r<e;)r++,s[0]+=i[0],s[1]+=i[1],s[0]<0&&(s[0]=this.boardWidth-1),s[0]>=this.boardWidth&&(s[0]=0),s[1]<0&&(s[1]=this.boardHeight-1),s[1]>=this.boardHeight&&(s[1]=0);return s}isCellBlocked(t){const i=this.cells[h(t,this.boardWidth)];return i?.isBlocked??!0}selectClueByXY(t){const i=this.allWords.filter((i=>this.isInClue(t,i)));if(!i.length)return;const s=i.find((t=>t.orientation===this.currentClue?.orientation));this.selectClue(s?.id??i[0].id,{row:t.y,col:t.x})}onKeyPress(t){if(console.log(t),"Tab"===t.key){const i=t.shiftKey?this.getPrevClueId():this.getNextClueId();i&&(t.preventDefault(),this.selectClue(i))}if(o(t)&&this.inputLetter(t.key.toLowerCase()[0]),this.selectedCell)switch(t.key){case"ArrowLeft":return this.selectClueByXY(this.findNonblockedCell(new n(this.selectedCell.x,this.selectedCell.y),new n(-1,0))),void t.preventDefault();case"ArrowRight":return this.selectClueByXY(this.findNonblockedCell(new n(this.selectedCell.x,this.selectedCell.y),new n(1,0))),void t.preventDefault();case"ArrowUp":return this.selectClueByXY(this.findNonblockedCell(new n(this.selectedCell.x,this.selectedCell.y),new n(0,-1))),void t.preventDefault();case"ArrowDown":return this.selectClueByXY(this.findNonblockedCell(new n(this.selectedCell.x,this.selectedCell.y),new n(0,1))),void t.preventDefault()}}render(){return t("div",{key:"e298ac6f3a1d95bc41c4854b39600f8ac7f1696d",part:"main",class:{"--focused":this.isFocused},onFocusin:this.onFocusin.bind(this),onFocusout:this.onFocusOut.bind(this),tabIndex:0,onKeyDown:this.onKeyPress.bind(this)},t("div",{key:"74be935779266effb4605f2aa5883bf564610bc0",part:"clues"},t("div",{key:"125d8938e4f084562b54794158074bdaeda722b5",part:"clue-list"},this.hWords.map((i=>t(c,{word:i,isCurrent:i.id===this.currentClueId,onPointerDown:()=>this.selectClue(i.id)})))),t("div",{key:"4469227db5156a2d0b30e4dc7ef9ea8f8a1fc3bc",part:"clue-list"},this.vWords.map((i=>t(c,{word:i,isCurrent:i.id===this.currentClueId,onPointerDown:()=>this.selectClue(i.id)}))))),t("div",{key:"965b2e99d1fbf273907f722e8b15749fbd728070",part:"board",style:{"--test":"12","grid-template-columns":`repeat(${this.boardWidth}, 1fr)`}},this.cells.map((i=>{const s=this.isInClue(i),e=this.isSelectedCell(i);return t(a,{isInCurrentClue:s,isSelected:e,data:i})}))),t("div",{key:"3d97bcc65c5eb1d25b60aa5183a7c63f6eecebf9",part:"preview"},"Tu bedzie podgląd: ",this.currentClueId))}static get style(){return'*[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}'}},[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]}]);function u(){"undefined"!=typeof customElements&&["mb-crossword"].forEach((t=>{"mb-crossword"===t&&(customElements.get(i(t))||customElements.define(i(t),d))}))}u();const p=d,f=u;export{p as MbCrossword,f as defineCustomElement}
+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}

package/dist/esm/{index-B4XIBYtu.js → index-BGHKtxML.js}

@@ -1,5 +1,5 @@
 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
@@ -1846,6 +1846,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) {
@@ -2194,7 +2197,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)) {
@@ -2355,6 +2362,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
+      nullifyVNodeRefs(vnode);
       if (elm) {
         elm.remove();
       }
@@ -2484,6 +2492,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);
@@ -2707,6 +2721,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$ ;
@@ -2717,6 +2732,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) {
@@ -2733,6 +2769,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 */)) {
@@ -2893,6 +2940,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;
       }
@@ -2908,6 +2960,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       {
         hostRef.$flags$ &= -9 /* isConstructingInstance */;
       }
+      {
+        hostRef.$flags$ |= 128 /* isWatchReady */;
+      }
       endNewInstance();
       {
         fireConnectedCallback(hostRef.$lazyInstance$, elm);
@@ -3030,6 +3085,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],
@@ -3042,6 +3098,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/esm/{index-0i8AYf_G.js → index-Dn3GSx6U.js}

@@ -13,6 +13,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];
     }
@@ -24,12 +36,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);
@@ -52,5 +73,11 @@ 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);
+}
 
-export { Vec2fromIndex as V, Vec2 as a, indexFromXY as b, isKeyboardEventLetter as i };
+export { Vec2fromIndex as V, Vec2 as a, indexFromXY as b, isKeyboardEventLetter as c, isInputEventLetter as i };

package/dist/esm/index.js

@@ -1 +1 @@
-export { V as Vec2fromIndex, b as indexFromXY, i as isKeyboardEventLetter } from './index-0i8AYf_G.js';
+export { V as Vec2fromIndex, b as indexFromXY, i as isInputEventLetter, c as isKeyboardEventLetter } from './index-Dn3GSx6U.js';

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-B4XIBYtu.js';
-export { s as setNonce } from './index-B4XIBYtu.js';
+import { b as bootstrapLazy } from './index-BGHKtxML.js';
+export { s as setNonce } from './index-BGHKtxML.js';
 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",[[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 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);
 };
 
 export { defineCustomElements };

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

@@ -1,21 +1,26 @@
-import { h, r as registerInstance, f as forceUpdate } from './index-B4XIBYtu.js';
-import { V as Vec2fromIndex, a as Vec2, i as isKeyboardEventLetter, b as indexFromXY } from './index-0i8AYf_G.js';
+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 }) {
+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));
 }
 
-function Cell({ data, isInCurrentClue, isSelected }) {
-    return h("div", { part: "cell", class: {
+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));
 }
 
-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) {
@@ -23,6 +28,7 @@ const MBCrossword = class {
     }
     init = true;
     data;
+    textInput;
     hWords = [];
     vWords = [];
     currentClueId = null;
@@ -30,6 +36,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();
         }
@@ -41,6 +53,7 @@ const MBCrossword = class {
         ];
     }
     async initGame(data = this.data) {
+        console.log('initGame');
         if (!data.words) {
             throw new Error('Words definition missing');
         }
@@ -58,8 +71,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 = [];
@@ -108,6 +125,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;
@@ -164,25 +184,58 @@ const MBCrossword = class {
         this.selectNextCell();
         forceUpdate(this);
     }
+    backspace() {
+        if (!this.selectedCell)
+            return;
+        if (this.selectedCell.value) {
+            this.selectedCell.value = '';
+            this.selectPrevCell();
+        }
+        else {
+            this.selectPrevCell();
+            this.selectedCell.value = '';
+        }
+        forceUpdate(this);
+    }
     selectNextCell() {
         if (!this.selectedCell || !this.currentClue)
             return;
         const currentOrientation = this.currentClue.orientation;
-        if (isLastCellInWord(this.currentClue, this.selectedCell)) {
+        if (isLastCellInClue(this.currentClue, this.selectedCell)) {
             const nextClueId = this.getNextClueId();
-            if (nextClueId) {
-                this.selectClue(nextClueId);
-            }
-            else {
-                this.selectClue(this.hWords[0]?.id ?? this.vWords[0]?.id);
+            const clue = this.getClueById(nextClueId);
+            if (clue) {
+                this.selectClueByXY(Vec2.from(clue));
+                return;
             }
             return;
         }
         if (currentOrientation === 'horizontal') {
-            this.selectCellByXY(new Vec2(this.selectedCell.x + 1, this.selectedCell.y));
+            this.selectClueByXY(new Vec2(this.selectedCell.x + 1, this.selectedCell.y));
+        }
+        if (currentOrientation === 'vertical') {
+            this.selectClueByXY(new Vec2(this.selectedCell.x, this.selectedCell.y + 1));
+        }
+    }
+    selectPrevCell() {
+        if (!this.selectedCell || !this.currentClue)
+            return;
+        const currentOrientation = this.currentClue.orientation;
+        if (isFirstCellInWord(this.currentClue, this.selectedCell)) {
+            const prevClueId = this.getPrevClueId();
+            const clue = this.getClueById(prevClueId);
+            if (clue) {
+                const cell = getClueLastCell(clue);
+                console.log(cell);
+                this.selectClueByXY(cell);
+                return;
+            }
+        }
+        if (currentOrientation === 'horizontal') {
+            this.selectClueByXY(new Vec2(this.selectedCell.x - 1, this.selectedCell.y));
         }
         if (currentOrientation === 'vertical') {
-            this.selectCellByXY(new Vec2(this.selectedCell.x, this.selectedCell.y + 1));
+            this.selectClueByXY(new Vec2(this.selectedCell.x, this.selectedCell.y - 1));
         }
     }
     onFocusin() {
@@ -190,6 +243,7 @@ const MBCrossword = class {
         if (!this.currentClueId) {
             this.currentClueId = this.allWords[0]?.id ?? null;
         }
+        this.textInput.focus();
     }
     onFocusOut() {
         this.isFocused = false;
@@ -253,8 +307,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(Vec2.from(this.selectedCell))) {
+            const betterClue = clues.find(c => c.orientation !== this.currentClue?.orientation);
+            this.selectClue(betterClue?.id ?? clues[0].id, { row: v.y, col: v.x });
+        }
+        else {
+            const betterClue = clues.find(c => c.orientation === this.currentClue?.orientation);
+            this.selectClue(betterClue?.id ?? clues[0].id, { row: v.y, col: v.x });
+        }
+    }
+    getCluePreview(clue) {
+        if (!clue)
+            return '_';
+        const letters = Array(clue.word.length).fill('_');
+        for (let i = 0; i < clue.word.length; i++) {
+            const pointer = new Vec2(clue.x, clue.y).add(clue.orientation === 'vertical' ? new Vec2(0, 1 * i) : new Vec2(1 * i, 0));
+            const cell = this.cells[indexFromXY(pointer, this.boardWidth)];
+            if (cell.value) {
+                letters[i] = cell.value;
+            }
+        }
+        return letters.join('');
     }
     onKeyPress(event) {
         console.log(event);
@@ -265,9 +338,9 @@ const MBCrossword = class {
                 this.selectClue(nextClue);
             }
         }
-        if (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':
@@ -286,35 +359,63 @@ const MBCrossword = class {
                     this.selectClueByXY(this.findNonblockedCell(new Vec2(this.selectedCell.x, this.selectedCell.y), new Vec2(0, 1)));
                     event.preventDefault();
                     return;
+                case 'Backspace':
+                    console.log('BACKSPACE!');
+                    this.backspace();
             }
         }
     }
+    onInput(event) {
+        if (isInputEventLetter(event)) {
+            this.inputLetter(event.data.toLowerCase()[0]);
+        }
+        this.textInput.value = '';
+    }
     render() {
-        return h("div", { key: 'e298ac6f3a1d95bc41c4854b39600f8ac7f1696d', part: "main", class: {
+        return 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) }, h("div", { key: '74be935779266effb4605f2aa5883bf564610bc0', part: "clues" }, h("div", { key: '125d8938e4f084562b54794158074bdaeda722b5', part: "clue-list" }, this.hWords.map(w => {
+            }, onFocusin: this.onFocusin.bind(this), onFocusout: this.onFocusOut.bind(this) }, h("input", { key: '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 => {
             const isCurrent = w.id === this.currentClueId;
-            return h(Clue, { word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
-        })), h("div", { key: '4469227db5156a2d0b30e4dc7ef9ea8f8a1fc3bc', part: "clue-list" }, this.vWords.map(w => {
+            return h(Clue, { preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
+        })), h("div", { key: '13c5ca874d95561654096aa09d5b715576d4392d', part: "clue-list" }, this.vWords.map(w => {
             const isCurrent = w.id === this.currentClueId;
-            return h(Clue, { word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
-        }))), h("div", { key: '965b2e99d1fbf273907f722e8b15749fbd728070', part: "board", style: {
-                '--test': '12',
-                'grid-template-columns': `repeat(${this.boardWidth}, 1fr)`
-            } }, this.cells.map(cell => {
+            return h(Clue, { preview: this.getCluePreview(w), word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
+        }))), 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 h(Cell, { isInCurrentClue: isInCurrentClue, isSelected: isSelected, data: cell });
-        })), h("div", { key: '3d97bcc65c5eb1d25b60aa5183a7c63f6eecebf9', part: "preview" }, "Tu bedzie podgl\u0105d: ", this.currentClueId));
+            const isSpecial = this.specialCells.some(c => c.x === cell.x && c.y === cell.y);
+            return h(Cell, { isSpecial: isSpecial, onPointerDown: () => this.selectClueByXY(Vec2.from(cell)), isInCurrentClue: isInCurrentClue, isSelected: isSelected, data: cell });
+        }), this.specialBorders.map((b, index) => {
+            return h("div", { key: index, part: "special-border", class: {
+                    'top': Boolean(b.border & 0x1000),
+                    'right': Boolean(b.border & 0x0100),
+                    'bottom': Boolean(b.border & 0x0010),
+                    'left': Boolean(b.border & 0x0001),
+                }, style: {
+                    "--x": `${b.x}`,
+                    "--y": `${b.y}`
+                } });
+        })), 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(Vec2.from(cell));
+}
+function isFirstCellInWord(clue, cell) {
+    return Vec2.from(clue).eq(Vec2.from(cell));
+}
+function getClueLastCell(clue) {
+    return new Vec2(clue.x + (clue.orientation === 'horizontal' ? (clue.word.length - 1) : 0), clue.y + (clue.orientation === 'vertical' ? (clue.word.length - 1) : 0));
 }
 MBCrossword.style = mbCrosswordCss();
 

package/dist/esm/mb-crossword.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-B4XIBYtu.js';
-export { s as setNonce } from './index-B4XIBYtu.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-BGHKtxML.js';
+export { s as setNonce } from './index-BGHKtxML.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 /*
@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["mb-crossword",[[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 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);
 });

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

@@ -1 +1 @@
-export{V as Vec2fromIndex,b as indexFromXY,i as isKeyboardEventLetter}from"./p-0i8AYf_G.js";
+export{V as Vec2fromIndex,b as indexFromXY,i as isInputEventLetter,c as isKeyboardEventLetter}from"./p-Dn3GSx6U.js";

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

@@ -1 +1 @@
-import{p as e,b as r}from"./p-B4XIBYtu.js";export{s as setNonce}from"./p-B4XIBYtu.js";import{g as t}from"./p-DQuL1Twl.js";(()=>{const r=import.meta.url,s={};return""!==r&&(s.resourcesUrl=new URL(".",r).href),e(s)})().then((async e=>(await t(),r([["p-5b227b8e",[[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]}]]]],e))));
+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))));

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

@@ -0,0 +1 @@
+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}