<?php include("top.php"); ?>

<div id="can"> </div>
<table class="tab">
	<tr> 
		<td> <button type="button" class="button2" id="bp">+</button></td>
		<td> <button type="button" class="button2" id="bm">-</button></td>
		<td id="regionInfo"> No region selected </td>
		<td id="ownerInfo">  </td>
		<td> <button type="button" class="button1" id="buttonRegion">See region</button> </td>
	</tr>
</table>
<script src="pixi.js-master/bin/pixi.js"></script>
<script>
var hexaW = 600;
var hexaH = 520;

var renderer = PIXI.autoDetectRenderer(window.innerWidth/2, window.innerWidth/3, null, false, true);

// Set the background color of the renderer to a baby-blue'ish color
renderer.backgroundColor = 0x3498db;
 
// Append the renderer to the body of the page
document.getElementById("can").appendChild(renderer.view);
		 
		// create the root of the scene graph
var stage = new PIXI.Container();

var group = new PIXI.Container();
var typeArray = new Array();
var hexArray = new Array();
var hachuresArray = new Array();

var hachures = [[141, 505, 150, 519, 167, 519, 459, 15, 450, 0, 431, 0],
								[92, 418, 109, 447, 366, 0, 333, 0],
								[42, 331, 59, 360, 266, 0, 233, 0],
								[0, 260, 9, 274, 166, 0, 150, 0],
								[232, 519, 266, 519, 509, 102, 491, 72],
								[333, 519, 368, 519, 558, 189, 541, 159],
								[433, 519, 450, 519, 599, 260, 591, 245]
];


// create a texture from an image path

var textures = [PIXI.Texture.fromImage('resources/hexa/meadow.png'),
								PIXI.Texture.fromImage('resources/hexa/sea.png'),
								PIXI.Texture.fromImage('resources/hexa/desert.png'),
								PIXI.Texture.fromImage('resources/hexa/mountain.png'),
								PIXI.Texture.fromImage('resources/hexa/meadow.png'),
								PIXI.Texture.fromImage('resources/hexa/meadow.png'),
								PIXI.Texture.fromImage('resources/hexa/meadow.png')];
								
var texturesNoBorder = [PIXI.Texture.fromImage('resources/hexa/meadown.png'),
								PIXI.Texture.fromImage('resources/hexa/sean.png'),
								PIXI.Texture.fromImage('resources/hexa/desertn.png'),
								PIXI.Texture.fromImage('resources/hexa/mountainn.png'),
								PIXI.Texture.fromImage('resources/hexa/meadown.png'),
								PIXI.Texture.fromImage('resources/hexa/meadown.png'),
								PIXI.Texture.fromImage('resources/hexa/meadown.png')];
								
var selectionTexture = PIXI.Texture.fromImage('resources/hexa/selection.png');

<?php
$req = $bdd->prepare('SELECT nRegions.type, nRegions.x, nRegions.y, nRegions.name, nUsers.pseudo, nUsers.primaryColor FROM nRegions INNER JOIN nUsers ON nRegions.owner = nUsers.id');
$req->execute(array());

while ($data = $req->fetch()) {
	echo "a(" . $data['x'] . "," . $data['y'] . ",'" . $data['name'] . "','" . $data['pseudo'] . "'," . $data['type'] .", 0xff" . $data['primaryColor'] . ");\n";
}
?>

for (var i = 0; i < hachuresArray.length; i++){
	group.addChild(hachuresArray[i]);
}

var regionInfo = document.getElementById("regionInfo");
var ownerInfo = document.getElementById("ownerInfo");
var buttonRegion = document.getElementById("buttonRegion");
buttonRegion.disabled = true;
buttonRegion.onclick = function(){
	window.location.href = "changeRegion.php?id=" + idSelection;
};

var idSelection = 0;
var selection = new PIXI.Sprite(selectionTexture);
selection.visible = false;

group.addChild(selection);

var stickySelection = false;

function createHexa(x, y, name, owner, type, color) {
	var hexa = new PIXI.Sprite(textures[type-1]);
	hexa.hitArea = new PIXI.Polygon([
		 new PIXI.Point(150, 520),
		 new PIXI.Point(450, 520),
		 new PIXI.Point(600, 260),
		 new PIXI.Point(450, 0),
		 new PIXI.Point(150, 0),
		 new PIXI.Point(0, 260)
	]);
	hexa.buttonMode = true;
	hexa.interactive = true;
	hexa.position.x = hexaW * x * 0.75;
	hexa.position.y = hexaH * y + (x%2) * hexaH /2;
	
	var id = x * 100 + y + 1;
	
	hexa.mouseover = function(mouseData){
		var pos = renderer.plugins.interaction.mouse.global;
		if (!stickySelection && pos.y < renderer.height) {
			setInfo();
			selection.visible = true;
			buttonRegion.disabled = false;
			selection.position = hexa.position;
			idSelection = id;
		}
	}
	
	hexa.mouseup = function(mouseData){
		var pos = renderer.plugins.interaction.mouse.global;
		if (pos.x > 0 && pos.x < renderer.width && pos.y > 0 && pos.y < renderer.height) {
			if (selection.position == hexa.position && stickySelection) {
				selection.visible = false;
				stickySelection = false;
				buttonRegion.disabled = true;
			}
			else {
				setInfo();
				selection.visible = true;
				stickySelection = true;
				buttonRegion.disabled = false;
				selection.position = hexa.position;
				idSelection = id;
			}
		}
	}
	
	if (owner != "None") {
		
		for (var i = 0; i < hachures.length; i++) {
			var graphics = new PIXI.Graphics();
			graphics.beginFill(color);
			
			var hach = hachures[i].slice();
			
			for (var j = 0; j < hach.length; j++) {
				if (j % 2 == 0) {
					hach[j] += hexa.position.x;
				}
				else {
					hach[j] += hexa.position.y;
				}
			}
			
			graphics.drawPolygon(hach);

			graphics.endFill();
			hachuresArray.push(graphics);
		}
	}

	
	function setInfo() {
		var typeText;
		
		if (type == 1) {
			typeText = " (mostly meadows)";
		}
		else if (type == 2) {
			typeText = " (sea)";
		}
		else if (type == 3) {
			typeText = " (mostly deserts)";
		}
		else if (type == 4) {
			typeText = " (mostly mountains)";
		}
		else if (type == 5) {
			typeText = " (mostly forest)";
		}
		else if (type == 6) {
			typeText = " (lake)";
		}
		else {
			typeText = " (river)";
		}
		regionInfo.innerHTML = name + typeText;
		
		if (owner == "None") {
			ownerInfo.innerHTML = "No owner";
		}
		else {
			ownerInfo.innerHTML = "Owner : " + owner;
		}
	}
	
	typeArray.push(type);
	hexArray.push(hexa);
	group.addChild(hexa);
}

function a(x, y, name, owner, type, color) {
	createHexa(x, y, name, owner, type, color);
}

<?

$req = $bdd->prepare('SELECT nRegions.x, nRegions.y FROM nRegions INNER JOIN nUsers ON nUsers.capital = nRegions.id WHERE nUsers.id = ?');
$req->execute(array($_SESSION['id']));

$data = $req->fetch();

echo "group.position.x += -(" . $data['x'] . " * 0.75 * hexaW + hexaW / 2 - renderer.width / 2);\n";
echo "group.position.y += -(" . $data['y'] . " * hexaH + ((" . $data['x'] . ") % 2) * hexaH /2 + hexaH / 2 - renderer.height / 2);";


?>

stage.addChild(group);

var speed = 30;

var left = keyboard(37);
var ak = keyboard(65);

ak.press = left.press = function() {
  group.position.x += speed;
};

var right = keyboard(39);
var dk = keyboard(68);

dk.press = right.press = function() {
  group.position.x -= speed;
};

var up = keyboard(38);
var wk = keyboard(87);

wk.press = up.press = function() {
  group.position.y += speed;
};

var down = keyboard(40);
var sk = keyboard(83);

sk.press = down.press = function() {
  group.position.y -= speed;
};


function keyboard(keyCode) {
  var key = {};
  key.code = keyCode;
  key.isDown = false;
  key.isUp = true;
  key.press = undefined;
  key.release = undefined;
  //The `downHandler`
  key.downHandler = function(event) {
    if (event.keyCode === key.code) {
      key.isDown = true;
      key.isUp = false;
    }
    event.preventDefault();
  };

  //The `upHandler`
  key.upHandler = function(event) {
    if (event.keyCode === key.code) {
      key.isDown = false;
      key.isUp = true;
    }
    event.preventDefault();
  };

  //Attach event listeners
  window.addEventListener(
    "keydown", key.downHandler.bind(key), false
  );
  window.addEventListener(
    "keyup", key.upHandler.bind(key), false
  );
  return key;
}

var groupScale = 1;
var areBordersOn = true;
var zoomSpeed = 1.3;

document.getElementById('bp').addEventListener("click", function() {
	if (groupScale < 2){
		
		groupScale *= zoomSpeed;
		
		if (groupScale >= 0.4 && !areBordersOn) {
			areBordersOn = true;
			for (var i = 0; i < hexArray.length; i++) {
				hexArray[i].texture = textures[typeArray[i]-1];
			}
		}

		group.scale = new PIXI.Point(groupScale, groupScale);
		
		group.position.x -= renderer.width/2;
		group.position.y -= renderer.height/2;
		
		group.position.x *= zoomSpeed;
		group.position.y *= zoomSpeed;
		
		group.position.x += renderer.width/2;
		group.position.y += renderer.height/2;
	}
});

document.getElementById('bm').addEventListener("click", function() {
	if (groupScale > 0.01){
		
		groupScale /= zoomSpeed;
		
		if (groupScale < 0.4 && areBordersOn) {
			areBordersOn = false;
			for (var i = 0; i < hexArray.length; i++) {
				hexArray[i].texture = texturesNoBorder[typeArray[i]-1];
			}
		}
		
		group.scale = new PIXI.Point(groupScale, groupScale);
		
		group.position.x -= renderer.width/2;
		group.position.y -= renderer.height/2;
		
		group.position.x /= zoomSpeed;
		group.position.y /= zoomSpeed;
		
		group.position.x += renderer.width/2;
		group.position.y += renderer.height/2;
	}
});

animate();
function animate() {
    requestAnimationFrame(animate);

		if (left.isDown || ak.isDown){
			left.press();
		}
		
		if (right.isDown || dk.isDown){
			right.press();
		}
		
		if (up.isDown || wk.isDown){
			up.press();
		}
		
		if (down.isDown || sk.isDown){
			down.press();
		}
    // render the container
    renderer.render(stage);
}

 </script>

<?php include("bottom.php"); ?>