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

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

View File

@ -3,19 +3,42 @@ var mouseIsDown=false;
var selectedMenuItemName=""; var selectedMenuItemName="";
var selectedMenuYOffset=0; 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; 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() function drawSelectMenu()
{ {
//console.log("Printing on main canvass"); //console.log("Printing on main canvass");
MainCanvas_ctx.fillStyle = maincanvasBackground; MainCanvas_ctx.fillStyle = maincanvasBackground;
MainCanvas_ctx.fillRect(0, 0, menuItemSize, MainCanvas.height); MainCanvas_ctx.fillRect(0, 0, menuItemSize, MainCanvas.height);
if(selectedMenuYOffset<0) selectedMenuYOffset=0; 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; 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); MainCanvas_ctx.drawImage(cachedSelectMenuCanvas,0,selectedMenuYOffset,50,MainCanvas.height,0,0,50,MainCanvas.height);
let index = selectMenuNames.indexOf(selectedMenuItemName); let index = selectMenuNames.indexOf(selectedMenuItemName);

View File

@ -15,16 +15,32 @@ var uiMode=1;
const imageCollection = loadImages( 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"], ["ArrowUp", "ArrowDown", "animations",
["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"], "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. InitializeGameMenu // this is called when all images have loaded.
); );
var menuItemSize=50; var menuItemSize=50;
const cachedSelectMenuCanvas = document.createElement('canvas');
cachedSelectMenuCanvas.width = menuItemSize;
cachedSelectMenuCanvas.height = menuItemSize * 16;
function loadImages(names, files, onAllLoaded) { function loadImages(names, files, onAllLoaded) {
var i = 0, numLoading = names.length; 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['router'],100,100,50,50);
//MainCanvas_ctx.drawImage(imageCollection['firewall'],150,150,50,50); //MainCanvas_ctx.drawImage(imageCollection['firewall'],150,150,50,50);
//Create the initial selectMenu InitializeSelectMenu();
var cSMCctx = cachedSelectMenuCanvas.getContext('2d');
var starty=0;
selectMenuNames.forEach((element) => {
//console.log(element);
cSMCctx.drawImage(imageCollection[element],0,starty,menuItemSize,menuItemSize);
starty+=menuItemSize;
});
//It should be printed //It should be printed
//MainCanvas_ctx.drawImage(cachedSelectMenuCanvas,0,0,50,500,0,0,50,500);
PrintScreen(); PrintScreen();
} }
@ -252,7 +259,7 @@ 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) if(puzzle.link !== null && typeof(puzzle.link) === "object")
{ {
while (index < puzzle.link.length) { while (index < puzzle.link.length) {
PrintNetworkLink(puzzle.link[index]); PrintNetworkLink(puzzle.link[index]);