Compass relocation

This commit carries some changes.
* the compass is now a "special" item, not "good". It allows a different placing
* Store block is now divided into 2 parts. All the script is adapted to make room for it, including empty block check and insert animation for the new #store children divs
** Above: stackable storable items (resources), whose tooltip shows updated income/consumption rates
** Below: special storable items. As of now, it only contains the compass. Special block has a special style, with some distance from resources block if that one exists.
* Compass row has an empty tooltip which is filled in by World

script/events/room.js

@@ -39,8 +39,7 @@ Events.Room = [
 						text: _('buy compass'),
 						cost: { fur: 300, scales: 15, teeth: 5 },
 						reward: { 'compass': 1 },
-						notification: _('the old compass is dented and dusty, but it looks to work.'),
+						notification: _('the old compass is dented and dusty, but it looks to work.')
-						onChoose: Path.openPath
 					}, 
 					'goodbye': {
 						text: _('say goodbye'),

script/room.js

@@ -437,7 +437,7 @@ var Room = {
 			}
 		},
 		'compass': {
-			type: 'upgrade',
+			type: 'special',
 			maximum: 1,
 			cost: function() {
 				return { 
@@ -462,6 +462,8 @@ var Room = {
 			options
 		);
 		
+		Room.pathDiscovery = Boolean($SM.get('stores["compass"]'));
+
 		if(Engine._debug) {
 			this._ROOM_WARM_DELAY = 5000;
 			this._BUILDER_STATE_DELAY = 5000;
@@ -748,8 +750,10 @@ var Room = {
 	
 	updateStoresView: function() {
 		var stores = $('div#stores');
+	  var resources = $('div#resources');
+		var special = $('div#special');
 		var weapons = $('div#weapons');
-		var needsAppend = false, wNeedsAppend = false, newRow = false;
+		var needsAppend = false, rNeedsAppend = false, sNeedsAppend = false, wNeedsAppend = false, newRow = false;
 		if(stores.length === 0) {
 			stores = $('<div>').attr({
 				'id': 'stores',
@@ -757,6 +761,18 @@ var Room = {
 			}).css('opacity', 0);
 			needsAppend = true;
 		}
+		if(resources.length === 0) {
+			resources = $('<div>').attr({
+				id: 'resources'
+			}).css('opacity', 0);
+			rNeedsAppend = true;
+		}
+		if(special.length === 0) {
+			special = $('<div>').attr({
+				id: 'special'
+			}).css('opacity', 0);
+			sNeedsAppend = true;
+		}
 		if(weapons.length === 0) {
 			weapons = $('<div>').attr({
 				'id': 'weapons',
@@ -783,8 +799,11 @@ var Room = {
 			case 'weapon':
 				location = weapons;
 				break;
+			case 'special':
+				location = special;
+				break;
 			default:
-				location = stores;
+				location = resources;
 				break;
 			}
 			
@@ -829,8 +848,18 @@ var Room = {
 				$('div#' + row.attr('id') + ' > div.row_val', location).text(Math.floor(num));
 			}
 		}
+				
+		if(rNeedsAppend && resources.children().length > 0) {
+			resources.prependTo(stores);
+			resources.animate({opacity: 1}, 300, 'linear');
+		}
 		
-		if(needsAppend && stores.children().length > 0) {
+		if(sNeedsAppend && special.children().length > 0) {
+			special.appendTo(stores);
+			special.animate({opacity: 1}, 300, 'linear');
+		}
+		
+		if(needsAppend && stores.find('div.storeRow').length > 0) {
 			stores.appendTo('div#storesContainer');
 			stores.animate({opacity: 1}, 300, 'linear');
 		}
@@ -847,10 +876,15 @@ var Room = {
 		if($("div#outsidePanel").length) {
 			Outside.updateVillage();
 		}
+
+		if($SM.get('stores.compass') && !Room.pathDiscovery){
+			Room.pathDiscovery = true;
+			Path.openPath();
+		}
 	},
 	
 	updateIncomeView: function() {
-		var stores = $('div#stores');
+		var stores = $('div#resources');
 		if(stores.length === 0 || typeof $SM.get('income') == 'undefined') return;
 		$('div.storeRow', stores).each(function(index, el) {
 			el = $(el);
@@ -900,10 +934,6 @@ var Room = {
 		Notifications.notify(Room, good.buildMsg);
 		
 		$SM.add('stores["'+thing+'"]', 1);
-		
-		if(thing == 'compass') {
-			Path.openPath();
-		}
 	},
 	
 	build: function(buildBtn) {
@@ -1109,6 +1139,12 @@ var Room = {
 		}
 	},
 	
+	compassTooltip: function(direction){
+		var tt = $('<div>').addClass('tooltip bottom right');
+		$('<div>').addClass('row_key').text(_('the compass points '+ direction)).appendTo(tt);
+		tt.appendTo($('#row_compass'));
+	},
+	
 	handleStateUpdates: function(e){
 		if(e.category == 'stores'){
 			Room.updateStoresView();

script/state_manager.js

@@ -423,6 +423,7 @@ var StateManager = {
 		case 'tool':
 		case 'weapon':
 		case 'upgrade':
+		case 'special':
 			return $SM.get('stores["'+name+'"]', true);
 		case 'building':
 			return $SM.get('game.buildings["'+name+'"]', true);

script/world.js

@@ -40,7 +40,7 @@ var World = {
 	SOUTH: [ 0,  1],
 	WEST:  [-1,  0],
 	EAST:  [ 1,  0],
-	
+
 	Weapons: {
 		'fists': {
 			verb: _('punch'),
@@ -156,6 +156,12 @@ var World = {
 		
 		Engine.updateOuterSlider();
 		
+		// Map the ship and show compass tooltip
+		World.ship = World.mapSearch(World.TILE.SHIP,$SM.get('game.world.map'),1);
+		World.dir = World.compassDir(World.ship[0]);
+		// compass tooltip text
+		Room.compassTooltip(World.dir);
+		
 		//subscribe to stateUpdates
 		$.Dispatch('stateUpdate').subscribe(World.handleStateUpdates);
 	},
@@ -651,24 +657,58 @@ var World = {
 			var landmark = World.LANDMARKS[k];
 			for(var i = 0; i < landmark.num; i++) {
 				var pos = World.placeLandmark(landmark.minRadius, landmark.maxRadius, k, map);
-				if(k == World.TILE.SHIP) {
-					var dx = pos[0] - World.RADIUS, dy = pos[1] - World.RADIUS;
-					var horz = dx < 0 ? 'west' : 'east';
-					var vert = dy < 0 ? 'north' : 'south';
-					if(Math.abs(dx) / 2 > Math.abs(dy)) {
-						World.dir = horz;
-					} else if(Math.abs(dy) / 2 > Math.abs(dx)){
-						World.dir = vert;
-					} else {
-						World.dir = vert + horz;
-					}
-				}
 			}
 		}
 		
 		return map;
 	},
 	
+	mapSearch: function(target,map,required){
+		var max = World.LANDMARKS[target].num;
+		if(!max){
+			// this restrict the research to numerable landmarks
+			return null;
+		}
+		// restrict research if only a fixed number (usually 1) is required
+		max = (required) ? Math.min(required,max) : max;
+		var index = 0;
+		var targets = [];
+		search: // label for coordinate research
+		for(var i = 0; i <= World.RADIUS * 2; i++){
+			for(var j = 0; j <= World.RADIUS * 2; j++){
+				if(map[i][j].charAt(0) === target){
+					// search result is stored as an object;
+					// items are listed as they appear in the map, tl-br
+					// each item has relative coordinates and a compass-type direction
+					targets[index] = {
+						x : i - World.RADIUS, 
+						y : j - World.RADIUS,
+					}
+					index++;
+					if(index === max){
+						// optimisation: stop the research if maximum number of items has been reached
+						break search;
+					}
+				}
+			}
+		}
+		return targets;
+	},
+	
+	compassDir: function(pos){
+		var dir = '';
+		var horz = pos.x < 0 ? 'west' : 'east';
+		var vert = pos.y < 0 ? 'north' : 'south';
+		if(Math.abs(pos.x) / 2 > Math.abs(pos.y)) {
+			dir = horz;
+		} else if(Math.abs(pos.y) / 2 > Math.abs(pos.x)){
+			dir = vert;
+		} else {
+			dir = vert + horz;
+		}
+		return dir;
+	},
+	
 	placeLandmark: function(minRadius, maxRadius, landmark, map) {
 	
 		var x = World.RADIUS, y = World.RADIUS;