@crispcode/shimmer 5.0.0

package/test/scripts/components/shimmer/buttonMain.js

@@ -0,0 +1,27 @@
+'use strict'
+
+import { Button, Sprite } from './../../../../scripts'
+
+export class ButtonMain extends Button {
+  constructor ( texture ) {
+    super()
+
+    let image = new Sprite( texture )
+    image.anchor.set( 0.5 )
+    this.addChild( 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
+      } )
+    } )
+  }
+}

package/test/scripts/components/shimmer/debug.js

@@ -0,0 +1,42 @@
+'use strict'
+
+import { Element, Graphics, Text } from './../../../../scripts'
+
+export class Debug extends Element {
+  constructor ( store ) {
+    super()
+
+    let container = new Graphics()
+    container.lineStyle( 1, 0xFF0000, 1 )
+    container.beginFill( 0x000000, 1 )
+    container.drawRect( 0, 0, 200, 60 )
+    container.endFill()
+    this.addChild( container )
+
+    this._txtWebgl = new Text( 'WEBGL: ', {
+      fill: 0xFFFFFF,
+      fontSize: 20
+    } )
+    this._txtWebgl.anchor.set( 0, 0.5 )
+    this._txtWebgl.x = 20
+    this._txtWebgl.y = 20
+    this.addChild( this._txtWebgl )
+
+    this._txtDelta = new Text( 'DELTA: ', {
+      fill: 0xFFFFFF,
+      fontSize: 20
+    } )
+    this._txtDelta.anchor.set( 0, 0.5 )
+    this._txtDelta.x = 20
+    this._txtDelta.y = 40
+    this.addChild( this._txtDelta )
+
+    store.on( 'action.webgl', ( value ) => {
+      this._txtWebgl.text = 'WEBGL: ' + value
+    }, true )
+
+    store.on( 'action.delta', ( value ) => {
+      this._txtDelta.text = 'DELTA: ' + value
+    }, true )
+  }
+}

package/test/scripts/components/shimmer/index.js

@@ -0,0 +1,88 @@
+'use strict'
+
+import { approx, rnd, loop } from '@crispcode/modux'
+
+import { Shimmer } from './../../../../scripts'
+
+import { ButtonMain } from './buttonMain.js'
+import { Moon } from './moon.js'
+import { Debug } from './debug.js'
+
+export class ShimmerComponent extends Shimmer {
+  onResize ( width, height ) {
+    super.onResize( width, height )
+
+    if ( this.__button ) {
+      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: true
+    }
+  }
+
+  execute () {
+    this.preload( {
+      'image1': '/image1.png',
+      'image2': '/image2.png'
+    } )
+      .then( ( resources ) => {
+        this.__button = new ButtonMain( resources[ 'image1' ].texture )
+        this.stage.addElementChild( 'button', this.__button )
+
+        this.__moons = {}
+
+        for ( let i = 0; i < 20; i++ ) {
+          let moon = new Moon( resources[ 'image2' ].texture )
+          moon.setAngle( rnd( 0, 359 ) )
+          moon.setRadius( rnd( 200, 500 ) )
+          moon.setSpeed( rnd( 10, 50 ) / 10 )
+          moon.setCenter( this.__button.x, this.__button.y )
+          moon.scale.set( rnd( 1, 2 ) )
+
+          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()
+          } )
+        } )
+
+        this.__debug = new Debug( this.store )
+        this.stage.addElementChild( 'debug', this.__debug )
+
+        this.onResize( this.element.clientWidth, this.element.clientHeight )
+
+        this.ticker.start()
+
+        this.ticker.add( ( delta ) => {
+          this.store.set( 'action.webgl', this.renderer.context.webGLVersion || false )
+          this.store.set( 'action.delta', approx( delta, 4 ) )
+        } )
+      } )
+  }
+}

package/test/scripts/components/shimmer/moon.js

@@ -0,0 +1,88 @@
+'use strict'
+
+import { radians } from '@crispcode/modux'
+
+import { Element, Sprite, Graphics, Text } from './../../../../scripts'
+
+export class Moon extends Element {
+  constructor ( texture ) {
+    super()
+
+    let image = new Sprite( texture )
+    image.anchor.set( 0.5 )
+
+    let border = new Graphics()
+    border.beginFill( 0xFF0000, 1 )
+    border.drawCircle( 0, 0, image.width / 2 + 5 )
+    border.endFill()
+    this.addChild( border )
+
+    this.addChild( image )
+
+    let text = new Text( 'X', { fill: 0xFFFFFF } )
+    text.anchor.set( 0.5 )
+    this.addChild( text )
+
+    this.alpha = 0
+
+    this.__angle = 0
+    this.__radius = 0
+    this.__speed = 1
+    this.__centerX = 0
+    this.__centerY = 0
+
+    this.__rotating = false
+
+    this.interactive = true
+
+    this.on( 'wheel', ( e ) => {
+      e.preventDefault()
+      let scale = Math.max( 0.2, Math.min( this.scale.x, this.scale.y ) + e.deltaY / -100 )
+      this.scale.set( scale )
+    } )
+    this.on( 'longtap', ( e ) => {
+      e.preventDefault()
+      this.scale.set( 1 )
+    } )
+  }
+
+  __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( delta )
+    }
+  }
+}

package/test/scripts/index.js

@@ -0,0 +1,28 @@
+/* globals window, document */
+
+'use strict'
+
+import { Module, logger } from '@crispcode/modux'
+
+import { LayoutComponent } from './components/layout'
+import { ShimmerComponent } from './components/shimmer'
+
+let initialize = () => {
+  // Create application
+  let app = new Module( 'app' )
+  app
+    .addDependency( 'layout', LayoutComponent )
+    .addDependency( 'shimmer', ShimmerComponent )
+
+  app.store.set( 'core', window.config )
+  logger.enabled( app.store.get( 'core.debug' ) )
+
+  logger.info( 'Application start' )
+
+  // Start application
+  app.bootstrap( document.querySelector( 'body' ), 'layout' )
+}
+
+window.addEventListener( 'load', () => {
+  initialize()
+} )

package/test/styles/index.scss

@@ -0,0 +1,22 @@
+html, body {
+    position: relative;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    font-family: 'Arial';
+}
+
+.layout {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    *[data-modux-component="shimmer"] {
+        display: block;
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+}