timy/EduNetworkBuilder
timy
/
EduNetworkBuilder
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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.
This commit is contained in:
Tim Young 2024-04-30 10:58:44 -05:00
parent d7f73f04d8
commit 84685e3bd4
5 changed files with 175 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Web/img/thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

42
Web/network.js
View File

@ -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;
}

76
Web/selectmenu.js
View File

@ -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 }) {

52
Web/textwindow.js
View File

@ -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) {

180
Web/ui.js
View File

@ -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) {