335 lines
9.7 KiB
JavaScript
335 lines
9.7 KiB
JavaScript
//Make sure canvasses are in the correct positionG
|
|
var maincanvas= document.querySelector("MainCanvas");
|
|
|
|
var MainCanvas = document.getElementById("MainCanvas");
|
|
var MainCanvas_ctx = MainCanvas.getContext("2d");
|
|
var maincanvasBackground="lightgrey";
|
|
var mouseIsDown=false;
|
|
var mouseDownLocation;
|
|
var mouseDidMovement=false;
|
|
var imageSize=40;
|
|
var small_button_size=20;
|
|
|
|
//The user interface mode. 0=network, 1=network information, 2=puzzle-selection menu
|
|
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"],
|
|
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;
|
|
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];
|
|
}
|
|
|
|
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);
|
|
|
|
//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;
|
|
});
|
|
//It should be printed
|
|
//MainCanvas_ctx.drawImage(cachedSelectMenuCanvas,0,0,50,500,0,0,50,500);
|
|
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;
|
|
|
|
console.log("PrintingScreen for mode: " + what);
|
|
|
|
if(what == 0)
|
|
{
|
|
//The network drawing mode. Print the network
|
|
//Clear the old screen
|
|
MainCanvas_ctx.fillStyle = maincanvasBackground;
|
|
MainCanvas_ctx.fillRect(0,0, MainCanvas.width, MainCanvas.height);
|
|
|
|
//Draw the puzzle-select button
|
|
//Put the X there so we can click on it
|
|
MainCanvas_ctx.drawImage(imageFromName("menu"),MainCanvas.width - small_button_size,0,small_button_size,small_button_size);
|
|
|
|
//Draw the info button
|
|
MainCanvas_ctx.drawImage(imageFromName("info"),MainCanvas.width - small_button_size,small_button_size,small_button_size,small_button_size);
|
|
|
|
drawSelectMenu();
|
|
PrintAllNetworkLinks();
|
|
PrintAllNetworkDevices();
|
|
}
|
|
else if(what == 1) //PuzzleDescription/Info
|
|
{
|
|
//Display the text about the puzzle
|
|
textMenuPrint(puzzle.en_message);
|
|
}
|
|
else if(what == 2) //PuzzleSelect
|
|
{
|
|
//TextMenuSelection
|
|
PrintPuzzleSelectMenu(0);
|
|
}
|
|
|
|
}
|
|
|
|
function handleTouchStart(evt)
|
|
{
|
|
handleMouseDown(copyLocation(evt));
|
|
}
|
|
function handleTouchEnd(evt)
|
|
{
|
|
handleMouseUp(copyLocation(evt));
|
|
}
|
|
function handleTouchCancel(evt)
|
|
{
|
|
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");
|
|
}
|
|
function handleMouseDown(evt)
|
|
{
|
|
mouseDownLocation = copyLocation(evt);
|
|
mouseIsDown=true;
|
|
//console.log("mousedown");
|
|
if(uiMode==0) SelectMenu_handleMouseDown(mouseDownLocation);
|
|
}
|
|
|
|
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)
|
|
{
|
|
//We did not move much. Assume click
|
|
if(evt.pageX <= menuItemSize && !mouseDidMovement)
|
|
{
|
|
if(uiMode==0) SelectMenu_handleMouseUp(evt);
|
|
|
|
//We are in the item select menu.
|
|
}
|
|
if(!mouseDidMovement)
|
|
{ //If we are not dragging, it is a click
|
|
if(uiMode==1) TextWindow_handleMouseUp(evt);
|
|
else if(uiMode==2) TextWindow_handleMouseUp(evt);
|
|
else if(uiMode==0 && evt.pageX >= MainCanvas.width - small_button_size)
|
|
{
|
|
console.log("clicked far enough x wise");
|
|
//We may be clicking on one of the small buttons
|
|
if(evt.pageY < small_button_size)
|
|
{
|
|
//We clicked on the puzzle-select menu
|
|
console.log("PuzzleSelect pressed");
|
|
uiMode=2;
|
|
PrintScreen();
|
|
} else if(evt.pageY < small_button_size *2)
|
|
{
|
|
console.log("Selected info button");
|
|
//It is the info button
|
|
uiMode=1;
|
|
PrintScreen();
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
mouseDidMovement=false; //reset it after we raise the button
|
|
}
|
|
|
|
|
|
function handleMouseMove(evt)
|
|
{
|
|
//evt.preventDefault();
|
|
if(mouseIsDown)
|
|
{
|
|
let deltaX = evt.pageX - mouseDownLocation.pageX;
|
|
let deltaY = evt.pageY - mouseDownLocation.pageY;
|
|
if(isNaN(deltaY)) deltaY=0;
|
|
if(isNaN(deltaX)) deltaX=0;
|
|
//we are dragging
|
|
//console.log('mousemove ' + evt.pageX + " " + evt.pageY + " delta " + deltaY );
|
|
if(uiMode == 0)
|
|
{
|
|
SelectMenu_handleMouseMove(evt);
|
|
}
|
|
|
|
mouseDidMovement=true;
|
|
}
|
|
else //Mouse is not down. Not dragging
|
|
{
|
|
if(uiMode==2)
|
|
{
|
|
textMenu_HandleMouseMove(evt);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
function copyLocation({ pageX, pageY }) {
|
|
return { pageX, pageY };
|
|
}
|
|
|
|
function PrintNetworkLink(linkToPrint)
|
|
{
|
|
//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);
|
|
sdevice = deviceFromID(linkToPrint.SrcNic.hostid);
|
|
ddevice = deviceFromID(linkToPrint.DstNic.hostid);
|
|
if(sdevice !== null && ddevice !== null)
|
|
{
|
|
//We have an existing link with two devices. Find the device locations and print
|
|
var spoint = convertXYPointToActual(newPointFromString(sdevice.location));
|
|
var dpoint = convertXYPointToActual(newPointFromString(ddevice.location));
|
|
|
|
//Now we draw a line between them
|
|
MainCanvas_ctx.beginPath();
|
|
MainCanvas_ctx.moveTo(spoint.x,spoint.y);
|
|
MainCanvas_ctx.lineTo(dpoint.x,dpoint.y);
|
|
MainCanvas_ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function PrintAllNetworkLinks()
|
|
{
|
|
if (puzzle == null) return; //If the puzzle has not been set, exit
|
|
|
|
let index=0;
|
|
if(puzzle.link !== null)
|
|
{
|
|
while (index < puzzle.link.length) {
|
|
PrintNetworkLink(puzzle.link[index]);
|
|
index++;
|
|
}
|
|
}
|
|
}
|
|
|
|
function PrintNetworkDevice(ToPrint)
|
|
{
|
|
//We should have passed in a working link, make sure it exists
|
|
if(ToPrint !== null)
|
|
{
|
|
var rect = deviceRectangle(ToPrint);
|
|
var dname = ToPrint.mytype;
|
|
if(dname=="net_switch") dname="switch";
|
|
if(dname=="net_hub") dname="hub";
|
|
//console.log("printing device " + dname);
|
|
MainCanvas_ctx.drawImage(imageFromName(dname),rect.spoint.x,rect.spoint.y,rect.width,rect.height);
|
|
}
|
|
}
|
|
|
|
function PrintAllNetworkDevices()
|
|
{
|
|
if (puzzle == null) return; //If the puzzle has not been set, exit
|
|
|
|
let index=0;
|
|
while (index < puzzle.device.length) {
|
|
PrintNetworkDevice(puzzle.device[index]);
|
|
index++;
|
|
}
|
|
}
|
|
|
|
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;
|
|
|
|
return newPointFromPair((point.x * deltax) + menuItemSize, point.y * deltay);
|
|
}
|
|
|
|
function convertXYpairToActual(x,y)
|
|
{
|
|
return convertXYPointToActual(newPointFromPair(x,y));
|
|
}
|
|
|
|
function newPointFromPair(x,y)
|
|
{
|
|
var point = {
|
|
'x' : Math.floor(x),
|
|
'y' : Math.floor(y)
|
|
}
|
|
return point;
|
|
}
|
|
|
|
function newPointFromString(pointasstring)
|
|
{
|
|
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 rect = {
|
|
spoint : newPointFromPair(centerpoint.x-delta, centerpoint.y-delta),
|
|
height : imageSize,
|
|
width : imageSize,
|
|
epoint : newPointFromPair(centerpoint.x+delta, centerpoint.y+delta)
|
|
}
|
|
return rect;
|
|
}
|