2048-webcomponent - npm Package Compare versions

Comparing version 0.0.1-security to 1.0.0

package.json

 {
   "name": "2048-webcomponent",
-  "version": "0.0.1-security",
-  "description": "security holding package",
-  "repository": "npm/security-holder"
+  "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": "[e-mail]",
+    "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"
+    }
+  },
+  "files": [
+    "index.js",
+    "custom-element.js",
+    "custom-element.min.js",
+    "game-2048.js",
+    "game-2048.min.js",
+    "core.js",
+    "engine.js",
+    "lib-esm/src/",
+    "lib-cjs/src/"
+  ],
+  "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"
 }

README.md

@@ -1,5 +0,212 @@
-# Security holding package
+# 2048-webcomponent
 
-This package name is not currently in use, but was formerly occupied by another package. To avoid malicious use, npm is hanging on to the package name, but loosely, and we'll probably give it to you if you want it.
+[![CI](https://github.com/manuelhenke/2048-webcomponent/actions/workflows/ci.yml/badge.svg)](https://github.com/manuelhenke/2048-webcomponent/actions/workflows/ci.yml)
+[![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)
+[![License](https://img.shields.io/github/license/manuelhenke/2048-webcomponent)](./LICENSE)
+[![NPM version](https://img.shields.io/npm/v/2048-webcomponent.svg?style=flat)](https://www.npmjs.com/package/2048-webcomponent)
 
-You may adopt this package by contacting npm Support at https://www.npmjs.com/support and requesting the name.
+This 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.
+
+## Getting Started
+
+Install the package via `npm` or `yarn` and deliver the script to the user.
+This can be done via `import`, `require` or just inserting a `script` tag.
+
+```shell
+npm i 2048-webcomponent
+```
+
+```shell
+yarn add 2048-webcomponent
+```
+
+## Attributes
+
+| Param                      | Type     | Description                                                                      | Default |
+| -------------------------- | -------- | -------------------------------------------------------------------------------- | ------- |
+| `columns`                  | `number` | Amount of columns of the board.                                                  | `4`     |
+| `rows`                     | `number` | Amount of rows of the board.                                                     | `4`     |
+| `swipe-distance-threshold` | `number` | Amount of pixels required to trigger a swipe.                                    | `50`    |
+| `restart-selector`         | `string` | If present, attaches a click event listener to the element to trigger a restart. |         |
+
+## Events
+
+By default, each event contains the current game state in `event.detail.game`. To discourage cheating, no events should be logged in the browser console.
+| Name | Type | Cancelable | Description | `detail` |
+| ---------------- | --------------- | ------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------------ |
+| `2048:game-won` | `GameWonEvent` | :x: | User just won the game | <ul><li>`board`: `Board` current game state</li></ul> |
+| `2048:game-lost` | `GameLostEvent` | :x: | User just lost the game | <ul><li>`board`: `Board` current game state</li></ul> |
+| `2048:move` | `MoveEvent` | :white_check_mark: | User made a move | <ul><li>`board`: `Board` current game state</li><li>`direction`: `Direction` direction of the move</li></ul> |
+
+## Usage
+
+### Basic usage
+
+Just a basic 9x9 / 10 Mines 2048 game. Further examples can be **combined**.
+
+```html
+<game-2048></game-2048>
+
+<script type="module">
+  import '2048-webcomponent';
+  // Alternatives:
+  // import '2048-webcomponent/custom-element';
+  // import '2048-webcomponent/custom-element.min';
+</script>
+```
+
+### Custom tag name
+
+Define your own custom tag name
+
+```html
+<custom-game-2048></custom-game-2048>
+
+<script type="module">
+  import { Game } from '2048-webcomponent/game-2048';
+  // Alternative:
+  // import { Game } from '2048-webcomponent/game-2048.min';
+  window.customElements.define('custom-game-2048', Game);
+</script>
+```
+
+### Provide a restart button
+
+Provide a selector where a "click"-event will be attached to, to restart the game.
+
+```html
+<game-2048 restart-selector="#restart-game-button"></game-2048>
+<button id="restart-game-button">Restart!</button>
+
+<script type="module">
+  import '2048-webcomponent';
+</script>
+```
+
+### Trigger Restart via JavaScript
+
+Write custom logic to restart the game.
+
+```html
+<game-2048 id="game"></game-2048>
+<button id="restart-game-button-confirm">Restart with Confirm!</button>
+
+<script type="module">
+  import '2048-webcomponent';
+
+  window.addEventListener('DOMContentLoaded', () => {
+    const game = document.querySelector('#game');
+
+    document.querySelector('#restart-game-button-confirm').addEventListener('click', (event) => {
+      event.preventDefault();
+      if (window.confirm('Are you sure, that you want to restart the game?')) {
+        game.restartGame();
+      }
+    });
+  });
+</script>
+```
+
+### Custom win/lose event listener
+
+Attach an EventListener for the win/lose events.
+
+```html
+<game-2048 id="game"></game-2048>
+
+<script type="module">
+  import '2048-webcomponent';
+
+  window.addEventListener('DOMContentLoaded', () => {
+    const game = document.querySelector('#game');
+
+    game.addEventListener('game-won', () => {
+      console.log('win');
+    });
+
+    game.addEventListener('game-lost', () => {
+      console.log('lose');
+    });
+  });
+</script>
+```
+
+### Different initial game configurations
+
+Of course you can provide different configurations for the game.
+
+```html
+<game-2048 rows="5" columns="5"></game-2048>
+
+<script type="module">
+  import '2048-webcomponent';
+</script>
+```
+
+## Example
+
+Try it out at [CodePen](https://codepen.io/manuelhenke/pen/ExoPKLZ).
+
+![Example Image](2048-example.png)
+
+## TypeScript
+
+The whole package is written in TypeScript and therefore provides a strongly typed system via the `core` export of the package:
+
+```html
+<!-- some-file.html -->
+<game-2048 id="game"></game-2048>
+```
+
+```typescript
+// some-file.ts
+import '2048-webcomponent/custom-element';
+import { FieldInteractionEvent, FieldInteractionType } from '2048-webcomponent/core';
+import type { Game } from '2048-webcomponent/core';
+
+const game = document.querySelector('#game') as Game;
+game.addEventListener('2048:field-interaction', (event: FieldInteractionEvent) => {
+  const { interaction } = event.detail;
+  switch (interaction.type) {
+    case FieldInteractionType.Unveiled:
+      console.log('Revealed field value:', interaction.value);
+      break;
+    case FieldInteractionType.FlagAction:
+    case FieldInteractionType.QuestionMarkAction:
+      console.log('Performed action:', interaction.action);
+      break;
+  }
+});
+```
+
+## Engine
+
+The 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).
+
+```javascript
+import { Direction } from '2048-webcomponent/core';
+import { Engine } from '2048-webcomponent/engine';
+
+const engine = new Engine();
+
+engine.createBoard(3, 3);
+
+engine.move(Direction.Up);
+
+if (engine.isGameOver) {
+  // Restarts the game with the initial configuration
+  engine.restart();
+}
+```
+
+```javascript
+const { Engine } = require('2048-webcomponent/engine');
+
+const engine = new Engine();
+
+// ...
+```
+
+## License
+
+[MIT License](./LICENSE)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Known malware

Supply chain risk

This package is malware. We have asked the package registry to remove it.

Found 1 instance in 1 package

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

218059

increased by43165.67%

Number of package files

108

increased by5300%

Number of low license alerts

0

decreased by-100%

Lines of code

2567

increased byInfinity%

Number of low maintenance alerts

0

decreased by-100%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

213

increased by3450%

Number of critical supply chain risk alerts

0

decreased by-100%

Number of low supply chain risk alerts

0

decreased by-100%

Is type module

Yes

Worsened metrics

Dependency count

1

increased byInfinity%

Dev dependency count

50

increased byInfinity%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedlit@^2.2.0

• + Added@lit-labs/ssr-dom-shim@1.2.1(transitive)

• + Added@lit/reactive-element@1.6.3(transitive)

• + Added@types/trusted-types@2.0.7(transitive)

• + Addedlit@2.8.0(transitive)

• + Addedlit-element@3.3.3(transitive)

• + Addedlit-html@2.8.0(transitive)