@mborecki/crossword 0.2.0 → 0.2.1

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

@@ -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;border:none}[part=clues]{grid-area:clues;display:grid;grid-template-columns:1fr 1fr;gap:16px}[part=clues].oneList{grid-template-columns:1fr}[part=clue].--current{background: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;place-content:center;position:absolute;container-type:size;top:calc(var(--y, 0) * var(--cell-width));left:calc(var(--x, 0) * var(--cell-width));width:calc(var(--cell-width) - var(--cell-border-width));aspect-ratio:1}[part=label] ._inner{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-content:center;text-transform:uppercase;font-size:60cqh}`;
+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) {

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

@@ -19,6 +19,7 @@
   z-index: 100;
   grid-area: board;
   border: none;
+  outline: none;
 }
 
 [part=clues] {
@@ -130,22 +131,23 @@
 
 [part=label] {
   display: grid;
-  place-content: center;
   position: absolute;
   container-type: size;
   top: calc(var(--y, 0) * var(--cell-width));
   left: calc(var(--x, 0) * var(--cell-width));
   width: calc(var(--cell-width) - var(--cell-border-width));
   aspect-ratio: 1;
+  border: var(--cell-border-width) solid transparent;
+  --label-place-content: center end;
 }
 [part=label] ._inner {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  top: var(--label-padding, 10cqh);
+  left: var(--label-padding, 10cqh);
+  right: var(--label-padding, 10cqh);
+  bottom: var(--label-padding, 10cqh);
   display: grid;
-  place-content: center;
+  place-content: var(--label-place-content, center);
   text-transform: uppercase;
-  font-size: 60cqh;
+  font-size: var(--label-font-size, 60cqh);
 }

package/dist/components/mb-crossword.js

@@ -1 +1 @@
-import{h as t,t as e,p as i,H as r,Vec2fromIndex as s,V as l,f as o,isInputEventLetter as a,indexFromXY as c}from"./index.js";function n({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),o=c(new l(s.x+r,s.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 s=l.from(e),o=c(new l(s.x,s.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(),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 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=c(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[c(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[c(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){a(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(n,{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(n,{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}[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;place-content:center;position:absolute;container-type:size;top:calc(var(--y, 0) * var(--cell-width));left:calc(var(--x, 0) * var(--cell-width));width:calc(var(--cell-width) - var(--cell-border-width));aspect-ratio:1}[part=label] ._inner{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-content:center;text-transform:uppercase;font-size:60cqh}'}},[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,v=p;export{w 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/mb-crossword.entry.js

@@ -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;border:none}[part=clues]{grid-area:clues;display:grid;grid-template-columns:1fr 1fr;gap:16px}[part=clues].oneList{grid-template-columns:1fr}[part=clue].--current{background: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;place-content:center;position:absolute;container-type:size;top:calc(var(--y, 0) * var(--cell-width));left:calc(var(--x, 0) * var(--cell-width));width:calc(var(--cell-width) - var(--cell-border-width));aspect-ratio:1}[part=label] ._inner{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-content:center;text-transform:uppercase;font-size:60cqh}`;
+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) {

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

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

@@ -1 +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 o}from"./p-Dn3GSx6U.js";function a({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),a=o(new s(l.x+r,l.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 l=s.from(e),a=o(new s(l.x,l.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(),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=o(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[o(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[o(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(a,{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(a,{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}[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;place-content:center;position:absolute;container-type:size;top:calc(var(--y, 0) * var(--cell-width));left:calc(var(--x, 0) * var(--cell-width));width:calc(var(--cell-width) - var(--cell-border-width));aspect-ratio:1}[part=label] ._inner{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-content:center;text-transform:uppercase;font-size:60cqh}';export{c as mb_crossword}
+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/package.json

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