gamenote.js

Quintus.GameNote = function(Q) {

  Q.Stage.extend("Stage",{

    tiles: function(tileAsset) {
      this.collisionLayer(new Q.TileLayer({
        dataAsset: tileAsset,
        z: 1,
        sheet: "ground", tileW: 64, tileH: 64,
        y: -25
      }));
    },

    background: function(imageAsset) {
      return this.insert(new Q.Sprite({ asset: imageAsset, type: 0, y: 0, z: 0 }));
    },


    points: function() {
      var container = this.insert(new Q.PointContainer());

      var stage = this;

      var origY = container.p.y;
      container.add("tween").set({opacity: 0, y: -container.p.h }).animate({ opacity: 0.9, y: 70 },1,Q.Easing.Quadratic.InOut, {

        callback: function() { 
          stage.isVisible = true;
          if(stage.titlePoint) {
            stage.titlePoint.animate({ opacity: 1 });
          }
        }
      
      });
      this.container = container;
      this.pointsList = [];
    },

    title: function(text,p) {
      this.nextPoint = this.nextPoint || (this.container ? 104 : 40);
      this.titleCount = this.titleCount || 0;

      var pt = new Q.UI.Text(p,{ 
        x: 512,
        y: this.nextPoint,
        label: text.toUpperCase(),
        size: 70,
        lineHeight: 1,
        w: 640,
        align: "center",
        family: "atrament-web",
        color: "#C0322D",
        opacity: 0,
        z: 2
      }).add("tween");

      this.titlePoint = this.insert(pt);
      this.titleCount++;

      this.nextPoint += pt.p.h;
      if(this.container ) {
        this.nextPoint += 20;

      }

      if(!this.container && this.titleCount == 1) {
        pt.animate({ opacity: 1.0 },null,null, { delay: 0.75 * this.titleCount });
      } 

      return pt;
    },

    point: function(text,p) {
      this.nextPoint = this.nextPoint || 104

      var pointNum = this.pointsList && this.pointsList.length;

      var pt = new Q.UI.Text(p,{ 
        x: 200,
        y: this.nextPoint,
        label: text,
        size: 28,
        maxWidth: 500,
        opacity: 0,
        lineHeight: 1,
        weight:400,
        family: "proxima-nova",
        color: "#333",
        z: 2
      }).add("tween");

      this.nextPoint += pt.p.h + 20;

      if(this.pointsList) {
        this.pointsList.push(pt);
        var stage = this;

        pt.hidden = true;
      }


      if(!this.container) {
        pt.hidden = false;
        pt.p.w = 1024;
        pt.p.x = 512;
        pt.p.align = 'center'
        pt.animate({ opacity: 1.0 },null,null,{ delay: 1.5 });

      }

      this.on("point",pt,function(num) {
        if(pointNum == num && pt.hidden) {
          pt.hidden = false;
          pt.animate({ opacity: 1},1,Q.Easing.Quadratic.In);
        }
      });

      this.on("hidePoint",pt,function(num) {
        if(pointNum == num) {
          pt.hidden = true;
          pt.animate({ opacity: 0 },1,Q.Easing.Quadratic.In);
        }
      });

     return this.insert(pt);
   },

   scroller: function(asset,titleText,labelText) {
     this.scrollers = this.scrollers || [];

     this.activeScroller =  this.activeScroller == void 0 ? -1 : this.activeScroller;

     var image = this.insert(new Q.Sprite({ asset: asset, x: 150, y: 180, type: 1, opacity: 0, z:1 }).add("tween"));
     var title = this.insert(new Q.UI.Text({ label: titleText.toUpperCase(), size: 50, family: "atrament-web", color: "#C0322D", x: 490, y: 180, align:'left', opacity: 0, z:2  }).add("tween"));
     var label = this.insert(new Q.UI.Text({ label: labelText, size: 24, family: "proxima-nova", weight:400, color: "black", x: 490, y: 240, opacity: 0, z:2 }).add("tween"));

     this.scrollers.push([ image, title, label ]);

     var stage = this;
     image.on("scroller",function() {
       stage.triggerScroller();
     });

   },

   triggerScroller: function() {

     var scrl = this.scrollers[this.activeScroller];

     if(this.activeScroller != -1) {
     scrl[0].stop().animate({ x: -500, opacity: 0 },1,Q.Easing.Quadratic.Out);
     scrl[1].stop().animate({ x: 1500, opacity: 0 },1,Q.Easing.Quadratic.Out)
     scrl[2].stop().animate({ x: 1500, opacity: 0 },1,Q.Easing.Quadratic.Out);

     }
     
     this.activeScroller = (this.activeScroller+1) % this.scrollers.length;
     scrl = this.scrollers[this.activeScroller];

     scrl[0].set({ x: -500, opacity: 0 }).animate({ x: 150, opacity: 1 },1,Q.Easing.Quadratic.Out, { delay: 0.5 });
     scrl[1].set({ x: 1500, opacity: 0 }).animate({ x: 490, opacity: 1 },1,Q.Easing.Quadratic.Out, { delay: 0.5 })
     scrl[2].set({ x: 1500, opacity: 0 }).animate({ x: 490, opacity: 1 },1,Q.Easing.Quadratic.Out, { delay: 0.5 });
   }

  });

  Q.UI.Container.extend("PointContainer",{
    init: function() {
      this._super({
        w: "75%", h: 600, radius: 20, opacity:1, shadow: true, type:0
      });
    }
  });

  
  // Set up a numbered slide number
  Q.slide = function(number,sceneFunc) {

    Q.scene("slide" + number, function(stage) {
      _gaq.push(['_trackEvent','Slide','Show',"slide" + number]);
      Q.currentSlide = number;
      stage.presenter = stage.insert(new Q.Presenter());
      sceneFunc(stage);
      stage.add("viewport, tween");
      stage.moveTo(null,768 - Q.height);
    }, { sort: true });

  }

  Q.activeSlideStage = 0;

  Q.transitionSlide = function(from,to,skipDisable) {
    if(!skipDisable) { Q.disableHashChange = true; }
    window.location.hash = "slide" + to;

    if(Q.inTransition) return;

    if(to < 1) {
      Q(".platformerControls",Q.activeSlideStage).p({ x: 1 });
      return;
    } else if(!Q.scene("slide" + to)) {
      Q(".platformerControls",Q.activeSlideStage).p({ x: 1023 });
      return;
    }

    Q.inTransition = true;
    var oldStageNumber = Q.activeSlideStage;

    Q.activeSlideStage = Q.activeSlideStage == 1 ? 0 : 1;
    var newStage = Q.stageScene("slide" + to,Q.activeSlideStage);
    var oldStage = Q.stage(oldStageNumber);

    Q(".platformerControls",oldStageNumber).destroy();

    Q.stage(oldStageNumber).trigger("clear");

    if(from < to) {
      // Next Slide
      newStage.moveTo(-1024).animate({ x: 0 }, 0.5, Q.Easing.Quadratic.InOut);
      oldStage.animate({ x: 1024 }, 0.5,Q.Easing.Quadratic.InOut,{ callback:function() {
        Q.clearStage(oldStageNumber);
        Q.inTransition = false;
      }});
    } else {
      // Previous Slide
      newStage.moveTo(1024).animate({ x: 0 }, 0.5, Q.Easing.Quadratic.InOut);
      oldStage.animate({ x: -1024 }, 0.5,Q.Easing.Quadratic.InOut,{ callback: function() {
        Q.clearStage(oldStageNumber);
        Q.inTransition = false;
      }});
      if(!Q(".platformerControls",Q.activeSlideStage).first().p.skipMove) {
        Q(".platformerControls",Q.activeSlideStage).p({ x: 1024 - 100 });
      }
    }
  };


  Q.Sprite.extend("Presenter",{
    init: function() {
      this._super({ 
        x: 0,
        y: 470,
        z: 10,
        sprite: "player",
        sheet: "man",
        speed: 500,
        jumpSpeed: -470,
        points: [ [ 18, 75 ], 
                  [ 26, 24 ],
                  [ 90, 24 ],
                  [ 104, 116 ],
                  [ 81, 232 ],
                  [ 36, 232 ]
                ]
      });

      this.triggered = {};
      this.triggeredPercentage = {};

      this.on("hit.sprite",this,"hitSprite");
      this.add("2d, platformerControls, animation");
    },

    hitSprite: function(col) {
      col.obj.trigger("scroller");
    },

    step: function(dt) {
      this._super(dt);
      if(this.p.landed >= 0) {
        if(this.p.vx > 0) {
          this.play("run_right");
        } else if(this.p.vx < 0) {
          this.play("run_left");
        } else {
          this.play("stand_" + this.p.direction);
        }
      } else {
        if(this.p.vx > 0) {
          this.play("fly_right");
        } else if(this.p.vx < 0) {
          this.play("fly_left");
        } else {
          this.play("fly_" + this.p.direction);
        }
      }

      if(this.p.y > 1050) {
        this.p.y = -200;
        this.p.x += 150;

      }


      if(this.p.x < 0) {
        Q.transitionSlide(Q.currentSlide, Q.currentSlide - 1);
      }
      if(this.p.x > 1024) {
        Q.transitionSlide(Q.currentSlide, Q.currentSlide + 1);
      }

      
      if(this.parent.pointsList && this.parent.isVisible) { 
        var len = this.parent.pointsList.length;
        for(var i = 0;i < len;i++) {
          var point = this.parent.pointsList[i];

          if((this.p.x-50.0) / (1024-100) > (i / len) ) {
            if(!this.triggered[i]) {
              this.parent.trigger("point",i);
              this.triggered[i] = true;
            }
          } else if(!this.parent.pointsList[i].hidden) {
            this.parent.trigger("hidePoint",i);
            this.triggered[i] = false
          }
        }
      }

      for(var i = 0;i < 10; i++) {
        if(this.p.x / 1024 > (i / 10) ) {
            if(!this.triggeredPercentage[i]) {
              this.parent.trigger(i * 10 + "%");
              this.triggeredPercentage[i] = true;
            }
        }
      }
    }

  });

  Q.controlAssets = {
    "left": 0,
    "right": 1,
    "action": 3
  };

  Q.drawInputButtons = function() {
      var keypad = Q.input.keypad,
          ctx = Q.ctx;

      ctx.save();
      ctx.textAlign = "center"; 
      ctx.textBaseline = "middle";

      var sheet = Q.sheet("controls");

      for(var i=0;i<keypad.controls.length;i++) {
        var control = keypad.controls[i];

        if(control[0]) {
          var x = i * keypad.unit + keypad.gutter,
              y = keypad.bottom - 85;
              key = Q.inputs[control[0]];

          ctx.globalAlpha = key ? 0.5 : 1.0;
          sheet.draw(ctx,x,y,Q.controlAssets[control[0]])

        }
      }

      ctx.restore();
  };


  Q.start = function() {
    Q.input.keyboardControls();

    if(Q.cssWidth >= 1024) {
      Q.input.touchControls({
        controls:  [ ['left','<' ],
                     ['right','>' ],
                     [],
                     [],
                     [],
                     [],
                     [],
                     [],
                     [],
                     ['action', 'a' ]]
      });
    } else {
      Q.input.touchControls({
        controls:  [ ['left','<' ],
                     ['right','>' ],
                     [],
                     [],
                     [],
                     [],
                     ['action', 'a' ]]
      });

    }
    Q.touch(Q.SPRITE_UI,[1,0]);
    Q.input.drawButtons = Q.drawInputButtons;

    if(Q.touchDevice) {
      document.getElementById("attribution").style.display = "none";
      document.getElementById("social").style.display = "none";
    }

    Q.preload(function() {
      $("#loading").hide();
      Q.presentationSetup();

      var sceneName;

      if(window.location.hash !== "") {
        sceneName = window.location.hash.split("#")[1];
      } else {
        Q.stageScene("slide1");
      }
      
      if(sceneName && Q.scene(sceneName)) { 
        Q.stageScene(sceneName);
      } else {
        Q.stageScene("slide1");
      }

      window.onhashchange = function() {
        if(Q.disableHashChange) {
          Q.disableHashChange = false;
          return;
        }
        var sceneName;
        if(window.location.hash !== "") {
          sceneName = window.location.hash.split("#")[1];
        } 
        
        if(sceneName && Q.scene(sceneName)) { 
          Q.transitionSlide(Q.currentSlide,parseInt(sceneName.substr(5),10),true);
        } 
      }

      Q.el.focus();

      /*
      // Fullscreen is slower...
      var goFullscreen = function() {
        var rfs =
          Q.el.requestFullScreen
          || Q.el.webkitRequestFullScreen
          || Q.el.mozRequestFullScreen
        ;
        rfs.call(Q.el);

        Q.el.removeEventListener("click",goFullscreen);
      };


      Q.el.addEventListener("click",goFullscreen);
      */
    },
    { 
      progressCallback: function(loaded,total) {
        $("#loading_progress").css({width: Math.floor(loaded/total*100) + "%" });
      }

    }
    );

    return Q;

  }

};

window.addEventListener("load",function(e) {
  var override = null,
      width = 1024,
      height = 768;

  if(override = window.location.search.match(/override=([^\&]+)/)) {
    switch(override[1]) {
      case "iphone":
        width = 480;
        height = 268;
        break;
      case "iphone4":
        width = 480*2;
        height = 268*2;
        break;
      case "ipad":
        width = 1024;
        height = 672;
      case "nexus7":
        width = 1280;
        height = 720 - 100;
      case "galaxynexus":
    }
  }


  window.Q= Quintus()
                 .include("Sprites, Input, Scenes, Anim, Touch, 2D, UI, DOM, GameNote, Presentation")
                 .setup({ width: width, height: height, maximize: 'resize' })
                 .start();

});