Starting on puzzle selection menu

Web/network.js

@@ -28,6 +28,24 @@ function networkFromName(what)
     }
 }
 
+function networkNamesMatchingText(textToMatch)
+{
+	var list = [];
+	var re = new RegExp(textToMatch);
+
+    let index=0;
+    while (index < allpuzzles.length) {
+		//console.log(allpuzzles[index].EduNetworkBuilder.Network.name);
+		if(re.test(allpuzzles[index].EduNetworkBuilder.Network.name))
+		{
+			//console.log("Found " + textToMatch + " at index " + index + "  " + allpuzzles[index].EduNetworkBuilder.Network.name);
+			list.push(allpuzzles[index].EduNetworkBuilder.Network.name);
+		}
+		index++;
+    }
+	return list;
+}
+
 function deviceFromName(what)
 {
     if (puzzle == null) return null; //If the puzzle has not been set, return a null

Web/textwindow.js

@@ -11,11 +11,10 @@ var tmWindowBackground="grey";
 var tmTextYGap=5; //The gap between lines
 
 var cachedTextMenuCanvas = null;
-var cachedTextMenuTextCanvas = null;  //The text we are trying to display, could be larger than the space
 
 
 //Print the textmenu
-function textMenuPrint(TextToPrint)
+function textMenuPrint(TextToPrint, selectedindex = -1, highlightedindex = -1)
 {
     //It would be nice to print it on top of whatever is currently there.
     //But we will do that later.
@@ -57,39 +56,62 @@ function textMenuPrint(TextToPrint)
 	cTMCctx.strokeStyle="white";
 	cTMCctx.stroke();
 	
-	if(cachedTextMenuTextCanvas == null)
+	var cachedTextMenuTextCanvas = document.createElement('canvas');
+	//Figure out how much space we need. - start with a simple canvas (non expandable)
+	
+	cachedTextMenuTextCanvas.width = cachedTextMenuCanvas.width - tmScrollBarWidth;
+	cachedTextMenuTextCanvas.height = cachedTextMenuCanvas.height;
+
+	var cTMTCctx = cachedTextMenuTextCanvas.getContext('2d');
+	
+	cTMTCctx.strokeStyle="black";
+	cTMTCctx.font = "20px serif";
+
+	var lines = [];
+	if(typeof(TextToPrint) === "string") 
+		lines = fragmentTextIntoLines(cTMTCctx, TextToPrint, cachedTextMenuTextCanvas.width - 10);
+	else
+		lines = TextToPrint; //If we passed in a list of strings
+	//Now we have the number of lines.
+	var metrics = cTMTCctx.measureText("test");
+	var yHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent + tmTextYGap; //the hight of the default font and gap
+	//console.log("Height = "+yHeight);
+
+	var totalHeight = (lines.length * yHeight) + tmTextYGap;
+	
+	if(cachedTextMenuTextCanvas.height < totalHeight) cachedTextMenuTextCanvas.height = totalHeight;// resize if needed
+
+	//Highlight text
+	if (highlightedindex >= 0)
 	{
-		cachedTextMenuTextCanvas = document.createElement('canvas');
+		//console.log("Showing hilighted index " +  highlightedindex);
-		//Figure out how much space we need. - start with a simple canvas (non expandable)
+		//Fill in the area highlighted
+		cTMTCctx.fillStyle = "white";
+		cTMTCctx.globalAlpha = 0.3; //mostly transparent
+		cTMTCctx.fillRect(0,highlightedindex * yHeight + (yHeight/3), cachedTextMenuCanvas.width, yHeight);
+		cTMTCctx.globalAlpha = 1.0; //reset
+	}
 	
-		cachedTextMenuTextCanvas.width = cachedTextMenuCanvas.width - tmScrollBarWidth;
+	//Chosen text
-		cachedTextMenuTextCanvas.height = cachedTextMenuCanvas.height;
+	if (selectedindex >= 0)
+	{
+		//console.log("Showing selected index " +  selectedindex + " " + yHeight);
+		//Fill in the area highlighted
+		cTMTCctx.fillStyle = "green";
+		cTMTCctx.globalAlpha = 0.4; //mostly transparent
+		cTMTCctx.fillRect(0,selectedindex * yHeight + (yHeight/3), cachedTextMenuCanvas.width, yHeight);
+		cTMTCctx.globalAlpha = 1.0; //reset
+	}
 	
-		var cTMTCctx = cachedTextMenuTextCanvas.getContext('2d');
+	cTMTCctx.fillStyle = "black";
-		
+	cTMTCctx.strokeStyle="black";
-		cTMTCctx.strokeStyle="black";
-		cTMTCctx.font = "20px serif";
-
-		var lines = fragmentTextIntoLines(cTMTCctx, TextToPrint, cachedTextMenuTextCanvas.width - 10);
-		//Now we have the number of lines.
-		var metrics = cTMTCctx.measureText("test");
-		var yHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent + tmTextYGap; //the hight of the default font and gap
-		//console.log("Height = "+yHeight);
-
-		var totalHeight = (lines.length * yHeight) + tmTextYGap;
-		
-		if(cachedTextMenuTextCanvas.height < totalHeight) cachedTextMenuTextCanvas.height = totalHeight;// resize if needed
 
 	
-		//Now, print text on the canvas.
+	//Now, print text on the canvas.
-		for (var i = 0; i < lines.length; i++)
+	for (var i = 0; i < lines.length; i++)
-		{
+	{
-			cTMTCctx.fillText(lines[i], 5, ((i+1) * yHeight));
+		cTMTCctx.fillText(lines[i], 5, ((i+1) * yHeight));
-			//console.log("printing text part: " + lines[i]);
+		//console.log("printing text part: " + lines[i]);
-		}
-
-		//console.log("Creating Text context");
-		//Now we have the canvas with the text on it.
 	}
 	
 	//Write the text canvas on the main canvas.  If we are scrolled up or down, do that.
@@ -127,12 +149,13 @@ function TextWindow_handleMouseUp(evt)
 {
 	console.log("TextWindow Mouse Up");
     //If we get here, it is a mouse-click event.  See if we are on the X
-	if(mouseDownLocation.pageX >= cachedTextMenuCanvas.width - tmScrollBarWidth)
+	if(mouseDownLocation.pageX + tmScrollBarWidth >= cachedTextMenuCanvas.width - tmScrollBarWidth)
 	{
 			console.log("TextWindow Mouse Up - X fits");
 
 		//The X fits.  Now, see which button, or scroll-bar we clicked on.
-		if(mouseDownLocation.pageY - tmOutsideYMargin <= tmMenuBarHight && mouseDownLocation.pageY - tmOutsideYMargin >= 0)
+		if(mouseDownLocation.pageY - tmOutsideYMargin <= tmMenuBarHight 
+			&& mouseDownLocation.pageY - tmOutsideYMargin >= 0)
 		{
 			console.log("TextWindow Mouse Up - Y fits");
 
@@ -151,3 +174,10 @@ function TextWindow_handleMouseUp(evt)
 	}
     mouseDidMovement=false; //reset it after we raise the button
 }
+
+function PrintPuzzleSelectMenu(level=0)
+{
+	var levellist=networkNamesMatchingText("Level"+level);
+	//console.log("list is this long: " + levellist.length);
+	textMenuPrint(levellist,1,2);
+}

Web/ui.js

@@ -8,6 +8,7 @@ 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;
@@ -77,6 +78,8 @@ function PrintScreen(WhatPassedIn=-1)
     var what=uiMode;
     if(WhatPassedIn >=0) what=WhatPassedIn;
 
+	console.log("PrintingScreen for mode: " + what);
+
     if(what == 0)
     {
 	//The network drawing mode.  Print the network
@@ -84,15 +87,28 @@ function PrintScreen(WhatPassedIn=-1)
 	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();
     }
-    if(what == 1)
+    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)
@@ -144,7 +160,29 @@ function handleMouseUp(evt)
 
 		 //We are in the item select menu.
 		}
-		if(uiMode==1) TextWindow_handleMouseUp(evt);
+		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
@@ -221,7 +259,7 @@ function PrintNetworkDevice(ToPrint)
 	var dname = ToPrint.mytype;
 	if(dname=="net_switch") dname="switch";	
 	if(dname=="net_hub") dname="hub";	
-	console.log("printing device " + dname);
+	//console.log("printing device " + dname);
 	MainCanvas_ctx.drawImage(imageFromName(dname),rect.spoint.x,rect.spoint.y,rect.width,rect.height);
     }
 }