timy/EduNetworkBuilder
timy
/
EduNetworkBuilder
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Starting on puzzle selection menu

This commit is contained in:
Tim Young 2024-04-19 11:02:46 -05:00
parent 8a08bd209e
commit 54bd271784
4 changed files with 121 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Web/.textwindow.js.swp
View File

Binary file not shown.

18
Web/network.js
View File

@ -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

94
Web/textwindow.js
View File

@ -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);
}

44
Web/ui.js
View File

@ -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);
}
}