Add NAT device to animation

static/js/index.js

@@ -12,8 +12,9 @@ let attacker = new Entity('/static/images/attacker.png', 'attacker', 250,150,100
 let mserver = new Entity('/static/images/remote_server.png', 'Reflection Server', 1700, 150, 100, 100);
 let client = new Entity('/static/images/home_client.png', 'client', 1700, 750, 100, 100);
 let router = new Entity('/static/images/router.png', 'router - DDD Filter and Mapping Device', 1000, 475, 100,100);
+let nat = new Entity('/static/images/router.png', 'NAT Device', 1700, 475, 100,100);
 let nserver = new Entity('/static/images/remote_server.png', 'nserver', 250, 750,100,100);
-let entities = [mserver, nserver, client, router, attacker];
+let entities = [mserver, nserver, client, router, attacker, nat];
 for(let entity of entities){
   entity.ctx = ctx;
 }
@@ -24,7 +25,7 @@ let animateInstructions = [];
 var instructionInd = 0;
 var animateFrameReqId;
 let running = false;
-let entityMap = {'mserver': mserver, 'nserver': nserver, 'client': client, 'attacker': attacker, 'router': router};
+let entityMap = {'mserver': mserver, 'nserver': nserver, 'client': client, 'attacker': attacker, 'router': router, 'nat': nat};
 
 // Clock object that stores variables that have to do with time
 let clock = new Clock();
@@ -208,5 +209,3 @@ function animatePacket(x, y, dstX, dstY, totalTime, color, radius, dstPortNum){
   }
   return new Packet(x, y, dstX, dstY, radius, color, velocity, ctx, dstPortNum);
 }
-
-//animateLoop();