Added zooming via q/e keys for the demo and replays

environment/frontend_server/templates/demo/main_script.html

@@ -63,6 +63,7 @@
 	// will be used in it. 
 	const game = new Phaser.Game(config);
 	let cursors;
+  let camera;
 	let player;
 
 	// Persona related variables. This should have the name of the persona as its 
@@ -86,6 +87,11 @@
 	// <movement_speed> determines how fast we move at each upate cylce. 
 	let movement_speed = {{play_speed}}; 
 
+
+  // Define min and max zoom levels
+  let minZoom = 0.25;
+  let maxZoom = 3;
+
 	// Variables for storing movements that are sent from the backend server.
 	let execute_count_max = tile_width/movement_speed;
 	let execute_count = execute_count_max;
@@ -255,11 +261,21 @@
 	                setOffset(0, 0);
 	  player.setDepth(-1);
 	  // Setting up the camera. 
-	  const camera = this.cameras.main;
+	  camera = this.cameras.main;
 	  camera.startFollow(player);
 	  camera.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
 	  cursors = this.input.keyboard.createCursorKeys();
 
+    // Zooming
+    // Define keys for zooming in and out
+    zoomInKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q);
+    zoomOutKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E);
+
+    // Set initial zoom level
+    camera.setZoom(1);
+
+
+
 	  // *** SET UP PERSONAS *** 
 	  // We start by creating the game sprite objects. 
 	  for (let i=0; i<Object.keys(spawn_tile_loc).length; i++) { 
@@ -367,6 +383,20 @@
 	    player.body.setVelocityY(camera_speed);
 	  }
 
+    // ** ZOOM CAMERA **
+
+    // Check for zoom in key press
+    if (zoomInKey.isDown) {
+      let newZoom = camera.zoom + 0.01;
+      camera.setZoom(Phaser.Math.Clamp(newZoom, minZoom, maxZoom));
+    }
+
+    // Check for zoom out key press
+    if (zoomOutKey.isDown) {
+      let newZoom = camera.zoom - 0.01;
+      camera.setZoom(Phaser.Math.Clamp(newZoom, minZoom, maxZoom));
+    }
+
 
 	  let curr_focused_persona = document.getElementById("temp_focus").textContent;
 	  if (curr_focused_persona != "") {

environment/frontend_server/templates/home/main_script.html

@@ -78,6 +78,7 @@
 	// will be used in it. 
 	const game = new Phaser.Game(config);
 	let cursors;
+  let camera;
 	let player;
 	let showDebug = false;
 
@@ -107,6 +108,10 @@
 	// <movement_speed> determines how fast we move at each upate cylce. 
 	let movement_speed = 32; 
 
+  // Define min and max zoom levels
+  let minZoom = 0.25;
+  let maxZoom = 3;
+
 	// <timer_max> determines how frequently our update function will query the 
 	// frontend server. If it's higher, we wait longer cycles. 
 	let timer_max = 0;
@@ -271,12 +276,19 @@
 	                setOffset(0, 0);
 	  player.setDepth(-1);
 	  // Setting up the camera. 
-	  const camera = this.cameras.main;
+	  camera = this.cameras.main;
 	  camera.startFollow(player);
 	  camera.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
 	  cursors = this.input.keyboard.createCursorKeys();
 
-	  // *** SET UP PERSONAS *** 
+    // Zooming
+    // Define keys for zooming in and out
+    zoomInKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q);
+    zoomOutKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E);
+
+    camera.setZoom(1)
+
+    // *** SET UP PERSONAS *** 
 	  // We start by creating the game sprite objects. 
 	  for (let i=0; i<Object.keys(spawn_tile_loc).length; i++) { 
 	    let persona_name = Object.keys(spawn_tile_loc)[i];
@@ -365,6 +377,19 @@
 	    player.body.setVelocityY(camera_speed);
 	  }
 
+    // ** ZOOM CAMERA **
+
+    // Check for zoom in key press
+    if (zoomInKey.isDown) {
+      let newZoom = camera.zoom + 0.01;
+      camera.setZoom(Phaser.Math.Clamp(newZoom, minZoom, maxZoom));
+    }
+
+    // Check for zoom out key press
+    if (zoomOutKey.isDown) {
+      let newZoom = camera.zoom - 0.01;
+      camera.setZoom(Phaser.Math.Clamp(newZoom, minZoom, maxZoom));
+    }
 	  // console.log("phase: " + phase + ", step: " + step);
 	  // *** MOVE PERSONAS ***
 	  // Moving personas take place in three distinct phases: "process," "update,"