Web/selectmenu.js

@@ -3,42 +3,19 @@ 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");
 
     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<0) selectedMenuYOffset=0;
     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,32 +15,16 @@ 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"],
-	["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"],
+    ["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"],
+    ["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;
@@ -73,8 +57,17 @@ function InitializeGameMenu()
     //MainCanvas_ctx.drawImage(imageCollection['router'],100,100,50,50);
     //MainCanvas_ctx.drawImage(imageCollection['firewall'],150,150,50,50);
     
-	InitializeSelectMenu();
+    //Create the initial selectMenu
+    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();
 }
 
@@ -259,7 +252,7 @@ function PrintAllNetworkLinks()
     if (puzzle == null) return; //If the puzzle has not been set, exit
 
     let index=0;
-	if(puzzle.link !== null && typeof(puzzle.link) === "object")
+	if(puzzle.link !== null)
 	{
 		while (index < puzzle.link.length) {
 		PrintNetworkLink(puzzle.link[index]);