#61 Pan map with WASD

static/head.html

@@ -4,5 +4,6 @@
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.js"></script>
 <script src="http://momentjs.com/downloads/moment.min.js"></script>
+<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.min.js"></script>
 <script src="main.js"></script>
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

static/remoteMap.js

@@ -25,7 +25,7 @@ socket.on('hello', function (data) {
 	});
 	socket.on("displayEntity", function(entity){
 		console.log("Displaying entity "+JSON.stringify(entity));
-		drawEntity(entity, ctx);
+		drawEntity(entity);
 	});
 });
 
@@ -68,7 +68,7 @@ function requestMapDraw(){
 		}
 	}
 }
-function drawImage(ctx, image, x, y, w, h, degrees){
+function drawImageWithRotation(ctx, image, x, y, w, h, degrees){
 	ctx.save();
 	ctx.translate(x+w/2, y+h/2);
 	ctx.rotate(degrees*Math.PI/180.0);
@@ -76,8 +76,82 @@ function drawImage(ctx, image, x, y, w, h, degrees){
 	ctx.drawImage(image, x, y, w, h);
 	ctx.restore();
 }
-function drawEntity(entity){
+
+Mousetrap.bind("w", e => {
+	console.log("w");
+	cache.north();
+	playerPosition.y += 16;
+	clear();drawFromCache();
+});
+Mousetrap.bind("a", e => {
+	console.log("a");
+	cache.west();
+	playerPosition.x += 16;
+	clear();drawFromCache();
+});
+Mousetrap.bind("s", e => {
+	console.log("s");
+	cache.south();
+	playerPosition.y -= 16;
+	clear();drawFromCache();
+});
+Mousetrap.bind("d", e => {
+	console.log("d");
+	cache.east();
+	playerPosition.x -= 16;
+	clear();drawFromCache();
+});
+entityCache = new Array(64);
+// populate cache with arrays of arrays
+for(let i = 0; i < 64; i++){
+	entityCache[i] = new Array(64);
+	for(let o = 0; o < 64; o++){
+		entityCache[i][o] = false;
+	}
+}
+cache = {
+	north: function north(){
+		for(let i = 0; i < 64; i++){
+			entityCache[i].shift(); // remove leftmost entry
+			entityCache[i].push(false); // add new entry on the right
+			// get data from slaveMapper
+		}
+	},
+	south: function south(){
+		for(let i = 0; i < 64; i++){
+			entityCache[i].pop(); // remove rightmost entry
+			entityCache[i].unshift(false); // add new entry on the left
+			// get data from slaveMapper
+		}
+	},
+	west: function west(){
+		entityCache.shift();
+		entityCache.push(new Array(64));
+		// get data from slaveMapper
+	},
+	east: function east(){
+		entityCache.pop();
+		entityCache.unshift(new Array(64));
+		// get data from slaveMapper
+	}
+}
+function drawFromCache(){
+	entityCache.forEach(row => {
+		row.forEach(doc => {
+			if(doc){
+				drawEntity(doc, true);
+			}
+		});
+	});
+}
+function drawEntity(entity, dontCache){
 	if(entity.x && entity.y){
+		if(!dontCache){
+			// cache entity for later draws (like panning)
+			if(entity.x - playerPosition.x/16 >= 0 && entity.x - playerPosition.x/16 < 64 && entity.y - playerPosition.y/16 >= 0 && entity.y - playerPosition.y/16 < 64){
+				entityCache[entity.x - playerPosition.x/16][entity.y - playerPosition.y/16] = entity;
+			}
+		}
 		if(entity.entity && entity.entity.name && typeof entity.entity.name == "string"){
 			let name = entity.entity.name;
 			if(!entityImages[name]){
@@ -106,7 +180,7 @@ function drawEntity(entity){
 							rotation = entity.entity.rot * 45;
 						}
 						
-						drawImage(ctx, entityImages[name].img, xPos, yPos, 16, 16, rotation);
+						drawImageWithRotation(ctx, entityImages[name].img, xPos, yPos, 16, 16, rotation);
 						console.log("Drawing "+name+" at X: "+xPos+", Y: "+yPos);
 					} else {
 						this.queue.push(entity);
@@ -136,7 +210,7 @@ function drawChunk(chunk, ctx){
 				let yPos = (yValue*16)+(chunk.position.y*64*16)+(64*16);
 				img.onload = function() {
 					ctx.drawImage(img, xPos, yPos, 16, 16);
-					console.log("X: "+xPos+", Y: "+yPos)
+					console.log("X: "+xPos+", Y: "+yPos);
 				};
 				img.src = getImageFromName(yCell.name);
 				//img.src = entityImages[yCell.name].src;
@@ -146,4 +220,32 @@ function drawChunk(chunk, ctx){
 }
 function clear(){
 	ctx.clearRect(0, 0, canvas.width, canvas.height);
-}
+}
+
+/*
+/// ZOOMING AND PANNING COPY PASTA ===============================================
+// View parameters
+var xleftView = 0;
+var ytopView = 0;
+var widthViewOriginal = 1.0;           //actual width and height of zoomed and panned display
+var heightViewOriginal = 1.0;
+var widthView = widthViewOriginal;           //actual width and height of zoomed and panned display
+var heightView = heightViewOriginal;
+
+window.addEventListener("load",setup,false);
+function setup() {
+    canvas = document.getElementById("canvas");
+    ctx = canvas.getContext("2d");
+
+    widthCanvas = canvas.width;
+    heightCanvas = canvas.height;
+
+    canvas.addEventListener("dblclick", handleDblClick, false);  // dblclick to zoom in at point, shift dblclick to zoom out.
+    canvas.addEventListener("mousedown", handleMouseDown, false); // click and hold to pan
+    canvas.addEventListener("mousemove", handleMouseMove, false);
+    canvas.addEventListener("mouseup", handleMouseUp, false);
+    canvas.addEventListener("mousewheel", handleMouseWheel, false); // mousewheel duplicates dblclick function
+    canvas.addEventListener("DOMMouseScroll", handleMouseWheel, false); // for Firefox
+
+    draw();
+}*/