Compare commits

...

2 Commits

3 changed files with 134 additions and 48 deletions

View File

@ -1,6 +1,10 @@
//This file contains the information about the puzzle (network) //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 //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-Ping");
//var puzzle=networkFromName("Level0-NeedsLink"); //var puzzle=networkFromName("Level0-NeedsLink");
//var puzzle=networkFromName("Level0_NetworkLoop"); //var puzzle=networkFromName("Level0_NetworkLoop");
@ -32,7 +36,7 @@ function networkFromName(what)
if(allpuzzles[index].EduNetworkBuilder.Network.name == what) 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 networkFromIndex(index);
} }
index++; index++;
} }
@ -40,11 +44,43 @@ function networkFromName(what)
function networkFromIndex(what) 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); 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; 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) function networkNamesMatchingText(textToMatch)
{ {
var list = []; var list = [];

View File

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

140
Web/ui.js
View File

@ -45,7 +45,7 @@ const imageCollection = loadImages(
"img/VidImage.png", "img/WAP.png", "img/WBridge.png", "img/VidImage.png", "img/WAP.png", "img/WBridge.png",
"img/WRepeater.png", "img/WRouter.png", "img/X.png", "img/WRepeater.png", "img/WRouter.png", "img/X.png",
"img/info.png", "img/menu.png", "img/eye.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. 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. //Clear out any old ActionStructs. They will get filled in as we print the screen.
clearActionStructs(); clearActionStructs();
console.log("PrintingScreen for mode: " + what); //console.log("PrintingScreen for mode: " + what);
var rect; var rect;
if(what == 0) if(what == 0)
@ -109,29 +109,8 @@ function PrintScreen(WhatPassedIn=-1)
MainCanvas_ctx.fillStyle = maincanvasBackground; MainCanvas_ctx.fillStyle = maincanvasBackground;
MainCanvas_ctx.fillRect(0, 0, MainCanvas.width, MainCanvas.height); 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. //print highlights. If we have mouseover highlights, note that.
if (printHighlights("mouseover") > 0) ui_HadHighlight = true; 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); MainCanvas_ctx.drawImage(imageFromName("eye"), rect.sx, rect.sy, rect.deltax, rect.deltay);
registerActionStruct("square", rect, null, ui_eyeLeftClick, null, generic_mouseoverHighlight); 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 //Draw simple lines to show boundaries
//Select menu separation //Select menu separation
MainCanvas_ctx.lineWidth = 2; MainCanvas_ctx.lineWidth = 2;
@ -345,6 +341,19 @@ function ui_eyeLeftClick(evt) {
PrintScreen(); 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) { function ui_InfoLeftClick(evt) {
console.log("Selected info button in action"); console.log("Selected info button in action");
//It is the info button //It is the info button
@ -460,6 +469,12 @@ function PrintNetworkDevice(ToPrint)
if(dname=="net_switch") dname="switch"; if(dname=="net_switch") dname="switch";
if(dname=="net_hub") dname="hub"; if(dname=="net_hub") dname="hub";
//console.log("printing device " + dname); //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); MainCanvas_ctx.drawImage(imageFromName(dname), rect.spoint.x, rect.spoint.y, rect.width, rect.height);
registerActionStruct("square", actionrect, ToPrint, device_clickOn, null, generic_mouseoverHighlight); 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() 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]); PrintNetworkDevice(puzzle.device[index]);
index++; index++;
@ -664,31 +702,37 @@ function setStatus(text) {
//go through all highlights and print all of them //go through all highlights and print all of them
function printHighlights(countof="mouseover") { function printHighlights(countof="mouseover") {
var count = 0; var count = 0;
//console.log("Printing highlights. " + ui_HighlightArray.length)
for (var index = 0; index < ui_HighlightArray.length; index++) { for (var index = 0; index < ui_HighlightArray.length; index++) {
var highlight = ui_HighlightArray[index]; var highlight = ui_HighlightArray[index];
//console.log("trying to highlight something: " + JSON.stringify(highlight)); //console.log("trying to highlight something: " + JSON.stringify(highlight));
if (highlight.shapeName == countof) count++; 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 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") { function countHighlightsNamed(countof = "mouseover") {
var count = 0; var count = 0;
for (var index = 0; index < ui_HighlightArray.length; index++) { 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 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 //Create a highlight record with the needed info
var newhighlight = { var newhighlight = {
shapeText: shapeText, shapeText: shapeText,
@ -708,6 +751,13 @@ function registerHighlightShape(shapeText, shapePoints, shapeColor, shapeName, o
shapeName: shapeName, //Used when we remove them later shapeName: shapeName, //Used when we remove them later
opaciticy, opaciticy, 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)); //console.log("registering a highlight: " + JSON.stringify(newhighlight));
//Add it to the list of highlights. //Add it to the list of highlights.
ui_HighlightArray.unshift(newhighlight); ui_HighlightArray.unshift(newhighlight);