Location: PHPKode > projects > Solar Imperium > solar27/templates/xml/game/starmap.html
<script type="text/javascript" src="../scripts/game/wz_jsgraphics.js"></script>
<LINK href='../css/game/slider_default.css' type='text/css' rel='stylesheet'>

<script type="text/javascript" src="../scripts/game/AFLAX/aflax.js"></script>

<script type="text/javascript">

var grid;
var mouse;
var pressed;
var root;
var last_x;
var last_y;

var aflax = new AFLAX('../scripts/game/AFLAX/aflax.swf');


var empires = new Array(
{section name="ed" loop=$empires_data}
['{$empires_data[ed].emperor}','{$empires_data[ed].empire}','{$empires_data[ed].networth|number_format}','{$empires_data[ed].population|number_format}',{$empires_data[ed].radius},{$empires_data[ed].x},{$empires_data[ed].y},'{$empires_data[ed].img}']{$empires_data[ed].separator}
{/section}
);

var lines = new Array(
{section name="ld" loop=$lines_data}
[{$lines_data[ld].start_x},{$lines_data[ld].start_y},{$lines_data[ld].end_x},{$lines_data[ld].end_y},'{$lines_data[ld].color}']{$lines_data[ld].separator}
{/section}
);

{literal}

var imageClip = Array();


function zoom(v) 
{
	grid.set_xscale(v);
	grid.set_yscale(v);

	var v2 = 800 - v;	
	v2 /= 12;

	for (j=0;j<imageClip.length;j++) {
		imageClip[j].set_xscale(v2);
		imageClip[j].set_yscale(v2);
	}

}

function changeSelection(v)
{
	if (v == -1) { resetView(); return; }
	var a = v.split('x');
	var x = Math.round(a[0]/2);
	var y = Math.round(a[1]/2);
	grid.set_x(250-x);
	grid.set_y(250-y);
	grid.set_xscale(200);
	grid.set_yscale(200);

	document.getElementById('vertical_slider_2').style.top = '120px';
}



function init()
{

	var s = document.getElementById('empires_select');
	for (j=0;j<empires.length;j++) 
		s.options[j+1] = new Option(empires[j][0]+'@'+empires[j][1],empires[j][5]+"x"+empires[j][6],false,false);

	last_x = -1;
	last_y = -1;

	grid = new AFLAX.MovieClip(aflax);
	root = aflax.getRoot();

	grid.set_xscale(50);
	grid.set_yscale(50);

	grid.addEventHandler('onPress','onMousePress');
	grid.addEventHandler('onRelease','onMouseRelease');
	grid.addEventHandler('onReleaseOutside','onMouseReleaseOutside');
	grid.addEventHandler('onMouseMove','onMouseMove');
	pressed = false;
}

function onMouseMove()
{
	var x = root.get_xmouse();
	var y = root.get_ymouse();
	var x2 = grid.get_xmouse();
	var y2 = grid.get_ymouse();

	if (last_x == -1) last_x = x;
	if (last_y == -1) last_y = y;
	
	var x3 = x-last_x;
	var y3 = y-last_y;
	last_x = x;
	last_y = y ;

	if (pressed == true) {
		document.getElementById('debug_text').innerHTML = 'Dragging ... X:'+x+', Y:'+y+', X2:'+x2+', Y2:'+y2+', X3:'+x3+', Y3:'+y3;
		grid.set_x(grid.get_x()+x3);
		grid.set_y(grid.get_y()+y3);
	} else {
		document.getElementById('debug_text').innerHTML = 'Moving ... X:'+x+', Y:'+y+', X2:'+x2+', Y2:'+y2;
	}

}


function onMouseRelease()
{
	pressed = false;
}

function onMouseReleaseOutside()
{
	pressed = false;
}

function onMousePress()
{
	pressed = true;

	var x = root.get_xmouse();
	var y = root.get_ymouse();
	var x2 = grid.get_xmouse();
	var y2 = grid.get_ymouse();
	
}


function resetView()
{
	grid.set_x(400);
	grid.set_y(250);
	grid.set_xscale(50);
	grid.set_yscale(50);
	document.getElementById('vertical_slider_2').style.top = '220px';

}

function draw()
{
	grid.set_x(0);
	grid.set_y(0);
	
	// draw borders
	grid.beginFill(0x111111);
	grid.lineStyle(2, 0x999999, 100);
	grid.moveTo(-250, -250);
	grid.lineTo(-250, 250);
	grid.lineTo(250, 250);
	grid.lineTo(250, -250);
	grid.lineTo(-250, -250);
	grid.endFill();

	// draw grid
	grid.lineStyle(2, 0x000099, 100);

	for (var x = 25;x<500;x+=25) {
		grid.moveTo(-250+x,-244);
		grid.lineTo(-250+x,244);
		grid.moveTo(-244,-250+x);
		grid.lineTo(244,-250+x);
	}

	// draw lines
	for (var x = 0;x < lines.length;x++)
	{
		//[-305,-676,827,51,'#3333FF']
		var x_from = Math.round(lines[x][0]/4);		
		var y_from = Math.round(lines[x][1]/4);		
		var x_to = Math.round(lines[x][2]/4);		
		var y_to = Math.round(lines[x][3]/4);		
		var line_color = lines[x][4];	
		line_color = line_color.substring(1);
		line_color = '0x'+line_color;

		grid.lineStyle(3, line_color, 100);
		grid.moveTo(x_from,y_from);
		grid.lineTo(x_to,y_to);
		

	}

	// draw empires
	// emperor , empire, networth, pop, radius, posx, posy, image
	grid.lineStyle(3, 0xFFFF00, 100);


	var textLine1 = Array();
	var textLine2 = Array();
	var textLine3 = Array();

        line1_fmt = new AFLAX.FlashObject(aflax, "TextFormat");
        line1_fmt.exposeProperty("size", line1_fmt);
        line1_fmt.exposeProperty("color", line1_fmt);
        line1_fmt.exposeProperty("font", line1_fmt);
        line1_fmt.exposeProperty("align", line1_fmt);
        line1_fmt.exposeProperty("bold", line1_fmt);
	line1_fmt.setColor(0xFFFFFF);
	line1_fmt.setSize(12);
	line1_fmt.setBold(true);
	line1_fmt.setFont("Verdana");

        line2_fmt = new AFLAX.FlashObject(aflax, "TextFormat");
        line2_fmt.exposeProperty("size", line2_fmt);
        line2_fmt.exposeProperty("color", line2_fmt);
        line2_fmt.exposeProperty("font", line2_fmt);
        line2_fmt.exposeProperty("align", line2_fmt);
	line2_fmt.setColor(0xCCCCCC);
	line2_fmt.setSize(8);
	line2_fmt.setFont("Verdana");

        line3_fmt = new AFLAX.FlashObject(aflax, "TextFormat");
        line3_fmt.exposeProperty("size", line3_fmt);
        line3_fmt.exposeProperty("color", line3_fmt);
        line3_fmt.exposeProperty("font", line3_fmt);
        line3_fmt.exposeProperty("align", line3_fmt);
	line3_fmt.setColor(0xAAAAAA);
	line3_fmt.setSize(8);
	line3_fmt.setFont("Verdana");


	for (j=0;j<empires.length;j++) {

		var emperor = empires[j][0];
		var empire = empires[j][1];
		var networth = empires[j][2];
		var population = empires[j][3];
		var radius = empires[j][4];
		var pos_x = empires[j][5];
		var pos_y = empires[j][6];
		var image = empires[j][7];

		var w = 500;
		var h = 500;	

		// 1) Scale positions
		pos_x = pos_x / (2000 / w);
		pos_y = pos_y / (2000 / h);
		

		// 2) draw image
		imageClip[j] = new AFLAX.MovieClip(aflax,grid.id); 
	    	imageClip[j].loadMovie(image); 
		imageClip[j].set_x(pos_x-8);
		imageClip[j].set_y(pos_y-8);
		imageClip[j].set_xscale(50);
		imageClip[j].set_yscale(50);

		grid.drawCircle(pos_x,pos_y,radius);

	        textLine1[j] = new AFLAX.TextField(aflax, grid.createTextField(0, 10, 600, 250));
		textLine1[j].setText(empire);
		textLine1[j].set_x(pos_x+10);
		textLine1[j].set_y(pos_y-10);
		textLine1[j].set_xscale(50);
		textLine1[j].set_yscale(50);
		textLine1[j].callFunction("setTextFormat", line1_fmt);

	        textLine2[j] = new AFLAX.TextField(aflax, grid.createTextField(0, 10, 600, 250));
		textLine2[j].setText('Pop:' + population);
		textLine2[j].set_x(pos_x+10);
		textLine2[j].set_y(pos_y-4);
		textLine2[j].set_xscale(50);
		textLine2[j].set_yscale(50);
		textLine2[j].callFunction("setTextFormat", line2_fmt);

	        textLine3[j] = new AFLAX.TextField(aflax, grid.createTextField(0, 10, 600, 250));
		textLine3[j].setText('Networth:' + networth);
		textLine3[j].set_x(pos_x+10);
		textLine3[j].set_y(pos_y);
		textLine3[j].set_xscale(50);
		textLine3[j].set_yscale(50);
		textLine3[j].callFunction("setTextFormat", line3_fmt);
			
	}

	grid.set_x(400);
	grid.set_y(300);

	zoom(150);
	document.getElementById('vertical_slider_2').style.top = '150px';
}	


function go()
{
	init();
	draw();
}	

var old_v = -1;

function update_flash(v)
{
	if (old_v == v) return;

	zoom(v);
	old_v = v;
}

{/literal}

</script>
<script type="text/javascript" src="../scripts/game/slider.js"></script>


<div id="debug_text" style="display:none">Debug info</div>

<div style="margin:10px" align="center">

<table>
<tr><td style="border:1px solid white">

		<script>
			aflax.insertFlash(800, 600, "#666666", "go");
		</script>
</td><td valign="top">
<form>
<table>
<tr>
<td>{t}Focus the starmap on empire:{/t}</td>
</tr>
<tr>
<td>
	<select class="input_text" id="empires_select" onChange="changeSelection(this.value)">
		<option value="-1">---</option>

	</select>
</td>
</tr>
</table>
</form>
<table>
<tr>
<td>
<div class="display_holder">{t}Zoom{/t}</div>
</td>
</tr><tr>
<td>
    
	<!-- Vertical slider 2 (default color - grey) -->
	<div class="vertical_track" style="height: 220px" >
		<div class="vertical_slit" style="height: 220px" >&nbsp;</div>
		<!-- Total movement: 50 pixels, range: -250 .. 250
			total allowed number of values: 51, 0 decimals,
			default position: 25 pixels from the top (value: 0) -->

		<div class="vertical_slider" id="vertical_slider_2" style="top: 220px;"
			onmousedown="slide(event, 'vertical', 220, 50, 400, 90, 0, 'vertical_display_2');">&nbsp;</div>
	</div>
	<div class="display_holder" style="display:block">
		<input type="text" class="value_display" id="vertical_display_2" value="160" onfocus="blur(this);" />
	</div>
</td>
</tr><tr>
<td>
<div class="display_holder"><a style="color:black" href="javascript:resetView()">{t}Reset{/t}</a></div>
</td>
</tr>
</table>

</td>
</tr>
</table>
</div>

Return current item: Solar Imperium