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

Browse Source 
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) {