A config file for the location layer of http://middle-earth.thehobbit.com/trollshaw

trollshow-config.js

'use strict';

var LocationBase = require('../location-base'),
    Buckets = require('./../buckets/index.js'),
    detector = require('../../utils/detector'),
    CanvasSequence = require('../../utils/canvas-sequence'),
    BucketComponents = require('./../buckets/components/index.js');

var useSmallImage = detector.isMobile&&!detector.isTablet;

/**
 * Module dependencies.
 */

module.exports = LocationBase.extend({

  id: 'locTrollshaw',
  locationCopyId:'1.3.1.1 (Location)',
  titleTextCopyId:'1.3.1.2',
  experienceNeedsWebGL:true,
  dataToLoad: {
    basePath: '/assets/images/loc-trollshaw/',
    assets: [
      //'loc-trollshaw-sword.jpg',
      '../trash.png',
      '../flare.png',
      'troll-parallax-fg.png',
      'troll-parallax-bg.jpg',
      'bilbo-parallax-bg.jpg',
      'bilbo-parallax-fg.png',
      'trollshaw-ending-bg.jpg',
      'trollshaw-ending-fg.png',
      '../popup-bg.jpg',
    ],
    mobile: [
      'bilbo-parallax-bg-small.jpg',
      'bilbo-parallax-fg-small.png',
    ],
    desktop: [
      'bilbo-parallax-bg.jpg',
      'bilbo-parallax-fg.png',
      'trollshaw-title-0.jpg',
      'trollshaw-title-1.jpg',
    ],

    //is also extended in super-class
    preloaderDesktop: [],
    preloaderMobile: [],
  },

  sprites: {
    title: CanvasSequence({
      totalFrames:2*16
    })
  },

  init: function() {

    this._super("init");

    /*
    * Title bucket created in super-class since it's the same for all locations
    */

    var text1 = new Buckets.text({
      $parentEl: this.$('#locTrollshaw-timeline'),
      content: '<p class="frame-content-text-header">' + window.translations['1.3.1.1 (Location)'] + '</p><p>'+ window.translations['1.3.3 - Description'] + '</p>',
      viewportWidth: 450,
      viewportHeight: 400,
      width:450,
      height:400
    });

    var trollParallax = new Buckets.parallax( {
      $parentEl: this.$('#locTrollshaw-timeline'),
      content: [
        {el: this.get('troll-parallax-bg.jpg'),fromX: 0,toX: -240},
        {el: this.get('troll-parallax-fg.png'),fromX: 440,toX: 120, align:'bottom'},
        {el: this.get('../flare.png').cloneNode(),flicker:true,fillViewport:true, fromX:0 ,toX:0 },
      ],
      viewportWidth: 640,
      viewportHeight: 400,
      width:640,
      height:400,
      duration:0,
      isFullscreen:detector.isMobile
    });

    if( detector.isDesktop || detector.isTablet && (this._size.y > 700 && this._size.x > 700)) {
      trollParallax.addComponent( new BucketComponents.dragtext({
        content:{
          button: window.translations['1.3.4 - Title'],
          header:'',
          brod: window.translations['1.3.5 - Description']
        },
        dmafEvent:'trollshaw_sl_troll_info',
        x:"3%",
        y:0.95,
        width:480,
        onClick: function(){},
        onIconOver: this.onIconOver,
        onIconOut: this.onIconOut
      }));
    }
    else {
      trollParallax.addComponent(
        new BucketComponents.hotspotinfo({
          type:'icon',
          icon:'hotspotInfo',
          dmafEvent:'trollshaw_sl_troll_info',
          targetSelector:'.frame-inner',
          from:{x:0.75,y:0.7, progress:0}, 
          to:{x:0,y:0.7, progress:1}, 
          content:{center:{x:0.5,y:0.5},
          header:window.translations['1.3.4 - Title'],text:window.translations['1.3.5 - Description']},
          onClick:this.onIconClick, 
          onIconOver:this.onIconOver, 
          onIconOut:this.onIconOut
        })
      );
    }

    var header = window.translations['1.3.6 - Title'];
    var longDesc = window.translations['1.3.7 - Description'];

    var bgAsset = detector.isMobile?this.get('bilbo-parallax-bg-small.jpg'):this.get('bilbo-parallax-bg.jpg');
    var fgAsset = detector.isMobile?this.get('bilbo-parallax-fg-small.png'):this.get('bilbo-parallax-fg.png');
    var initScale = detector.isMobile?1:0.5;
    var bilboParallax = new Buckets.parallax( {
      $parentEl: this.$('#locTrollshaw-timeline'),
      content: [
        {el: bgAsset, defaultScale:initScale,fromX: -280,toX: 280},
        {el: fgAsset, defaultScale:initScale,align:'bottom',fromX: 0,toX: 250},
        {el: this.get('../flare.png'),defaultScale:1,flicker:false,fromX:-200 ,toX:200, fillViewport:true }
      ],
      viewportWidth: 640,
      viewportHeight: 400,
      width:640,
      height:400,
      isFullscreen:false,
      dmafTrigger:{id:"trollshaw_sl_bilbo",progress:0.5}
    });

    var iconX,iconY;
    if( detector.isMobile && !detector.isTablet ) {
      iconX = 0.6;
      iconY = 0.5;
    }
    else {
      iconX = 0.5;
      iconY = 0.7;
    }

    var comp = bilboParallax.addComponent( 
      new BucketComponents.hotspotinfo({
        targetSelector:'.frame-inner',
        icon:'hotspotMale',
        headerUnderIcon:true,
        from:{x:iconX,y:iconY, progress:0}, 
        to:{x:iconX,y:iconY, progress:1}, 
        center:{x:0.5,y:0.5}, 
        content:{ 
          header:header,
          text:longDesc},
        onClick:this.onIconClick, 
        onIconOver:this.onIconOver, 
        onIconOut:this.onIconOut
      })
    );
    comp.header[0].style.width = "300px";

    var end = new Buckets.parallax( {
      $parentEl: this.$('#locTrollshaw-timeline'),
      content: [
        {el: this.get('trollshaw-ending-bg.jpg'),fromX: 0,toX: 0},
        {el: this.get('trollshaw-ending-fg.png'),align:'bottom',fromX: 300,toX: 192},
      ],

      viewportWidth: 1280,
      viewportHeight: 800,
      width:1280,
      height:800,
      duration:0,
      isFullscreen:true
    });

    comp = end.addComponent(
      new BucketComponents.ending({
        targetSelector:'.frame-inner', 
        dmafEvent:"trollshaw_sl_last_bucket", 
        needsWebGL:true, 
        content:{
          headerClass:'location-ending-trollshaw', 
          width:607,
          height:91,
          loc:this.titleComponent.content.loc
        }, 
        onLearnClick:this.onIconClick, 
        onClick:this.startExperience, 
        onIconOver:this.onIconOver, 
        onIconOut:this.onIconOut
      })
    );

    //set order
    this.modules.push(
      trollParallax,
      text1,
      bilboParallax,
      end
    );

    this.postInit();

  },

  dispose: function(){
    LocationBase.prototype.dispose.call(this);
  }
});