@robotlegsjs/pixi-palidor
Version:
A RobotlegsJS View Manager Extension for PixiJS
115 lines • 12.8 kB
JSON
{
"name": "@robotlegsjs/pixi-palidor",
"version": "4.0.0",
"description": "A RobotlegsJS View Manager Extension for PixiJS",
"main": "lib/index.js",
"typings": "lib/index.d.ts",
"repository": {
"url": "https://github.com/RobotlegsJS/RobotlegsJS-Framework/tree/master/packages/pixi-palidor"
},
"publishConfig": {
"registry": "https://registry.npmjs.org"
},
"keywords": [
"TypeScript",
"Robotlegs",
"Pixi",
"Palidor"
],
"author": "RobotlegsJS",
"contributors": [
"Ronaldo Santiago <ronaldo.setzer@gmail.com>",
"Tiago Schenkel <tiago.schenkel@gmail.com>"
],
"license": "MIT",
"bugs": {
"url": "https://github.com/RobotlegsJS/RobotlegsJS-Framework/issues"
},
"homepage": "https://github.com/RobotlegsJS/RobotlegsJS-Framework/tree/master/packages/pixi-palidor#readme",
"files": [
"lib"
],
"directories": {
"lib": "./lib"
},
"dependencies": {
"@robotlegsjs/core": "^3.1.0",
"@robotlegsjs/eventemitter3": "^3.1.0",
"@robotlegsjs/pixi": "^4.0.0",
"tslib": "^2.3.0"
},
"peerDependencies": {
"pixi.js": "^6.0.0",
"reflect-metadata": "^0.1.13"
},
"devDependencies": {
"@jsdevtools/coverage-istanbul-loader": "^3.0.5",
"@rushstack/eslint-config": "^2.3.4",
"@types/bluebird": "^3.5.36",
"@types/chai": "^4.2.21",
"@types/mocha": "^8.2.3",
"@types/sinon": "^10.0.2",
"@types/webpack-env": "^1.16.2",
"bluebird": "^3.7.2",
"chai": "^4.3.4",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^9.0.1",
"es6-map": "^0.1.5",
"es6-symbol": "^3.1.3",
"eslint": "^7.30.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsdoc": "^35.4.3",
"eslint-plugin-prefer-arrow": "^1.2.3",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-unicorn": "^34.0.1",
"html-webpack-plugin": "^5.3.2",
"karma": "^6.3.4",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-mocha": "^2.0.1",
"karma-mocha-reporter": "^2.2.5",
"karma-sinon-chai": "^2.0.2",
"karma-sourcemap-loader": "^0.3.8",
"karma-sourcemap-writer": "^0.1.2",
"karma-webpack": "^5.0.0",
"mocha": "^9.0.2",
"pixi.js": "^6.3.2",
"prettier": "^2.6.2",
"puppeteer": "^10.1.0",
"reflect-metadata": "^0.1.13",
"rimraf": "^3.0.2",
"sinon": "^11.1.1",
"sinon-chai": "^3.7.0",
"terser-webpack-plugin": "^5.1.4",
"ts-loader": "^9.2.3",
"ts-node": "^10.1.0",
"typescript": "~4.2.4",
"webpack": "^5.44.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"start": "webpack serve --config ./webpack.example.config.js",
"test": "./node_modules/.bin/karma start --single-run",
"test:tdd": "./node_modules/.bin/karma start",
"autoformat": "prettier --config ../../.prettierrc --ignore-path ../../.prettierignore --write --list-different .",
"lint-fix:src": "eslint -c .eslintrc.js --ext .ts ./src --fix",
"lint-fix:test": "eslint -c .eslintrc.js --ext .ts ./test --fix",
"lint-fix:example": "eslint -c .eslintrc.js --ext .ts ./example --fix",
"lint-fix": "npm run lint-fix:src && npm run lint-fix:test && npm run lint-fix:example",
"lint:src": "eslint -c .eslintrc.js --ext .ts ./src",
"lint:test": "eslint -c .eslintrc.js --ext .ts ./test",
"lint:example": "eslint -c .eslintrc.js --ext .ts ./example",
"lint": "npm run lint:src && npm run lint:test && npm run lint:example",
"cleanup": "rimraf .nyc_output && rimraf coverage && rimraf lib && rimraf lib-test && rimraf lib-example && rimraf dist && rimraf dist-test",
"compile:src": "tsc",
"compile:test": "tsc -p tsconfig.test.json",
"compile:example": "tsc -p tsconfig.example.json",
"dist:dev": "webpack",
"dist:production": "webpack --env production",
"build:example": "webpack --config ./webpack.example.config.js --env.production",
"deploy:example": "./deploy-example.sh",
"build": "npm run cleanup && npm run compile:src"
},
"readme": "# RobotlegsJS Pixi Palidor Extension\n\n[](https://github.com/RobotlegsJS/RobotlegsJS-Framework/tree/master/packages/pixi-palidor/LICENSE)\n[](https://gitter.im/RobotlegsJS/RobotlegsJS)\n[](https://badge.fury.io/js/%40robotlegsjs%2Fpixi-palidor)\n[](https://github.com/prettier/prettier)\n\nPalidor is an extension of RobotlegsJS for Pixi, designed to help the management of the Main Container, taking the responsibility to add, remove and switch the views. Perfect for game development.\n\n## Installation\n\n### Get `@robotlegsjs/pixi-palidor`\n\nYou can get the latest release and the type definitions using [NPM](https://www.npmjs.com/):\n\n```bash\nnpm install @robotlegsjs/pixi-palidor --save\n```\n\nOr using [Yarn](https://yarnpkg.com/en/):\n\n```bash\nyarn add @robotlegsjs/pixi-palidor\n```\n\nFrom version `0.2.0` of this package, the [PixiJS](https://github.com/pixijs/pixi.js) dependencies were moved to **peerDependencies**,\nallowing the final user to choose the desired version of the `pixi.js` library on each project.\n\n#### For `pixi.js` version 6\n\nThe `@robotlegsjs/pixi-palidor` package version `^4.0.0` is compatible with versions `>=6.0.0 <7` version range of `pixi.js` library.\n\nYou can setup your project for version 6 of `pixi.js` using:\n\n```bash\nnpm install @robotlegsjs/pixi-palidor@^4.0.0 pixi.js@^6.0.0 --save\n```\n\nor\n\n```bash\nyarn add @robotlegsjs/pixi-palidor@^4.0.0 pixi.js@^6.0.0\n```\n\n#### For `pixi.js` version 5\n\nThe `@robotlegsjs/pixi-palidor` package versions `^2.0.0` and `^3.0.0` are compatible with versions between the `>=5.0.0 <6` version range of `pixi.js` library.\n\nSince version `5.0.0` of `pixi.js`, the `eventemitter3` library was removed and is not necessary anymore.\n\nYou can setup your project for version 5 of `pixi.js` using:\n\n```bash\nnpm install @robotlegsjs/pixi-palidor@^3.0.0 pixi.js@^5.0.0 reflect-metadata --save\n```\n\nor\n\n```bash\nyarn add @robotlegsjs/pixi-palidor@^3.0.0 pixi.js@^5.0.0 reflect-metadata\n```\n\n#### For `pixi.js` version 4\n\nThe `@robotlegsjs/pixi-palidor` package version `^1.0.0` is compatible with versions between the `>=4.2.1 <5` version range of `pixi.js` library.\n\nSince each version of `pixi.js` library defines which version of `eventemitter3` library is being used, remember to also install the proper version of `eventemitter3` in your project.\n\nAs example, when you would like to use the version `4.2.1` of `pixi.js` library, you can run:\n\n```bash\nnpm install @robotlegsjs/pixi-palidor@^1.0.0 pixi.js@4.2.1 eventemitter3@^2.0.0 reflect-metadata --save\n```\n\nor\n\n```bash\nyarn add @robotlegsjs/pixi-palidor@^1.0.0 pixi.js@4.2.1 eventemitter3@^2.0.0 reflect-metadata\n```\n\nThen follow the [installation instructions](https://github.com/RobotlegsJS/RobotlegsJS-Framework/tree/master/packages/core#installation) of **RobotlegsJS** library to complete the setup of your project.\n\n**Dependencies**\n\n+ [RobotlegsJS](https://github.com/RobotlegsJS/RobotlegsJS-Framework/tree/master/packages/core)\n+ [RobotlegsJS-EventEmitter3](https://github.com/RobotlegsJS/RobotlegsJS-Framework/tree/master/packages/eventemitter3)\n+ [RobotlegsJS-Pixi](https://github.com/RobotlegsJS/RobotlegsJS-Framework/tree/master/packages/pixi)\n+ [tslib](https://github.com/Microsoft/tslib)\n\n**Peer Dependencies**\n\n+ [PixiJS](https://github.com/pixijs/pixi.js)\n+ [reflect-metadata](https://github.com/rbuckton/reflect-metadata)\n\n## Usage\n\nPalidor was designed to be simple and, practical. You just need to follow three steps to start to use.\n\n### Step 1 - Install/Configure\n\nFirstly, you need to instantiate your RobotlegsJS's context, and then install and configure the PalidorPixiExtension:\n\n```typescript\nlet stage = new Container();\nlet context = new Context()\n .install(MVCSBundle)\n .install(PixiBundle)\n .install(PalidorPixiExtension)\n .configure(new ContextView(this.stage))\n .configure(MyPalidorConfig)\n .initialize();\n```\n\n+ **MVCSBundle:** Installs a number of extensions and configurations for developers who are comfortable with the typical [RobotlegsJS](https://github.com/RobotlegsJS/RobotlegsJS-Framework/tree/master/packages/core) setup.\n+ **PixiBundle:** Installs a view / mediator layer provided by [RobotlegsJS-Pixi](https://github.com/RobotlegsJS/RobotlegsJS-Framework/tree/master/packages/pixi).\n+ **PalidorPixiExtension:** It is the extension itself.\n+ **MyPalidorConfig:** The Class that implements the Robotlegs's IConfig and will be responsible for map all your Views and FloatingViews.\n\n### Step 2 - Mapping the Views/FloatingViews\n\nIn the Second step, you must map all views that you need. Palidor works with two types of views (FloatingViews and Views) and the main difference between them is the way that Palidor will add it on the Stage.\n\nPalidor splits the Main Container into two distinct Layers, one to each type of View. The FloatingView always will be in a layer above the others Views.\n\n<img src=\"https://raw.githubusercontent.com/RobotlegsJS/RobotlegsJS-Framework/master/packages/pixi-palidor/media/layers.png\" />\n\n+ **View:** A View is a screen added into the Static Layer which is behind all FloatingViews. Palidor allows only one View per time and will remove the current view before to add a new View.\n\n+ **FloatingView:** A FloatingView is a screen added into the Dynamic Layer and always will be above the view and also others FloatingViews. Palidor allows any number of FloatingView that you want. FloatingViews is the best choice to create temporary views such as AlertsScreen, PauseScreen, GameOverScreen and Popups.\n\nThe FlowManager will be the responsible to tells to Palidor each event mapped to each View.\n\n```typescript\nimport { IFlowManager } from \"@robotlegsjs/pixi-palidor\";\nimport { IConfig, injectable, inject } from \"@robotlegsjs/core\";\n\n@injectable()\nexport class MyPalidorConfig implements IConfig {\n @inject(IFlowManager)\n public flowManager: IFlowManager;\n\n public configure(): void {\n this.flowManager.map( CustomEvent.SHOW_FIRST_VIEW ).toView( FirstView );\n this.flowManager.map( CustomEvent.SHOW_FIRST_FLOATING_VIEW ).toFloatingView( FirstFloatingView );\n }\n}\n```\n\n### Step 3 - Adding a View\n\nThe last part it is the way that Palidor will add the views on the stage, you just need to dispatch an event using the IEventDispatcher which is available for Injection like any other Robotlegs Command.\n\n```typescript\nthis.eventDispatcher.dispatchEvent(new CustomEvent(CustomEvent.SHOW_FIRST_VIEW));\n```\n\n#### Events\n\nThere are some predefined events on the Palidor to help to remove a view or floating view from the stage.\n\n+ PalidorEvent.REMOVE_CURRENT_VIEW:\n+ PalidorEvent.REMOVE_ALL_FLOATING_VIEWS:\n+ PalidorEvent.REMOVE_LAST_FLOATING_VIEW_ADDED:\n\n## Running the example\n\nRun the following commands to run the example:\n\n```bash\nnpm start\n```\n\nor:\n\n```bash\nyarn start\n```\n\n[See full example here](example/index.ts)\n\n## Examples\n\n+ [Game - Battleship](https://github.com/RobotlegsJS/RobotlegsJS-Framework/tree/master/games/battleship)\n+ [Game - Match3](https://github.com/RobotlegsJS/RobotlegsJS-Framework/tree/master/games/match3)\n+ [Game - Minesweeper](https://github.com/RobotlegsJS/RobotlegsJS-Framework/tree/master/games/minesweeper)\n+ [Game - Scratchcard](https://github.com/RobotlegsJS/RobotlegsJS-Framework/tree/master/games/scratchcard)\n+ [Game - Space Invaders](https://github.com/RobotlegsJS/RobotlegsJS-Framework/tree/master/games/space-invaders)\n+ [Game - Tetris](https://github.com/RobotlegsJS/RobotlegsJS-Framework/tree/master/games/tetris)\n\n## RobotlegsJS Pixi Palidor for enterprise\n\nAvailable as part of the Tidelift Subscription\n\nThe maintainers of [@robotlegsjs/pixi-palidor](https://github.com/RobotlegsJS/RobotlegsJS-Framework/tree/master/packages/pixi-palidor) and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. [Learn more.](https://tidelift.com/subscription/pkg/npm-robotlegsjs-pixi-palidor?utm_source=npm-robotlegsjs-pixi-palidor&utm_medium=referral&utm_campaign=enterprise&utm_term=repo)\n\n## License\n\n[MIT](LICENSE)\n"
}