@crispcode/shimmer 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,27 @@
1
+ 'use strict'
2
+
3
+ import { Button, Sprite } from './../../../../scripts'
4
+
5
+ export class ButtonMain extends Button {
6
+ constructor ( texture ) {
7
+ super()
8
+
9
+ let image = new Sprite( texture )
10
+ image.anchor.set( 0.5 )
11
+ this.addChild( image )
12
+
13
+ this.onMouseOver( () => {
14
+ this.createTween( 10, 12, 1, ( value ) => {
15
+ image.scale.x = value / 10
16
+ image.scale.y = value / 10
17
+ } )
18
+ } )
19
+
20
+ this.onMouseOut( () => {
21
+ this.createTween( 10, 12, 1, ( value ) => {
22
+ image.scale.x = ( 22 - value ) / 10
23
+ image.scale.y = ( 22 - value ) / 10
24
+ } )
25
+ } )
26
+ }
27
+ }
@@ -0,0 +1,42 @@
1
+ 'use strict'
2
+
3
+ import { Element, Graphics, Text } from './../../../../scripts'
4
+
5
+ export class Debug extends Element {
6
+ constructor ( store ) {
7
+ super()
8
+
9
+ let container = new Graphics()
10
+ container.lineStyle( 1, 0xFF0000, 1 )
11
+ container.beginFill( 0x000000, 1 )
12
+ container.drawRect( 0, 0, 200, 60 )
13
+ container.endFill()
14
+ this.addChild( container )
15
+
16
+ this._txtWebgl = new Text( 'WEBGL: ', {
17
+ fill: 0xFFFFFF,
18
+ fontSize: 20
19
+ } )
20
+ this._txtWebgl.anchor.set( 0, 0.5 )
21
+ this._txtWebgl.x = 20
22
+ this._txtWebgl.y = 20
23
+ this.addChild( this._txtWebgl )
24
+
25
+ this._txtDelta = new Text( 'DELTA: ', {
26
+ fill: 0xFFFFFF,
27
+ fontSize: 20
28
+ } )
29
+ this._txtDelta.anchor.set( 0, 0.5 )
30
+ this._txtDelta.x = 20
31
+ this._txtDelta.y = 40
32
+ this.addChild( this._txtDelta )
33
+
34
+ store.on( 'action.webgl', ( value ) => {
35
+ this._txtWebgl.text = 'WEBGL: ' + value
36
+ }, true )
37
+
38
+ store.on( 'action.delta', ( value ) => {
39
+ this._txtDelta.text = 'DELTA: ' + value
40
+ }, true )
41
+ }
42
+ }
@@ -0,0 +1,88 @@
1
+ 'use strict'
2
+
3
+ import { approx, rnd, loop } from '@crispcode/modux'
4
+
5
+ import { Shimmer } from './../../../../scripts'
6
+
7
+ import { ButtonMain } from './buttonMain.js'
8
+ import { Moon } from './moon.js'
9
+ import { Debug } from './debug.js'
10
+
11
+ export class ShimmerComponent extends Shimmer {
12
+ onResize ( width, height ) {
13
+ super.onResize( width, height )
14
+
15
+ if ( this.__button ) {
16
+ this.__button.x = this.renderer.width / this.renderer.resolution / 2
17
+ this.__button.y = this.renderer.height / this.renderer.resolution / 2
18
+ }
19
+
20
+ loop( this.__moons, ( moon ) => {
21
+ moon.setCenter( this.__button.x, this.__button.y )
22
+ moon.show()
23
+ } )
24
+ }
25
+
26
+ get settings () {
27
+ return {
28
+ backgroundAlpha: 1,
29
+ backgroundColor: 0xFFFF00
30
+ // forceCanvas: true
31
+ }
32
+ }
33
+
34
+ execute () {
35
+ this.preload( {
36
+ 'image1': '/image1.png',
37
+ 'image2': '/image2.png'
38
+ } )
39
+ .then( ( resources ) => {
40
+ this.__button = new ButtonMain( resources[ 'image1' ].texture )
41
+ this.stage.addElementChild( 'button', this.__button )
42
+
43
+ this.__moons = {}
44
+
45
+ for ( let i = 0; i < 20; i++ ) {
46
+ let moon = new Moon( resources[ 'image2' ].texture )
47
+ moon.setAngle( rnd( 0, 359 ) )
48
+ moon.setRadius( rnd( 200, 500 ) )
49
+ moon.setSpeed( rnd( 10, 50 ) / 10 )
50
+ moon.setCenter( this.__button.x, this.__button.y )
51
+ moon.scale.set( rnd( 1, 2 ) )
52
+
53
+ this.stage.addElementChild( 'moon' + i, moon )
54
+
55
+ this.__moons[ i ] = moon
56
+ }
57
+
58
+ this.__button.onMouseDown( () => {
59
+ loop( this.__moons, ( moon ) => {
60
+ moon.start()
61
+ } )
62
+ } )
63
+
64
+ this.__button.onMouseUp( () => {
65
+ loop( this.__moons, ( moon ) => {
66
+ moon.stop()
67
+ } )
68
+ } )
69
+ this.__button.onMouseUpOutside( () => {
70
+ loop( this.__moons, ( moon ) => {
71
+ moon.stop()
72
+ } )
73
+ } )
74
+
75
+ this.__debug = new Debug( this.store )
76
+ this.stage.addElementChild( 'debug', this.__debug )
77
+
78
+ this.onResize( this.element.clientWidth, this.element.clientHeight )
79
+
80
+ this.ticker.start()
81
+
82
+ this.ticker.add( ( delta ) => {
83
+ this.store.set( 'action.webgl', this.renderer.context.webGLVersion || false )
84
+ this.store.set( 'action.delta', approx( delta, 4 ) )
85
+ } )
86
+ } )
87
+ }
88
+ }
@@ -0,0 +1,88 @@
1
+ 'use strict'
2
+
3
+ import { radians } from '@crispcode/modux'
4
+
5
+ import { Element, Sprite, Graphics, Text } from './../../../../scripts'
6
+
7
+ export class Moon extends Element {
8
+ constructor ( texture ) {
9
+ super()
10
+
11
+ let image = new Sprite( texture )
12
+ image.anchor.set( 0.5 )
13
+
14
+ let border = new Graphics()
15
+ border.beginFill( 0xFF0000, 1 )
16
+ border.drawCircle( 0, 0, image.width / 2 + 5 )
17
+ border.endFill()
18
+ this.addChild( border )
19
+
20
+ this.addChild( image )
21
+
22
+ let text = new Text( 'X', { fill: 0xFFFFFF } )
23
+ text.anchor.set( 0.5 )
24
+ this.addChild( text )
25
+
26
+ this.alpha = 0
27
+
28
+ this.__angle = 0
29
+ this.__radius = 0
30
+ this.__speed = 1
31
+ this.__centerX = 0
32
+ this.__centerY = 0
33
+
34
+ this.__rotating = false
35
+
36
+ this.interactive = true
37
+
38
+ this.on( 'wheel', ( e ) => {
39
+ e.preventDefault()
40
+ let scale = Math.max( 0.2, Math.min( this.scale.x, this.scale.y ) + e.deltaY / -100 )
41
+ this.scale.set( scale )
42
+ } )
43
+ this.on( 'longtap', ( e ) => {
44
+ e.preventDefault()
45
+ this.scale.set( 1 )
46
+ } )
47
+ }
48
+
49
+ __move () {
50
+ this.x = this.__centerX + this.__radius * Math.cos( radians( this.__angle ) )
51
+ this.y = this.__centerY + this.__radius * Math.sin( radians( this.__angle ) )
52
+ }
53
+
54
+ setCenter ( x, y ) {
55
+ this.__centerX = x
56
+ this.__centerY = y
57
+ this.__move()
58
+ }
59
+ setAngle ( angle ) {
60
+ this.__angle = angle
61
+ this.__move()
62
+ }
63
+ setRadius ( radius ) {
64
+ this.__radius = radius
65
+ this.__move()
66
+ }
67
+ setSpeed ( speed ) {
68
+ this.__speed = speed
69
+ }
70
+
71
+ start () {
72
+ this.__rotating = true
73
+ }
74
+
75
+ stop () {
76
+ this.__rotating = false
77
+ }
78
+
79
+ tick ( delta ) {
80
+ if ( this.__rotating ) {
81
+ this.__angle = this.__angle + this.__speed * delta
82
+ if ( this.__angle === 360 ) {
83
+ this.__angle = 0
84
+ }
85
+ this.__move( delta )
86
+ }
87
+ }
88
+ }
@@ -0,0 +1,28 @@
1
+ /* globals window, document */
2
+
3
+ 'use strict'
4
+
5
+ import { Module, logger } from '@crispcode/modux'
6
+
7
+ import { LayoutComponent } from './components/layout'
8
+ import { ShimmerComponent } from './components/shimmer'
9
+
10
+ let initialize = () => {
11
+ // Create application
12
+ let app = new Module( 'app' )
13
+ app
14
+ .addDependency( 'layout', LayoutComponent )
15
+ .addDependency( 'shimmer', ShimmerComponent )
16
+
17
+ app.store.set( 'core', window.config )
18
+ logger.enabled( app.store.get( 'core.debug' ) )
19
+
20
+ logger.info( 'Application start' )
21
+
22
+ // Start application
23
+ app.bootstrap( document.querySelector( 'body' ), 'layout' )
24
+ }
25
+
26
+ window.addEventListener( 'load', () => {
27
+ initialize()
28
+ } )
@@ -0,0 +1,22 @@
1
+ html, body {
2
+ position: relative;
3
+ padding: 0;
4
+ margin: 0;
5
+ width: 100%;
6
+ height: 100%;
7
+ font-family: 'Arial';
8
+ }
9
+
10
+ .layout {
11
+ display: block;
12
+ position: relative;
13
+ width: 100%;
14
+ height: 100%;
15
+
16
+ *[data-modux-component="shimmer"] {
17
+ display: block;
18
+ position: relative;
19
+ width: 100%;
20
+ height: 100%;
21
+ }
22
+ }