Back to packageRELEASE DETAILS

1.0.0

npm

2048-webcomponent

2048 as a WebComponent.

Published19 Jan 2024

Direct dependencies51

Transitive dependenciesNot calculated

README

Current package documentation

2048-webcomponent

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.

npm i 2048-webcomponent

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	`positions`: `Positions` current game state
`2048:game-lost`	`GameLostEvent`	:x:	User just lost the game	`positions`: `Positions` current game state
`2048:move`	`MoveEvent`	:white_check_mark:	User made a move	`positions`: `Positions` current game state `direction`: `Direction` direction of the move
`2048:score`	`ScoreEvent`	:x:	Score has been updated	`positions`: `Positions` current game state `oldScore`: `number \| undefined` old score `delta`: `number \| undefined` difference between old and new score `newScore`: `number` current score

Usage

Basic usage

Just a basic 9x9 / 10 Mines 2048 game. Further examples can be combined.

<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

<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.

<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.

<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.

<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.

<game-2048 rows="5" columns="5"></game-2048>

<script type="module">
  import '2048-webcomponent';
</script>

Example

Try it out at CodePen.

Example Image

TypeScript

The whole package is written in TypeScript and therefore provides a strongly typed system via the core export of the package:

<!-- some-file.html -->
<game-2048 id="game"></game-2048>

// 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).

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();
}

const { Engine } = require('2048-webcomponent/engine');

const engine = new Engine();

// ...

License

MIT License

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 51

Native requirements

51 direct targetsNot calculated transitive count

Package / target	Requirement	Relationship
lit Environment { "local_name": "lit", "alias": false, "peer_metadata": null }	`^2.2.0`	runtime
@commitlint/cli Environment { "local_name": "@commitlint/cli", "alias": false, "peer_metadata": null }	`^17.0.3`	development
@commitlint/config-conventional Environment { "local_name": "@commitlint/config-conventional", "alias": false, "peer_metadata": null }	`^17.0.3`	development
@custom-elements-manifest/analyzer Environment { "local_name": "@custom-elements-manifest/analyzer", "alias": false, "peer_metadata": null }	`^0.6.3`	development
@open-wc/eslint-config Environment { "local_name": "@open-wc/eslint-config", "alias": false, "peer_metadata": null }	`^8.0.2`	development
@open-wc/testing Environment { "local_name": "@open-wc/testing", "alias": false, "peer_metadata": null }	`^3.0.4`	development
@types/node Environment { "local_name": "@types/node", "alias": false, "peer_metadata": null }	`^20.1.1`	development
@typescript-eslint/eslint-plugin Environment { "local_name": "@typescript-eslint/eslint-plugin", "alias": false, "peer_metadata": null }	`^5.38.0`	development
@typescript-eslint/parser Environment { "local_name": "@typescript-eslint/parser", "alias": false, "peer_metadata": null }	`^5.38.0`	development
@web/dev-server Environment { "local_name": "@web/dev-server", "alias": false, "peer_metadata": null }	`^0.4.1`	development
@web/dev-server-import-maps Environment { "local_name": "@web/dev-server-import-maps", "alias": false, "peer_metadata": null }	`^0.1.1`	development
@web/test-runner Environment { "local_name": "@web/test-runner", "alias": false, "peer_metadata": null }	`^0.15.0`	development
autoprefixer Environment { "local_name": "autoprefixer", "alias": false, "peer_metadata": null }	`^10.4.2`	development
concurrently Environment { "local_name": "concurrently", "alias": false, "peer_metadata": null }	`^8.2.0`	development
css-loader Environment { "local_name": "css-loader", "alias": false, "peer_metadata": null }	`^6.5.1`	development
eslint Environment { "local_name": "eslint", "alias": false, "peer_metadata": null }	`^8.9.0`	development
eslint-config-airbnb-babel Environment { "local_name": "eslint-config-airbnb-babel", "alias": false, "peer_metadata": null }	`^0.2.2`	development
eslint-config-airbnb-base Environment { "local_name": "eslint-config-airbnb-base", "alias": false, "peer_metadata": null }	`^15.0.0`	development
eslint-config-airbnb-typescript Environment { "local_name": "eslint-config-airbnb-typescript", "alias": false, "peer_metadata": null }	`^17.0.0`	development
eslint-config-prettier Environment { "local_name": "eslint-config-prettier", "alias": false, "peer_metadata": null }	`^8.4.0`	development
eslint-import-resolver-alias Environment { "local_name": "eslint-import-resolver-alias", "alias": false, "peer_metadata": null }	`^1.1.2`	development
eslint-plugin-babel Environment { "local_name": "eslint-plugin-babel", "alias": false, "peer_metadata": null }	`^5.3.1`	development
eslint-plugin-html Environment { "local_name": "eslint-plugin-html", "alias": false, "peer_metadata": null }	`^6.0.0`	development
eslint-plugin-import Environment { "local_name": "eslint-plugin-import", "alias": false, "peer_metadata": null }	`^2.26.0`	development
eslint-plugin-lit Environment { "local_name": "eslint-plugin-lit", "alias": false, "peer_metadata": null }	`^1.3.0`	development
eslint-plugin-lit-a11y Environment { "local_name": "eslint-plugin-lit-a11y", "alias": false, "peer_metadata": null }	`^2.2.2`	development
eslint-plugin-no-only-tests Environment { "local_name": "eslint-plugin-no-only-tests", "alias": false, "peer_metadata": null }	`^2.4.0`	development
eslint-plugin-no-secrets Environment { "local_name": "eslint-plugin-no-secrets", "alias": false, "peer_metadata": null }	`^0.8.9`	development
eslint-plugin-prettier Environment { "local_name": "eslint-plugin-prettier", "alias": false, "peer_metadata": null }	`^4.2.1`	development
eslint-plugin-sonarjs Environment { "local_name": "eslint-plugin-sonarjs", "alias": false, "peer_metadata": null }	`^0.18.0`	development
eslint-plugin-unicorn Environment { "local_name": "eslint-plugin-unicorn", "alias": false, "peer_metadata": null }	`^47.0.0`	development
eslint-plugin-wc Environment { "local_name": "eslint-plugin-wc", "alias": false, "peer_metadata": null }	`^1.3.2`	development
husky Environment { "local_name": "husky", "alias": false, "peer_metadata": null }	`^8.0.1`	development
postcss Environment { "local_name": "postcss", "alias": false, "peer_metadata": null }	`^8.4.4`	development
postcss-html Environment { "local_name": "postcss-html", "alias": false, "peer_metadata": null }	`^1.5.0`	development
postcss-loader Environment { "local_name": "postcss-loader", "alias": false, "peer_metadata": null }	`^7.0.1`	development
prettier Environment { "local_name": "prettier", "alias": false, "peer_metadata": null }	`^2.5.1`	development
sass Environment { "local_name": "sass", "alias": false, "peer_metadata": null }	`^1.49.8`	development
sass-loader Environment { "local_name": "sass-loader", "alias": false, "peer_metadata": null }	`^13.0.2`	development
stylelint Environment { "local_name": "stylelint", "alias": false, "peer_metadata": null }	`^14.5.3`	development
stylelint-config-prettier-scss Environment { "local_name": "stylelint-config-prettier-scss", "alias": false, "peer_metadata": null }	`^0.0.1`	development
stylelint-config-standard-scss Environment { "local_name": "stylelint-config-standard-scss", "alias": false, "peer_metadata": null }	`^6.0.0`	development
svg-inline-loader Environment { "local_name": "svg-inline-loader", "alias": false, "peer_metadata": null }	`^0.8.2`	development
terser-webpack-plugin Environment { "local_name": "terser-webpack-plugin", "alias": false, "peer_metadata": null }	`^5.3.6`	development
ts-loader Environment { "local_name": "ts-loader", "alias": false, "peer_metadata": null }	`^9.4.1`	development
tsc-alias Environment { "local_name": "tsc-alias", "alias": false, "peer_metadata": null }	`^1.7.0`	development
tsconfig-paths-webpack-plugin Environment { "local_name": "tsconfig-paths-webpack-plugin", "alias": false, "peer_metadata": null }	`^4.0.0`	development
tslib Environment { "local_name": "tslib", "alias": false, "peer_metadata": null }	`^2.3.1`	development
typescript Environment { "local_name": "typescript", "alias": false, "peer_metadata": null }	`^5.1.6`	development
webpack Environment { "local_name": "webpack", "alias": false, "peer_metadata": null }	`^5.74.0`	development
webpack-cli Environment { "local_name": "webpack-cli", "alias": false, "peer_metadata": null }	`^5.0.1`	development

Distribution files

1 collected

Distribution 1

Source distribution

Source file

Checksums from source

{
  "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"
    }
  ]
}