@mborecki/find-words 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,18 @@
+'use strict';
+
+function areSiblings(index1, index2, width) {
+    if (width < 1) {
+        throw new Error("Board width must be positive");
+    }
+    if (index1 === index2)
+        return false;
+    const row1 = Math.floor(index1 / width);
+    const row2 = Math.floor(index2 / width);
+    const col1 = index1 % width;
+    const col2 = index2 % width;
+    const d1 = Math.abs(row1 - row2);
+    const d2 = Math.abs(col1 - col2);
+    return d1 <= 1 && d2 <= 1;
+}
+
+exports.areSiblings = areSiblings;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index-CpayB0Bf.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);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

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

@@ -0,0 +1,235 @@
+'use strict';
+
+var index = require('./index-CpayB0Bf.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 MbFindWords = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     *
+     */
+    init = true;
+    board;
+    boardData;
+    boardEl;
+    isInitialized = false;
+    answers = [];
+    currentSelected = '';
+    componentWillLoad() {
+        console.log('componentDidLoad', this.init);
+        if (this.init && this.board) {
+            this.initGame();
+        }
+    }
+    watchBoard() {
+        if (this.init) {
+            this.initGame();
+        }
+    }
+    async initGame(board = this.board) {
+        if (!board) {
+            throw new Error('Missing board definition');
+        }
+        this.boardData = board;
+        console.log('initGame', this.boardData);
+        this.initAnswers();
+        this.isInitialized = true;
+    }
+    initAnswers() {
+        this.answers = this.boardData.answers.map(a => {
+            return {
+                value: a,
+                found: false
+            };
+        });
+    }
+    onSelectedChanged(event) {
+        this.currentSelected = event.detail;
+    }
+    isSelectionCorrect = false;
+    watchIsDuringCorrect(value) {
+        if (value) {
+            setTimeout(() => {
+                this.boardEl?.resetSelection();
+                this.isSelectionCorrect = false;
+            }, 1000);
+        }
+    }
+    watchCurrentSelected(value) {
+        const matchingAnswer = this.answers.find(a => {
+            return a.value.toLowerCase() === value.toLowerCase();
+        });
+        if (matchingAnswer) {
+            console.log('znalezione!');
+            this.answers = this.answers.map(a => a === matchingAnswer ? { ...a, found: true } : a);
+            this.isSelectionCorrect = true;
+        }
+    }
+    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 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..."));
+    }
+    static get watchers() { return {
+        "board": [{
+                "watchBoard": 0
+            }],
+        "isSelectionCorrect": [{
+                "watchIsDuringCorrect": 0
+            }],
+        "currentSelected": [{
+                "watchCurrentSelected": 0
+            }]
+    }; }
+};
+MbFindWords.style = findWordsCss();
+
+const BoardComponent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.selectedChanged = index.createEvent(this, "selectedChanged");
+    }
+    letters = '';
+    width = 1;
+    isSelectionCorrect = false;
+    get el() { return index.getElement(this); }
+    cellEls = [];
+    componentDidLoad() {
+        this.cellEls = Array.from(this.el.querySelectorAll('.cell'));
+    }
+    onCellClicked(index) {
+        this.selectCell(index);
+    }
+    onCellEntered(event, index) {
+        if (event.buttons === 1 || event.pointerType === 'touch') {
+            this.selectCell(index);
+        }
+    }
+    selectCell(index) {
+        if (this.isSelectionCorrect)
+            return;
+        if (this.head === null) {
+            this.head = index;
+            this.selectedCells = [index];
+            return;
+        }
+        if (this.selectedCells.includes(index)) {
+            const indexInWord = this.selectedCells.findIndex(x => x === index);
+            this.selectedCells = this.selectedCells.slice(0, indexInWord + 1);
+            this.head = index;
+            return;
+        }
+        if (index$1.areSiblings(this.head, index, this.width)) {
+            this.head = index;
+            this.selectedCells = [...this.selectedCells, index];
+        }
+        else {
+            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([]);
+        if (selectedCells.length === 1) {
+            const point = this.cellCenterPosition(selectedCells[0]);
+            this.setPoliline([point]);
+        }
+        else {
+            const points = selectedCells.map((index) => this.cellCenterPosition(index));
+            this.setPoliline(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])
+            return [0, 0];
+        const el = this.cellEls[index];
+        const elRect = el.getBoundingClientRect();
+        return [
+            (elRect.x + elRect.width / 2) - hostRect.x,
+            (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;
+        const cellIndex = this.cellEls.findIndex(el => {
+            const rect = el.getBoundingClientRect();
+            const margin = rect.width * .2;
+            return ((rect.x + margin) < event.x) &&
+                ((rect.y + margin) < event.y) &&
+                (event.x < (rect.right - margin)) &&
+                (event.y < (rect.bottom - margin));
+        });
+        if (cellIndex >= 0) {
+            this.selectCell(cellIndex);
+        }
+    }
+    render() {
+        return index.h("div", { key: 'b8805e0252a0e6c5c5be4eaf58706488a4d94e81', 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) => {
+            const isSelected = this.selectedCells.includes(index$1);
+            return index.h("div", { class: {
+                    "cell": true,
+                    "cell--selected": isSelected,
+                    "cell--correct": this.isSelectionCorrect
+                }, part: "cell", key: index$1 }, index.h("div", { class: "cell__inner", onPointerDown: () => this.onCellClicked(index$1), onPointerEnter: (event) => this.onCellEntered(event, index$1), onKeyDown: (event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        this.onCellClicked(index$1);
+                    }
+                }, role: "button", tabindex: "0", "aria-label": `Letter ${letter}, ${isSelected ? 'selected' : 'not selected'}` }, letter));
+        }));
+    }
+    static get watchers() { return {
+        "selectedCells": [{
+                "buildPolyline": 0
+            }, {
+                "emitSelectedChanged": 0
+            }]
+    }; }
+};
+
+exports.mb_find_words = MbFindWords;
+exports.mb_find_words_board = BoardComponent;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,13 @@
+{
+  "entries": [
+    "components/find-words/board.js",
+    "components/find-words/find-words.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.41.0",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,265 @@
+import { h } from "@stencil/core";
+import { areSiblings } from "../../utils/utils";
+export class BoardComponent {
+    letters = '';
+    width = 1;
+    isSelectionCorrect = false;
+    el;
+    cellEls = [];
+    componentDidLoad() {
+        this.cellEls = Array.from(this.el.querySelectorAll('.cell'));
+    }
+    onCellClicked(index) {
+        this.selectCell(index);
+    }
+    onCellEntered(event, index) {
+        if (event.buttons === 1 || event.pointerType === 'touch') {
+            this.selectCell(index);
+        }
+    }
+    selectCell(index) {
+        if (this.isSelectionCorrect)
+            return;
+        if (this.head === null) {
+            this.head = index;
+            this.selectedCells = [index];
+            return;
+        }
+        if (this.selectedCells.includes(index)) {
+            const indexInWord = this.selectedCells.findIndex(x => x === index);
+            this.selectedCells = this.selectedCells.slice(0, indexInWord + 1);
+            this.head = index;
+            return;
+        }
+        if (areSiblings(this.head, index, this.width)) {
+            this.head = index;
+            this.selectedCells = [...this.selectedCells, index];
+        }
+        else {
+            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([]);
+        if (selectedCells.length === 1) {
+            const point = this.cellCenterPosition(selectedCells[0]);
+            this.setPoliline([point]);
+        }
+        else {
+            const points = selectedCells.map((index) => this.cellCenterPosition(index));
+            this.setPoliline(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])
+            return [0, 0];
+        const el = this.cellEls[index];
+        const elRect = el.getBoundingClientRect();
+        return [
+            (elRect.x + elRect.width / 2) - hostRect.x,
+            (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;
+        const cellIndex = this.cellEls.findIndex(el => {
+            const rect = el.getBoundingClientRect();
+            const margin = rect.width * .2;
+            return ((rect.x + margin) < event.x) &&
+                ((rect.y + margin) < event.y) &&
+                (event.x < (rect.right - margin)) &&
+                (event.y < (rect.bottom - margin));
+        });
+        if (cellIndex >= 0) {
+            this.selectCell(cellIndex);
+        }
+    }
+    render() {
+        return h("div", { key: 'b8805e0252a0e6c5c5be4eaf58706488a4d94e81', 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) => {
+            const isSelected = this.selectedCells.includes(index);
+            return h("div", { class: {
+                    "cell": true,
+                    "cell--selected": isSelected,
+                    "cell--correct": this.isSelectionCorrect
+                }, part: "cell", key: index }, h("div", { class: "cell__inner", onPointerDown: () => this.onCellClicked(index), onPointerEnter: (event) => this.onCellEntered(event, index), onKeyDown: (event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        this.onCellClicked(index);
+                    }
+                }, role: "button", tabindex: "0", "aria-label": `Letter ${letter}, ${isSelected ? 'selected' : 'not selected'}` }, letter));
+        }));
+    }
+    static get is() { return "mb-find-words-board"; }
+    static get properties() {
+        return {
+            "letters": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "letters",
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "1"
+            },
+            "isSelectionCorrect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-selection-correct",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedCells": {},
+            "path": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selectedChanged",
+                "name": "selectedChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "resetSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setSelectionAsCorrect": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selectedCells",
+                "methodName": "buildPolyline"
+            }, {
+                "propName": "selectedCells",
+                "methodName": "emitSelectedChanged"
+            }];
+    }
+}

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

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