diff --git a/Web/img/thumb.png b/Web/img/thumb.png new file mode 100644 index 0000000..9399460 Binary files /dev/null and b/Web/img/thumb.png differ diff --git a/Web/network.js b/Web/network.js index 7f6470a..caa152d 100644 --- a/Web/network.js +++ b/Web/network.js @@ -26,21 +26,21 @@ function switchPuzzle(target) function networkFromName(what) { - let index=0; - while (index < allpuzzles.length) { + let index=0; + 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); - return structuredClone(allpuzzles[index].EduNetworkBuilder.Network); + console.log("Found " + what + " at index " + index); + return structuredClone(allpuzzles[index].EduNetworkBuilder.Network); } index++; - } + } } function networkFromIndex(what) { - if(typeof(what)==="number" && what >= 0 && what < allpuzzles.length){ - return structuredClone(allpuzzles[what].EduNetworkBuilder.Network); + if(typeof(what)==="number" && what >= 0 && what < allpuzzles.length){ + 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; - while (index < allpuzzles.length) { + let index=0; + 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; - while (index < puzzle.device.length) { + let index=0; + 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; - while (index < puzzle.device.length) { + let index=0; + 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; } diff --git a/Web/selectmenu.js b/Web/selectmenu.js index 64fe936..b7014eb 100644 --- a/Web/selectmenu.js +++ b/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.fillRect(0, 0, menuItemSize, MainCanvas.height); + MainCanvas_ctx.fillStyle = maincanvasBackground; + 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; - MainCanvas_ctx.drawImage(cachedSelectMenuCanvas,0,selectedMenuYOffset,50,MainCanvas.height,0,0,50,MainCanvas.height); - let index = selectMenuNames.indexOf(selectedMenuItemName); + 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); + 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 - if(selectedMenuYOffset > (menuItemSize / 2)) - { + //Now, if we have more to the top or bottom, draw the arrows showing as much + 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 - if(selectedMenuYOffset + (MainCanvas.height + 25) < cachedSelectMenuCanvas.height) - { + } + //Now, if we have more to the top or bottom, draw the arrows showing as much + 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); - mouseIsDown=true; + mouseDownLocation = copyLocation(evt); + mouseIsDown=true; } function SelectMenu_handleMouseUp(evt) { - mouseIsDown=false; - //console.log("mouseup"); - //See if we have a mouse click - let deltaX = Math.abs(evt.pageX - mouseDownLocation.pageX); - let deltaY = Math.abs(evt.pageY - mouseDownLocation.pageY); - //console.log("delta " + deltaX + "," + deltaY); - if(deltaY < 3 && deltaX <3) - { + mouseIsDown=false; + //console.log("mouseup"); + //See if we have a mouse click + let deltaX = Math.abs(evt.pageX - mouseDownLocation.pageX); + let deltaY = Math.abs(evt.pageY - mouseDownLocation.pageY); + //console.log("delta " + deltaX + "," + deltaY); + if(deltaY < 3 && deltaX <3) + { //We did not move much. Assume click if(evt.pageX <= menuItemSize && !mouseDidMovement) { - //We are in the item select menu. - let actualMenuLocation = selectedMenuYOffset + evt.pageY; - let newitemindex = Math.floor( actualMenuLocation / menuItemSize); - console.log("clicked on item " + selectMenuNames[newitemindex]); - selectedMenuItemName = selectMenuNames[newitemindex]; - drawSelectMenu(); + //We are in the item select menu. + let actualMenuLocation = selectedMenuYOffset + evt.pageY; + let newitemindex = Math.floor( actualMenuLocation / menuItemSize); + console.log("clicked on item " + selectMenuNames[newitemindex]); + selectedMenuItemName = selectMenuNames[newitemindex]; + 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 }) { diff --git a/Web/textwindow.js b/Web/textwindow.js index 7d93407..e639902 100644 --- a/Web/textwindow.js +++ b/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. - //But we will do that later. - PrintScreen(0); //Print the network, then we can lay over it + //It would be nice to print it on top of whatever is currently there. + //But we will do that later. + 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.fillRect(0,0, cachedTextMenuCanvas.width, cachedTextMenuCanvas.height); + cTMCctx.fillStyle = tmWindowBackground; + 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 - //Then make the text if we have not done so - //Finally print on top of the main canvas + //create and Draw the scroll-bar on the side + //Then make the text if we have not done so + //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 lines = []; - var currentLine = words[0]; + var words = text.split(" "); + var lines = []; + var currentLine = words[0]; - for (var i = 1; i < words.length; i++) { - var word = words[i]; - var width = ctx.measureText(currentLine + " " + word).width; - if (width < maxWidth) { - currentLine += " " + word; - } else { - lines.push(currentLine); - currentLine = word; - } - } - lines.push(currentLine); - return lines; + for (var i = 1; i < words.length; i++) { + var word = words[i]; + var width = ctx.measureText(currentLine + " " + word).width; + if (width < maxWidth) { + currentLine += " " + word; + } else { + lines.push(currentLine); + currentLine = word; + } + } + lines.push(currentLine); + 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) { diff --git a/Web/ui.js b/Web/ui.js index 7200563..73a3486 100644 --- a/Web/ui.js +++ b/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; - const onload = () => --numLoading === 0 && onAllLoaded(); - const images = {}; - while (i < names.length) { - const img = images[names[i]] = new Image; - img.src = files[i++]; - img.onload = onload; - } - return images; + var i = 0, numLoading = names.length; + const onload = () => --numLoading === 0 && onAllLoaded(); + const images = {}; + while (i < names.length) { + const img = images[names[i]] = new Image; + img.src = files[i++]; + img.onload = onload; + } + return images; } function imageFromName(name) { - return imageCollection[name]; + return imageCollection[name]; } function InitializeGameMenu() { - console.log("Initializing"); - MainCanvas.addEventListener("touchstart", handleTouchStart); - MainCanvas.addEventListener("touchend", handleTouchEnd); - MainCanvas.addEventListener("touchcancel", handleTouchCancel); - MainCanvas.addEventListener("touchmove", handleTouchMove); - MainCanvas.addEventListener('mousedown',handleMouseDown); - MainCanvas.addEventListener('mouseup',handleMouseUp); - MainCanvas.addEventListener('mousemove',handleMouseMove); + console.log("Initializing"); + MainCanvas.addEventListener("touchstart", handleTouchStart); + MainCanvas.addEventListener("touchend", handleTouchEnd); + MainCanvas.addEventListener("touchcancel", handleTouchCancel); + MainCanvas.addEventListener("touchmove", handleTouchMove); + MainCanvas.addEventListener('mousedown',handleMouseDown); + MainCanvas.addEventListener('mouseup',handleMouseUp); + MainCanvas.addEventListener('mousemove',handleMouseMove); - //MainCanvas_ctx.drawImage(imageCollection['router'],100,100,50,50); - //MainCanvas_ctx.drawImage(imageCollection['firewall'],150,150,50,50); + //MainCanvas_ctx.drawImage(imageCollection['router'],100,100,50,50); + //MainCanvas_ctx.drawImage(imageCollection['firewall'],150,150,50,50); InitializeSelectMenu(); - //It should be printed - PrintScreen(); + //It should be printed + 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; - if(WhatPassedIn >=0) what=WhatPassedIn; + var what=uiMode; + 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(); - console.log("canceling touch"); + evt.preventDefault(); + console.log("canceling touch"); } function handleTouchMove(evt) { - //evt.preventDefault(); - if(evt.touches.length > 0) - { - handleMouseMove(copyLocation(evt.touches[0])); - } else{ - //console.log("not enough touches"); - } - //console.log("moving touch"); + //evt.preventDefault(); + if(evt.touches.length > 0) + { + handleMouseMove(copyLocation(evt.touches[0])); + } else{ + //console.log("not enough touches"); + } + //console.log("moving touch"); } function handleMouseDown(evt) { - mouseDownLocation = copyLocation(evt); - mouseIsDown=true; - //console.log("mousedown"); + mouseDownLocation = copyLocation(evt); + mouseIsDown=true; + //console.log("mousedown"); if(uiMode==0) SelectMenu_handleMouseDown(mouseDownLocation); } @@ -269,14 +269,14 @@ function distance(x1, y1, x2, y2) { function handleMouseUp(evt) { - //evt.preventDefault(); - mouseIsDown=false; - //See if we have a mouse click - let deltaX = Math.abs(evt.pageX - mouseDownLocation.pageX); - let deltaY = Math.abs(evt.pageY - mouseDownLocation.pageY); - //console.log("delta " + deltaX + "," + deltaY); - if(deltaY < 3 && deltaX <3) - { + //evt.preventDefault(); + mouseIsDown=false; + //See if we have a mouse click + let deltaX = Math.abs(evt.pageX - mouseDownLocation.pageX); + let deltaY = Math.abs(evt.pageY - mouseDownLocation.pageY); + //console.log("delta " + deltaX + "," + deltaY); + 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(); - if(mouseIsDown) - { + //evt.preventDefault(); + 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 - if(linkToPrint !== null) - { + //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); @@ -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 - if(ToPrint !== null) - { + //We should have passed in a working device, make sure it exists + 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; - while (index < puzzle.device.length) { + let index=0; + 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 - var deltax = (MainCanvas.width - menuItemSize) / puzzle.width; - var deltay = MainCanvas.height / puzzle.height; - + //We have an x and y coordinate which needs to be converted to the canvas size + var deltax = (MainCanvas.width - menuItemSize) / puzzle.width; + 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 delta = imageSize / 2; + var centerpoint = convertXYPointToActual(newPointFromString(theDevice.location)); + 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) {