'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); } });