@mborecki/crossword 0.0.2

package/dist/cjs/index.cjs.js

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

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index-TyGpRn4d.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["mb-crossword.cjs",[[513,"mb-crossword",{"init":[4],"data":[16],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"initGame":[64]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

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

@@ -0,0 +1,323 @@
+'use strict';
+
+var index = require('./index-TyGpRn4d.js');
+var index$1 = require('./index-CwHIXXW5.js');
+
+function Clue({ isCurrent, word, onPointerDown }) {
+    return index.h("p", { onPointerDown: onPointerDown, part: "clue", class: {
+            "--current": isCurrent
+        } }, word.clue);
+}
+
+function Cell({ data, isInCurrentClue, isSelected }) {
+    return index.h("div", { part: "cell", class: {
+            "--blocked": data.isBlocked,
+            '--in-current-clue': isInCurrentClue,
+            '--selected': isSelected,
+        } }, index.h("div", { class: "_inner", style: { position: 'absolute', width: '100%' } }, data.value));
+}
+
+const mbCrosswordCss = () => `*[part=main]{display:grid;grid-template-areas:"clues board";grid-template-columns:1fr 1fr}*[part=main].--focused{background:lightgrey}[part=clues]{grid-area:clues;display:grid;grid-template-columns:1fr 1fr}[part=clue].--current{background:lightcyan}[part=board]{grid-area:board;display:grid}[part=cell]{aspect-ratio:1;background:#d9d9d9;position:relative;container-type:size}[part=cell]:nth-child(2n){background:#999}[part=cell].--blocked{background:black}[part=cell].--in-current-clue{box-shadow:inset 0 0 2px 2px lightblue}[part=cell].--selected{background:lightblue}[part=cell] ._inner{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-content:center;text-transform:uppercase;font-size:80cqh}[part=preview]{display:none}`;
+
+const MBCrossword = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    init = true;
+    data;
+    hWords = [];
+    vWords = [];
+    currentClueId = null;
+    currentClue = null;
+    isFocused = false;
+    selectedCell = null;
+    componentWillLoad() {
+        if (this.init && this.data) {
+            this.initGame();
+        }
+    }
+    get allWords() {
+        return [
+            ...this.hWords,
+            ...this.vWords
+        ];
+    }
+    async initGame(data = this.data) {
+        if (!data.words) {
+            throw new Error('Words definition missing');
+        }
+        this.hWords = [];
+        this.vWords = [];
+        data.words.forEach((w, index) => {
+            const idSeed = Math.random();
+            if (typeof w.id === 'undefined') {
+                w.id = `${idSeed}_${index}`;
+            }
+            if (w.orientation === 'horizontal') {
+                this.hWords = [...this.hWords, w];
+            }
+            if (w.orientation === 'vertical') {
+                this.vWords = [...this.vWords, w];
+            }
+        });
+        this.buildBoard();
+    }
+    boardWidth = 0;
+    boardHeight = 0;
+    cells = [];
+    buildBoard() {
+        let boardWidth = 0;
+        let boardHeight = 0;
+        this.allWords.forEach((w) => {
+            if (w.orientation === 'horizontal') {
+                boardWidth = Math.max(boardWidth, w.x + w.word.length);
+                boardHeight = Math.max(boardHeight, w.y + 1);
+            }
+            if (w.orientation === 'vertical') {
+                boardWidth = Math.max(boardWidth, w.x + 1);
+                boardHeight = Math.max(boardHeight, w.y + w.word.length);
+            }
+        });
+        const cells = Array(boardHeight * boardWidth).fill(null).map((_, index) => {
+            const [x, y] = index$1.Vec2fromIndex(index, boardWidth);
+            return {
+                index,
+                x,
+                y,
+                value: null,
+                isCurrent: false,
+                isInCurrentWord: false,
+                isBlocked: true
+            };
+        });
+        this.allWords.forEach((w) => {
+            if (w.orientation === 'horizontal') {
+                for (let i = 0; i < w.word.length; i++) {
+                    const v = index$1.Vec2.from(w);
+                    const cellIndex = index$1.indexFromXY(new index$1.Vec2(v.x + i, v.y), boardWidth);
+                    cells[cellIndex].isBlocked = false;
+                }
+            }
+            if (w.orientation === 'vertical') {
+                for (let i = 0; i < w.word.length; i++) {
+                    const v = index$1.Vec2.from(w);
+                    const cellIndex = index$1.indexFromXY(new index$1.Vec2(v.x, v.y + i), boardWidth);
+                    cells[cellIndex].isBlocked = false;
+                }
+            }
+        });
+        this.cells = cells;
+        this.boardWidth = boardWidth;
+        this.boardHeight = boardHeight;
+    }
+    isInClue(xy, clue = this.currentClue) {
+        if (clue === null)
+            return false;
+        if (xy.x !== clue.x && xy.y !== clue.y)
+            return false;
+        if (clue.orientation === 'horizontal') {
+            if (xy.y !== clue.y)
+                return false;
+            if (xy.x < clue.x)
+                return false;
+            if (xy.x >= clue.x + clue.word.length)
+                return false;
+            return true;
+        }
+        if (clue.orientation === 'vertical') {
+            if (xy.x !== clue.x)
+                return false;
+            if (xy.y < clue.y)
+                return false;
+            if (xy.y >= clue.y + clue.word.length)
+                return false;
+            return true;
+        }
+    }
+    isSelectedCell(cell) {
+        if (!this.selectedCell)
+            return false;
+        return cell.x === this.selectedCell.x && cell.y === this.selectedCell.y;
+    }
+    getNextClueId() {
+        if (!this.currentClueId) {
+            return this.allWords[0]?.id ?? null;
+        }
+        const currentIndex = this.allWords.findIndex(w => w.id === this.currentClueId);
+        if (currentIndex < 0) {
+            return this.allWords[0]?.id ?? null;
+        }
+        return this.allWords[currentIndex + 1]?.id ?? null;
+    }
+    getPrevClueId() {
+        if (!this.currentClueId) {
+            return this.allWords[0]?.id ?? null;
+        }
+        const currentIndex = this.allWords.findIndex(w => w.id === this.currentClueId);
+        if (currentIndex < 0) {
+            return this.allWords[0]?.id ?? null;
+        }
+        return this.allWords[currentIndex - 1]?.id ?? null;
+    }
+    inputLetter(char) {
+        if (!this.selectedCell)
+            return;
+        this.selectedCell.value = char;
+        this.selectNextCell();
+        index.forceUpdate(this);
+    }
+    selectNextCell() {
+        if (!this.selectedCell || !this.currentClue)
+            return;
+        const currentOrientation = this.currentClue.orientation;
+        if (isLastCellInWord(this.currentClue, this.selectedCell)) {
+            const nextClueId = this.getNextClueId();
+            if (nextClueId) {
+                this.selectClue(nextClueId);
+            }
+            else {
+                this.selectClue(this.hWords[0]?.id ?? this.vWords[0]?.id);
+            }
+            return;
+        }
+        if (currentOrientation === 'horizontal') {
+            this.selectCellByXY(new index$1.Vec2(this.selectedCell.x + 1, this.selectedCell.y));
+        }
+        if (currentOrientation === 'vertical') {
+            this.selectCellByXY(new index$1.Vec2(this.selectedCell.x, this.selectedCell.y + 1));
+        }
+    }
+    onFocusin() {
+        this.isFocused = true;
+        if (!this.currentClueId) {
+            this.currentClueId = this.allWords[0]?.id ?? null;
+        }
+    }
+    onFocusOut() {
+        this.isFocused = false;
+    }
+    selectClue(id, { row, col } = {}) {
+        if (!id)
+            return;
+        this.currentClueId = id;
+        const clue = this.allWords.find(w => w.id === id);
+        if (!clue) {
+            this.currentClueId = null;
+            this.currentClue = null;
+        }
+        this.currentClue = clue;
+        const selectCell = [clue.x, clue.y];
+        if (typeof row !== 'undefined' && clue.orientation === 'vertical') {
+            if (row >= clue.y && row < clue.y + clue.word.length) {
+                selectCell[1] = row;
+            }
+        }
+        if (typeof col !== 'undefined' && clue.orientation === 'horizontal') {
+            if (col >= clue.x && col < clue.x + clue.word.length) {
+                selectCell[0] = col;
+            }
+        }
+        this.selectCellByXY(index$1.Vec2.from(selectCell));
+    }
+    selectCellByXY(v) {
+        const selectCellIndex = index$1.indexFromXY(v, this.boardWidth);
+        this.selectedCell = this.cells[selectCellIndex] ?? null;
+    }
+    findNonblockedCell(source, vector) {
+        const pointer = new index$1.Vec2(source[0] + vector[0], source[1] + vector[1]);
+        const maxIterations = this.boardWidth * this.boardHeight;
+        let iterations = 0;
+        while (this.isCellBlocked(pointer) && iterations < maxIterations) {
+            iterations++;
+            pointer[0] += vector[0];
+            pointer[1] += vector[1];
+            if (pointer[0] < 0) {
+                pointer[0] = this.boardWidth - 1;
+            }
+            if (pointer[0] >= this.boardWidth) {
+                pointer[0] = 0;
+            }
+            if (pointer[1] < 0) {
+                pointer[1] = this.boardHeight - 1;
+            }
+            if (pointer[1] >= this.boardHeight) {
+                pointer[1] = 0;
+            }
+        }
+        return pointer;
+    }
+    isCellBlocked(v) {
+        const cell = this.cells[index$1.indexFromXY(v, this.boardWidth)];
+        return cell?.isBlocked ?? true;
+    }
+    selectClueByXY(v) {
+        const clues = this.allWords.filter(w => this.isInClue(v, w));
+        if (!clues.length) {
+            return;
+        }
+        const betterClue = clues.find(c => c.orientation === this.currentClue?.orientation);
+        this.selectClue(betterClue?.id ?? clues[0].id, { row: v.y, col: v.x });
+    }
+    onKeyPress(event) {
+        console.log(event);
+        if (event.key === 'Tab') {
+            const nextClue = event.shiftKey ? this.getPrevClueId() : this.getNextClueId();
+            if (nextClue) {
+                event.preventDefault();
+                this.selectClue(nextClue);
+            }
+        }
+        if (index$1.isKeyboardEventLetter(event)) {
+            this.inputLetter(event.key.toLowerCase()[0]);
+        }
+        if (this.selectedCell) {
+            switch (event.key) {
+                case 'ArrowLeft':
+                    this.selectClueByXY(this.findNonblockedCell(new index$1.Vec2(this.selectedCell.x, this.selectedCell.y), new index$1.Vec2(-1, 0)));
+                    event.preventDefault();
+                    return;
+                case 'ArrowRight':
+                    this.selectClueByXY(this.findNonblockedCell(new index$1.Vec2(this.selectedCell.x, this.selectedCell.y), new index$1.Vec2(1, 0)));
+                    event.preventDefault();
+                    return;
+                case 'ArrowUp':
+                    this.selectClueByXY(this.findNonblockedCell(new index$1.Vec2(this.selectedCell.x, this.selectedCell.y), new index$1.Vec2(0, -1)));
+                    event.preventDefault();
+                    return;
+                case 'ArrowDown':
+                    this.selectClueByXY(this.findNonblockedCell(new index$1.Vec2(this.selectedCell.x, this.selectedCell.y), new index$1.Vec2(0, 1)));
+                    event.preventDefault();
+                    return;
+            }
+        }
+    }
+    render() {
+        return index.h("div", { key: 'e298ac6f3a1d95bc41c4854b39600f8ac7f1696d', part: "main", class: {
+                "--focused": this.isFocused
+            }, onFocusin: this.onFocusin.bind(this), onFocusout: this.onFocusOut.bind(this), tabIndex: 0, onKeyDown: this.onKeyPress.bind(this) }, index.h("div", { key: '74be935779266effb4605f2aa5883bf564610bc0', part: "clues" }, index.h("div", { key: '125d8938e4f084562b54794158074bdaeda722b5', part: "clue-list" }, this.hWords.map(w => {
+            const isCurrent = w.id === this.currentClueId;
+            return index.h(Clue, { word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
+        })), index.h("div", { key: '4469227db5156a2d0b30e4dc7ef9ea8f8a1fc3bc', part: "clue-list" }, this.vWords.map(w => {
+            const isCurrent = w.id === this.currentClueId;
+            return index.h(Clue, { word: w, isCurrent: isCurrent, onPointerDown: () => this.selectClue(w.id) });
+        }))), index.h("div", { key: '965b2e99d1fbf273907f722e8b15749fbd728070', part: "board", style: {
+                '--test': '12',
+                'grid-template-columns': `repeat(${this.boardWidth}, 1fr)`
+            } }, this.cells.map(cell => {
+            const isInCurrentClue = this.isInClue(cell);
+            const isSelected = this.isSelectedCell(cell);
+            return index.h(Cell, { isInCurrentClue: isInCurrentClue, isSelected: isSelected, data: cell });
+        })), index.h("div", { key: '3d97bcc65c5eb1d25b60aa5183a7c63f6eecebf9', part: "preview" }, "Tu bedzie podgl\u0105d: ", this.currentClueId));
+    }
+};
+function isLastCellInWord(word, cell) {
+    const lastCellXY = [
+        word.x + (word.orientation === 'horizontal' ? (word.word.length - 1) : 0),
+        word.y + (word.orientation === 'vertical' ? (word.word.length - 1) : 0),
+    ];
+    const result = cell.x === lastCellXY[0] && cell.y === lastCellXY[1];
+    return result;
+}
+MBCrossword.style = mbCrosswordCss();
+
+exports.mb_crossword = MBCrossword;

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

@@ -0,0 +1,25 @@
+'use strict';
+
+var index = require('./index-TyGpRn4d.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.41.0 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('mb-crossword.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["mb-crossword.cjs",[[513,"mb-crossword",{"init":[4],"data":[16],"hWords":[32],"vWords":[32],"currentClueId":[32],"currentClue":[32],"isFocused":[32],"selectedCell":[32],"boardWidth":[32],"boardHeight":[32],"cells":[32],"initGame":[64]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "components/crossword/mb-crossword.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.41.0",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+export function Cell({ data, isInCurrentClue, isSelected }) {
+    return h("div", { part: "cell", class: {
+            "--blocked": data.isBlocked,
+            '--in-current-clue': isInCurrentClue,
+            '--selected': isSelected,
+        } }, h("div", { class: "_inner", style: { position: 'absolute', width: '100%' } }, data.value));
+}

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

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

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

@@ -0,0 +1,57 @@
+*[part=main] {
+  display: grid;
+  grid-template-areas: "clues board";
+  grid-template-columns: 1fr 1fr;
+}
+*[part=main].--focused {
+  background: lightgrey;
+}
+
+[part=clues] {
+  grid-area: clues;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+[part=clue].--current {
+  background: lightcyan;
+}
+
+[part=board] {
+  grid-area: board;
+  display: grid;
+}
+
+[part=cell] {
+  aspect-ratio: 1;
+  background: #d9d9d9;
+  position: relative;
+  container-type: size;
+}
+[part=cell]:nth-child(2n) {
+  background: #999;
+}
+[part=cell].--blocked {
+  background: black;
+}
+[part=cell].--in-current-clue {
+  box-shadow: inset 0 0 2px 2px lightblue;
+}
+[part=cell].--selected {
+  background: lightblue;
+}
+[part=cell] ._inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  place-content: center;
+  text-transform: uppercase;
+  font-size: 80cqh;
+}
+
+[part=preview] {
+  display: none;
+}