From 3e902cba9563fed6e49dae065ab3760d731fbb35 Mon Sep 17 00:00:00 2001 From: Tim Young Date: Wed, 15 May 2024 17:06:48 -0600 Subject: [PATCH] Devices with problems properly have red background --- Web/network.js | 22 +++++-- Web/selectmenu.js | 2 +- Web/ui.js | 142 ++++++++++++++++++++++++++++++---------------- 3 files changed, 112 insertions(+), 54 deletions(-) diff --git a/Web/network.js b/Web/network.js index 3b4819f..0133316 100644 --- a/Web/network.js +++ b/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"); @@ -41,11 +45,21 @@ function networkFromIndex(what) { if(typeof(what)==="number" && what >= 0 && what < allpuzzles.length){ var newitem = structuredClone(allpuzzles[what].EduNetworkBuilder.Network); - if (typeof (newitem.nettest) == "object") { + 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; @@ -53,13 +67,13 @@ function networkFromIndex(what) function deviceHasProblem(Device) { var hostname = Device.hostname; - console.log("Looking for tests on " + hostname + " and have: " + puzzle.nettest.length) + //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: " + puzzle.nettest[index].shost) + //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) + //console.log("Found problem on device: " + hostname); return true; } } diff --git a/Web/selectmenu.js b/Web/selectmenu.js index b7014eb..330e80e 100644 --- a/Web/selectmenu.js +++ b/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; diff --git a/Web/ui.js b/Web/ui.js index 4501b5a..55f889a 100644 --- a/Web/ui.js +++ b/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 - //if (ui_highlightRect !== null) { - // //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; + //Check for device highlights + checkDevicesForIssues(); //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,12 +469,14 @@ function PrintNetworkDevice(ToPrint) 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, device_clickOn, null, generic_mouseoverHighlight); if (deviceHasProblem(ToPrint)) { - registerHighlightShape("square", actionrect, "red", "problem", 0.2); - } + 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); //Now, we see if we need to print the name, or a list of IPs.. var xpoint = rect.center.x; @@ -509,11 +520,32 @@ function PrintNetworkDevice(ToPrint) } } -function PrintAllNetworkDevices() +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; while (index < puzzle.device.length) { @@ -670,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; - 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 + drawshape(highlight); } 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++) { @@ -704,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 registerHighlightShape(shapeText, shapePoints, shapeColor, shapeName, opaciticy=0.4) { +function returnHighlightShape(shapeText, shapePoints, shapeColor, shapeName, opaciticy = 0.4) { //Create a highlight record with the needed info var newhighlight = { shapeText: shapeText, @@ -714,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);