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

Fixed some bugs with the select menu. Added link to the select list and

Browse Source 
made it so the list will stretch when we add new items to it.
This commit is contained in:
Tim Young 2024-04-19 13:33:37 -05:00
parent 88b769b5ee
commit 5175e19ec3
2 changed files with 48 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
Web/selectmenu.js
View File

@ -3,12 +3,33 @@ var mouseIsDown=false;
var selectedMenuItemName="";
var selectedMenuYOffset=0;
const selectMenuNames = ["link", "router", "firewall", "hub", "switch",
"pc", "laptop", "server", "ip_phone", "printer",
"copier", "microwave", "fluorescent",
"wap", "wrepeater", "wbridge", "wrepeater"];
var cachedSelectMenuCanvas=null;
const selectMenuNames = ["router","firewall","hub","switch","pc","laptop","server","ip_phone","printer","copier","microwave","fluorescent","wap","wrepeater","wbridge","wrepeater"];
var menuItemSize=50;
function InitializeSelectMenu() {
cachedSelectMenuCanvas = document.createElement('canvas');
cachedSelectMenuCanvas.width = menuItemSize;
console.log("length= " + selectMenuNames.length);
cachedSelectMenuCanvas.height = menuItemSize * selectMenuNames.length;
var cSMCctx = cachedSelectMenuCanvas.getContext('2d');
var starty = 0;
selectMenuNames.forEach((element) => {
//console.log("Printing to select: "+ element);
cSMCctx.drawImage(imageCollection[element], 0, starty, menuItemSize, menuItemSize);
starty += menuItemSize;
});
}
function drawSelectMenu()
{
//console.log("Printing on main canvass");
@ -16,6 +37,8 @@ function drawSelectMenu()
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);

39
Web/ui.js
View File

@ -15,16 +15,32 @@ var uiMode=1;
const imageCollection = loadImages(
["ArrowUp","ArrowDown","animations", "burnmark", "cellphone","circle","copier","firewall","fluorescent","hub","ip_phone","laptop","link","microwave","pc","printer","router","select","server","shapes","square","switch","tablet","tree","vidimage","wap","wbridge","wrepeater","wrouter","x", "info", "menu"],
["img/ArrowUp.png","img/ArrowDown.png","img/Animations.png", "img/BurnMark.png", "img/cellphone.png", "img/Circle.png", "img/Copier.png", "img/firewall.png", "img/fluorescent.png", "img/Hub.png", "img/ip_phone.png", "img/Laptop.png", "img/link.png", "img/microwave.png", "img/PC.png", "img/Printer.png", "img/Router.png", "img/select.png", "img/Server.png", "img/Shapes.png", "img/Square.png", "img/Switch.png", "img/tablet.png", "img/tree.png", "img/VidImage.png", "img/WAP.png", "img/WBridge.png", "img/WRepeater.png", "img/WRouter.png", "img/X.png", "img/info.png", "img/menu.png"],
["ArrowUp", "ArrowDown", "animations",
"burnmark", "cellphone", "circle",
"copier", "firewall", "fluorescent",
"hub", "ip_phone", "laptop",
"link", "microwave", "pc", "printer",
"router", "select", "server",
"shapes", "square", "switch",
"tablet", "tree", "vidimage",
"wap", "wbridge", "wrepeater",
"wrouter", "x", "info", "menu"],
["img/ArrowUp.png", "img/ArrowDown.png", "img/Animations.png",
"img/BurnMark.png", "img/cellphone.png", "img/Circle.png",
"img/Copier.png", "img/firewall.png", "img/fluorescent.png",
"img/Hub.png", "img/ip_phone.png", "img/Laptop.png",
"img/link.png", "img/microwave.png", "img/PC.png",
"img/Printer.png", "img/Router.png", "img/select.png",
"img/Server.png", "img/Shapes.png", "img/Square.png",
"img/Switch.png", "img/tablet.png", "img/tree.png",
"img/VidImage.png", "img/WAP.png", "img/WBridge.png",
"img/WRepeater.png", "img/WRouter.png", "img/X.png",
"img/info.png", "img/menu.png"],
InitializeGameMenu // this is called when all images have loaded.
);
var menuItemSize=50;
const cachedSelectMenuCanvas = document.createElement('canvas');
cachedSelectMenuCanvas.width = menuItemSize;
cachedSelectMenuCanvas.height = menuItemSize * 16;
function loadImages(names, files, onAllLoaded) {
var i = 0, numLoading = names.length;
@ -57,17 +73,8 @@ function InitializeGameMenu()
//MainCanvas_ctx.drawImage(imageCollection['router'],100,100,50,50);
//MainCanvas_ctx.drawImage(imageCollection['firewall'],150,150,50,50);
//Create the initial selectMenu
var cSMCctx = cachedSelectMenuCanvas.getContext('2d');
var starty=0;
selectMenuNames.forEach((element) => {
//console.log(element);
cSMCctx.drawImage(imageCollection[element],0,starty,menuItemSize,menuItemSize);
starty+=menuItemSize;
});
InitializeSelectMenu();
//It should be printed
//MainCanvas_ctx.drawImage(cachedSelectMenuCanvas,0,0,50,500,0,0,50,500);
PrintScreen();
}
@ -252,7 +259,7 @@ function PrintAllNetworkLinks()
if (puzzle == null) return; //If the puzzle has not been set, exit
let index=0;
if(puzzle.link !== null)
if(puzzle.link !== null && typeof(puzzle.link) === "object")
{
while (index < puzzle.link.length) {
PrintNetworkLink(puzzle.link[index]);