Get the initial puzzle selection working for one level (0)

Web/network.js

@@ -12,7 +12,17 @@ var device=deviceFromName("laptop0");
 if(device !== null)  {console.log("We found laptop0");}
 else { console.log("Seems to be null"); }
 
-
+function switchPuzzle(target)
+{
+	var newpuzzle=null;
+	if(typeof(target)==="string") newpuzzle = networkFromName(target);
+	if(typeof(target)==="number") newpuzzle = networkFromIndex(target);
+	if(newpuzzle!= null)
+	{
+		puzzle = newpuzzle;
+		PrintScreen();
+	}
+}
 
 function networkFromName(what)
 {
@@ -27,6 +37,13 @@ function networkFromName(what)
 	index++;
     }
 }
+function networkFromIndex(what)
+{
+    if(typeof(what)==="number" && what >= 0 && what < allpuzzles.length){		
+	    return structuredClone(allpuzzles[what].EduNetworkBuilder.Network);
+	}
+	return null;
+}
 
 function networkNamesMatchingText(textToMatch)
 {

Web/textwindow.js

@@ -8,7 +8,10 @@ var tmBorderWidth=4;
 var tmMenuBarHight=20;
 var tmScrollBarWidth=20;
 var tmWindowBackground="grey";
+var tmTextHeight; //Calculated when we build the page
+var tmLastHighlightedIndex=-1;
 var tmTextYGap=5; //The gap between lines
+var tmPuzzleSelectMenuLevel=0;
 
 var cachedTextMenuCanvas = null;
 
@@ -75,6 +78,7 @@ function textMenuPrint(TextToPrint, selectedindex = -1, highlightedindex = -1)
 	//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
+	tmTextHeight = yHeight; //store it for use in highlighting
 	//console.log("Height = "+yHeight);
 
 	var totalHeight = (lines.length * yHeight) + tmTextYGap;
@@ -172,6 +176,22 @@ function TextWindow_handleMouseUp(evt)
 			PrintScreen();
 		}
 	}
+	else
+	{
+		if(uiMode == 2)
+		{
+			//We are in puzzle-select mode and clicked somewhere.
+			var levellist=networkNamesMatchingText("Level"+tmPuzzleSelectMenuLevel);
+			if(tmLastHighlightedIndex>=0 && tmLastHighlightedIndex< levellist.length)
+			{
+				//We found a puzzle
+				console.log("Clicked on puzzle: " + levellist[tmLastHighlightedIndex]);
+				uiMode=1;
+				switchPuzzle(levellist[tmLastHighlightedIndex]);
+
+			}
+		}
+	}
     mouseDidMovement=false; //reset it after we raise the button
 }
 
@@ -179,5 +199,18 @@ function PrintPuzzleSelectMenu(level=0)
 {
 	var levellist=networkNamesMatchingText("Level"+level);
 	//console.log("list is this long: " + levellist.length);
-	textMenuPrint(levellist,1,2);
+	textMenuPrint(levellist, -1, tmLastHighlightedIndex);
+	tmPuzzleSelectMenuLevel=level;
+}
+
+function textMenu_HandleMouseMove(evt)
+{
+	var highlighted_index = Math.floor(((evt.pageY - tmOutsideYMargin) - (tmTextHeight/3)) / tmTextHeight);
+	if(tmLastHighlightedIndex != highlighted_index) 
+	{
+		//the index has changed
+		console.log("index = " + highlighted_index);
+		tmLastHighlightedIndex = highlighted_index;
+		PrintPuzzleSelectMenu(tmPuzzleSelectMenuLevel);
+	}
 }

Web/ui.js

@@ -207,6 +207,14 @@ function handleMouseMove(evt)
 		
 	mouseDidMovement=true;
     }
+	else //Mouse is not down.  Not dragging
+	{
+		if(uiMode==2)
+		{
+			textMenu_HandleMouseMove(evt);
+		}
+
+	}
 }
 
 function copyLocation({ pageX, pageY }) {
@@ -244,10 +252,13 @@ 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)