Added a thumbs-up image to be used in a bit. Saw the visual studio

editor was madly messing up crlf and whatnot.  Changed it to be lf since
that is what we had started with.

Web/network.js

@@ -26,21 +26,21 @@ function switchPuzzle(target)
 
 function networkFromName(what)
 {
-    let index=0;
+	let index=0;
-    while (index < allpuzzles.length) {
+	while (index < allpuzzles.length) {
 	//console.log(allpuzzles[index].EduNetworkBuilder.Network.name);
 	if(allpuzzles[index].EduNetworkBuilder.Network.name == what)
 	{
-	    console.log("Found " + what + " at index " + index);
+		console.log("Found " + what + " at index " + index);
-	    return structuredClone(allpuzzles[index].EduNetworkBuilder.Network);
+		return structuredClone(allpuzzles[index].EduNetworkBuilder.Network);
 	}
 	index++;
-    }
+	}
 }
 function networkFromIndex(what)
 {
-    if(typeof(what)==="number" && what >= 0 && what < allpuzzles.length){		
+	if(typeof(what)==="number" && what >= 0 && what < allpuzzles.length){		
-	    return structuredClone(allpuzzles[what].EduNetworkBuilder.Network);
+		return structuredClone(allpuzzles[what].EduNetworkBuilder.Network);
 	}
 	return null;
 }
@@ -50,8 +50,8 @@ function networkNamesMatchingText(textToMatch)
 	var list = [];
 	var re = new RegExp(textToMatch);
 
-    let index=0;
+	let index=0;
-    while (index < allpuzzles.length) {
+	while (index < allpuzzles.length) {
 		//console.log(allpuzzles[index].EduNetworkBuilder.Network.name);
 		if(re.test(allpuzzles[index].EduNetworkBuilder.Network.name))
 		{
@@ -59,32 +59,32 @@ function networkNamesMatchingText(textToMatch)
 			list.push(allpuzzles[index].EduNetworkBuilder.Network.name);
 		}
 		index++;
-    }
+	}
 	return list;
 }
 
 function deviceFromName(what)
 {
-    if (puzzle == null) return null; //If the puzzle has not been set, return a null
+	if (puzzle == null) return null; //If the puzzle has not been set, return a null
 
-    let index=0;
+	let index=0;
-    while (index < puzzle.device.length) {
+	while (index < puzzle.device.length) {
 	if (puzzle.device[index].hostname == what) return puzzle.device[index]; //return the device that matches
 	index++;
-    }
+	}
-    return null; //No match.  return a null value
+	return null; //No match.  return a null value
 }
 
 function deviceFromID(what)
 {
-    if (puzzle == null) return null; //If the puzzle has not been set, return a null
+	if (puzzle == null) return null; //If the puzzle has not been set, return a null
 
-    let index=0;
+	let index=0;
-    while (index < puzzle.device.length) {
+	while (index < puzzle.device.length) {
 	if (puzzle.device[index].uniqueidentifier == what) return puzzle.device[index]; //return the device that matches
 	index++;
-    }
+	}
-    return null; //No match.  return a null value
+	return null; //No match.  return a null value
 }
 
 //return a list of all the ip addresses a device has
@@ -121,7 +121,7 @@ function ipsFromInterface(what, nictype) {
 		};
 		ipaddresses.push(one);
 		//console.log("found an ip object: " + JSON.stringify(one) + "  " + nictype);
-    }
+	}
 	return ipaddresses;
 }
 

Web/selectmenu.js

@@ -32,19 +32,19 @@ function InitializeSelectMenu() {
 
 function drawSelectMenu()
 {
-    //console.log("Printing on main canvass");
+	//console.log("Printing on main canvass");
 
-    MainCanvas_ctx.fillStyle = maincanvasBackground;
+	MainCanvas_ctx.fillStyle = maincanvasBackground;
-    MainCanvas_ctx.fillRect(0, 0, menuItemSize, MainCanvas.height);
+	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;
+	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);
+	MainCanvas_ctx.drawImage(cachedSelectMenuCanvas,0,selectedMenuYOffset,50,MainCanvas.height,0,0,50,MainCanvas.height);
-    let index = selectMenuNames.indexOf(selectedMenuItemName);
+	let index = selectMenuNames.indexOf(selectedMenuItemName);
 
-    if(index > -1)
+	if(index > -1)
-    {
+	{
 	//We have a selected menu item
 	const cachedSelectMenuCanvasOverlay = document.createElement('canvas');
 	let boxwidth=3;
@@ -59,60 +59,60 @@ function drawSelectMenu()
 	overlay.stroke();
 	MainCanvas_ctx.drawImage(cachedSelectMenuCanvasOverlay,0,selectedMenuYOffset,50,MainCanvas.height,0,0,50,MainCanvas.height);
 	//console.log("drawing select box around 0," + ty + " -> " + menuItemSize);
-    }
+	}
 
-    //Now, if we have more to the top or bottom, draw the arrows showing as much
+	//Now, if we have more to the top or bottom, draw the arrows showing as much
-    if(selectedMenuYOffset > (menuItemSize / 2))
+	if(selectedMenuYOffset > (menuItemSize / 2))
-    {
+	{
 	//We have one item above us.  Draw the arrow
 	//console.log("Drawing up arrow");
 	MainCanvas_ctx.drawImage(imageFromName("ArrowUp"),0,0,50,25);
-    }
+	}
-    //Now, if we have more to the top or bottom, draw the arrows showing as much
+	//Now, if we have more to the top or bottom, draw the arrows showing as much
-    if(selectedMenuYOffset + (MainCanvas.height + 25) < cachedSelectMenuCanvas.height) 
+	if(selectedMenuYOffset + (MainCanvas.height + 25) < cachedSelectMenuCanvas.height) 
-    {
+	{
 	//We have one item below us.  Draw the arrow
 	//console.log("Drawing down arrow");
 	MainCanvas_ctx.drawImage(imageFromName("ArrowDown"),0,MainCanvas.height - 25,50,25);
-    }
+	}
 }
 
 
 function SelectMenu_handleMouseDown(evt)
 {
-    mouseDownLocation = copyLocation(evt);
+	mouseDownLocation = copyLocation(evt);
-    mouseIsDown=true;
+	mouseIsDown=true;
 }
 
 function SelectMenu_handleMouseUp(evt)
 {
-    mouseIsDown=false;
+	mouseIsDown=false;
-    //console.log("mouseup");
+	//console.log("mouseup");
-    //See if we have a mouse click
+	//See if we have a mouse click
-    let deltaX = Math.abs(evt.pageX - mouseDownLocation.pageX);
+	let deltaX = Math.abs(evt.pageX - mouseDownLocation.pageX);
-    let deltaY = Math.abs(evt.pageY - mouseDownLocation.pageY);
+	let deltaY = Math.abs(evt.pageY - mouseDownLocation.pageY);
-    //console.log("delta " + deltaX + "," + deltaY);
+	//console.log("delta " + deltaX + "," + deltaY);
-    if(deltaY < 3 && deltaX <3)
+	if(deltaY < 3 && deltaX <3)
-    {
+	{
 	//We did not move much.  Assume click
 	if(evt.pageX <= menuItemSize && !mouseDidMovement)
 	{
-	    //We are in the item select menu.
+		//We are in the item select menu.
-	    let actualMenuLocation = selectedMenuYOffset + evt.pageY;
+		let actualMenuLocation = selectedMenuYOffset + evt.pageY;
-	    let newitemindex = Math.floor( actualMenuLocation / menuItemSize);
+		let newitemindex = Math.floor( actualMenuLocation / menuItemSize);
-	    console.log("clicked on item " + selectMenuNames[newitemindex]);
+		console.log("clicked on item " + selectMenuNames[newitemindex]);
-	    selectedMenuItemName = selectMenuNames[newitemindex];
+		selectedMenuItemName = selectMenuNames[newitemindex];
-	    drawSelectMenu();
+		drawSelectMenu();
 	}
-    }
+	}
-    mouseDidMovement=false; //reset it after we raise the button
+	mouseDidMovement=false; //reset it after we raise the button
 }
 
 
 function SelectMenu_handleMouseMove(evt)
 {
-    if(mouseIsDown)
+	if(mouseIsDown)
-    {
+	{
 	let deltaX = evt.pageX - mouseDownLocation.pageX;
 	let deltaY = evt.pageY - mouseDownLocation.pageY;
 	if(isNaN(deltaY)) deltaY=0;
@@ -123,7 +123,7 @@ function SelectMenu_handleMouseMove(evt)
 	mouseDownLocation = copyLocation(evt); //reset the pointer
 	drawSelectMenu();
 	mouseDidMovement=true;
-    }
+	}
 }
 
 function copyLocation({ pageX, pageY }) {

Web/textwindow.js

@@ -19,9 +19,9 @@ var cachedTextMenuCanvas = null;
 //Print the textmenu
 function textMenuPrint(TextToPrint, selectedindex = -1, highlightedindex = -1)
 {
-    //It would be nice to print it on top of whatever is currently there.
+	//It would be nice to print it on top of whatever is currently there.
-    //But we will do that later.
+	//But we will do that later.
-    PrintScreen(0); //Print the network, then we can lay over it
+	PrintScreen(0); //Print the network, then we can lay over it
 
 	if(cachedTextMenuCanvas == null)
 	{		
@@ -34,8 +34,8 @@ function textMenuPrint(TextToPrint, selectedindex = -1, highlightedindex = -1)
 	var rect;
 
 	//Fill in the background
-    cTMCctx.fillStyle = tmWindowBackground;
+	cTMCctx.fillStyle = tmWindowBackground;
-    cTMCctx.fillRect(0,0, cachedTextMenuCanvas.width, cachedTextMenuCanvas.height);
+	cTMCctx.fillRect(0,0, cachedTextMenuCanvas.width, cachedTextMenuCanvas.height);
 
 	//Put the X there so we can click on it
 	rect = makeRectangle(cachedTextMenuCanvas.width - tmScrollBarWidth, 0, tmScrollBarWidth, tmMenuBarHight, tmOutsideXMargin, tmOutsideYMargin);
@@ -49,7 +49,7 @@ function textMenuPrint(TextToPrint, selectedindex = -1, highlightedindex = -1)
 	//Put the X there so we can click on it
 	cTMCctx.drawImage(imageFromName("ArrowDown"),cachedTextMenuCanvas.width - tmScrollBarWidth,cachedTextMenuCanvas.height - tmMenuBarHight,tmScrollBarWidth,tmMenuBarHight);
 
-    //Create and Draw the menu bar
+	//Create and Draw the menu bar
 	cTMCctx.beginPath();
 	cTMCctx.moveTo(cachedTextMenuCanvas.width - tmScrollBarWidth,0);
 	cTMCctx.lineTo(cachedTextMenuCanvas.width - tmScrollBarWidth,cachedTextMenuCanvas.height);
@@ -125,9 +125,9 @@ function textMenuPrint(TextToPrint, selectedindex = -1, highlightedindex = -1)
 	//Write the text canvas on the main canvas.  If we are scrolled up or down, do that.
 	cTMCctx.drawImage(cachedTextMenuTextCanvas,0,0);
 	
-    //create and Draw the scroll-bar on the side
+	//create and Draw the scroll-bar on the side
-    //Then make the text if we have not done so
+	//Then make the text if we have not done so
-    //Finally print on top of the main canvas
+	//Finally print on top of the main canvas
 	MainCanvas_ctx.globalAlpha = 0.9; //some transparancy
 	MainCanvas_ctx.drawImage(cachedTextMenuCanvas,tmOutsideXMargin, tmOutsideYMargin)
 	MainCanvas_ctx.globalAlpha = 1; //reset transparancy
@@ -135,28 +135,28 @@ function textMenuPrint(TextToPrint, selectedindex = -1, highlightedindex = -1)
 
 
 function fragmentTextIntoLines(ctx, text, maxWidth) {
-    var words = text.split(" ");
+	var words = text.split(" ");
-    var lines = [];
+	var lines = [];
-    var currentLine = words[0];
+	var currentLine = words[0];
 
-    for (var i = 1; i < words.length; i++) {
+	for (var i = 1; i < words.length; i++) {
-        var word = words[i];
+		var word = words[i];
-        var width = ctx.measureText(currentLine + " " + word).width;
+		var width = ctx.measureText(currentLine + " " + word).width;
-        if (width < maxWidth) {
+		if (width < maxWidth) {
-            currentLine += " " + word;
+			currentLine += " " + word;
-        } else {
+		} else {
-            lines.push(currentLine);
+			lines.push(currentLine);
-            currentLine = word;
+			currentLine = word;
-        }
+		}
-    }
+	}
-    lines.push(currentLine);
+	lines.push(currentLine);
-    return lines;
+	return lines;
 }
 
 function TextWindow_handleMouseUp(evt)
 {
 	console.log("TextWindow Mouse Up");
-    //If we get here, it is a mouse-click event.  See if we are on the X
+	//If we get here, it is a mouse-click event.  See if we are on the X
 	if(mouseDownLocation.pageX + tmScrollBarWidth >= cachedTextMenuCanvas.width - tmScrollBarWidth)
 	{
 			console.log("TextWindow Mouse Up - X fits");
@@ -188,7 +188,7 @@ function TextWindow_handleMouseUp(evt)
 			}
 		}
 	}
-    mouseDidMovement=false; //reset it after we raise the button
+	mouseDidMovement=false; //reset it after we raise the button
 }
 
 function textwindow_XClick(point, object) {

Web/ui.js

@@ -29,7 +29,7 @@ const imageCollection = loadImages(
 		"tablet", "tree", "vidimage",
 		"wap", "wbridge", "wrepeater",
 		"wrouter", "x", "info", "menu",
-		"eye", "queryuser",
+		"eye", "queryuser", "thumb",
 	],
 	["img/ArrowUp.png", "img/ArrowDown.png", "img/Animations.png",
 		"img/BurnMark.png", "img/cellphone.png", "img/Circle.png",
@@ -42,56 +42,56 @@ const imageCollection = loadImages(
 		"img/VidImage.png", "img/WAP.png", "img/WBridge.png",
 		"img/WRepeater.png", "img/WRouter.png", "img/X.png",
 		"img/info.png", "img/menu.png", "img/eye.png",
-		"img/menu.png",
+		"img/menu.png", "img/thumb.png",
 	],
-    InitializeGameMenu  // this is called when all images have loaded.
+	InitializeGameMenu  // this is called when all images have loaded.
 );
 
 var menuItemSize=50;
 
 
 function loadImages(names, files, onAllLoaded) {
-    var i = 0, numLoading = names.length;
+	var i = 0, numLoading = names.length;
-    const onload = () => --numLoading === 0 && onAllLoaded();
+	const onload = () => --numLoading === 0 && onAllLoaded();
-    const images = {};
+	const images = {};
-    while (i < names.length) {
+	while (i < names.length) {
-        const img = images[names[i]] = new Image;
+		const img = images[names[i]] = new Image;
-        img.src = files[i++];
+		img.src = files[i++];
-        img.onload = onload;
+		img.onload = onload;
-    }
+	}
-    return images;
+	return images;
 }
 
 function imageFromName(name)
 {
-    return imageCollection[name];
+	return imageCollection[name];
 }
 
 function InitializeGameMenu()
 {
-    console.log("Initializing");
+	console.log("Initializing");
-    MainCanvas.addEventListener("touchstart", handleTouchStart);
+	MainCanvas.addEventListener("touchstart", handleTouchStart);
-    MainCanvas.addEventListener("touchend", handleTouchEnd);
+	MainCanvas.addEventListener("touchend", handleTouchEnd);
-    MainCanvas.addEventListener("touchcancel", handleTouchCancel);
+	MainCanvas.addEventListener("touchcancel", handleTouchCancel);
-    MainCanvas.addEventListener("touchmove", handleTouchMove);
+	MainCanvas.addEventListener("touchmove", handleTouchMove);
-    MainCanvas.addEventListener('mousedown',handleMouseDown);
+	MainCanvas.addEventListener('mousedown',handleMouseDown);
-    MainCanvas.addEventListener('mouseup',handleMouseUp);
+	MainCanvas.addEventListener('mouseup',handleMouseUp);
-    MainCanvas.addEventListener('mousemove',handleMouseMove);
+	MainCanvas.addEventListener('mousemove',handleMouseMove);
 
-    //MainCanvas_ctx.drawImage(imageCollection['router'],100,100,50,50);
+	//MainCanvas_ctx.drawImage(imageCollection['router'],100,100,50,50);
-    //MainCanvas_ctx.drawImage(imageCollection['firewall'],150,150,50,50);
+	//MainCanvas_ctx.drawImage(imageCollection['firewall'],150,150,50,50);
 
 	InitializeSelectMenu();
-    //It should be printed
+	//It should be printed
-    PrintScreen();
+	PrintScreen();
 }
 
 //Print the screen.  Figure out what needs to be printed based on the mode
 function PrintScreen(WhatPassedIn=-1)
 {
 //allow us to override what is printed
-    var what=uiMode;
+	var what=uiMode;
-    if(WhatPassedIn >=0) what=WhatPassedIn;
+	if(WhatPassedIn >=0) what=WhatPassedIn;
 
 	//Clear out any old ActionStructs.  They will get filled in as we print the screen.
 	clearActionStructs();
@@ -99,8 +99,8 @@ function PrintScreen(WhatPassedIn=-1)
 	console.log("PrintingScreen for mode: " + what);
 	var rect;
 
-    if(what == 0)
+	if(what == 0)
-    {
+	{
 		//The network drawing mode.  Print the network
 		//Clear the old screen
 		MainCanvas_ctx.fillStyle = maincanvasBackground;
@@ -123,7 +123,7 @@ function PrintScreen(WhatPassedIn=-1)
 				MainCanvas_ctx.stroke();
 				MainCanvas_ctx.lineWidth = oldWidth;
 				MainCanvas_ctx.strokeStyle = "black";
-            }
+			}
 			MainCanvas_ctx.globalAlpha = 1.0; //reset
 			MainCanvas_ctx.fillStyle = "black"; //reset
 			ui_HadHighlight = true;
@@ -164,33 +164,33 @@ function PrintScreen(WhatPassedIn=-1)
 
 function handleTouchStart(evt)
 {
-    handleMouseDown(copyLocation(evt));
+	handleMouseDown(copyLocation(evt));
 }
 function handleTouchEnd(evt)
 {
-    handleMouseUp(copyLocation(evt));
+	handleMouseUp(copyLocation(evt));
 }
 function handleTouchCancel(evt)
 {
-    evt.preventDefault();
+	evt.preventDefault();
-    console.log("canceling touch");
+	console.log("canceling touch");
 }
 function handleTouchMove(evt)
 {
-    //evt.preventDefault();
+	//evt.preventDefault();
-    if(evt.touches.length > 0)
+	if(evt.touches.length > 0)
-    {
+	{
-    handleMouseMove(copyLocation(evt.touches[0]));
+	handleMouseMove(copyLocation(evt.touches[0]));
-    } else{
+	} else{
-    //console.log("not enough touches");
+	//console.log("not enough touches");
-    }
+	}
-    //console.log("moving touch");
+	//console.log("moving touch");
 }
 function handleMouseDown(evt)
 {
-    mouseDownLocation = copyLocation(evt);
+	mouseDownLocation = copyLocation(evt);
-    mouseIsDown=true;
+	mouseIsDown=true;
-    //console.log("mousedown");
+	//console.log("mousedown");
 	if(uiMode==0) SelectMenu_handleMouseDown(mouseDownLocation);
 }
 
@@ -269,14 +269,14 @@ function distance(x1, y1, x2, y2) {
 
 function handleMouseUp(evt)
 {
-    //evt.preventDefault();
+	//evt.preventDefault();
-    mouseIsDown=false;
+	mouseIsDown=false;
-    //See if we have a mouse click
+	//See if we have a mouse click
-    let deltaX = Math.abs(evt.pageX - mouseDownLocation.pageX);
+	let deltaX = Math.abs(evt.pageX - mouseDownLocation.pageX);
-    let deltaY = Math.abs(evt.pageY - mouseDownLocation.pageY);
+	let deltaY = Math.abs(evt.pageY - mouseDownLocation.pageY);
-    //console.log("delta " + deltaX + "," + deltaY);
+	//console.log("delta " + deltaX + "," + deltaY);
-    if(deltaY < 3 && deltaX <3)
+	if(deltaY < 3 && deltaX <3)
-    {
+	{
 		//We did not move much.  Assume click
 		if(evt.pageX <= menuItemSize && !mouseDidMovement)
 		{
@@ -293,8 +293,8 @@ function handleMouseUp(evt)
 			else if(uiMode==2) TextWindow_handleMouseUp(evt);
 		}
 		
-    }
+	}
-    mouseDidMovement=false; //reset it after we raise the button
+	mouseDidMovement=false; //reset it after we raise the button
 }
 
 function ui_PuzzleChoiceMenuLeftClick(evt) {
@@ -321,9 +321,9 @@ function ui_InfoLeftClick(evt) {
 
 function handleMouseMove(evt)
 {
-    //evt.preventDefault();
+	//evt.preventDefault();
-    if(mouseIsDown)
+	if(mouseIsDown)
-    {
+	{
 		let deltaX = evt.pageX - mouseDownLocation.pageX;
 		let deltaY = evt.pageY - mouseDownLocation.pageY;
 		if(isNaN(deltaY)) deltaY=0;
@@ -355,7 +355,7 @@ function handleMouseMove(evt)
 			if (needrefresh) {
 				PrintScreen();
 			}
-        }
+		}
 		if(uiMode==2)
 		{
 			textMenu_HandleMouseMove(evt);
@@ -371,9 +371,9 @@ function copyLocation({ pageX, pageY }) {
 
 function PrintNetworkLink(linkToPrint)
 {
-    //We should have passed in a working link, make sure it exists
+	//We should have passed in a working link, make sure it exists
-    if(linkToPrint !== null)
+	if(linkToPrint !== null)
-    {
+	{
 		if(linkToPrint.SrcNic !== null && linkToPrint.DestNic !== null)
 		{
 			//console.log("printing link from " + linkToPrint.SrcNic.hostname);
@@ -403,9 +403,9 @@ function PrintNetworkLink(linkToPrint)
 
 function PrintAllNetworkLinks()
 {
-    if (puzzle == null) return; //If the puzzle has not been set, exit
+	if (puzzle == null) return; //If the puzzle has not been set, exit
 
-    let index=0;
+	let index=0;
 	if(puzzle.link !== null && typeof(puzzle.link) === "object")
 	{
 		while (index < puzzle.link.length) {
@@ -417,9 +417,9 @@ function PrintAllNetworkLinks()
 
 function PrintNetworkDevice(ToPrint)
 {
-    //We should have passed in a working device, make sure it exists
+	//We should have passed in a working device, make sure it exists
-    if(ToPrint !== null)
+	if(ToPrint !== null)
-    {
+	{
 		var rect = deviceRectangle(ToPrint);
 		var actionrect = makeRectangle(rect.spoint.x, rect.spoint.y, rect.width, rect.height);
 
@@ -465,22 +465,22 @@ function PrintNetworkDevice(ToPrint)
 							delta = printCenteredText(MainCanvas_ctx, mystring, xpoint, ystart);
 							ystart += (delta / 2);
 							break;
-                    }
+					}
-                }
+				}
 				break;
-        }
+		}
-    }
+	}
 }
 
 function PrintAllNetworkDevices()
 {
-    if (puzzle == null) return; //If the puzzle has not been set, exit
+	if (puzzle == null) return; //If the puzzle has not been set, exit
 
-    let index=0;
+	let index=0;
-    while (index < puzzle.device.length) {
+	while (index < puzzle.device.length) {
 	PrintNetworkDevice(puzzle.device[index]);
-        index++;
+		index++;
-    }
+	}
 }
 
 //print centered text.  We use y as the top-most y position.  But we center around the x position
@@ -507,50 +507,50 @@ function printCenteredText(canvas_context, text, centerx, top_y, font = "15px se
 
 function convertXYPointToActual(point)
 {
-    //We have an x and y coordinate which needs to be converted to the canvas size
+	//We have an x and y coordinate which needs to be converted to the canvas size
-    var deltax = (MainCanvas.width - menuItemSize) / puzzle.width;
+	var deltax = (MainCanvas.width - menuItemSize) / puzzle.width;
-    var deltay = MainCanvas.height / puzzle.height;
+	var deltay = MainCanvas.height / puzzle.height;
-    
+	
    return newPointFromPair((point.x * deltax) + menuItemSize, point.y * deltay);
 }
 
 function convertXYpairToActual(x,y)
 {
-    return convertXYPointToActual(newPointFromPair(x,y));
+	return convertXYPointToActual(newPointFromPair(x,y));
 }
 
 function newPointFromPair(x,y)
 {
-    var point = { 
+	var point = { 
 	'x' : Math.floor(x),
 	'y' : Math.floor(y)
 	}
-    return point;
+	return point;
 }
 
 function newPointFromString(pointasstring)
 {
-    if(typeof(pointasstring) == "string")
+	if(typeof(pointasstring) == "string")
-    {
+	{
 	var tarray=pointasstring.split(",");
 	return newPointFromPair(Number(tarray[0]),Number(tarray[1]));
-    }
+	}
 }
 
 //return a rectangle for the device
 function deviceRectangle(theDevice)
 {
-    var centerpoint = convertXYPointToActual(newPointFromString(theDevice.location));
+	var centerpoint = convertXYPointToActual(newPointFromString(theDevice.location));
-    var delta = imageSize / 2;
+	var delta = imageSize / 2;
 
-    var rect = { 
+	var rect = { 
 		spoint : newPointFromPair(centerpoint.x-delta, centerpoint.y-delta),
 		height : imageSize,
 		width : imageSize,
 		epoint : newPointFromPair(centerpoint.x + delta, centerpoint.y + delta),
 		center: centerpoint,
 	}
-    return rect;
+	return rect;
 }
 
 function makeRectangle(x1, y1, deltax, deltay, offsetx = 0, offsety = 0) {