radium/map_isometric.js

if(RadiumEngine !== undefined)
{
	/*Class*/ RadiumEngine.prototype.IsometricMap = function(canvas)
	{
		this.tile_width = 32;
		this.tile_height = 64;
		this.width = 6;
		this.height = 6;
		this.mouse_tile = undefined;
		this.mouse_over = false;
		this.mouse_in = false;
		this.fill_screen = false;
		
		this.canvas = canvas
		this.context = canvas.getContext("2d");
		
		$(this.canvas).bind('mouseenter', {'self': this}, function(event){
			self.mouse_over = true;
		});
		
		$(this.canvas).bind('mouseleave', {'self': this}, function(event){
			self.mouse_over = false;
		});
		
		$(this.canvas).bind('mousemove', {'self': this}, function(event){
			self = event.data.self;
			
			var rect = self.canvas.getBoundingClientRect();
			var root = document.documentElement;
			var mouse_x = event.clientX - rect.top - root.scrollTop;
			var mouse_y = event.clientY - rect.left - root.scrollLeft;
			var coords = event.data.self.TileFromPosition(mouse_x, mouse_y);
			
			self.mouse_tile = coords;
			
			if(coords.x >= 0 && coords.x < self.width && coords.y >= 0 && coords.y < self.height)
			{
				self.mouse_in = true;
			}
			else
			{
				self.mouse_in = false;
			}
			
			self.Redraw();
		});
		
		var Configure = this.Configure = function(tile_width, tile_height)
		{
			this.tile_width = tile_width;
			this.tile_height = tile_height;
		}
		
		this.SetFill = function(enabled)
		{
			if(enabled === true)
			{
				$(this.canvas).css({
					'position': "absolute",
					'left': "0px",
					'top': "0px"
				});
				
				$('body').css({
					'overflow': "hidden"
				});
			}
			
			this.fill_screen = enabled;
			this.UpdateSize();
		}
		
		this.UpdateSize = function()
		{
			if(this.fill_screen === false)
			{
				this.canvas.width = $(this.canvas).width();
				this.canvas.height = $(this.canvas).height();
			}
			else
			{
				this.canvas.width = window.innerWidth;
				this.canvas.height = window.innerHeight;
				
				$(this.canvas).css({
					'width': window.innerWidth + "px",
					'height': window.innerHeight + "px"
				});
			}
		}
		
		var Redraw = this.Redraw = function()
		{
			this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
			
			for(var i = 0; i < this.height; i++)
			{
				for(var r = 0; r < this.width; r++)
				{
					this.DrawTile(r, i);
					/*pos = this.GetTilePosition(r, i);
					this.context.fillRect(pos.x, pos.y, 1, 1);*/
				}
			}
		}
		
		this.DrawTile = function(tile_x, tile_y)
		{
			var pos_x = tile_x * this.tile_width;
			var pos_y = tile_y * this.tile_height;
			
			var t1 = this.GetTileOrigin(tile_x, tile_y);
			var t2 = t1.Add(new RadiumEngine.Point(this.tile_width / 2, this.tile_height / 2));
			var t3 = t1.Add(new RadiumEngine.Point(0, this.tile_height));
			var t4 = t1.Add(new RadiumEngine.Point(0 - (this.tile_width / 2), this.tile_height / 2));
			
			this.context.beginPath();
			
			this.context.moveTo(t1.x, t1.y);
			this.context.lineTo(t2.x, t2.y);
			this.context.lineTo(t3.x, t3.y);
			this.context.lineTo(t4.x, t4.y);
			this.context.lineTo(t1.x, t1.y);
			
			switch(tile_y)
			{
				case 0:
					this.context.lineWidth = 1;
					break;
				case 1:
					this.context.lineWidth = 2;
					break;
				case 2:
					this.context.lineWidth = 3;
					break;
				case 3:
					this.context.lineWidth = 4;
					break;
				case 4:
					this.context.lineWidth = 5;
					break;
				case 5:
					this.context.lineWidth = 6;
					break;
			}
			
			switch(tile_x)
			{
				case 0:
					this.context.strokeStyle = "blue";
					break;
				case 1:
					this.context.strokeStyle = "purple";
					break;
				case 2:
					this.context.strokeStyle = "green";
					break;
				case 3:
					this.context.strokeStyle = "red";
					break;
				case 4:
					this.context.strokeStyle = "maroon";
					break;
				case 5:
					this.context.strokeStyle = "black";
					break;
			}
			
			if(this.mouse_tile !== undefined && tile_x == this.mouse_tile.x && tile_y == this.mouse_tile.y)
			{
				this.context.fillStyle = "#D9FFB4";
				this.context.fill();
			}
			
			this.context.stroke();
		}
		
		this.GetBasePoint = function()
		{
			return new RadiumEngine.Point((this.width * this.tile_width) / 2, 0);
		}
		
		this.GetTileOrigin = function(tile_x, tile_y)
		{
			/* Determine base point (0,0) of the isometric diamond. */
			base_point = this.GetBasePoint();
			
			/* Determine offset for determining starting point for the current row (tile_y coordinate). */
			row_offset = new RadiumEngine.Point(0 - ((this.tile_width / 2) * tile_y), (this.tile_height / 2) * tile_y);
			
			/* Determine specific offset of the specified tile_x coordinate on the tile_y row. */
			tile_offset = new RadiumEngine.Point((this.tile_width / 2) * tile_x, (this.tile_height / 2) * tile_x);
			
			/* Return the sum of the above to determine the actual tile position on the canvas. */
			return base_point.Add(row_offset, tile_offset);
		}
		
		this.GetTilePosition = function(tile_x, tile_y)
		{
			origin = this.GetTileOrigin(tile_x, tile_y);
			
			return origin.Add(new RadiumEngine.Point(0 - (this.tile_width / 2), 0));
		}
		
		this.GetRangePosition = function(start, size)
		{
			x = this.GetTilePosition(start.x, start.y + size.y - 1).x;
			y = this.GetTilePosition(start.x, start.y).y;
			
			return new RadiumEngine.Point(x, y);
		}
		
		this.TileFromPosition = function(x, y)
		{
			p = new RadiumEngine.Point(x, y);
			a = self.GetBasePoint();
			b = a.Add(new RadiumEngine.Point(0 - (this.tile_width / 2), this.tile_height / 2));
			c = a.Add(new RadiumEngine.Point(this.tile_width / 2, this.tile_height / 2));
			
			/* Compute vectors. */    
			v0 = c.Subtract(a);
			v1 = b.Subtract(a);
			v2 = p.Subtract(a);

			/* Compute dot products. */
			dot00 = RadiumEngine.dot_product([v0.x, v0.y], [v0.x, v0.y]);
			dot01 = RadiumEngine.dot_product([v0.x, v0.y], [v1.x, v1.y]);
			dot02 = RadiumEngine.dot_product([v0.x, v0.y], [v2.x, v2.y]);
			dot11 = RadiumEngine.dot_product([v1.x, v1.y], [v1.x, v1.y]);
			dot12 = RadiumEngine.dot_product([v1.x, v1.y], [v2.x, v2.y]);

			/* Compute tile. */
			inv_denom = 1 / (dot00 * dot11 - dot01 * dot01);
			tile_x = (dot11 * dot02 - dot01 * dot12) * inv_denom;
			tile_y = (dot00 * dot12 - dot01 * dot02) * inv_denom;
			
			return new RadiumEngine.Point(Math.floor(tile_x), Math.floor(tile_y));
		}
	}
}