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:
parent
88b769b5ee
commit
5175e19ec3
@ -3,19 +3,42 @@ 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");
|
||||
|
||||
MainCanvas_ctx.fillStyle = maincanvasBackground;
|
||||
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;
|
||||
MainCanvas_ctx.drawImage(cachedSelectMenuCanvas,0,selectedMenuYOffset,50,MainCanvas.height,0,0,50,MainCanvas.height);
|
||||
let index = selectMenuNames.indexOf(selectedMenuItemName);
|
||||
|
39
Web/ui.js
39
Web/ui.js
@ -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;
|
||||
@ -56,18 +72,9 @@ 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]);
|
||||
|
Loading…
Reference in New Issue
Block a user