Starting on puzzle selection menu
This commit is contained in:
parent
8a08bd209e
commit
54bd271784
Binary file not shown.
@ -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
|
||||
|
@ -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
44
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);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user