Make the start of an action click system

Web/textwindow.js

@@ -31,13 +31,17 @@ function textMenuPrint(TextToPrint, selectedindex = -1, highlightedindex = -1)
 	}
 	//If we get here, it is already created.  Get the context
 	var cTMCctx = cachedTextMenuCanvas.getContext('2d');
-	
+	var rect;
+
 	//Fill in the background
     cTMCctx.fillStyle = tmWindowBackground;
     cTMCctx.fillRect(0,0, cachedTextMenuCanvas.width, cachedTextMenuCanvas.height);
 
 	//Put the X there so we can click on it
-	cTMCctx.drawImage(imageFromName("x"),cachedTextMenuCanvas.width - tmScrollBarWidth,0,tmScrollBarWidth,tmMenuBarHight);
+	rect = makeRectangle(cachedTextMenuCanvas.width - tmScrollBarWidth, 0, tmScrollBarWidth, tmMenuBarHight, tmOutsideXMargin, tmOutsideYMargin);
+	cTMCctx.drawImage(imageFromName("x"), rect.sx, rect.sy, rect.deltax, rect.deltay);
+	registerActionStruct("square", rect, null, textwindow_XClick);
+
 
 	//Put the DownArrow there so we can click on it
 	cTMCctx.drawImage(imageFromName("ArrowUp"),cachedTextMenuCanvas.width - tmScrollBarWidth,tmMenuBarHight,tmScrollBarWidth,tmMenuBarHight);
@@ -165,15 +169,7 @@ function TextWindow_handleMouseUp(evt)
 
 			//We clicked the X
 			
-			//Dispose of the text window
+			textwindow_XClick();
-			uiMode=0;
-			
-			//dispose of temp canvas; will recreate later if needed			
-			cachedTextMenuCanvas = null;
-			cachedTextMenuTextCanvas = null;
-			
-			//Redraw the screen
-			PrintScreen();
 		}
 	}
 	else
@@ -195,6 +191,19 @@ function TextWindow_handleMouseUp(evt)
     mouseDidMovement=false; //reset it after we raise the button
 }
 
+function textwindow_XClick(point, object) {
+	//When the x is clicked, we do not care about the position or object.  There is no object
+	//Dispose of the text window
+	uiMode = 0;
+
+	//dispose of temp canvas; will recreate later if needed			
+	cachedTextMenuCanvas = null;
+	cachedTextMenuTextCanvas = null;
+
+	//Redraw the screen
+	PrintScreen();
+}
+
 function PrintPuzzleSelectMenu(level=0)
 {
 	var levellist=networkNamesMatchingText("Level"+level);

Web/ui.js

@@ -10,6 +10,7 @@ var mouseDidMovement=false;
 var imageSize=40;
 var small_button_size = 20;
 var uiDeviceInfoLevel = 1; //What do we display when we look at the network
+var uiActions = [];//a list of things on the screen we can click on or process.
 
 //The user interface mode.  0=network, 1=network information, 2=puzzle-selection menu
 var uiMode=1;
@@ -90,40 +91,45 @@ function PrintScreen(WhatPassedIn=-1)
     var what=uiMode;
     if(WhatPassedIn >=0) what=WhatPassedIn;
 
+	//Clear out any old ActionStructs.  They will get filled in as we print the screen.
+	clearActionStructs();
+
 	console.log("PrintingScreen for mode: " + what);
+	var rect;
 
     if(what == 0)
     {
-	//The network drawing mode.  Print the network
+		//The network drawing mode.  Print the network
-	//Clear the old screen
+		//Clear the old screen
-	MainCanvas_ctx.fillStyle = maincanvasBackground;
+		MainCanvas_ctx.fillStyle = maincanvasBackground;
-    MainCanvas_ctx.fillRect(0,0, MainCanvas.width, MainCanvas.height);
+		MainCanvas_ctx.fillRect(0, 0, MainCanvas.width, MainCanvas.height);
-	
+
-	//Draw the puzzle-select button
+		//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);
+		rect = makeRectangle(MainCanvas.width - small_button_size, 0, small_button_size, small_button_size);
+		MainCanvas_ctx.drawImage(imageFromName("menu"),rect.sx,rect.sy,rect.deltax,rect.deltay);
+		//registerActionStruct("square", rect, null, textwindow_XClick);
 
-	//Draw the info button
+		//Draw the info button
-	MainCanvas_ctx.drawImage(imageFromName("info"),MainCanvas.width - small_button_size,small_button_size,small_button_size,small_button_size);
+		MainCanvas_ctx.drawImage(imageFromName("info"),MainCanvas.width - small_button_size,small_button_size,small_button_size,small_button_size);
 
-	//Draw the info button
+		//Draw the info button
-	MainCanvas_ctx.drawImage(imageFromName("eye"), MainCanvas.width - small_button_size, small_button_size*2, small_button_size, small_button_size);
+		MainCanvas_ctx.drawImage(imageFromName("eye"), MainCanvas.width - small_button_size, small_button_size*2, small_button_size, small_button_size);
 
-	drawSelectMenu();
+		drawSelectMenu();
-	PrintAllNetworkLinks();
+		PrintAllNetworkLinks();
-	PrintAllNetworkDevices();
+		PrintAllNetworkDevices();
-    }
+	}
-    else if(what == 1) //PuzzleDescription/Info
+	else if(what == 1) //PuzzleDescription/Info
-    {
+	{
 	//Display the text about the puzzle
 	textMenuPrint(puzzle.en_message);
-    }
+	}
-    else if(what == 2) //PuzzleSelect
+	else if(what == 2) //PuzzleSelect
-    {
+	{
 	//TextMenuSelection
 	PrintPuzzleSelectMenu(0);
-    }
+	}
-	
 }
 
 function handleTouchStart(evt)
@@ -158,6 +164,47 @@ function handleMouseDown(evt)
 	if(uiMode==0) SelectMenu_handleMouseDown(mouseDownLocation);
 }
 
+function CheckForActions(actionPoint, action) {
+	if (uiActions.length >= 0) {
+		var checkit = false;
+		var inside = false;
+		for (var index = 0; index < uiActions.length; index++)
+		{
+			if (action == "leftclick" && uiActions[index].funcLeftClick !== null) checkit = true;
+			if (action == "rightclick" && uiActions[index].funcRightClick !== null) checkit = true;
+			if (action == "mouseover" && uiActions[index].funcMouseover !== null) checkit = true;
+			checklocation = uiActions[index];
+			if (checkit) {
+				//See if the click is inside the shape
+				if (checklocation.shapeText == "square") {
+					if (actionPoint.pageX - checklocation.shapePoints.offsetx >= checklocation.shapePoints.sx) {
+						if (actionPoint.pageX - checklocation.shapePoints.offsetx <= checklocation.shapePoints.dx) {
+							if (actionPoint.pageY - checklocation.shapePoints.offsety >= checklocation.shapePoints.sy) {
+								if (actionPoint.pageY - checklocation.shapePoints.offsety <= checklocation.shapePoints.dy) {
+									inside = true;
+								}
+							}
+						}
+					}
+                }
+            }
+		}
+
+		if (inside) {
+			console.log("Is inside");
+			switch (action) {
+				case "leftclick":
+					if (checklocation.funcLeftClick != null) {
+						checklocation.funcLeftClick(actionPoint, checklocation.theObject);
+						console.log("Successfully did a UI action");
+						return true;
+					}
+			}
+		}
+	}
+	return false;
+}
+
 function handleMouseUp(evt)
 {
     //evt.preventDefault();
@@ -177,6 +224,9 @@ function handleMouseUp(evt)
 		}
 		if(!mouseDidMovement)
 		{ //If we are not dragging, it is a click
+			var myevt = copyLocation(evt);
+			console.log("evt:" + JSON.stringify(myevt));
+			if (CheckForActions(myevt, "leftclick")) return; //If we did this, do not do anything else.
 			if(uiMode==1) TextWindow_handleMouseUp(evt);
 			else if(uiMode==2) TextWindow_handleMouseUp(evt);
 			else if(uiMode==0 && evt.pageX >= MainCanvas.width - small_button_size)
@@ -299,7 +349,7 @@ function PrintNetworkDevice(ToPrint)
 		var gap = 3;
 		var delta;
 		var ipaddresses = ipsFromDevice(ToPrint);
-		console.log("addresses: " + JSON.stringify(ipaddresses));
+		//console.log("addresses: " + JSON.stringify(ipaddresses));
 		switch (uiDeviceInfoLevel) {
 			case 0:
 				//Do not print anything
@@ -415,3 +465,48 @@ function deviceRectangle(theDevice)
 	}
     return rect;
 }
+
+function makeRectangle(x1, y1, deltax, deltay, offsetx = 0, offsety = 0) {
+	//The offset is for when we are drawing on a cached surface.  It adds x or y to the point we are looking at
+	var struct = {
+		sx: x1,
+		sy: y1,
+		dx: x1 + deltax,
+		dy: y1 + deltay,
+		deltay: deltay,
+		deltax: deltax,
+		offsetx: offsetx,
+		offsety: offsety,
+	}
+	return struct;
+}
+
+//Make a structure to hold all our data
+function actionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null, funcRightClick=null, funcMouseover=null) {
+	var struct = {
+		shapeText: shapeText,
+		shapePoints: shapePoints,
+		theObject: theObject,
+		funcLeftClick: funcLeftClick,
+		funcRightClick: funcRightClick,
+		funcMouseover: funcMouseover,
+	}
+	return struct;
+}
+
+function registerActionStruct(shapeText, shapePoints, theObject=null, funcLeftClick=null, funcRightClick=null, funcMouseover=null) {
+	//Make an object with all the data
+	var what = actionStruct(shapeText, shapePoints, theObject, funcLeftClick, funcRightClick, funcMouseover);
+	console.log("Pushing an action: " + shapeText);
+	//Push it onto the uiActions list
+	uiActions.push(what);
+}
+
+function clearActionStructs() {
+	uiActions = [];
+}
+
+//This is what happens when we click on the x to close the window.
+function xclicked() {
+	
+}