<h2>Scenes in Crafty</h2>
<div id="crafty-game"></div>

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Lato';
  margin: 20px auto;
  width: 600px;
  text-align: center;
}

h2 {
  margin: 20px 0;
}

#crafty-game {
  border: 1px solid black;
}

var stageWidth = 600;
var stageHeight = 400;
var gameScore = 0;

Crafty.init(600, 400, document.getElementById('crafty-game'));

var game_assets = {
  "sprites": {
    "http://opengameart.org/sites/default/files/hero_spritesheet.png": {
      tile: 80,
      tileh: 94,
      map: {
        hero_idle: [0, 0],
        hero_walking: [1, 1],
        hero_alert: [0, 3],
        hero_jumping: [2, 3],
        hero_sitting: [0, 4]
      }
    }
  },
  "audio": {
    "back_music": ["http://opengameart.org/sites/default/files/audio_preview/%5E.ogg.mp3"],
    "gun_shot": ["http://opengameart.org/sites/default/files/audio_preview/8bit_gunloop_explosion.wav.mp3"]
  }
};

Crafty.load(game_assets);

//Crafty.audio.play("back_music", -1, 0.5);

Crafty.defineScene("loading_screen", function() {
  Crafty.background("orange");
  var loadingText = Crafty.e("2D, Canvas, Text, Keyboard")
    .attr({
      x: 140,
      y: 120
    })
    .text("Scenes Demo")
    .textFont({
      size: '50px',
      weight: 'bold'
    })
    .textColor("white");
  
  var hintText = Crafty.e("2D, Canvas, Text, Keyboard")
    .attr({
      x: 165,
      y: 200
    })
    .text("Press any key to start the game")
    .textFont({
      size: '20px'
    })
    .textColor("white");
  
  var ruleText = Crafty.e("2D, Canvas, Text, Keyboard")
    .attr({
      x: 135,
      y: 230
    })
    .text("Press the UP key to shoot in the game!")
    .textFont({
      size: '20px'
    })
    .textColor("white");

  loadingText.bind('KeyDown', function(evt) {
    Crafty.enterScene("game_screen");
  });
});

Crafty.defineScene("game_screen", function() {
  
  var shotsFired = 0;

  var platform = Crafty.e('Floor, 2D, Canvas, Color, WiredHitBox').attr({
    x: 0,
    y: 280,
    w: 600,
    h: 120
  }).color('black');

  var walkingHero = Crafty.e('2D, Canvas, hero_walking, SpriteAnimation, Twoway, Gravity, Keyboard').attr({
      x: 260,
      y: 200
    }).twoway(100)
    .gravity('Floor')
    .crop(0, 10, 85, 76);

  walkingHero.reel("walking", 1000, [
    [0, 1],
    [1, 1],
    [2, 1],
    [3, 1],
    [4, 1],
    [5, 1]
  ]);

  walkingHero.animate("walking", -1);

  walkingHero.reel("jumping", 1000, [
    [0, 3],
    [1, 3],
    [2, 3],
    [1, 3],
    [0, 3]
  ]);

  walkingHero.bind('KeyDown', function(evt) {
    if (evt.key == Crafty.keys.UP_ARROW) {
      walkingHero.animate("jumping", 1);
      Crafty.audio.play("gun_shot", 1);
      shotsFired++;
      if(shotsFired >= 10) {
        Crafty.enterScene("win_screen");
      }
    }
  });

  walkingHero.bind('AnimationEnd', function() {
    if (this.getReel().id == 'jumping') {
      console.log(this.getReel().id);
      walkingHero.animate("walking", -1);
    }
  });

});

Crafty.defineScene("win_screen", function() {
  Crafty.background("orange");
  var winText = Crafty.e("2D, Canvas, Text, Keyboard")
    .attr({
      x: 190,
      y: 120
    })
    .text("You Won!")
    .textFont({
      size: '50px',
      weight: 'bold'
    })
    .textColor("white");
});

Crafty.enterScene("loading_screen");