{"_id":"2048-webcomponent","_rev":"3-af265130cc3ede2ac38ee81fa28c1a83","name":"2048-webcomponent","dist-tags":{"latest":"1.1.0"},"versions":{"0.0.1-security":{"name":"2048-webcomponent","version":"0.0.1-security","description":"security holding package","repository":{"type":"git","url":"git+https://github.com/npm/security-holder.git"},"bugs":{"url":"https://github.com/npm/security-holder/issues"},"homepage":"https://github.com/npm/security-holder#readme","_id":"2048-webcomponent@0.0.1-security","_nodeVersion":"12.19.0","_npmVersion":"8.19.1","dist":{"integrity":"sha512-DVGo75Av+HIfw7iz7RvlSkzp/NnOYFBUiV29IvjzYLd0LaGF82ThBAmAml3Wczla1ywlgwezbQscnEZ2kIVLXw==","shasum":"523cc621331fc411a20bc053f76ab122ce1dfdeb","tarball":"https://registry.npmjs.org/2048-webcomponent/-/2048-webcomponent-0.0.1-security.tgz","fileCount":2,"unpackedSize":504,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGl7aegu+JFIl4qMXxtR7Bu7p9OLZlLJZaggdZGBmqc3AiEAy7Rqjoy0j+DPAgjO97TYd1mrEMYfRgGXfc/hhgK9Ncw="}]},"_npmUser":{"name":"lisayu","email":"lisa@npmjs.com"},"directories":{},"maintainers":[{"name":"lisayu","email":"lisa@npmjs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/2048-webcomponent_0.0.1-security_1705664153427_0.892160663324733"},"_hasShrinkwrap":false},"1.0.0":{"name":"2048-webcomponent","version":"1.0.0","description":"2048 as a WebComponent.","keywords":["2048","javascript","webcomponent","custom-element"],"homepage":"https://henkebyte.com/2048","bugs":{"url":"https://github.com/manuelhenke/2048-webcomponent/issues"},"repository":{"type":"git","url":"git+https://github.com/manuelhenke/2048-webcomponent.git"},"license":"MIT","author":{"name":"Manuel Henke","email":"contact@henkebyte.com","url":"https://henkebyte.com/"},"type":"module","browser":"dist/custom-element.js","main":"dist/custom-element.js","module":"dist/custom-element.js","types":"lib-esm/src/game-2048.d.ts","exports":{".":{"types":"./lib-esm/src/game-2048.d.ts","default":"./dist/custom-element.js"},"./custom-element":{"types":"./lib-esm/src/game-2048.d.ts","default":"./dist/custom-element.js"},"./custom-element.min":{"types":"./lib-esm/src/game-2048.d.ts","default":"./dist/custom-element.min.js"},"./game-2048":{"types":"./lib-esm/src/Game.d.ts","default":"./dist/game-2048.js"},"./game-2048.min":{"types":"./lib-esm/src/Game.d.ts","default":"./dist/game-2048.min.js"},"./core":{"types":"./lib-esm/src/index.d.ts","import":"./lib-esm/src/index.js","require":"./lib-cjs/src/index.js","default":"./lib-esm/src/index.js"},"./engine":{"types":"./lib-esm/src/engine/index.d.ts","import":"./lib-esm/src/engine/index.js","require":"./lib-cjs/src/engine/index.js","default":"./lib-esm/src/engine/index.js"},"./lib-esm/*":{"types":"./lib-esm/src/index.d.ts","default":"./lib-esm/src/index.js"},"./lib-cjs/*":{"types":"./lib-cjs/src/index.d.ts","default":"./lib-cjs/src/index.js"}},"scripts":{"analyze":"cem analyze --litelement","build":"npm run build:dist && npm run build:lib && ./fixup.sh && npm run analyze -- --exclude dist","build:dist":"webpack","build:lib":"npm run build:lib-esm && npm run build:lib-cjs","build:lib-esm":"rm -fr lib-esm/* && tsc -p tsconfig.json && tsc-alias -p tsconfig.json","build:lib-cjs":"rm -fr lib-cjs/* && tsc -p tsconfig-cjs.json && tsc-alias -p tsconfig-cjs.json","dev":"npm run build && concurrently -r -k \"wds\" \"npm run build:dist -- --watch\"","lint":"npm run lint:ts && npm run lint:style && npm run lint:prettier","lint:ts":"eslint --ext \".ts\" .","lint:prettier":"prettier --check .","lint:style":"stylelint \"**/*.{css,scss,sass,html}\" --ignore-path .gitignore","lintfix":"prettier --write --list-different . && npm run lint:ts --fix && npm run lint:style --fix","prepare":"husky install","test":"tsc && tsc-alias && wtr --coverage --debug","test:watch":"tsc && tsc-alias && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"tsc-alias --watch\" \"wtr --watch\""},"browserslist":["last 4 version"],"dependencies":{"lit":"^2.2.0"},"devDependencies":{"@commitlint/cli":"^17.0.3","@commitlint/config-conventional":"^17.0.3","@custom-elements-manifest/analyzer":"^0.6.3","@open-wc/eslint-config":"^8.0.2","@open-wc/testing":"^3.0.4","@types/node":"^20.1.1","@typescript-eslint/eslint-plugin":"^5.38.0","@typescript-eslint/parser":"^5.38.0","@web/dev-server":"^0.4.1","@web/dev-server-import-maps":"^0.1.1","@web/test-runner":"^0.15.0","autoprefixer":"^10.4.2","concurrently":"^8.2.0","css-loader":"^6.5.1","eslint":"^8.9.0","eslint-config-airbnb-babel":"^0.2.2","eslint-config-airbnb-base":"^15.0.0","eslint-config-airbnb-typescript":"^17.0.0","eslint-config-prettier":"^8.4.0","eslint-import-resolver-alias":"^1.1.2","eslint-plugin-babel":"^5.3.1","eslint-plugin-html":"^6.0.0","eslint-plugin-import":"^2.26.0","eslint-plugin-lit":"^1.3.0","eslint-plugin-lit-a11y":"^2.2.2","eslint-plugin-no-only-tests":"^2.4.0","eslint-plugin-no-secrets":"^0.8.9","eslint-plugin-prettier":"^4.2.1","eslint-plugin-sonarjs":"^0.18.0","eslint-plugin-unicorn":"^47.0.0","eslint-plugin-wc":"^1.3.2","husky":"^8.0.1","postcss":"^8.4.4","postcss-html":"^1.5.0","postcss-loader":"^7.0.1","prettier":"^2.5.1","sass":"^1.49.8","sass-loader":"^13.0.2","stylelint":"^14.5.3","stylelint-config-prettier-scss":"^0.0.1","stylelint-config-standard-scss":"^6.0.0","svg-inline-loader":"^0.8.2","terser-webpack-plugin":"^5.3.6","ts-loader":"^9.4.1","tsc-alias":"^1.7.0","tsconfig-paths-webpack-plugin":"^4.0.0","tslib":"^2.3.1","typescript":"^5.1.6","webpack":"^5.74.0","webpack-cli":"^5.0.1"},"customElements":"custom-elements.json","gitHead":"00a078c868bee18ac1b3d631032652ffe3e26ea2","_id":"2048-webcomponent@1.0.0","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-iwaIZe1tVL03l94aa2I1yv6yWhqscgFdKso2oIcM7Bh0oCY1W7Rcenft8BAhaUfG1C64Qx4ENe4nPFmhNSLs/g==","shasum":"5b71723687632091b787c4064d3347833bac001a","tarball":"https://registry.npmjs.org/2048-webcomponent/-/2048-webcomponent-1.0.0.tgz","fileCount":108,"unpackedSize":218059,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC++87ECbvK2myMgSrEaxM843V8aQYGskBRo/CYf/VhkgIhAMp9FKW+NT9jb/TeaLgoayl828DwbIssPI5+BstV/Liv"}]},"_npmUser":{"name":"manuelhenke","email":"manuel.henke@yahoo.de"},"directories":{},"maintainers":[{"name":"manuelhenke","email":"manuel.henke@yahoo.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/2048-webcomponent_1.0.0_1705678104639_0.4034834094948345"},"_hasShrinkwrap":false},"1.1.0":{"name":"2048-webcomponent","version":"1.1.0","description":"2048 as a WebComponent.","keywords":["2048","javascript","webcomponent","custom-element"],"homepage":"https://henkebyte.com/2048","bugs":{"url":"https://github.com/manuelhenke/2048-webcomponent/issues"},"repository":{"type":"git","url":"git+https://github.com/manuelhenke/2048-webcomponent.git"},"license":"MIT","author":{"name":"Manuel Henke","email":"contact@henkebyte.com","url":"https://henkebyte.com/"},"type":"module","browser":"dist/custom-element.js","main":"dist/custom-element.js","module":"dist/custom-element.js","types":"lib-esm/src/game-2048.d.ts","exports":{".":{"types":"./lib-esm/src/game-2048.d.ts","default":"./dist/custom-element.js"},"./custom-element":{"types":"./lib-esm/src/game-2048.d.ts","default":"./dist/custom-element.js"},"./custom-element.min":{"types":"./lib-esm/src/game-2048.d.ts","default":"./dist/custom-element.min.js"},"./game-2048":{"types":"./lib-esm/src/Game.d.ts","default":"./dist/game-2048.js"},"./game-2048.min":{"types":"./lib-esm/src/Game.d.ts","default":"./dist/game-2048.min.js"},"./core":{"types":"./lib-esm/src/index.d.ts","import":"./lib-esm/src/index.js","require":"./lib-cjs/src/index.js","default":"./lib-esm/src/index.js"},"./engine":{"types":"./lib-esm/src/engine/index.d.ts","import":"./lib-esm/src/engine/index.js","require":"./lib-cjs/src/engine/index.js","default":"./lib-esm/src/engine/index.js"},"./lib-esm/*":{"types":"./lib-esm/src/index.d.ts","default":"./lib-esm/src/index.js"},"./lib-cjs/*":{"types":"./lib-cjs/src/index.d.ts","default":"./lib-cjs/src/index.js"}},"scripts":{"analyze":"cem analyze --litelement","build":"npm run build:dist && npm run build:lib && ./fixup.sh && npm run analyze -- --exclude dist","build:dist":"webpack","build:lib":"npm run build:lib-esm && npm run build:lib-cjs","build:lib-esm":"rm -fr lib-esm/* && tsc -p tsconfig.json && tsc-alias -p tsconfig.json","build:lib-cjs":"rm -fr lib-cjs/* && tsc -p tsconfig-cjs.json && tsc-alias -p tsconfig-cjs.json","dev":"npm run build && concurrently -r -k \"wds\" \"npm run build:dist -- --watch\"","lint":"npm run lint:ts && npm run lint:style && npm run lint:prettier","lint:ts":"eslint --ext \".ts\" .","lint:prettier":"prettier --check .","lint:style":"stylelint \"**/*.{css,scss,sass,html}\" --ignore-path .gitignore","lintfix":"prettier --write --list-different . && npm run lint:ts --fix && npm run lint:style --fix","prepare":"husky install","test":"tsc && tsc-alias && wtr --coverage --debug","test:watch":"tsc && tsc-alias && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"tsc-alias --watch\" \"wtr --watch\""},"browserslist":["last 4 version"],"dependencies":{"lit":"^2.2.0"},"devDependencies":{"@commitlint/cli":"^17.0.3","@commitlint/config-conventional":"^17.0.3","@custom-elements-manifest/analyzer":"^0.6.3","@open-wc/eslint-config":"^8.0.2","@open-wc/testing":"^3.0.4","@types/node":"^20.1.1","@typescript-eslint/eslint-plugin":"^5.38.0","@typescript-eslint/parser":"^5.38.0","@web/dev-server":"^0.4.1","@web/dev-server-import-maps":"^0.1.1","@web/test-runner":"^0.15.0","autoprefixer":"^10.4.2","concurrently":"^8.2.0","css-loader":"^6.5.1","eslint":"^8.9.0","eslint-config-airbnb-babel":"^0.2.2","eslint-config-airbnb-base":"^15.0.0","eslint-config-airbnb-typescript":"^17.0.0","eslint-config-prettier":"^8.4.0","eslint-import-resolver-alias":"^1.1.2","eslint-plugin-babel":"^5.3.1","eslint-plugin-html":"^6.0.0","eslint-plugin-import":"^2.26.0","eslint-plugin-lit":"^1.3.0","eslint-plugin-lit-a11y":"^2.2.2","eslint-plugin-no-only-tests":"^2.4.0","eslint-plugin-no-secrets":"^0.8.9","eslint-plugin-prettier":"^4.2.1","eslint-plugin-sonarjs":"^0.18.0","eslint-plugin-unicorn":"^47.0.0","eslint-plugin-wc":"^1.3.2","husky":"^8.0.1","postcss":"^8.4.4","postcss-html":"^1.5.0","postcss-loader":"^7.0.1","prettier":"^2.5.1","sass":"^1.49.8","sass-loader":"^13.0.2","stylelint":"^14.5.3","stylelint-config-prettier-scss":"^0.0.1","stylelint-config-standard-scss":"^6.0.0","svg-inline-loader":"^0.8.2","terser-webpack-plugin":"^5.3.6","ts-loader":"^9.4.1","tsc-alias":"^1.7.0","tsconfig-paths-webpack-plugin":"^4.0.0","tslib":"^2.3.1","typescript":"^5.1.6","webpack":"^5.74.0","webpack-cli":"^5.0.1"},"customElements":"custom-elements.json","gitHead":"3b4f4f735e9adb759ba8a6c1e0d173405b43b9ce","_id":"2048-webcomponent@1.1.0","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-RglRjMvK0Olw+iXLaZe4SHdbxlOU/MF36QME9eLrUdI04vzjB2YH4ZmQQvrzOUUxzUkDo4iIHwyjvAWgHt1+WQ==","shasum":"968554ac7bde20e40ddc4e957592e2e9c79c5db9","tarball":"https://registry.npmjs.org/2048-webcomponent/-/2048-webcomponent-1.1.0.tgz","fileCount":116,"unpackedSize":237531,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrGpyxKtQPmdmh5nVpAaiPP/ob9aUfzGlXPuWlf6GjvAIhAO6hmSsUd7uXbYKnfyPSRJLK9MObguTb/Hr6v6/wBACZ"}]},"_npmUser":{"name":"manuelhenke","email":"manuel.henke@yahoo.de"},"directories":{},"maintainers":[{"name":"manuelhenke","email":"manuel.henke@yahoo.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/2048-webcomponent_1.1.0_1705769536468_0.2313726568030483"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-19T11:35:53.426Z","0.0.1-security":"2024-01-19T11:35:53.593Z","modified":"2024-01-20T16:52:16.882Z","1.0.0":"2024-01-19T15:28:24.777Z","1.1.0":"2024-01-20T16:52:16.693Z"},"maintainers":[{"name":"manuelhenke","email":"manuel.henke@yahoo.de"}],"description":"2048 as a WebComponent.","homepage":"https://henkebyte.com/2048","repository":{"type":"git","url":"git+https://github.com/manuelhenke/2048-webcomponent.git"},"bugs":{"url":"https://github.com/manuelhenke/2048-webcomponent/issues"},"readme":"# 2048-webcomponent\n\n[![CI](https://github.com/manuelhenke/2048-webcomponent/actions/workflows/ci.yml/badge.svg)](https://github.com/manuelhenke/2048-webcomponent/actions/workflows/ci.yml)\n[![CodeQL](https://github.com/manuelhenke/2048-webcomponent/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/manuelhenke/2048-webcomponent/actions/workflows/codeql-analysis.yml)\n[![License](https://img.shields.io/github/license/manuelhenke/2048-webcomponent)](./LICENSE)\n[![NPM version](https://img.shields.io/npm/v/2048-webcomponent.svg?style=flat)](https://www.npmjs.com/package/2048-webcomponent)\n\nThis is **2048** as a **WebComponent**. Once you integrate it as described further, the game just follows the standard rules. To make a move, just use the arrow keys or swipe.\n\n## Getting Started\n\nInstall the package via `npm` or `yarn` and deliver the script to the user.\nThis can be done via `import`, `require` or just inserting a `script` tag.\n\n```shell\nnpm i 2048-webcomponent\n```\n\n```shell\nyarn add 2048-webcomponent\n```\n\n## Attributes\n\n| Param                      | Type     | Description                                                                      | Default |\n| -------------------------- | -------- | -------------------------------------------------------------------------------- | ------- |\n| `columns`                  | `number` | Amount of columns of the board.                                                  | `4`     |\n| `rows`                     | `number` | Amount of rows of the board.                                                     | `4`     |\n| `swipe-distance-threshold` | `number` | Amount of pixels required to trigger a swipe.                                    | `50`    |\n| `restart-selector`         | `string` | If present, attaches a click event listener to the element to trigger a restart. |         |\n\n## Events\n\nBy default, each event contains the current game state in `event.detail.game`. To discourage cheating, no events should be logged in the browser console.\n| Name | Type | Cancelable | Description | `detail` |\n| ---------------- | --------------- | ------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------------ |\n| `2048:game-won` | `GameWonEvent` | :x: | User just won the game | <ul><li>`positions`: `Positions` current game state</li></ul> |\n| `2048:game-lost` | `GameLostEvent` | :x: | User just lost the game | <ul><li>`positions`: `Positions` current game state</li></ul> |\n| `2048:move` | `MoveEvent` | :white_check_mark: | User made a move | <ul><li>`positions`: `Positions` current game state</li><li>`direction`: `Direction` direction of the move</li></ul> |\n| `2048:score` | `ScoreEvent` | :x: | Score has been updated | <ul><li>`positions`: `Positions` current game state</li><li>`oldScore`: `number \\| undefined` old score</li><li>`delta`: `number \\| undefined` difference between old and new score</li><li>`newScore`: `number` current score</li></ul> |\n\n## Usage\n\n### Basic usage\n\nJust a basic 9x9 / 10 Mines 2048 game. Further examples can be **combined**.\n\n```html\n<game-2048></game-2048>\n\n<script type=\"module\">\n  import '2048-webcomponent';\n  // Alternatives:\n  // import '2048-webcomponent/custom-element';\n  // import '2048-webcomponent/custom-element.min';\n</script>\n```\n\n### Custom tag name\n\nDefine your own custom tag name\n\n```html\n<custom-game-2048></custom-game-2048>\n\n<script type=\"module\">\n  import { Game } from '2048-webcomponent/game-2048';\n  // Alternative:\n  // import { Game } from '2048-webcomponent/game-2048.min';\n  window.customElements.define('custom-game-2048', Game);\n</script>\n```\n\n### Provide a restart button\n\nProvide a selector where a \"click\"-event will be attached to, to restart the game.\n\n```html\n<game-2048 restart-selector=\"#restart-game-button\"></game-2048>\n<button id=\"restart-game-button\">Restart!</button>\n\n<script type=\"module\">\n  import '2048-webcomponent';\n</script>\n```\n\n### Trigger Restart via JavaScript\n\nWrite custom logic to restart the game.\n\n```html\n<game-2048 id=\"game\"></game-2048>\n<button id=\"restart-game-button-confirm\">Restart with Confirm!</button>\n\n<script type=\"module\">\n  import '2048-webcomponent';\n\n  window.addEventListener('DOMContentLoaded', () => {\n    const game = document.querySelector('#game');\n\n    document.querySelector('#restart-game-button-confirm').addEventListener('click', (event) => {\n      event.preventDefault();\n      if (window.confirm('Are you sure, that you want to restart the game?')) {\n        game.restartGame();\n      }\n    });\n  });\n</script>\n```\n\n### Custom win/lose event listener\n\nAttach an EventListener for the win/lose events.\n\n```html\n<game-2048 id=\"game\"></game-2048>\n\n<script type=\"module\">\n  import '2048-webcomponent';\n\n  window.addEventListener('DOMContentLoaded', () => {\n    const game = document.querySelector('#game');\n\n    game.addEventListener('game-won', () => {\n      console.log('win');\n    });\n\n    game.addEventListener('game-lost', () => {\n      console.log('lose');\n    });\n  });\n</script>\n```\n\n### Different initial game configurations\n\nOf course you can provide different configurations for the game.\n\n```html\n<game-2048 rows=\"5\" columns=\"5\"></game-2048>\n\n<script type=\"module\">\n  import '2048-webcomponent';\n</script>\n```\n\n## Example\n\nTry it out at [CodePen](https://codepen.io/manuelhenke/pen/ExoPKLZ).\n\n![Example Image](2048-example.png)\n\n## TypeScript\n\nThe whole package is written in TypeScript and therefore provides a strongly typed system via the `core` export of the package:\n\n```html\n<!-- some-file.html -->\n<game-2048 id=\"game\"></game-2048>\n```\n\n```typescript\n// some-file.ts\nimport '2048-webcomponent/custom-element';\nimport { FieldInteractionEvent, FieldInteractionType } from '2048-webcomponent/core';\nimport type { Game } from '2048-webcomponent/core';\n\nconst game = document.querySelector('#game') as Game;\ngame.addEventListener('2048:field-interaction', (event: FieldInteractionEvent) => {\n  const { interaction } = event.detail;\n  switch (interaction.type) {\n    case FieldInteractionType.Unveiled:\n      console.log('Revealed field value:', interaction.value);\n      break;\n    case FieldInteractionType.FlagAction:\n    case FieldInteractionType.QuestionMarkAction:\n      console.log('Performed action:', interaction.action);\n      break;\n  }\n});\n```\n\n## Engine\n\nThe engine can be used as a standalone library (`commonjs` and `esm`) via the `engine` export of the package. This enables the usage of the engine in every application (server- or client-side).\n\n```javascript\nimport { Direction } from '2048-webcomponent/core';\nimport { Engine } from '2048-webcomponent/engine';\n\nconst engine = new Engine();\n\nengine.createBoard(3, 3);\n\nengine.move(Direction.Up);\n\nif (engine.isGameOver) {\n  // Restarts the game with the initial configuration\n  engine.restart();\n}\n```\n\n```javascript\nconst { Engine } = require('2048-webcomponent/engine');\n\nconst engine = new Engine();\n\n// ...\n```\n\n## License\n\n[MIT License](./LICENSE)\n","readmeFilename":"README.md","keywords":["2048","javascript","webcomponent","custom-element"],"author":{"name":"Manuel Henke","email":"contact@henkebyte.com","url":"https://henkebyte.com/"},"license":"MIT"}