Add scrolling via keyboard

script/engine.js

@@ -593,10 +593,16 @@
 				switch(e.which) {
 					case 38: // Up
 					case 87:
+						if(Engine.activeModule == Outside){
+							Engine.activeModule.scrollSidebar('up');
+						}
 						Engine.log('up');
 						break;
 					case 40: // Down
 					case 83:
+						if(Engine.activeModule == Outside){
+							Engine.activeModule.scrollSidebar('down');
+						}
 						Engine.log('down');
 						break;
 					case 37: // Left
@@ -605,17 +611,20 @@
 							Engine.travelTo(Path);
 						else if(Engine.activeModule == Path && Outside.tab)
 							Engine.travelTo(Outside);
-						else if(Engine.activeModule == Outside && Room.tab)
+						else if(Engine.activeModule == Outside && Room.tab){
+							Engine.activeModule.scrollSidebar('left', true);
 							Engine.travelTo(Room);
+						}
 						Engine.log('left');
 						break;
 					case 39: // Right
 					case 68:
 						if(Engine.activeModule == Room && Outside.tab)
 							Engine.travelTo(Outside);
-						else if(Engine.activeModule == Outside && Path.tab)
+						else if(Engine.activeModule == Outside && Path.tab){
+							Engine.activeModule.scrollSidebar('right', true);
 							Engine.travelTo(Path);
-						else if(Engine.activeModule == Path && Ship.tab)
+						}else if(Engine.activeModule == Path && Ship.tab)
 							Engine.travelTo(Ship);
 						Engine.log('right');
 						break;

script/outside.js

@@ -4,6 +4,7 @@
 var Outside = {
 	name: _("Outside"),
 	
+	_STORES_OFFSET: 0,
 	_GATHER_DELAY: 60,
 	_TRAPS_DELAY: 90,
 	_POP_DELAY: [0.5, 3],
@@ -439,7 +440,7 @@ var Outside = {
 		this.setTitle();
 
 		if(!ignoreStores && Engine.activeModule === Outside && village.children().length > 1) {
-			$('#storesContainer').css({top: village.height() + 26 + 'px'});
+			$('#storesContainer').css({top: village.height() + 26 + Outside._STORES_OFFSET + 'px'});
 		}
 	},
 	
@@ -611,5 +612,62 @@ var Outside = {
 			Outside.updateWorkersView();
 			Outside.updateVillageIncome();
 		};
+	},
+
+	scrollSidebar: function(direction, reset) {
+
+		if( typeof reset != "undefined" ){
+			$('#village').css('top', '0px');
+			$('#storesContainer').css('top', '224px');
+			Outside._STORES_OFFSET = 0;
+			return false;
+		}
+
+		var momentum = 10;
+		
+		// If they hit up, we scroll everything down
+		if( direction == 'up' )
+			momentum = momentum * -1;
+
+		/* Let's stop scrolling if the top or bottom bound is in the viewport, based on direction */
+		if( direction == 'down' && inView( direction, $('#village') ) ){
+			console.log(direction);
+			console.log('IN VIEW');
+			return false;
+		}else if( direction == 'up' && inView( direction, $('#storesContainer') ) ){
+			console.log(direction);
+			console.log('IN VIEW');
+			return false;
+		}
+		
+		scrollByX( $('#village'), momentum );
+		scrollByX( $('#storesContainer'), momentum );
+		Outside._STORES_OFFSET += momentum;
+
 	}
 };
+function inView(dir, elem){
+
+	var scTop = $('#main').offset().top;
+	var scBot = scTop + $('#main').height();
+	
+	var elTop = elem.offset().top;
+	var elBot = elTop + elem.height();
+
+	if( dir == 'up' ){
+		// STOP MOVING IF BOTTOM OF ELEMENT IS VISIBLE IN SCREEN
+		return ( elBot < scBot );
+	}else if( dir == 'down' ){
+		return ( elTop > scTop );
+	}else{
+		return ( ( elBot <= scBot ) && ( elTop >= scTop ) );
+	}
+
+}
+
+function scrollByX(elem, x){
+
+	var elTop = parseInt( elem.css('top'), 10 );
+	elem.css( 'top', ( elTop + x ) + "px" );
+
+}