Add an eye icon. Will use this for changing the display (name, ip

address, name+IP)

Web/selectmenu.js

@@ -3,12 +3,33 @@ var mouseIsDown=false;
 var selectedMenuItemName="";
 var selectedMenuYOffset=0;
 
+const selectMenuNames = ["link", "router", "firewall", "hub", "switch",
+	"pc", "laptop", "server", "ip_phone", "printer",
+	"copier", "microwave", "fluorescent",
+	"wap", "wrepeater", "wbridge", "wrepeater"];
+
+var cachedSelectMenuCanvas=null; 
 
 
-const selectMenuNames = ["router","firewall","hub","switch","pc","laptop","server","ip_phone","printer","copier","microwave","fluorescent","wap","wrepeater","wbridge","wrepeater"];
 var menuItemSize=50;
 
 
+function InitializeSelectMenu() {
+	cachedSelectMenuCanvas = document.createElement('canvas');
+	cachedSelectMenuCanvas.width = menuItemSize;
+	console.log("length= " + selectMenuNames.length);
+	cachedSelectMenuCanvas.height = menuItemSize * selectMenuNames.length;
+	var cSMCctx = cachedSelectMenuCanvas.getContext('2d');
+	var starty = 0;
+
+	selectMenuNames.forEach((element) => {
+		//console.log("Printing to select: "+ element);
+		cSMCctx.drawImage(imageCollection[element], 0, starty, menuItemSize, menuItemSize);
+		starty += menuItemSize;
+	});
+}
+
+
 function drawSelectMenu()
 {
     //console.log("Printing on main canvass");
@@ -16,6 +37,8 @@ function drawSelectMenu()
     MainCanvas_ctx.fillStyle = maincanvasBackground;
     MainCanvas_ctx.fillRect(0, 0, menuItemSize, MainCanvas.height);
 	if (selectedMenuYOffset < 0) selectedMenuYOffset = 0;
+
+	if (cachedSelectMenuCanvas == null) InitializeSelectMenu();//initialize it if not done yet
     if(selectedMenuYOffset + MainCanvas.height > cachedSelectMenuCanvas.height) selectedMenuYOffset = cachedSelectMenuCanvas.height -MainCanvas.height;
     MainCanvas_ctx.drawImage(cachedSelectMenuCanvas,0,selectedMenuYOffset,50,MainCanvas.height,0,0,50,MainCanvas.height);
     let index = selectMenuNames.indexOf(selectedMenuItemName);

Web/ui.js

@@ -15,16 +15,32 @@ var uiMode=1;
 
 
 const imageCollection = loadImages(
-    ["ArrowUp","ArrowDown","animations", "burnmark", "cellphone","circle","copier","firewall","fluorescent","hub","ip_phone","laptop","link","microwave","pc","printer","router","select","server","shapes","square","switch","tablet","tree","vidimage","wap","wbridge","wrepeater","wrouter","x", "info", "menu"],
+	["ArrowUp", "ArrowDown", "animations",
-    ["img/ArrowUp.png","img/ArrowDown.png","img/Animations.png", "img/BurnMark.png", "img/cellphone.png", "img/Circle.png", "img/Copier.png", "img/firewall.png", "img/fluorescent.png", "img/Hub.png", "img/ip_phone.png", "img/Laptop.png", "img/link.png", "img/microwave.png", "img/PC.png", "img/Printer.png", "img/Router.png", "img/select.png", "img/Server.png", "img/Shapes.png", "img/Square.png", "img/Switch.png", "img/tablet.png", "img/tree.png", "img/VidImage.png", "img/WAP.png", "img/WBridge.png", "img/WRepeater.png", "img/WRouter.png", "img/X.png", "img/info.png", "img/menu.png"],
+		"burnmark", "cellphone", "circle",
+		"copier", "firewall", "fluorescent",
+		"hub", "ip_phone", "laptop",
+		"link", "microwave", "pc", "printer",
+		"router", "select", "server",
+		"shapes", "square", "switch",
+		"tablet", "tree", "vidimage",
+		"wap", "wbridge", "wrepeater",
+		"wrouter", "x", "info", "menu"],
+	["img/ArrowUp.png", "img/ArrowDown.png", "img/Animations.png",
+		"img/BurnMark.png", "img/cellphone.png", "img/Circle.png",
+		"img/Copier.png", "img/firewall.png", "img/fluorescent.png",
+		"img/Hub.png", "img/ip_phone.png", "img/Laptop.png",
+		"img/link.png", "img/microwave.png", "img/PC.png",
+		"img/Printer.png", "img/Router.png", "img/select.png",
+		"img/Server.png", "img/Shapes.png", "img/Square.png",
+		"img/Switch.png", "img/tablet.png", "img/tree.png",
+		"img/VidImage.png", "img/WAP.png", "img/WBridge.png",
+		"img/WRepeater.png", "img/WRouter.png", "img/X.png",
+		"img/info.png", "img/menu.png"],
     InitializeGameMenu  // this is called when all images have loaded.
 );
 
 var menuItemSize=50;
 
-const cachedSelectMenuCanvas = document.createElement('canvas');
-cachedSelectMenuCanvas.width = menuItemSize;
-cachedSelectMenuCanvas.height = menuItemSize * 16;
 
 function loadImages(names, files, onAllLoaded) {
     var i = 0, numLoading = names.length;
@@ -57,17 +73,8 @@ function InitializeGameMenu()
     //MainCanvas_ctx.drawImage(imageCollection['router'],100,100,50,50);
     //MainCanvas_ctx.drawImage(imageCollection['firewall'],150,150,50,50);
 
-    //Create the initial selectMenu
+	InitializeSelectMenu();
-    var cSMCctx = cachedSelectMenuCanvas.getContext('2d');
-    var starty=0;
-
-    selectMenuNames.forEach((element) => {
-	//console.log(element);
-	cSMCctx.drawImage(imageCollection[element],0,starty,menuItemSize,menuItemSize);
-	starty+=menuItemSize;
-    });
     //It should be printed
-    //MainCanvas_ctx.drawImage(cachedSelectMenuCanvas,0,0,50,500,0,0,50,500);
     PrintScreen();
 }
 
@@ -252,7 +259,7 @@ function PrintAllNetworkLinks()
     if (puzzle == null) return; //If the puzzle has not been set, exit
 
     let index=0;
-	if(puzzle.link !== null)
+	if(puzzle.link !== null && typeof(puzzle.link) === "object")
 	{
 		while (index < puzzle.link.length) {
 		PrintNetworkLink(puzzle.link[index]);