@crispcode/shimmer 5.0.0

package/.esdoc.json

@@ -0,0 +1,21 @@
+{
+  "source": "./scripts",
+  "destination": "./docs",
+  "plugins": [
+    {
+      "name": "esdoc-standard-plugin",
+      "option": {
+        "coverage": { "enable": true },
+        "accessor": { "access": [ "public", "protected", "package" ], "autoPrivate": true },
+        "manual": {
+          "index": "./README.md",
+          "globalIndex": true,
+          "files": [
+            "./manual/basic-usage.md",
+            "./manual/advanced-usage.md"
+          ]
+        }
+      }
+    }
+  ]
+}

package/.eslintrc

@@ -0,0 +1,143 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 8,
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+
+  "env": {
+    "es6": true,
+    "node": true
+  },
+
+  "globals": {
+  },
+
+  "rules": {
+    "accessor-pairs": 2,
+    "array-bracket-spacing": [2, "always"],
+    "arrow-spacing": [2, { "before": true, "after": true }],
+    "block-spacing": [2, "always"],
+    "brace-style": [2, "1tbs", { "allowSingleLine": true }],
+    "camelcase": [2, { "properties": "never" }],
+    "comma-dangle": [2, "never"],
+    "comma-spacing": [2, { "before": false, "after": true }],
+    "comma-style": [2, "last"],
+    "constructor-super": 2,
+    "curly": [2, "multi-line"],
+    "dot-location": [2, "property"],
+    "eol-last": 2,
+    "eqeqeq": [2, "allow-null"],
+    "func-call-spacing": [2, "never"],
+    "handle-callback-err": [2, "^(err|error)$" ],
+    "indent": [2, 2, { "SwitchCase": 1 }],
+    "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+    "keyword-spacing": [2, { "before": true, "after": true }],
+    "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
+    "new-parens": 2,
+    "no-array-constructor": 2,
+    "no-caller": 2,
+    "no-class-assign": 2,
+    "no-cond-assign": 2,
+    "no-const-assign": 2,
+    "no-constant-condition": [2, { "checkLoops": false }],
+    "no-control-regex": 2,
+    "no-debugger": 2,
+    "no-delete-var": 2,
+    "no-dupe-args": 2,
+    "no-dupe-class-members": 2,
+    "no-dupe-keys": 2,
+    "no-duplicate-case": 2,
+    "no-duplicate-imports": 2,
+    "no-empty-character-class": 2,
+    "no-empty-pattern": 2,
+    "no-eval": 0,
+    "no-ex-assign": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-extra-boolean-cast": 2,
+    "no-extra-parens": [2, "functions"],
+    "no-fallthrough": 2,
+    "no-floating-decimal": 2,
+    "no-func-assign": 2,
+    "no-global-assign": 2,
+    "no-implied-eval": 2,
+    "no-inner-declarations": [2, "functions"],
+    "no-invalid-regexp": 2,
+    "no-irregular-whitespace": 2,
+    "no-iterator": 2,
+    "no-label-var": 2,
+    "no-labels": [2, { "allowLoop": false, "allowSwitch": false }],
+    "no-lone-blocks": 2,
+    "no-mixed-spaces-and-tabs": 2,
+    "no-multi-spaces": 2,
+    "no-multi-str": 0,
+    "no-multiple-empty-lines": [2, { "max": 1 }],
+    "no-native-reassign": 2,
+    "no-negated-in-lhs": 2,
+    "no-new": 2,
+    "no-new-func": 2,
+    "no-new-object": 2,
+    "no-new-require": 2,
+    "no-new-symbol": 2,
+    "no-new-wrappers": 2,
+    "no-obj-calls": 2,
+    "no-octal": 2,
+    "no-octal-escape": 2,
+    "no-proto": 2,
+    "no-redeclare": 2,
+    "no-regex-spaces": 2,
+    "no-return-assign": [2, "except-parens"],
+    "no-self-assign": 2,
+    "no-self-compare": 2,
+    "no-sequences": 2,
+    "no-shadow-restricted-names": 2,
+    "no-sparse-arrays": 2,
+    "no-tabs": 2,
+    "no-template-curly-in-string": 2,
+    "no-this-before-super": 2,
+    "no-throw-literal": 2,
+    "no-trailing-spaces": 2,
+    "no-undef": 2,
+    "no-undef-init": 2,
+    "no-unexpected-multiline": 2,
+    "no-unmodified-loop-condition": 2,
+    "no-unneeded-ternary": [2, { "defaultAssignment": false }],
+    "no-unreachable": 2,
+    "no-unsafe-finally": 2,
+    "no-unsafe-negation": 2,
+    "no-unused-vars": [1, { "vars": "all", "args": "after-used" }],
+    "no-useless-call": 2,
+    "no-useless-computed-key": 2,
+    "no-useless-constructor": 2,
+    "no-useless-escape": 2,
+    "no-useless-rename": 2,
+    "no-whitespace-before-property": 2,
+    "no-with": 2,
+    "object-property-newline": [2, { "allowMultiplePropertiesPerLine": true }],
+    "object-curly-spacing": [2, "always"],
+    "one-var": [2, { "initialized": "never" }],
+    "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }],
+    "padded-blocks": [2, "never"],
+    "quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
+    "rest-spread-spacing": [2, "never"],
+    "semi": [2, "never"],
+    "semi-spacing": [2, { "before": false, "after": true }],
+    "space-before-blocks": [2, "always"],
+    "space-before-function-paren": [2, "always"],
+    "space-in-parens": [2, "always"],
+    "space-infix-ops": 2,
+    "space-unary-ops": [2, { "words": true, "nonwords": false }],
+    "spaced-comment": [2, "always", { "line": { "markers": ["*package", "!", ","] }, "block": { "balanced": true, "markers": ["*package", "!", ","], "exceptions": ["*"] } }],
+    "template-curly-spacing": [2, "never"],
+    "unicode-bom": [2, "never"],
+    "use-isnan": 2,
+    "valid-typeof": 2,
+    "wrap-iife": [2, "any"],
+    "yield-star-spacing": [2, "both"],
+    "yoda": [2, "never"]
+  }
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 CrispCode
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+# shimmer
+A PIXI.JS wrapper plugin for MODUX
+
+## Installation
+
+```
+npm install @CrispCode/shimmer
+```
+
+## Documentation & Testing
+
+Clone the shimmer repository to your machine and use the following commands:
+
+To generate a documentation use `npm run docs`
+If you want to check functionality you can use `npm run test` 
+
+## Polyfill
+
+In order to support older versions of browsers, you can use [polyfill.io](https://polyfill.io)
+
+## Shimmer classes
+
+  |Name|Usage|Description|
+  |:---:|---|---|
+  | Button | `import { Button } from 'shimmer'` | The Button class is an extension of the standard Element class |
+  | Element | `import { Element } from 'shimmer'` | The base class for all Shimmer objects |
+  | Shimmer | `import { Shimmer } from 'shimmer'` | The Shimmer component class, check Modux/Component for more information |
+  | Tween | `import { Tween } from 'shimmer'` | A class used to create animation tweens in Element or Shimmer |
+  | Sprite | `import { Sprite } from 'shimmer'` | PIXI.JS Sprite class |
+  | AnimatedSprite | `import { AnimatedSprite } from 'shimmer'` | PIXI.JS AnimatedSprite class |
+  | Text | `import { Text } from 'shimmer'` | PIXI.JS Text class |
+  | Graphics | `import { Graphics } from 'shimmer'` | PIXI.JS Graphics class |
+  | Texture | `import { Texture } from 'shimmer'` | PIXI.JS Texture class |
+  | BaseTexture | `import { BaseTexture } from 'shimmer'` | PIXI.JS BaseTexture class |
+  

package/manual/advanced-usage.md

@@ -0,0 +1,180 @@
+# Advanced usage
+
+## buttonMain.js
+```
+'use strict'
+
+import { Button } from 'shimmer'
+import { Sprite } from 'shimmer'
+
+export class ButtonMain extends Button {
+  constructor () {
+    super()
+
+    let image = Sprite.fromImage( '/image1.png' )
+
+    image.anchor.x = 0.5
+    image.anchor.y = 0.5
+
+    this.addElementChild( 'image', image )
+
+    this.onMouseOver( () => {
+      this.createTween( 10, 12, 1, ( value ) => {
+        image.scale.x = value / 10
+        image.scale.y = value / 10
+      } )
+    } )
+
+    this.onMouseOut( () => {
+      this.createTween( 10, 12, 1, ( value ) => {
+        image.scale.x = ( 22 - value ) / 10
+        image.scale.y = ( 22 - value ) / 10
+      } )
+    } )
+  }
+}
+```
+
+### moon.js
+```
+'use strict'
+
+import { radians } from 'modux'
+
+import { Element } from 'shimmer'
+import { Sprite } from 'shimmer'
+
+export class Moon extends Element {
+  constructor () {
+    super()
+
+    let image = Sprite.fromImage( '/image2.png' )
+
+    image.anchor.x = 0.5
+    image.anchor.y = 0.5
+
+    this.alpha = 0
+
+    this.__angle = 0
+    this.__radius = 0
+    this.__speed = 1
+    this.__centerX = 0
+    this.__centerY = 0
+
+    this.__rotating = false
+
+    this.addElementChild( 'image', image )
+  }
+
+  __move () {
+    this.x = this.__centerX + this.__radius * Math.cos( radians( this.__angle ) )
+    this.y = this.__centerY + this.__radius * Math.sin( radians( this.__angle ) )
+  }
+
+  setCenter ( x, y ) {
+    this.__centerX = x
+    this.__centerY = y
+    this.__move()
+  }
+  setAngle ( angle ) {
+    this.__angle = angle
+    this.__move()
+  }
+  setRadius ( radius ) {
+    this.__radius = radius
+    this.__move()
+  }
+  setSpeed ( speed ) {
+    this.__speed = speed
+  }
+
+  start () {
+    this.__rotating = true
+  }
+
+  stop () {
+    this.__rotating = false
+  }
+
+  tick ( delta ) {
+    if ( this.__rotating ) {
+      this.__angle = this.__angle + this.__speed * delta
+      if ( this.__angle === 360 ) {
+        this.__angle = 0
+      }
+      this.__move()
+    }
+  }
+}
+```
+
+## Shimmer Component
+```
+'use strict'
+
+import { rnd, loop } from 'modux'
+
+import { Shimmer } from 'shimmer'
+
+import { ButtonMain } from './buttonMain.js'
+import { Moon } from './moon.js'
+
+export class ShimmerComponent extends Shimmer {
+  onResize ( width, height ) {
+    super.onResize( width, height )
+    this.__button.x = this.renderer.width / this.renderer.resolution / 2
+    this.__button.y = this.renderer.height / this.renderer.resolution / 2
+
+    loop( this.__moons, ( moon ) => {
+      moon.setCenter( this.__button.x, this.__button.y )
+      moon.show()
+    } )
+  }
+
+  get settings() {
+    return {
+      backgroundAlpha: 1,
+      backgroundColor: 0xFFFF00,
+      forceCanvas: false
+    }
+  }
+
+  execute () {
+    this.ticker.start()
+
+    this.__button = new ButtonMain()
+    this.stage.addElementChild( 'button', this.__button )
+
+    this.__moons = {}
+
+    for ( let i = 0; i < 10; i++ ) {
+      let moon = new Moon()
+      moon.setAngle( rnd( 0, 359 ) )
+      moon.setRadius( rnd( 200, 500 ) )
+      moon.setSpeed( rnd( 10, 50 ) / 10 )
+      moon.setCenter( this.__button.x, this.__button.y )
+
+      this.stage.addElementChild( 'moon' + i, moon )
+
+      this.__moons[ i ] = moon
+    }
+
+    this.__button.onMouseDown( () => {
+      loop( this.__moons, ( moon ) => {
+        moon.start()
+      } )
+    } )
+
+    this.__button.onMouseUp( () => {
+      loop( this.__moons, ( moon ) => {
+        moon.stop()
+      } )
+    } )
+    this.__button.onMouseUpOutside( () => {
+      loop( this.__moons, ( moon ) => {
+        moon.stop()
+      } )
+    } )
+  }
+}
+```

package/manual/basic-usage.md

@@ -0,0 +1,38 @@
+# Basic Usage
+
+## Moon library
+```
+'use strict'
+
+import { Element } from 'shimmer'
+import { Sprite } from  'shimmer'
+
+export class Moon extends Element {
+  constructor () {
+    super()
+
+    let image = Sprite.fromImage( '/image2.png' )
+    this.addElementChild( 'image', image )
+  }
+}
+```
+
+## Shimmer component
+```
+'use strict'
+
+import { Shimmer } from 'shimmer'
+
+import { Moon } from './moon.js'
+
+export class ShimmerComponent extends Shimmer {
+
+  execute () {
+    this.ticker.start()
+
+    let moon = new Moon()
+    this.stage.addElementChild( 'moon', moon )
+  }
+
+}
+```

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@crispcode/shimmer",
+  "version": "5.0.0",
+  "description": "A PIXI.JS wrapper plugin for MODUX",
+  "author": "Crisp Code ( contact@crispcode.ro )",
+  "access": "public",
+  "engines": {
+    "node": ">=16.15.0",
+    "npm": ">=8.5.5"
+  },
+  "license": "SEE LICENSE IN LICENSE",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/CrispCode/shimmer.git"
+  },
+  "bugs": {
+    "url": "https://github.com/CrispCode/shimmer/issues"
+  },
+  "dependencies": {
+    "@pixi/canvas-display": "^6.4.0",
+    "@pixi/canvas-extract": "^6.4.0",
+    "@pixi/canvas-graphics": "^6.4.0",
+    "@pixi/canvas-mesh": "^6.4.0",
+    "@pixi/canvas-particle-container": "^6.4.0",
+    "@pixi/canvas-prepare": "^6.4.0",
+    "@pixi/canvas-renderer": "^6.4.0",
+    "@pixi/canvas-sprite": "^6.4.0",
+    "@pixi/canvas-sprite-tiling": "^6.4.0",
+    "@pixi/canvas-text": "^6.4.0",
+    "@pixi/constants": "^6.4.0",
+    "@pixi/core": "^6.4.0",
+    "@pixi/display": "^6.4.0",
+    "@pixi/graphics": "^6.4.0",
+    "@pixi/interaction": "^6.4.0",
+    "@pixi/loaders": "^6.4.0",
+    "@pixi/math": "^6.4.0",
+    "@pixi/mesh": "^6.4.0",
+    "@pixi/mesh-extras": "^6.4.0",
+    "@pixi/particle-container": "^6.4.0",
+    "@pixi/prepare": "^6.4.0",
+    "@pixi/runner": "^6.4.0",
+    "@pixi/settings": "^6.4.0",
+    "@pixi/sprite": "^6.4.0",
+    "@pixi/sprite-animated": "^6.4.0",
+    "@pixi/sprite-tiling": "^6.4.0",
+    "@pixi/text": "^6.4.0",
+    "@pixi/ticker": "^6.4.0",
+    "@pixi/utils": "^6.4.0",
+    "acorn": "^8.7.1"
+  },
+  "peerDependencies": {
+    "@crispcode/modux": "CrispCode/modux#v5.0.4"
+  },
+  "devDependencies": {
+    "esdoc": "^1.1.0",
+    "esdoc-standard-plugin": "^1.0.0"
+  },
+  "main": "./scripts/index.js",
+  "scripts": {
+    "test": "cd test && node ./../node_modules/.bin/modux start ",
+    "nowebgl": "open -a \"Google Chrome\" --args  -disable-webgl",
+    "docs": "rm -rf ./docs && ./node_modules/.bin/esdoc && open ./docs/index.html"
+  }
+}

package/scripts/button.js

@@ -0,0 +1,137 @@
+'use strict'
+
+import { loop, uid } from '@crispcode/modux'
+
+import { Element } from './element.js'
+
+/**
+ * This class is used to create buttons for shimmer
+ */
+export class Button extends Element {
+  /**
+   * Creates an instance of Button
+   */
+  constructor () {
+    super()
+
+    /**
+     * Marks the Button as interactive
+     * @type {Boolean}
+     */
+    this.interactive = true
+    /**
+     * Marks the Button as a button
+     * @type {Boolean}
+     */
+    this.buttonMode = true
+
+    /**
+     * Holds all event listeners
+     * @type {Object}
+     * @private
+     */
+    this.__handlers = {}
+    /**
+     * Enables or disables the button interactivity
+     * @type {Boolean}
+     * @private
+     */
+    this.__enabled = true
+
+    /**
+     * This function calls all event listeners for a specific eventname
+     * @param {String} eventname The event name
+     * @private
+     */
+    const __triggerEventHandlers = ( eventname ) => {
+      return ( ev ) => {
+        if ( this.__enabled ) {
+          loop( this.__handlers[ eventname ], ( handler ) => {
+            handler( ev )
+          } )
+        }
+      }
+    }
+
+    this
+    // Mouse & touch events are normalized into
+    // the pointer* events for handling different
+    // button events.
+      .on( 'pointerdown', __triggerEventHandlers( 'pointerdown' ) )
+      .on( 'pointerup', __triggerEventHandlers( 'pointerup' ) )
+      .on( 'pointerupoutside', __triggerEventHandlers( 'pointerupoutside' ) )
+      .on( 'pointerover', __triggerEventHandlers( 'pointerover' ) )
+      .on( 'pointerout', __triggerEventHandlers( 'pointerout' ) )
+  }
+
+  /**
+   * Adds an event listener to the Button
+   * @param {String} eventname The event name
+   * @param {Function} handler The event handler
+   * @return {Function} A function which can be called to unregister the event handler
+   */
+  __addEventHandler ( eventname, handler ) {
+    this.__handlers[ eventname ] = this.__handlers[ eventname ] || {}
+    let id = uid()
+    this.__handlers[ eventname ][ id ] = handler
+    return () => {
+      delete this.__handlers[ eventname ][ id ]
+    }
+  }
+
+  /**
+   * Enables or disables the button interactivity
+   * @param {Boolean} enabled If true, button is enabled, otherwise its disabled
+   */
+  enable ( enabled ) {
+    this.__enabled = !!enabled
+    if ( enabled ) {
+      this.interactive = true
+      this.buttonMode = true
+    } else {
+      this.interactive = false
+      this.buttonMode = false
+    }
+  }
+
+  /**
+   * Adds an event listener for the Mouse Over event
+   * @param {Function} handler The event listener
+   * @return {Function} A function which can be called to unregister the event handler
+   */
+  onMouseOver ( handler ) {
+    return this.__addEventHandler( 'pointerover', handler )
+  }
+  /**
+   * Adds an event listener for the Mouse Out event
+   * @param {Function} handler The event listener
+   * @return {Function} A function which can be called to unregister the event handler
+   */
+  onMouseOut ( handler ) {
+    return this.__addEventHandler( 'pointerout', handler )
+  }
+  /**
+   * Adds an event listener for the Mouse Down event
+   * @param {Function} handler The event listener
+   * @return {Function} A function which can be called to unregister the event handler
+   */
+  onMouseDown ( handler ) {
+    return this.__addEventHandler( 'pointerdown', handler )
+  }
+  /**
+   * Adds an event listener for the Mouse Up event
+   * @param {Function} handler The event listener
+   * @return {Function} A function which can be called to unregister the event handler
+   */
+  onMouseUp ( handler ) {
+    return this.__addEventHandler( 'pointerup', handler )
+  }
+  /**
+   * Adds an event listener for the Mouse Up Outside event
+   * @param {Function} handler The event listener
+   * @return {Function} A function which can be called to unregister the event handler
+   */
+  onMouseUpOutside ( handler ) {
+    return this.__addEventHandler( 'pointerupoutside', handler )
+  }
+}