Devices with problems properly have red background

Web/network.js

@@ -1,6 +1,10 @@
 //This file contains the information about the puzzle (network)
 //Each puzzle is stored in the allpuzzles variable.  We need to select one and use it
 
+//We define this here, even though it is used primarily in the UI.  We define its values here
+var ui_helplevel = 0;
+
+
 var puzzle=networkFromName("Level0-Ping");
 //var puzzle=networkFromName("Level0-NeedsLink");
 //var puzzle=networkFromName("Level0_NetworkLoop");
@@ -32,7 +36,7 @@ function networkFromName(what)
 	if(allpuzzles[index].EduNetworkBuilder.Network.name == what)
 	{
 		console.log("Found " + what + " at index " + index);
-		return structuredClone(allpuzzles[index].EduNetworkBuilder.Network);
+		return networkFromIndex(index);
 	}
 	index++;
 	}
@@ -40,11 +44,43 @@ function networkFromName(what)
 function networkFromIndex(what)
 {
 	if(typeof(what)==="number" && what >= 0 && what < allpuzzles.length){		
-		return structuredClone(allpuzzles[what].EduNetworkBuilder.Network);
+		var newitem = structuredClone(allpuzzles[what].EduNetworkBuilder.Network);
+		console.log("It is an array:" + Array.isArray(newitem.nettest));
+		if (!Array.isArray(newitem.nettest)) {
+			var oneitem = newitem.nettest; //this is an object
+			newitem.nettest = [];
+			newitem.nettest.push(oneitem); //make it an one-item array.
+        }
+
+		//Set the help level to be whatever we need
+		if (newitem.startinghelplevel == "full") ui_helplevel = 3;
+		if (newitem.startinghelplevel == "hints") ui_helplevel = 2;
+		if (newitem.startinghelplevel == "basic") ui_helplevel = 1;
+		if (newitem.startinghelplevel == "none") ui_helplevel = 0;
+
+		console.log("Starting help level = " + ui_helplevel + " from " + newitem.startinghelplevel);
+
+		return newitem;
 	}
 	return null;
 }
 
+function deviceHasProblem(Device) {
+	var hostname = Device.hostname;
+	//console.log("Looking for tests on " + hostname + " and have: " + puzzle.nettest.length)
+	for (var index = 0; index < puzzle.nettest.length; index++) {
+		//console.log("Found test: " + JSON.stringify(puzzle.nettest));
+		if (puzzle.nettest[index].shost == hostname) {
+			if (puzzle.nettest[index].solved == null) {
+				//It has not yet been solved.
+				//console.log("Found problem on device: " + hostname);
+				return true;
+            }
+        }
+	}
+	return false;
+}
+
 function networkNamesMatchingText(textToMatch)
 {
 	var list = [];

Web/selectmenu.js

@@ -17,7 +17,7 @@ var menuItemSize=50;
 function InitializeSelectMenu() {
 	cachedSelectMenuCanvas = document.createElement('canvas');
 	cachedSelectMenuCanvas.width = menuItemSize;
-	console.log("length= " + selectMenuNames.length);
+	//console.log("length= " + selectMenuNames.length);
 	cachedSelectMenuCanvas.height = menuItemSize * selectMenuNames.length;
 	var cSMCctx = cachedSelectMenuCanvas.getContext('2d');
 	var starty = 0;

Web/ui.js

@@ -45,7 +45,7 @@ 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/thumb.png",
+		"img/queryuser.png", "img/thumb.png",
 	],
 	InitializeGameMenu  // this is called when all images have loaded.
 );
@@ -99,7 +99,7 @@ function PrintScreen(WhatPassedIn=-1)
 	//Clear out any old ActionStructs.  They will get filled in as we print the screen.
 	clearActionStructs();
 
-	console.log("PrintingScreen for mode: " + what);
+	//console.log("PrintingScreen for mode: " + what);
 	var rect;
 
 	if(what == 0)
@@ -109,29 +109,8 @@ function PrintScreen(WhatPassedIn=-1)
 		MainCanvas_ctx.fillStyle = maincanvasBackground;
 		MainCanvas_ctx.fillRect(0, 0, MainCanvas.width, MainCanvas.height);
 
-		////Do any highlight we need to
+		//Check for device highlights
-		//if (ui_highlightRect !== null) {
+		checkDevicesForIssues();
-		//	//console.log("trying to highlight something: " + JSON.stringify(ui_highlightRect));
-		//	MainCanvas_ctx.fillStyle = "white";
-		//	MainCanvas_ctx.globalAlpha = 0.4; //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 += 6;
-		//		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;
 
 		//print highlights.  If we have mouseover highlights, note that.
 		if (printHighlights("mouseover") > 0) ui_HadHighlight = true;
@@ -153,6 +132,23 @@ function PrintScreen(WhatPassedIn=-1)
 		MainCanvas_ctx.drawImage(imageFromName("eye"), rect.sx, rect.sy, rect.deltax, rect.deltay);
 		registerActionStruct("square", rect, null, ui_eyeLeftClick, null, generic_mouseoverHighlight);
 
+		//Draw the help-level select button
+		rect = makeRectangle(MainCanvas.width - small_button_size, small_button_size * 3, small_button_size, small_button_size);
+
+		//Put any coloring behind the query-user image
+		var tmp_queryhighlight = null;
+		if (ui_helplevel == 0) tmp_queryhighlight = returnHighlightShape("square", rect, "red", "none", 0.3);
+		if (ui_helplevel == 1) tmp_queryhighlight = returnHighlightShape("square", rect, "orange", "none", 0.3);
+		if (ui_helplevel == 2) tmp_queryhighlight = returnHighlightShape("square", rect, "yellow", "none", 0.3);
+		if (ui_helplevel == 3) tmp_queryhighlight = returnHighlightShape("square", rect, "green", "none", 0.3);
+		if (tmp_queryhighlight == null) { }
+		else drawshape(tmp_queryhighlight);
+
+		MainCanvas_ctx.drawImage(imageFromName("queryuser"), rect.sx, rect.sy, rect.deltax, rect.deltay);
+
+		registerActionStruct("square", rect, null, ui_queryuserLeftClick, null, generic_mouseoverHighlight);
+
+
 		//Draw simple lines to show boundaries
 		//Select menu separation
 		MainCanvas_ctx.lineWidth = 2;
@@ -345,6 +341,19 @@ function ui_eyeLeftClick(evt) {
 	PrintScreen();
 }
 
+function ui_queryuserLeftClick(evt) {
+	console.log("Selected 'queryuser' button in action");
+	//It is the eye button
+	ui_helplevel++;
+	if (ui_helplevel > 3) ui_helplevel = 0;
+	if (ui_helplevel == 0) setStatus("There is a disturbance in the force.  Guessing...");
+	if (ui_helplevel == 1) setStatus("Service check detected a problem.");
+	if (ui_helplevel == 2) setStatus("Someone submitted a trouble ticket.");
+	if (ui_helplevel == 3) setStatus("Interviewed users for detailed info.");
+	PrintScreen();
+}
+
+
 function ui_InfoLeftClick(evt) {
 	console.log("Selected info button in action");
 	//It is the info button
@@ -460,6 +469,12 @@ function PrintNetworkDevice(ToPrint)
 		if(dname=="net_switch") dname="switch";	
 		if(dname=="net_hub") dname="hub";	
 		//console.log("printing device " + dname);
+
+		if (deviceHasProblem(ToPrint)) {
+			var thshape = returnHighlightShape("square", actionrect, "red", "problem", 0.2);
+			drawshape(thshape);
+		}
+
 		MainCanvas_ctx.drawImage(imageFromName(dname), rect.spoint.x, rect.spoint.y, rect.width, rect.height);
 		registerActionStruct("square", actionrect, ToPrint, device_clickOn, null, generic_mouseoverHighlight);
 
@@ -505,11 +520,34 @@ function PrintNetworkDevice(ToPrint)
 	}
 }
 
+function checkDevicesForIssues()
+{
+	return; //Doing it a different way
+	if (puzzle == null) return; //If the puzzle has not been set, exit
+
+	removeHighlightsNamed("problem");
+	//console.log("Looking for problems in devices." + puzzle.device.length);
+
+	let index = 0;
+	while (index < puzzle.device.length) {
+		if (deviceHasProblem(puzzle.device[index])) {
+			console.log("Found a problem.  Registering it...");
+			var actionrect = deviceRectangle(puzzle.device[index]);
+			//If the help level is bigger than 0 (guessing), show which devices have problems
+			if (ui_helplevel > 0) {
+				var answer = registerHighlightShape("square", actionrect, "red", "problem", 0.2);
+				console.log("registered it." + JSON.stringify(answer));
+			}
+		}
+		index++;
+	}
+}
+
 function PrintAllNetworkDevices()
 {
 	if (puzzle == null) return; //If the puzzle has not been set, exit
 
-	let index=0;
+	let index = 0;
 	while (index < puzzle.device.length) {
 	PrintNetworkDevice(puzzle.device[index]);
 		index++;
@@ -664,31 +702,37 @@ function setStatus(text) {
 //go through all highlights and print all of them
 function printHighlights(countof="mouseover") {
 	var count = 0;
+	//console.log("Printing highlights. " + ui_HighlightArray.length)
 	for (var index = 0; index < ui_HighlightArray.length; index++) {
 		var highlight = ui_HighlightArray[index];
 		//console.log("trying to highlight something: " + JSON.stringify(highlight));
 		if (highlight.shapeName == countof) count++;
-		MainCanvas_ctx.fillStyle = highlight.shapeColor;
+		drawshape(highlight);
-		MainCanvas_ctx.globalAlpha = highlight.opaciticy; //mostly transparent
-		if (highlight.shapeText == "square")
-			MainCanvas_ctx.fillRect(highlight.shapePoints.sx, highlight.shapePoints.sy, highlight.shapePoints.deltax, highlight.shapePoints.deltay);
-		else if (highlight.shapeText == "line") {
-			var oldWidth = MainCanvas_ctx.lineWidth;
-			MainCanvas_ctx.lineWidth += 6;
-			MainCanvas_ctx.strokeStyle = highlight.shapeColor;
-			MainCanvas_ctx.beginPath();
-			MainCanvas_ctx.moveTo(highlight.shapePoints.sx, highlight.shapePoints.sy);
-			MainCanvas_ctx.lineTo(highlight.shapePoints.dx, highlight.shapePoints.dy);
-			MainCanvas_ctx.stroke();
-			MainCanvas_ctx.lineWidth = oldWidth;
-			MainCanvas_ctx.strokeStyle = "black";
-		}
-		MainCanvas_ctx.globalAlpha = 1.0; //reset
-		MainCanvas_ctx.fillStyle = "black"; //reset		
 	}
 	return countof; //the count of the item we were supposed to count
 }
 
+function drawshape(highlight) {
+	MainCanvas_ctx.fillStyle = highlight.shapeColor;
+	MainCanvas_ctx.globalAlpha = highlight.opaciticy; //mostly transparent
+	if (highlight.shapeText == "square")
+		MainCanvas_ctx.fillRect(highlight.shapePoints.sx, highlight.shapePoints.sy, highlight.shapePoints.deltax, highlight.shapePoints.deltay);
+	else if (highlight.shapeText == "line") {
+		var oldWidth = MainCanvas_ctx.lineWidth;
+		MainCanvas_ctx.lineWidth += 6;
+		MainCanvas_ctx.strokeStyle = highlight.shapeColor;
+		MainCanvas_ctx.beginPath();
+		MainCanvas_ctx.moveTo(highlight.shapePoints.sx, highlight.shapePoints.sy);
+		MainCanvas_ctx.lineTo(highlight.shapePoints.dx, highlight.shapePoints.dy);
+		MainCanvas_ctx.stroke();
+		MainCanvas_ctx.lineWidth = oldWidth;
+		MainCanvas_ctx.strokeStyle = "black";
+	}
+	MainCanvas_ctx.globalAlpha = 1.0; //reset
+	MainCanvas_ctx.fillStyle = "black"; //reset
+}
+
+
 function countHighlightsNamed(countof = "mouseover") {
 	var count = 0;
 	for (var index = 0; index < ui_HighlightArray.length; index++) {
@@ -698,8 +742,7 @@ function countHighlightsNamed(countof = "mouseover") {
 	return countof; //the count of the item we were supposed to count
 }
 
-//There may be multiple things 
+function returnHighlightShape(shapeText, shapePoints, shapeColor, shapeName, opaciticy = 0.4) {
-function registerHighlightShape(shapeText, shapePoints, shapeColor, shapeName, opaciticy=0.4) {
 	//Create a highlight record with the needed info
 	var newhighlight = {
 		shapeText: shapeText,
@@ -708,6 +751,13 @@ function registerHighlightShape(shapeText, shapePoints, shapeColor, shapeName, o
 		shapeName: shapeName, //Used when we remove them later
 		opaciticy, opaciticy,
 	}
+	return newhighlight;
+}
+
+//There may be multiple things 
+function registerHighlightShape(shapeText, shapePoints, shapeColor, shapeName, opaciticy=0.4) {
+	//Create a highlight record with the needed info
+	var newhighlight = returnHighlightShape(shapeText, structuredClone(shapePoints), shapeColor, shapeName, opaciticy)
 	//console.log("registering a highlight: " + JSON.stringify(newhighlight));
 	//Add it to the list of highlights.
 	ui_HighlightArray.unshift(newhighlight);