@mborecki/find-words 0.0.1 → 0.1.0

package/dist/cjs/find-words.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CpayB0Bf.js');
+var index = require('./index-B_cfy353.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mb-find-words_2.cjs",[[513,"mb-find-words",{"init":[4],"board":[16],"isInitialized":[32],"answers":[32],"currentSelected":[32],"isSelectionCorrect":[32],"initGame":[64]},[[0,"selectedChanged","onSelectedChanged"]],{"board":[{"watchBoard":0}],"isSelectionCorrect":[{"watchIsDuringCorrect":0}],"currentSelected":[{"watchCurrentSelected":0}]}],[512,"mb-find-words-board",{"letters":[1],"width":[2],"isSelectionCorrect":[4,"is-selection-correct"],"selectedCells":[32],"path":[32],"resetSelection":[64],"setSelectionAsCorrect":[64]},null,{"selectedCells":[{"buildPolyline":0},{"emitSelectedChanged":0}]}]]]], options);
+  return index.bootstrapLazy([["mb-find-words_2.cjs",[[513,"mb-find-words",{"init":[4],"board":[16],"hideAnswers":[4,"hide-answers"],"isInitialized":[32],"answers":[32],"currentSelected":[32],"isSelectionCorrect":[32],"initGame":[64]},[[0,"selectedChanged","onSelectedChanged"]],{"board":[{"watchBoard":0}],"isSelectionCorrect":[{"watchIsDuringCorrect":0}],"currentSelected":[{"watchCurrentSelected":0}]}],[512,"mb-find-words-board",{"letters":[1],"width":[2],"isSelectionCorrect":[4,"is-selection-correct"],"savedPaths":[32],"selectedCells":[32],"resetSelection":[64],"setSelectionAsCorrect":[64],"savePath":[64]},null,{"selectedCells":[{"emitSelectedChanged":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{index-CpayB0Bf.js → index-B_cfy353.js}

@@ -2089,6 +2089,13 @@ var h = (nodeName, vnodeData, ...children) => {
       }
     }
   }
+  if (typeof nodeName === "function") {
+    return nodeName(
+      vnodeData === null ? {} : vnodeData,
+      vNodeChildren,
+      vdomFnUtils
+    );
+  }
   const vnode = newVNode(nodeName, null);
   vnode.$attrs$ = vnodeData;
   if (vNodeChildren.length > 0) {
@@ -2117,6 +2124,36 @@ var newVNode = (tag, text) => {
 };
 var Host = {};
 var isHost = (node) => node && node.$tag$ === Host;
+var vdomFnUtils = {
+  forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
+  map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate)
+};
+var convertToPublic = (node) => ({
+  vattrs: node.$attrs$,
+  vchildren: node.$children$,
+  vkey: node.$key$,
+  vname: node.$name$,
+  vtag: node.$tag$,
+  vtext: node.$text$
+});
+var convertToPrivate = (node) => {
+  if (typeof node.vtag === "function") {
+    const vnodeData = { ...node.vattrs };
+    if (node.vkey) {
+      vnodeData.key = node.vkey;
+    }
+    if (node.vname) {
+      vnodeData.name = node.vname;
+    }
+    return h(node.vtag, vnodeData, ...node.vchildren || []);
+  }
+  const vnode = newVNode(node.vtag, node.vtext);
+  vnode.$attrs$ = node.vattrs;
+  vnode.$children$ = node.vchildren;
+  vnode.$key$ = node.vkey;
+  vnode.$name$ = node.vname;
+  return vnode;
+};
 var createSupportsRuleRe = (selector) => {
   const safeSelector2 = escapeRegExpSpecialCharacters(selector);
   return new RegExp(

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-CpayB0Bf.js');
+var index = require('./index-B_cfy353.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mb-find-words_2.cjs",[[513,"mb-find-words",{"init":[4],"board":[16],"isInitialized":[32],"answers":[32],"currentSelected":[32],"isSelectionCorrect":[32],"initGame":[64]},[[0,"selectedChanged","onSelectedChanged"]],{"board":[{"watchBoard":0}],"isSelectionCorrect":[{"watchIsDuringCorrect":0}],"currentSelected":[{"watchCurrentSelected":0}]}],[512,"mb-find-words-board",{"letters":[1],"width":[2],"isSelectionCorrect":[4,"is-selection-correct"],"selectedCells":[32],"path":[32],"resetSelection":[64],"setSelectionAsCorrect":[64]},null,{"selectedCells":[{"buildPolyline":0},{"emitSelectedChanged":0}]}]]]], options);
+  return index.bootstrapLazy([["mb-find-words_2.cjs",[[513,"mb-find-words",{"init":[4],"board":[16],"hideAnswers":[4,"hide-answers"],"isInitialized":[32],"answers":[32],"currentSelected":[32],"isSelectionCorrect":[32],"initGame":[64]},[[0,"selectedChanged","onSelectedChanged"]],{"board":[{"watchBoard":0}],"isSelectionCorrect":[{"watchIsDuringCorrect":0}],"currentSelected":[{"watchCurrentSelected":0}]}],[512,"mb-find-words-board",{"letters":[1],"width":[2],"isSelectionCorrect":[4,"is-selection-correct"],"savedPaths":[32],"selectedCells":[32],"resetSelection":[64],"setSelectionAsCorrect":[64],"savePath":[64]},null,{"selectedCells":[{"emitSelectedChanged":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/mb-find-words_2.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-CpayB0Bf.js');
+var index = require('./index-B_cfy353.js');
 var index$1 = require('./index.cjs.js');
 
-const findWordsCss = () => `:host{display:block;--_mb-default-font:Verdana, Geneva, Tahoma, sans-serif;--_mb-font:var(--mb-font, var(--_mb-default-font));--_mb-color:var(--mb-color, black);--_mb-background:var(--mb-background, white);--_mb-board-font-family:var(--mb-board-font-family, var(--_mb-font));--_mb-answers-font-family:var(--mb-answers-font-family, var(--_mb-font));--_mb-preview-font-family:var(--mb-preview-font-family, var(--_mb-font))}.main{display:grid;grid-template-columns:1fr;grid-template-areas:"preview" "board" "answers";grid-template-rows:min-content 80vw min-content}@media (min-width: 576px){.main{grid-template-columns:1fr 1fr;grid-template-areas:"answers preview" "answers board";grid-template-rows:min-content minmax(300px, 80vh)}}.answers{grid-area:answers;font-family:var(--_mb-answers-font-family)}.answers ul{list-style:none;font-size:22px;text-transform:uppercase}.answer--found{text-decoration:line-through;color:green}.preview{grid-area:preview;min-height:1.5em;font-family:var(--_mb-preview-font-family);text-transform:uppercase;font-size:30px;text-align:center}.preview--correct{color:green}.board{display:grid;place-content:center;overflow:hidden;position:relative;grid-area:board;font-family:var(--_mb-board-font-family);container-type:size}mb-find-words-board{display:block;aspect-ratio:1;width:min(100cqh, 100cqw)}.grid{position:relative;display:grid;grid-template-columns:repeat(var(--grid-width, 6), 1fr);touch-action:none}.grid svg{display:block;position:absolute;width:100%;height:100%;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:-1}.grid svg polyline,.grid svg path{stroke:lightskyblue;fill:none;stroke-width:40px;stroke-linecap:round;stroke-linejoin:round;transition:all 0.3s}.cell{display:grid;aspect-ratio:1;place-content:center;container-type:size;user-select:none}.cell__inner{font-size:80cqh;text-transform:uppercase}.cell--selected{font-weight:bold}.cell--selected.cell--correct{color:green}`;
+const findWordsCss = () => `:host{box-sizing:border-box;display:grid;place-content:center;width:100%;height:100%;container-type:size;--_mb-default-font:Verdana, Geneva, Tahoma, sans-serif;--_mb-font:var(--mb-font, var(--_mb-default-font));--_mb-color:var(--mb-color, black);--_mb-background:var(--mb-background, white);--_mb-board-font-family:var(--mb-board-font-family, var(--_mb-font));--_mb-answers-font-family:var(--mb-answers-font-family, var(--_mb-font));--_mb-preview-font-family:var(--mb-preview-font-family, var(--_mb-font));--_mb-select-line-color:var(--mb-select-line-color, red);--_mb-select-line-width:var(--mb-select-line-width, 40px)}[part=main]{display:grid;grid-template-columns:1fr;grid-template-areas:"preview" "board" "answers";grid-template-rows:min-content 1fr min-content;width:min(100cqw, 100cqh / var(--aspect, 1));height:min(100cqw * var(--aspect, 1), 100cqh);color:var(--_mb-color);background:var(--_mb-background)}[part=main].no-answers{grid-template-areas:"preview" "board";grid-template-rows:min-content 1fr}@media (min-width: 576px){[part=main]{grid-template-columns:1fr 1fr;grid-template-areas:"answers preview" "answers board";grid-template-rows:min-content minmax(300px, 80vh)}[part=main].no-answers{grid-template-columns:1fr;grid-template-areas:"preview" "board";grid-template-rows:min-content 1fr}}.answers{grid-area:answers;font-family:var(--_mb-answers-font-family)}.answers ul{list-style:none;font-size:22px;text-transform:uppercase}.answer--found{text-decoration:line-through;color:green}.preview{grid-area:preview;min-height:1.5em;font-family:var(--_mb-preview-font-family);text-transform:uppercase;font-size:30px;text-align:center}.preview--correct{color:green}.board{display:grid;place-content:start center;overflow:hidden;position:relative;grid-area:board;font-family:var(--_mb-board-font-family);container-type:size}mb-find-words-board{display:block;aspect-ratio:1;width:min(100cqh, 100cqw)}.grid{position:relative;display:grid;grid-template-columns:repeat(var(--grid-width, 6), 1fr);touch-action:none}.grid svg{display:block;position:absolute;width:100%;height:100%;top:0;left:0;right:0;bottom:0;pointer-events:none}.grid svg polyline,.grid svg path{stroke:var(--_mb-select-line-color);fill:none;stroke-width:var(--_mb-select-line-width);stroke-linecap:round;stroke-linejoin:round;transition:all 0.3s}.grid svg.saved{--_mb-select-line-color:#ddd}.cell{display:grid;aspect-ratio:1;place-content:center;container-type:size;user-select:none;z-index:1}.cell__inner{font-size:80cqh;text-transform:uppercase}.cell--selected{font-weight:bold}.cell--selected.cell--correct{color:green}`;
 
 const MbFindWords = class {
     constructor(hostRef) {
@@ -14,6 +14,7 @@ const MbFindWords = class {
      */
     init = true;
     board;
+    hideAnswers = false;
     boardData;
     boardEl;
     isInitialized = false;
@@ -67,17 +68,18 @@ const MbFindWords = class {
             console.log('znalezione!');
             this.answers = this.answers.map(a => a === matchingAnswer ? { ...a, found: true } : a);
             this.isSelectionCorrect = true;
+            this.boardEl?.savePath();
         }
     }
     render() {
-        return index.h("div", { key: 'eee958199c326614530edf1e642f6b0791091a02' }, this.isInitialized
-            ? index.h("div", { part: "main", class: "main" }, index.h("div", { part: "answers", class: "answers" }, index.h("ul", null, this.answers.map(a => {
+        return this.isInitialized
+            ? index.h("div", { part: "main", class: { 'no-answers': this.hideAnswers } }, this.hideAnswers ? '' : index.h("div", { part: "answers", class: "answers" }, index.h("ul", null, this.answers.map(a => {
                 return index.h("li", { key: a.value, class: { "answer--found": a.found } }, a.value);
             }))), index.h("div", { part: "preview", class: {
                     preview: true,
                     'preview--correct': this.isSelectionCorrect
                 } }, index.h("span", null, "\u00A0"), this.currentSelected), index.h("div", { class: "board" }, index.h("mb-find-words-board", { part: "board", isSelectionCorrect: this.isSelectionCorrect, ref: (el) => this.boardEl = el, letters: this.boardData.letters, width: this.boardData.width })))
-            : index.h("div", null, "\u0141adowanie..."));
+            : index.h("div", null, "\u0141adowanie...");
     }
     static get watchers() { return {
         "board": [{
@@ -101,7 +103,28 @@ const BoardComponent = class {
     letters = '';
     width = 1;
     isSelectionCorrect = false;
+    selectedChanged;
     get el() { return index.getElement(this); }
+    savedPaths = [];
+    selectedCells = [];
+    emitSelectedChanged() {
+        const data = this.selectedCells.map(i => this.letters[i]).join('');
+        this.selectedChanged.emit(data);
+    }
+    async resetSelection() {
+        this.selectedCells = [];
+        this.head = null;
+    }
+    async setSelectionAsCorrect() {
+        this.isSelectionCorrect = true;
+    }
+    savePath() {
+        this.savedPaths = [
+            ...this.savedPaths,
+            [...this.selectedCells]
+        ];
+    }
+    head = null;
     cellEls = [];
     componentDidLoad() {
         this.cellEls = Array.from(this.el.querySelectorAll('.cell'));
@@ -136,44 +159,17 @@ const BoardComponent = class {
             this.resetSelection();
         }
     }
-    async resetSelection() {
-        this.selectedCells = [];
-        this.head = null;
-    }
-    async setSelectionAsCorrect() {
-        this.isSelectionCorrect = true;
-    }
-    selectedCells = [];
-    head = null;
-    path = '';
     buildPolyline(selectedCells) {
         if (selectedCells.length === 0)
-            return this.setPoliline([]);
+            return [];
         if (selectedCells.length === 1) {
             const point = this.cellCenterPosition(selectedCells[0]);
-            this.setPoliline([point]);
+            return [point];
         }
         else {
             const points = selectedCells.map((index) => this.cellCenterPosition(index));
-            this.setPoliline(points);
-        }
-    }
-    setPoliline(points) {
-        if (points.length === 0) {
-            this.path = '';
-            return;
+            return points;
         }
-        const lastPoint = points[points.length - 1];
-        const filledLine = [
-            ...points,
-            ...Array(this.letters.length - points.length).fill([...lastPoint])
-        ];
-        this.path = filledLine.reduce((result, point, index) => {
-            if (index === 0) {
-                return `M ${point[0]} ${point[1]} `;
-            }
-            return result + `L ${point[0]} ${point[1]}`;
-        }, '');
     }
     cellCenterPosition(index) {
         const hostRect = this.el.getBoundingClientRect();
@@ -186,11 +182,6 @@ const BoardComponent = class {
             (elRect.y + elRect.height / 2) - hostRect.y
         ];
     }
-    selectedChanged;
-    emitSelectedChanged() {
-        const data = this.selectedCells.map(i => this.letters[i]).join('');
-        this.selectedChanged.emit(data);
-    }
     handleTouchEvents(event) {
         if (event.pointerType !== 'touch')
             return;
@@ -207,9 +198,11 @@ const BoardComponent = class {
         }
     }
     render() {
-        return index.h("div", { key: 'b8805e0252a0e6c5c5be4eaf58706488a4d94e81', class: {
+        return index.h("div", { key: '9d51872a06146b8fba79aa8809837c39caaf50b6', class: {
                 "grid": true
-            }, style: { "--grid-width": `${this.width}` }, onPointerMove: (event) => this.handleTouchEvents(event) }, index.h("svg", { key: '2b9af43e52c23db96f8e73da079799d6b7a766e2' }, index.h("path", { key: '5ff2ac1961a3527d31c8ec9c0fa5587d96b4b9cf', d: this.path })), this.letters.split('').map((letter, index$1) => {
+            }, style: {
+                "--grid-width": `${this.width}`
+            }, onPointerMove: (event) => this.handleTouchEvents(event) }, index.h(PathsSVG, { key: '1bd0de6f34ca28ee2f772d5ac50dc9a705aeed58', maxSize: this.letters.length, cl: "active", paths: [this.buildPolyline(this.selectedCells)] }), index.h(PathsSVG, { key: '2da096e16d933dc01fe7b184b4eb22db271d5464', maxSize: this.letters.length, cl: "saved", paths: this.savedPaths.map(p => this.buildPolyline(p)) }), this.letters.split('').map((letter, index$1) => {
             const isSelected = this.selectedCells.includes(index$1);
             return index.h("div", { class: {
                     "cell": true,
@@ -224,12 +217,31 @@ const BoardComponent = class {
     }
     static get watchers() { return {
         "selectedCells": [{
-                "buildPolyline": 0
-            }, {
                 "emitSelectedChanged": 0
             }]
     }; }
 };
+function PathsSVG({ paths, maxSize, cl }) {
+    const data = paths.map(points => {
+        if (points.length === 0) {
+            return '';
+        }
+        const lastPoint = points[points.length - 1];
+        const filledLine = [
+            ...points,
+            ...Array(maxSize - points.length).fill([...lastPoint])
+        ];
+        return filledLine.reduce((result, point, index) => {
+            if (index === 0) {
+                return `M ${point[0]} ${point[1]} `;
+            }
+            return result + `L ${point[0]} ${point[1]}`;
+        }, '');
+    });
+    return index.h("svg", { class: cl }, data.map(path => {
+        return index.h("path", { d: path });
+    }));
+}
 
 exports.mb_find_words = MbFindWords;
 exports.mb_find_words_board = BoardComponent;

package/dist/collection/components/find-words/board.js

@@ -4,7 +4,28 @@ export class BoardComponent {
     letters = '';
     width = 1;
     isSelectionCorrect = false;
+    selectedChanged;
     el;
+    savedPaths = [];
+    selectedCells = [];
+    emitSelectedChanged() {
+        const data = this.selectedCells.map(i => this.letters[i]).join('');
+        this.selectedChanged.emit(data);
+    }
+    async resetSelection() {
+        this.selectedCells = [];
+        this.head = null;
+    }
+    async setSelectionAsCorrect() {
+        this.isSelectionCorrect = true;
+    }
+    savePath() {
+        this.savedPaths = [
+            ...this.savedPaths,
+            [...this.selectedCells]
+        ];
+    }
+    head = null;
     cellEls = [];
     componentDidLoad() {
         this.cellEls = Array.from(this.el.querySelectorAll('.cell'));
@@ -39,45 +60,18 @@ export class BoardComponent {
             this.resetSelection();
         }
     }
-    async resetSelection() {
-        this.selectedCells = [];
-        this.head = null;
-    }
-    async setSelectionAsCorrect() {
-        this.isSelectionCorrect = true;
-    }
-    selectedCells = [];
-    head = null;
-    path = '';
     buildPolyline(selectedCells) {
         if (selectedCells.length === 0)
-            return this.setPoliline([]);
+            return [];
         if (selectedCells.length === 1) {
             const point = this.cellCenterPosition(selectedCells[0]);
-            this.setPoliline([point]);
+            return [point];
         }
         else {
             const points = selectedCells.map((index) => this.cellCenterPosition(index));
-            this.setPoliline(points);
+            return points;
         }
     }
-    setPoliline(points) {
-        if (points.length === 0) {
-            this.path = '';
-            return;
-        }
-        const lastPoint = points[points.length - 1];
-        const filledLine = [
-            ...points,
-            ...Array(this.letters.length - points.length).fill([...lastPoint])
-        ];
-        this.path = filledLine.reduce((result, point, index) => {
-            if (index === 0) {
-                return `M ${point[0]} ${point[1]} `;
-            }
-            return result + `L ${point[0]} ${point[1]}`;
-        }, '');
-    }
     cellCenterPosition(index) {
         const hostRect = this.el.getBoundingClientRect();
         if (!this.cellEls[index])
@@ -89,11 +83,6 @@ export class BoardComponent {
             (elRect.y + elRect.height / 2) - hostRect.y
         ];
     }
-    selectedChanged;
-    emitSelectedChanged() {
-        const data = this.selectedCells.map(i => this.letters[i]).join('');
-        this.selectedChanged.emit(data);
-    }
     handleTouchEvents(event) {
         if (event.pointerType !== 'touch')
             return;
@@ -110,9 +99,11 @@ export class BoardComponent {
         }
     }
     render() {
-        return h("div", { key: 'b8805e0252a0e6c5c5be4eaf58706488a4d94e81', class: {
+        return h("div", { key: '9d51872a06146b8fba79aa8809837c39caaf50b6', class: {
                 "grid": true
-            }, style: { "--grid-width": `${this.width}` }, onPointerMove: (event) => this.handleTouchEvents(event) }, h("svg", { key: '2b9af43e52c23db96f8e73da079799d6b7a766e2' }, h("path", { key: '5ff2ac1961a3527d31c8ec9c0fa5587d96b4b9cf', d: this.path })), this.letters.split('').map((letter, index) => {
+            }, style: {
+                "--grid-width": `${this.width}`
+            }, onPointerMove: (event) => this.handleTouchEvents(event) }, h(PathsSVG, { key: '1bd0de6f34ca28ee2f772d5ac50dc9a705aeed58', maxSize: this.letters.length, cl: "active", paths: [this.buildPolyline(this.selectedCells)] }), h(PathsSVG, { key: '2da096e16d933dc01fe7b184b4eb22db271d5464', maxSize: this.letters.length, cl: "saved", paths: this.savedPaths.map(p => this.buildPolyline(p)) }), this.letters.split('').map((letter, index) => {
             const isSelected = this.selectedCells.includes(index);
             return h("div", { class: {
                     "cell": true,
@@ -192,8 +183,8 @@ export class BoardComponent {
     }
     static get states() {
         return {
-            "selectedCells": {},
-            "path": {}
+            "savedPaths": {},
+            "selectedCells": {}
         };
     }
     static get events() {
@@ -249,17 +240,47 @@ export class BoardComponent {
                     "text": "",
                     "tags": []
                 }
+            },
+            "savePath": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {},
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "selectedCells",
-                "methodName": "buildPolyline"
-            }, {
                 "propName": "selectedCells",
                 "methodName": "emitSelectedChanged"
             }];
     }
 }
+function PathsSVG({ paths, maxSize, cl }) {
+    const data = paths.map(points => {
+        if (points.length === 0) {
+            return '';
+        }
+        const lastPoint = points[points.length - 1];
+        const filledLine = [
+            ...points,
+            ...Array(maxSize - points.length).fill([...lastPoint])
+        ];
+        return filledLine.reduce((result, point, index) => {
+            if (index === 0) {
+                return `M ${point[0]} ${point[1]} `;
+            }
+            return result + `L ${point[0]} ${point[1]}`;
+        }, '');
+    });
+    return h("svg", { class: cl }, data.map(path => {
+        return h("path", { d: path });
+    }));
+}

package/dist/collection/components/find-words/find-words.css

@@ -1,5 +1,10 @@
 :host {
-  display: block;
+  box-sizing: border-box;
+  display: grid;
+  place-content: center;
+  width: 100%;
+  height: 100%;
+  container-type: size;
   --_mb-default-font: Verdana, Geneva, Tahoma, sans-serif;
   --_mb-font: var(--mb-font, var(--_mb-default-font));
   --_mb-color: var(--mb-color, black);
@@ -7,20 +12,35 @@
   --_mb-board-font-family: var(--mb-board-font-family, var(--_mb-font));
   --_mb-answers-font-family: var(--mb-answers-font-family, var(--_mb-font));
   --_mb-preview-font-family: var(--mb-preview-font-family, var(--_mb-font));
+  --_mb-select-line-color: var(--mb-select-line-color, red);
+  --_mb-select-line-width: var(--mb-select-line-width, 40px);
 }
 
-.main {
+[part=main] {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-areas: "preview" "board" "answers";
-  grid-template-rows: min-content 80vw min-content;
+  grid-template-rows: min-content 1fr min-content;
+  width: min(100cqw, 100cqh / var(--aspect, 1));
+  height: min(100cqw * var(--aspect, 1), 100cqh);
+  color: var(--_mb-color);
+  background: var(--_mb-background);
+}
+[part=main].no-answers {
+  grid-template-areas: "preview" "board";
+  grid-template-rows: min-content 1fr;
 }
 @media (min-width: 576px) {
-  .main {
+  [part=main] {
     grid-template-columns: 1fr 1fr;
     grid-template-areas: "answers preview" "answers board";
     grid-template-rows: min-content minmax(300px, 80vh);
   }
+  [part=main].no-answers {
+    grid-template-columns: 1fr;
+    grid-template-areas: "preview" "board";
+    grid-template-rows: min-content 1fr;
+  }
 }
 
 .answers {
@@ -52,7 +72,7 @@
 
 .board {
   display: grid;
-  place-content: center;
+  place-content: start center;
   overflow: hidden;
   position: relative;
   grid-area: board;
@@ -82,17 +102,19 @@ mb-find-words-board {
   right: 0;
   bottom: 0;
   pointer-events: none;
-  z-index: -1;
 }
 .grid svg polyline,
 .grid svg path {
-  stroke: lightskyblue;
+  stroke: var(--_mb-select-line-color);
   fill: none;
-  stroke-width: 40px;
+  stroke-width: var(--_mb-select-line-width);
   stroke-linecap: round;
   stroke-linejoin: round;
   transition: all 0.3s;
 }
+.grid svg.saved {
+  --_mb-select-line-color: #ddd;
+}
 
 .cell {
   display: grid;
@@ -100,6 +122,7 @@ mb-find-words-board {
   place-content: center;
   container-type: size;
   user-select: none;
+  z-index: 1;
 }
 .cell__inner {
   font-size: 80cqh;

package/dist/collection/components/find-words/find-words.js

@@ -5,6 +5,7 @@ export class MbFindWords {
      */
     init = true;
     board;
+    hideAnswers = false;
     boardData;
     boardEl;
     isInitialized = false;
@@ -58,17 +59,18 @@ export class MbFindWords {
             console.log('znalezione!');
             this.answers = this.answers.map(a => a === matchingAnswer ? { ...a, found: true } : a);
             this.isSelectionCorrect = true;
+            this.boardEl?.savePath();
         }
     }
     render() {
-        return h("div", { key: 'eee958199c326614530edf1e642f6b0791091a02' }, this.isInitialized
-            ? h("div", { part: "main", class: "main" }, h("div", { part: "answers", class: "answers" }, h("ul", null, this.answers.map(a => {
+        return this.isInitialized
+            ? h("div", { part: "main", class: { 'no-answers': this.hideAnswers } }, this.hideAnswers ? '' : h("div", { part: "answers", class: "answers" }, h("ul", null, this.answers.map(a => {
                 return h("li", { key: a.value, class: { "answer--found": a.found } }, a.value);
             }))), h("div", { part: "preview", class: {
                     preview: true,
                     'preview--correct': this.isSelectionCorrect
                 } }, h("span", null, "\u00A0"), this.currentSelected), h("div", { class: "board" }, h("mb-find-words-board", { part: "board", isSelectionCorrect: this.isSelectionCorrect, ref: (el) => this.boardEl = el, letters: this.boardData.letters, width: this.boardData.width })))
-            : h("div", null, "\u0141adowanie..."));
+            : h("div", null, "\u0141adowanie...");
     }
     static get is() { return "mb-find-words"; }
     static get encapsulation() { return "shadow"; }
@@ -127,6 +129,26 @@ export class MbFindWords {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "hideAnswers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-answers",
+                "defaultValue": "false"
             }
         };
     }