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 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);
|
||||||
|
39
Web/ui.js
39
Web/ui.js
@ -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]);
|
||||||
|
Loading…
Reference in New Issue
Block a user