From 84685e3bd48ea7b3f5ed198722ebfcee1ece154b Mon Sep 17 00:00:00 2001 From: Tim Young Date: Tue, 30 Apr 2024 10:58:44 -0500 Subject: [PATCH] Added a thumbs-up image to be used in a bit. Saw the visual studio editor was madly messing up crlf and whatnot. Changed it to be lf since that is what we had started with. --- Web/img/thumb.png | Bin 0 -> 8761 bytes Web/network.js | 42 +++++------ Web/selectmenu.js | 76 ++++++++++---------- Web/textwindow.js | 52 +++++++------- Web/ui.js | 180 +++++++++++++++++++++++----------------------- 5 files changed, 175 insertions(+), 175 deletions(-) create mode 100644 Web/img/thumb.png diff --git a/Web/img/thumb.png b/Web/img/thumb.png new file mode 100644 index 0000000000000000000000000000000000000000..9399460d239570a8502de2b4040edd7e2cd5422f GIT binary patch literal 8761 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 BR4)Jk literal 0 HcmV?d00001 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) {