Most of the mouse-over highlighting is working properly

Web/textwindow.js

@@ -31,13 +31,17 @@ function textMenuPrint(TextToPrint, selectedindex = -1, highlightedindex = -1)
 	}
 	//If we get here, it is already created.  Get the context
 	var cTMCctx = cachedTextMenuCanvas.getContext('2d');
+	var rect;
 
 	//Fill in the background
     cTMCctx.fillStyle = tmWindowBackground;
     cTMCctx.fillRect(0,0, cachedTextMenuCanvas.width, cachedTextMenuCanvas.height);
 
 	//Put the X there so we can click on it
-	cTMCctx.drawImage(imageFromName("x"),cachedTextMenuCanvas.width - tmScrollBarWidth,0,tmScrollBarWidth,tmMenuBarHight);
+	rect = makeRectangle(cachedTextMenuCanvas.width - tmScrollBarWidth, 0, tmScrollBarWidth, tmMenuBarHight, tmOutsideXMargin, tmOutsideYMargin);
+	cTMCctx.drawImage(imageFromName("x"), rect.sx, rect.sy, rect.deltax, rect.deltay);
+	registerActionStruct("square", rect, null, textwindow_XClick);
+
 
 	//Put the DownArrow there so we can click on it
 	cTMCctx.drawImage(imageFromName("ArrowUp"),cachedTextMenuCanvas.width - tmScrollBarWidth,tmMenuBarHight,tmScrollBarWidth,tmMenuBarHight);
@@ -165,15 +169,7 @@ function TextWindow_handleMouseUp(evt)
 
 			//We clicked the X
 			
-			//Dispose of the text window
-			uiMode=0;
-			
-			//dispose of temp canvas; will recreate later if needed			
-			cachedTextMenuCanvas = null;
-			cachedTextMenuTextCanvas = null;
-			
-			//Redraw the screen
-			PrintScreen();
+			textwindow_XClick();
 		}
 	}
 	else
@@ -195,6 +191,19 @@ function TextWindow_handleMouseUp(evt)
     mouseDidMovement=false; //reset it after we raise the button
 }
 
+function textwindow_XClick(point, object) {
+	//When the x is clicked, we do not care about the position or object.  There is no object
+	//Dispose of the text window
+	uiMode = 0;
+
+	//dispose of temp canvas; will recreate later if needed			
+	cachedTextMenuCanvas = null;
+	cachedTextMenuTextCanvas = null;
+
+	//Redraw the screen
+	PrintScreen();
+}
+
 function PrintPuzzleSelectMenu(level=0)
 {
 	var levellist=networkNamesMatchingText("Level"+level);

Web/ui.js

@@ -10,6 +10,9 @@ var mouseDidMovement=false;
 var imageSize=40;
 var small_button_size = 20;
 var uiDeviceInfoLevel = 1; //What do we display when we look at the network
+var uiActions = [];//a list of things on the screen we can click on or process.
+var ui_highlightRect = null;
+var ui_HadHighlight = false;
 
 //The user interface mode.  0=network, 1=network information, 2=puzzle-selection menu
 var uiMode=1;
@@ -25,7 +28,9 @@ const imageCollection = loadImages(
 		"shapes", "square", "switch",
 		"tablet", "tree", "vidimage",
 		"wap", "wbridge", "wrepeater",
-		"wrouter", "x", "info", "menu"],
+		"wrouter", "x", "info", "menu",
+		"eye", "queryuser",
+	],
 	["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",
@@ -36,7 +41,9 @@ const imageCollection = loadImages(
 		"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"],
+		"img/info.png", "img/menu.png", "img/eye.png",
+		"img/menu.png",
+	],
     InitializeGameMenu  // this is called when all images have loaded.
 );
 
@@ -86,37 +93,73 @@ function PrintScreen(WhatPassedIn=-1)
     var what=uiMode;
     if(WhatPassedIn >=0) what=WhatPassedIn;
 
+	//Clear out any old ActionStructs.  They will get filled in as we print the screen.
+	clearActionStructs();
+
 	console.log("PrintingScreen for mode: " + what);
+	var rect;
 
     if(what == 0)
     {
-	//The network drawing mode.  Print the network
-	//Clear the old screen
-	MainCanvas_ctx.fillStyle = maincanvasBackground;
-    MainCanvas_ctx.fillRect(0,0, MainCanvas.width, MainCanvas.height);
+		//The network drawing mode.  Print the network
+		//Clear the old screen
+		MainCanvas_ctx.fillStyle = maincanvasBackground;
+		MainCanvas_ctx.fillRect(0, 0, MainCanvas.width, MainCanvas.height);
 
-	//Draw the puzzle-select button
+		//Do any highlight we need to
+		if (ui_highlightRect !== null) {
+			//console.log("trying to highlight something: " + JSON.stringify(ui_highlightRect));
+			MainCanvas_ctx.fillStyle = "white";
+			MainCanvas_ctx.globalAlpha = 0.3; //mostly transparent
+			if (ui_highlightRect.shapeText == "square")
+				MainCanvas_ctx.fillRect(ui_highlightRect.sx, ui_highlightRect.sy, ui_highlightRect.deltax, ui_highlightRect.deltay);
+			else if (ui_highlightRect.shapeText == "line") {
+				var oldWidth = MainCanvas_ctx.lineWidth;
+				MainCanvas_ctx.lineWidth += 4;
+				MainCanvas_ctx.strokeStyle = "white";
+				MainCanvas_ctx.beginPath();
+				MainCanvas_ctx.moveTo(ui_highlightRect.sx, ui_highlightRect.sy);
+				MainCanvas_ctx.lineTo(ui_highlightRect.dx, ui_highlightRect.dy);
+				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;
+		}
+		else ui_HadHighlight = false;
+
+		//Draw the puzzle-select button
 		//Put the X there so we can click on it
-	MainCanvas_ctx.drawImage(imageFromName("menu"),MainCanvas.width - small_button_size,0,small_button_size,small_button_size);
+		rect = makeRectangle(MainCanvas.width - small_button_size, 0, small_button_size, small_button_size);
+		MainCanvas_ctx.drawImage(imageFromName("menu"),rect.sx,rect.sy,rect.deltax,rect.deltay);
+		registerActionStruct("square", rect, null, ui_PuzzleChoiceMenuLeftClick, null, generic_mouseoverHighlight);
 
-	//Draw the info button
-	MainCanvas_ctx.drawImage(imageFromName("info"),MainCanvas.width - small_button_size,small_button_size,small_button_size,small_button_size);
+		//Draw the info button
+		rect = makeRectangle(MainCanvas.width - small_button_size, small_button_size, small_button_size, small_button_size);
+		MainCanvas_ctx.drawImage(imageFromName("info"), rect.sx, rect.sy, rect.deltax, rect.deltay);
+		registerActionStruct("square", rect, null, ui_InfoLeftClick, null, generic_mouseoverHighlight);
 
-	drawSelectMenu();
-	PrintAllNetworkLinks();
-	PrintAllNetworkDevices();
-    }
-    else if(what == 1) //PuzzleDescription/Info
-    {
+		//Draw the eye button
+		rect = makeRectangle(MainCanvas.width - small_button_size, small_button_size * 2, small_button_size, small_button_size);
+		MainCanvas_ctx.drawImage(imageFromName("eye"), rect.sx, rect.sy, rect.deltax, rect.deltay);
+		registerActionStruct("square", rect, null, ui_eyeLeftClick, null, generic_mouseoverHighlight);
+
+		drawSelectMenu();
+		PrintAllNetworkLinks();
+		PrintAllNetworkDevices();
+	}
+	else if(what == 1) //PuzzleDescription/Info
+	{
 	//Display the text about the puzzle
 	textMenuPrint(puzzle.en_message);
-    }
-    else if(what == 2) //PuzzleSelect
-    {
+	}
+	else if(what == 2) //PuzzleSelect
+	{
 	//TextMenuSelection
 	PrintPuzzleSelectMenu(0);
-    }
-	
+	}
 }
 
 function handleTouchStart(evt)
@@ -151,6 +194,79 @@ function handleMouseDown(evt)
 	if(uiMode==0) SelectMenu_handleMouseDown(mouseDownLocation);
 }
 
+function CheckForActions(actionPoint, action) {
+	if (uiActions.length >= 0) {
+		var checkit = false;
+		var inside = false;
+		for (var index = 0; index < uiActions.length; index++) {
+			if (action == "leftclick" && uiActions[index].funcLeftClick !== null) checkit = true;
+			if (action == "rightclick" && uiActions[index].funcRightClick !== null) checkit = true;
+			if (action == "mouseover" && uiActions[index].funcMouseover !== null) checkit = true;
+			checklocation = uiActions[index];
+			var point = newPointFromPair(actionPoint.pageX - checklocation.shapePoints.offsetx, actionPoint.pageY - checklocation.shapePoints.offsety);
+			if (checkit) {
+				//See if the click is inside the shape
+				if (checklocation.shapeText == "square") {
+					if (pointInRect(point, checklocation.shapePoints))
+						inside = true;
+				}
+				if (checklocation.shapeText == "line") {
+					if (pointInRect(point, checklocation.shapePoints)) {
+						//console.log("inside line square");
+						//We are inside the box.  Now determine if we are on the line...
+						var d1 = distance(checklocation.shapePoints.sx, checklocation.shapePoints.sy, actionPoint.pageX, actionPoint.pageY);
+						d1 += distance(checklocation.shapePoints.dx, checklocation.shapePoints.dy, actionPoint.pageX, actionPoint.pageY);
+						var d2 = distance(checklocation.shapePoints.sx, checklocation.shapePoints.sy, checklocation.shapePoints.dx, checklocation.shapePoints.dy);
+						if (Math.abs(d1 - d2) < 3) {
+							inside = true;
+							//console.log("on a line!");
+						}
+					}
+				}
+
+			}
+			if (inside) {
+				//console.log("Is inside");
+				switch (action) {
+					case "leftclick":
+						if (checklocation.funcLeftClick != null) {
+							checklocation.funcLeftClick(actionPoint, checklocation);
+							//console.log("Successfully did a UI action");
+							return true;
+						}
+						break;
+					case "mouseover":
+						if (checklocation.funcMouseover != null) {
+							checklocation.funcMouseover(actionPoint, checklocation);
+							//console.log("Successfully did a UI action");
+							return true;
+						}
+						break;
+				}
+			}
+		}
+	}
+	return false;
+}
+
+function pointInRect(point, rectangle) {
+	if (point.x  >= Math.min(rectangle.sx,rectangle.dx)) {
+		if (point.x <= Math.max(rectangle.sx, rectangle.dx)) {
+			if (point.y >= Math.min(rectangle.sy, rectangle.dy)) {
+				if (point.y <= Math.max(rectangle.sy, rectangle.dy)) {
+					return true;
+				}
+			}
+		}
+	}
+	return false;
+}
+
+//return the distance between two points
+function distance(x1, y1, x2, y2) {
+	return Math.hypot(x2 - x1, y2 - y1);
+}
+
 function handleMouseUp(evt)
 {
     //evt.preventDefault();
@@ -170,59 +286,83 @@ function handleMouseUp(evt)
 		}
 		if(!mouseDidMovement)
 		{ //If we are not dragging, it is a click
+			var myevt = copyLocation(evt);
+			//console.log("evt:" + JSON.stringify(myevt));
+			if (CheckForActions(myevt, "leftclick")) return; //If we did this, do not do anything else.
 			if(uiMode==1) TextWindow_handleMouseUp(evt);
 			else if(uiMode==2) TextWindow_handleMouseUp(evt);
-			else if(uiMode==0 && evt.pageX >= MainCanvas.width - small_button_size)
-			{
-					console.log("clicked far enough x wise");
-				//We may be clicking on one of the small buttons
-				if(evt.pageY < small_button_size) 
-				{
-					//We clicked on the puzzle-select menu
-					console.log("PuzzleSelect pressed");
-					uiMode=2;
-					PrintScreen();
-				} else if(evt.pageY < small_button_size *2)
-				{
-					console.log("Selected info button");
-					//It is the info button
-					uiMode=1;
-					PrintScreen();
-				}
-			}
 		}
 		
     }
     mouseDidMovement=false; //reset it after we raise the button
 }
 
+function ui_PuzzleChoiceMenuLeftClick(evt) {
+	//We clicked on the puzzle-select menu
+	console.log("PuzzleSelect pressed in action");
+	uiMode = 2;
+	PrintScreen();
+}
+
+function ui_eyeLeftClick(evt) {
+	console.log("Selected 'eye' button in action");
+	//It is the eye button
+	uiDeviceInfoLevel++;
+	if (uiDeviceInfoLevel > 3) uiDeviceInfoLevel = 0;
+	PrintScreen();
+}
+
+function ui_InfoLeftClick(evt) {
+	console.log("Selected info button in action");
+	//It is the info button
+	uiMode = 1;
+	PrintScreen();
+}
 
 function handleMouseMove(evt)
 {
     //evt.preventDefault();
     if(mouseIsDown)
     {
-	let deltaX = evt.pageX - mouseDownLocation.pageX;
-	let deltaY = evt.pageY - mouseDownLocation.pageY;
-	if(isNaN(deltaY)) deltaY=0;
-	if(isNaN(deltaX)) deltaX=0;
-	//we are dragging
-	//console.log('mousemove ' + evt.pageX + " " + evt.pageY + "  delta " + deltaY );
-	if(uiMode == 0)
-	{
-		SelectMenu_handleMouseMove(evt);
-	}
+		let deltaX = evt.pageX - mouseDownLocation.pageX;
+		let deltaY = evt.pageY - mouseDownLocation.pageY;
+		if(isNaN(deltaY)) deltaY=0;
+		if(isNaN(deltaX)) deltaX=0;
+		//we are dragging
+		//console.log('mousemove ' + evt.pageX + " " + evt.pageY + "  delta " + deltaY );
+		if(uiMode == 0)
+		{
+			SelectMenu_handleMouseMove(evt);
+		}
 		
-	mouseDidMovement=true;
-    }
+		mouseDidMovement=true;
+	}
 	else //Mouse is not down.  Not dragging
 	{
+		var needrefresh = false;
+		var oldRect = structuredClone(ui_highlightRect);
+		if (!CheckForActions(evt, "mouseover")) {
+			//We did not find anything
+			if (JSON.stringify(ui_highlightRect) === JSON.stringify(oldRect)) {
+
+			}
+			else {
+				//console.log("Rects are not equal:" + JSON.stringify(ui_highlightRect) + " - " + JSON.stringify(oldRect) )
+				needrefresh = true;
+			}
+			ui_highlightRect = null; //nothing to highlight
+			if (ui_HadHighlight) { needrefresh = true; }
+			if (needrefresh) {
+				PrintScreen();
+			}
+        }
 		if(uiMode==2)
 		{
 			textMenu_HandleMouseMove(evt);
 		}
 
 	}
+	return;
 }
 
 function copyLocation({ pageX, pageY }) {
@@ -234,25 +374,31 @@ function PrintNetworkLink(linkToPrint)
     //We should have passed in a working link, make sure it exists
     if(linkToPrint !== null)
     {
-	if(linkToPrint.SrcNic !== null && linkToPrint.DestNic !== null)
-	{
-	    //console.log("printing link from " + linkToPrint.SrcNic.hostname);
-	    sdevice = deviceFromID(linkToPrint.SrcNic.hostid);
-	    ddevice = deviceFromID(linkToPrint.DstNic.hostid);
-	    if(sdevice !== null && ddevice !== null)
-	    {
-		//We have an existing link with two devices.  Find the device locations and print
-		var spoint = convertXYPointToActual(newPointFromString(sdevice.location));
-		var dpoint = convertXYPointToActual(newPointFromString(ddevice.location));
+		if(linkToPrint.SrcNic !== null && linkToPrint.DestNic !== null)
+		{
+			//console.log("printing link from " + linkToPrint.SrcNic.hostname);
+			sdevice = deviceFromID(linkToPrint.SrcNic.hostid);
+			ddevice = deviceFromID(linkToPrint.DstNic.hostid);
+			if(sdevice !== null && ddevice !== null)
+			{
+				//We have an existing link with two devices.  Find the device locations and print
+				var spoint = convertXYPointToActual(newPointFromString(sdevice.location));
+				var dpoint = convertXYPointToActual(newPointFromString(ddevice.location));
 
-		//Now we draw a line between them
-		MainCanvas_ctx.beginPath();
-		MainCanvas_ctx.moveTo(spoint.x,spoint.y);
-		MainCanvas_ctx.lineTo(dpoint.x,dpoint.y);
-		MainCanvas_ctx.stroke();
-	    }
+				//Make an actionstruct
+				var actionLine = makeLine(spoint.x, spoint.y, dpoint.x, dpoint.y);
+				registerActionStruct("line", actionLine, linkToPrint, null, null, generic_mouseoverHighlight);
+
+				var old
+				//Now we draw a line between them
+				MainCanvas_ctx.beginPath();
+				MainCanvas_ctx.moveTo(spoint.x,spoint.y);
+				MainCanvas_ctx.lineTo(dpoint.x,dpoint.y);
+				MainCanvas_ctx.stroke();
+			}
+		}
 	}
-    }
+
 }
 
 function PrintAllNetworkLinks()
@@ -275,18 +421,22 @@ function PrintNetworkDevice(ToPrint)
     if(ToPrint !== null)
     {
 		var rect = deviceRectangle(ToPrint);
+		var actionrect = makeRectangle(rect.spoint.x, rect.spoint.y, rect.width, rect.height);
+
 		var dname = ToPrint.mytype;
 		if(dname=="net_switch") dname="switch";	
 		if(dname=="net_hub") dname="hub";	
 		//console.log("printing device " + dname);
 		MainCanvas_ctx.drawImage(imageFromName(dname), rect.spoint.x, rect.spoint.y, rect.width, rect.height);
+		registerActionStruct("square", actionrect, ToPrint, null, null, generic_mouseoverHighlight);
+
 		//Now, we see if we need to print the name, or a list of IPs..
 		var xpoint = rect.center.x;
 		var ystart = rect.epoint.y; //the bottom-most Y point
 		var gap = 3;
 		var delta;
 		var ipaddresses = ipsFromDevice(ToPrint);
-		console.log("addresses: " + JSON.stringify(ipaddresses));
+		//console.log("addresses: " + JSON.stringify(ipaddresses));
 		switch (uiDeviceInfoLevel) {
 			case 0:
 				//Do not print anything
@@ -297,7 +447,7 @@ function PrintNetworkDevice(ToPrint)
 				break;
 			case 2:
 			case 3:
-				console.log("printing device " + ToPrint.hostname);
+				//console.log("printing device " + ToPrint.hostname);
 				//Print both the name and the IP addresses
 				if (uiDeviceInfoLevel == 2) {
 					delta = printCenteredText(MainCanvas_ctx, ToPrint.hostname, xpoint, ystart) + gap;
@@ -306,11 +456,11 @@ function PrintNetworkDevice(ToPrint)
 				//print the ip addresses
 				for (var x = 0; x < ipaddresses.length; x++) {
 					//Print the IP address if the type is correct.
-					console.log(JSON.stringify(ipaddresses[x]));
+					//console.log(JSON.stringify(ipaddresses[x]));
 					switch (ipaddresses[x].nictype) {
 						case "eth":
 						case "management_interface":
-							console.log("Found a " + ipaddresses[x].nictype)
+							//console.log("Found a " + ipaddresses[x].nictype)
 							let mystring = ipaddresses[x].cidrip;
 							delta = printCenteredText(MainCanvas_ctx, mystring, xpoint, ystart);
 							ystart += (delta / 2);
@@ -402,3 +552,73 @@ function deviceRectangle(theDevice)
 	}
     return rect;
 }
+
+function makeRectangle(x1, y1, deltax, deltay, offsetx = 0, offsety = 0) {
+	//The offset is for when we are drawing on a cached surface.  It adds x or y to the point we are looking at
+	var struct = {
+		sx: x1,
+		sy: y1,
+		dx: x1 + deltax,
+		dy: y1 + deltay,
+		deltay: deltay,
+		deltax: deltax,
+		offsetx: offsetx,
+		offsety: offsety,
+	}
+	return struct;
+}
+
+function makeLine(x1, y1, x2, y2, offsetx = 0, offsety = 0) {
+	var linestruct = makeRectangle(x1, y1, x2 - x1, y2 - y1, offsetx, offsety);
+	//console.log("Creating a line: " + JSON.stringify(linestruct));
+	return linestruct;
+}
+
+//Make a structure to hold all our data
+function actionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null, funcRightClick=null, funcMouseover=null) {
+	var struct = {
+		shapeText: shapeText,
+		shapePoints: structuredClone(shapePoints),
+		theObject: theObject,
+		funcLeftClick: funcLeftClick,
+		funcRightClick: funcRightClick,
+		funcMouseover: funcMouseover,
+	}
+	shapePoints.shapeText = shapeText;
+	return struct;
+}
+
+function registerActionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null, funcRightClick=null, funcMouseover=null) {
+	//Make an object with all the data
+	var what = actionStruct(shapeText, shapePoints, theObject, funcLeftClick, funcRightClick, funcMouseover);
+	//console.log("Pushing an action: " + shapeText);
+	//Push it onto the uiActions list
+	uiActions.unshift(what); //Put it at the beginning of the list
+	//console.log("ActionList: " + JSON.stringify(uiActions));
+}
+
+function clearActionStructs() {
+	uiActions = [];
+}
+
+//This takes generic information for us to highlight the background
+function generic_mouseoverHighlight(point, actionrec) {
+	//console.log("Found highlight " + JSON.stringify(actionrec));
+	//The point is the place where the mouse is, but the actionrec.shapePoints is the rectangle (or shape) we want to highlight
+	var oldrec = structuredClone(ui_highlightRect);
+	if (actionrec.shapeText == "square") {
+		ui_highlightRect = structuredClone(actionrec.shapePoints);
+		ui_highlightRect.shapeText = "square";
+		//console.log("setting highlights to:" + JSON.stringify(ui_highlightRect));
+	}
+	if (actionrec.shapeText == "line") {
+		ui_highlightRect = structuredClone(actionrec.shapePoints);
+		ui_highlightRect.shapeText = "line";
+		//console.log("setting highlights to:" + JSON.stringify(ui_highlightRect));
+	}
+	if (JSON.stringify(ui_highlightRect) === JSON.stringify(oldrec)) {
+		//they are the same.  Nothing to do
+	}
+	else
+		PrintScreen();  //two different areas.  Need to print the screen
+}