From a34e2783728dea4c1a0c1c250cdebb95cc117fc1 Mon Sep 17 00:00:00 2001
From: Juraj Michalek <juraj.michalek@ysoft.com>
Date: Wed, 30 Dec 2015 15:38:04 +0100
Subject: [PATCH] add animated instructions

---
 index.html                   |   2 +
 js/app/instructions-state.js | 128 +++++++++++++++++++++++++++++++++++
 js/app/level-selector.js     |   2 +-
 3 files changed, 131 insertions(+), 1 deletion(-)
 create mode 100644 js/app/instructions-state.js

diff --git a/index.html b/index.html
index d6483f9..2ad5df9 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,7 @@
     <script src="js/app/loading-state.js"></script>
     <script src="js/app/level-tools.js"></script>
     <script src="js/app/level-selector.js"></script>
+    <script src="js/app/instructions-state.js"></script>
     <script src="js/app/game-state.js"></script>
     <script src="js/app/levels-01-12.js"></script>
 </head>
@@ -35,6 +36,7 @@ game.stage.color = "121d35";
 game.levelIndex = 0;
 game.levelStatus = 'none';
 game.states.addState(levelSelectorState);
+game.states.addState(instructionsState);
 game.states.addState(state);
 
 </script>
diff --git a/js/app/instructions-state.js b/js/app/instructions-state.js
new file mode 100644
index 0000000..17b6d5c
--- /dev/null
+++ b/js/app/instructions-state.js
@@ -0,0 +1,128 @@
+var instructionsState = new Kiwi.State('instructionsState');
+
+instructionsState.addContainer = function() {
+    var messageBox = new Kiwi.Plugins.Primitives.Rectangle( {
+        x: 3*64,
+        y: 72,
+        alpha: 0.5,
+        state: this,
+        width: 320,
+        height: 200,
+        color: '189608',
+        strokeColor: 'fbd712',
+        centerOnTransform: false
+    } );
+    
+    this.addChild(messageBox);
+    
+    var baseY=180;
+    var button = new Kiwi.Plugins.Primitives.Rectangle( {
+        x: 350,
+        y: baseY+50,
+        state: this,
+        width: 170,
+        height: 50,
+        color: '2160e1',
+        strokeColor: '050e20',
+        centerOnTransform: true
+    } );
+    this.addChild(button);
+    
+    var text = new Kiwi.GameObjects.Textfield( this, "Play", 320, baseY+30, "#fbd712", 32, 'normal', 'Impact' );
+    this.addChild(text);
+    button.input.onUp.add( this.buttonReleased, this );	 
+}
+
+instructionsState.playMotion = function() {
+    this.character.physics.velocity.x = 10;
+    this.timer.clear();
+    this.timer = this.game.time.clock.createTimer('time', 2, 1, true);
+    this.timer.createTimerEvent( Kiwi.Time.TimerEvent.TIMER_STOP, this.startTouch, this );
+}
+
+instructionsState.startTouch = function() {
+    this.character.x = 290;
+    this.character.physics.velocity.x = 0;
+    this.touch.animation.play('click', true);
+
+    this.timer = this.game.time.clock.createTimer('time', 2, 1, true);
+    this.timer.createTimerEvent( Kiwi.Time.TimerEvent.TIMER_STOP, this.playMotion, this );    
+}
+
+instructionsState.touchBall = function() {
+    this.addContainer();
+
+    this.character = new Kiwi.GameObjects.Sprite(this, this.textures.character, 280, 90);
+    this.character.box.hitbox = new Kiwi.Geom.Rectangle( 12, 12, 58, 58 );
+    this.character.physics = this.character.components.add( new Kiwi.Components.ArcadePhysics( this.character, this.character.box ) );
+
+    this.touch = new Kiwi.GameObjects.Sprite(this, this.textures.base, 290, 120);
+    this.touch.cellIndex = 33; 
+    this.touch.animation.add('click', [ 34, 33, 34 ], 1, false);
+
+    this.addChild(this.character);
+    this.addChild(this.touch);    
+
+    this.startTouch();
+}
+
+instructionsState.stopDrag = function() {
+    this.touch.physics.velocity.x = 0;
+    this.box.x += 64;  
+    
+    this.timer.clear();
+    this.timer = this.game.time.clock.createTimer('time', 2, 1, true);
+    this.timer.createTimerEvent( Kiwi.Time.TimerEvent.TIMER_STOP, this.startDrag, this );    
+}
+
+instructionsState.startDrag = function() {
+    this.touch.animation.play('drag');   
+    
+    this.box.x = 280;
+    this.touch.x = 270;
+    this.touch.physics.velocity.x = 8;
+    
+    this.timer.clear();
+    this.timer = this.game.time.clock.createTimer('time', 2, 1, true);
+    this.timer.createTimerEvent( Kiwi.Time.TimerEvent.TIMER_STOP, this.stopDrag, this );        
+}
+
+instructionsState.moveBox = function() {
+    this.addContainer();
+    
+    this.touch = new Kiwi.GameObjects.Sprite(this, this.textures.base, 270, 120);
+    this.touch.cellIndex = 33; 
+    this.touch.animation.add('drag', [ 33, 33, 33, 34 ], 1, false);
+    this.touch.box.hitbox = new Kiwi.Geom.Rectangle( 12, 12, 58, 58 );
+    
+    
+    this.box = new Kiwi.GameObjects.Sprite(this, this.textures.oneWay, 280, 90);
+    this.box.cellIndex = 3;
+    this.touch.physics = this.touch.components.add( new Kiwi.Components.ArcadePhysics( this.touch, null) );
+
+    this.addChild(this.box);
+    this.addChild(this.touch);
+    
+    this.timer = this.game.time.clock.createTimer('time', 2, 1, true);
+    this.timer.createTimerEvent( Kiwi.Time.TimerEvent.TIMER_STOP, this.startDrag, this);
+}
+
+
+instructionsState.create = function() {
+    if (game.levelIndex == 1) {
+        this.touchBall();
+    } else if (game.levelIndex == 2) {
+        this.moveBox();
+    } else {
+        game.states.switchState('state');
+    }
+}
+
+instructionsState.buttonReleased = function() { 
+    if (this.timer) {
+        this.timer.stop();
+        this.timer.clear();
+    }
+
+	game.states.switchState('state');
+}
\ No newline at end of file
diff --git a/js/app/level-selector.js b/js/app/level-selector.js
index 3aaf399..97b982b 100644
--- a/js/app/level-selector.js
+++ b/js/app/level-selector.js
@@ -70,5 +70,5 @@ levelSelectorState.create = function() {
 
 levelSelectorState.buttonReleased = function(sprite) {
 	game.levelIndex = sprite.levelIndex;
-	game.states.switchState('state');
+	game.states.switchState('instructionsState');
 }
\ No newline at end of file