diff --git a/Web/.textwindow.js.swp b/Web/.textwindow.js.swp deleted file mode 100644 index f8d2612..0000000 Binary files a/Web/.textwindow.js.swp and /dev/null differ diff --git a/Web/network.js b/Web/network.js index 94504e2..b196cef 100644 --- a/Web/network.js +++ b/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 diff --git a/Web/textwindow.js b/Web/textwindow.js index 37f3a22..b9bcdfb 100644 --- a/Web/textwindow.js +++ b/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) - { - 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 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 cTMTCctx = cachedTextMenuTextCanvas.getContext('2d'); + + 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 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 + var totalHeight = (lines.length * yHeight) + tmTextYGap; + + if(cachedTextMenuTextCanvas.height < totalHeight) cachedTextMenuTextCanvas.height = totalHeight;// resize if needed - - //Now, print text on the canvas. - for (var i = 0; i < lines.length; i++) - { - cTMTCctx.fillText(lines[i], 5, ((i+1) * yHeight)); - //console.log("printing text part: " + lines[i]); - } + //Highlight text + if (highlightedindex >= 0) + { + //console.log("Showing hilighted index " + highlightedindex); + //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 + } + + //Chosen text + 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 + } + + cTMTCctx.fillStyle = "black"; + cTMTCctx.strokeStyle="black"; - //console.log("Creating Text context"); - //Now we have the canvas with the text on it. + + //Now, print text on the canvas. + for (var i = 0; i < lines.length; i++) + { + cTMTCctx.fillText(lines[i], 5, ((i+1) * yHeight)); + //console.log("printing text part: " + lines[i]); } //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"); @@ -150,4 +173,11 @@ 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); } \ No newline at end of file diff --git a/Web/ui.js b/Web/ui.js index 59bb6c4..47e8180 100644 --- a/Web/ui.js +++ b/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); } }