Indie-Resource.com

Code: Select all

<script>
var movearea
var c;
function handle_map_click(event) {
    // ----------------------------------------------------------------------
    // --- This function gets a mouse click on the map, converts the click to
    // --- hex map coordinates, then moves the highlight image to be over the
    // --- clicked on hex.
    // ----------------------------------------------------------------------

    // ----------------------------------------------------------------------
    // --- Determine coordinate of map div as we want the click coordinate as
    // --- we want the mouse click relative to this div.
    // ----------------------------------------------------------------------

    // ----------------------------------------------------------------------
    // --- Code based on http://www.quirksmode.org/js/events_properties.html
    // ----------------------------------------------------------------------
	var posx = 0;
	var posy = 0;
	if (event.pageX || event.pageY) {
		posx = event.pageX;
		posy = event.pageY;
	} else if (event.clientX || e.clientY) {
		posx = event.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		posy = event.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	// --- Apply offset for the map div
    var map = document.getElementById('hexmap');
	posx = posx - map.offsetLeft;
	posy = posy - map.offsetTop;

    // ----------------------------------------------------------------------
    // --- Convert mouse click to hex grid coordinate
    // --- Code is from http://www-cs-students.stanford.edu/~amitp/Articles/GridToHex.html
    // ----------------------------------------------------------------------
    var hex_height = <?php echo $HEX_SCALED_HEIGHT; ?>;
    x = (posx - (hex_height/2)) / (hex_height * 0.75);
    y = (posy - (hex_height/2)) / hex_height;
    z = -0.5 * x - y;
    y = -0.5 * x + y;

    ix = Math.floor(x+0.5);
    iy = Math.floor(y+0.5);
    iz = Math.floor(z+0.5);
    s = ix + iy + iz;
    if (s) {
        abs_dx = Math.abs(ix-x);
        abs_dy = Math.abs(iy-y);
        abs_dz = Math.abs(iz-z);
        if (abs_dx >= abs_dy && abs_dx >= abs_dz) {
            ix -= s;
        } else if (abs_dy >= abs_dx && abs_dy >= abs_dz) {
            iy -= s;
        } else {
            iz -= s;
        }
    }

    // ----------------------------------------------------------------------
    // --- map_x and map_y are the map coordinates of the click
    // ----------------------------------------------------------------------
    map_x = ix;
    map_y = (iy - iz + (1 - ix %2 ) ) / 2 - 0.5;

    // ----------------------------------------------------------------------
    // --- Calculate coordinates of this hex.  We will use this
    // --- to place the highlight image.
    // ----------------------------------------------------------------------
    tx = map_x * <?php echo $HEX_SIDE ?> * 1.5;
    ty = map_y * <?php echo $HEX_SCALED_HEIGHT ?> + (map_x % 2) * (<?php echo $HEX_SCALED_HEIGHT ?> / 2);
	
    // ----------------------------------------------------------------------
    // --- Get the highlight image by ID
    // ----------------------------------------------------------------------
    var highlight = document.getElementById('highlight');

    // ----------------------------------------------------------------------
    // --- Set position to be over the clicked on hex
    // ----------------------------------------------------------------------
    highlight.style.left = tx + 'px';
    highlight.style.top = ty + 'px';
	highlight.setAttribute("title", (map_x + 1) + " " + (map_y+1));
	show_surround(map_x, map_y, 3)
}
function show_surround(map_x, map_y, range) {
	var minY = map_y - range;
	var maxY = map_y + range;
	movearea = document.getElementById('movearea');
	if(movearea)
		document.getElementById('hexmap').removeChild(movearea);
	
	movearea = document.createElement('div');
	movearea.setAttribute('id', 'movearea');
	document.getElementById('hexmap').appendChild(movearea);
	
	for(var i=minY; i<=maxY; i++) {
		if(i != map_y && i >= 0 && i <= <?=$MAP_HEIGHT-1?>) {
			selection(map_x, i);
		}
	}
	
	for (var xOff = 1; xOff <= range; xOff++) {
		if(Math.round((map_x+xOff) % 2) == 1) {
			maxY--;
		} else {
			minY++;
		}
		for(var i =minY; i<=maxY; i++) {
			if(i >= 0 && i <= <?=$MAP_HEIGHT-1?>) {
				if(map_x + xOff <= <?=$MAP_WIDTH-1?>)
					selection(map_x + xOff, i);
					
				if(map_x - xOff >=  0)
					selection(map_x - xOff, i);
			}
		}
	}
	
}

function selection (s_x, s_y) {
	tx = s_x * <?php echo $HEX_SIDE ?> * 1.5;
	ty = s_y * <?php echo $HEX_SCALED_HEIGHT ?> + (s_x % 2) * (<?php echo $HEX_SCALED_HEIGHT ?> / 2);
	
	new_high = document.createElement('img');
	new_high.setAttribute("class", "hex");
	new_high.src = "hex-highlight-go.png";
	new_high.style.left = tx + 'px';
	new_high.style.top = ty + 'px';
	new_high.setAttribute("title", "X:" + (s_x + 1) + " " + "Y:" + (s_y+1));
	new_high.setAttribute("id",c);
	c++;
	movearea.appendChild(new_high);
}
</script>