From 54bd2717843cd73b171989b14b549e0876eaccfd Mon Sep 17 00:00:00 2001 From: Tim Young Date: Fri, 19 Apr 2024 11:02:46 -0500 Subject: [PATCH] Starting on puzzle selection menu --- Web/.textwindow.js.swp | Bin 12288 -> 0 bytes Web/network.js | 18 ++++++++ Web/textwindow.js | 94 +++++++++++++++++++++++++++-------------- Web/ui.js | 44 +++++++++++++++++-- 4 files changed, 121 insertions(+), 35 deletions(-) delete mode 100644 Web/.textwindow.js.swp diff --git a/Web/.textwindow.js.swp b/Web/.textwindow.js.swp deleted file mode 100644 index f8d2612a4f91b854bf2e4df1b02c5056c7beaf33..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 12288 zcmeI2KaU$l7{(_QG;sW_=w2=b=P2hjK8i>uHx5BbaRiaTB^4U)&Uzw&IFjiP69F1hu8MR(fHj_@?PG5o8Elmlbva7U;<2l2`~XB zzyz286JP>N;J-s4tS*VKu$&kACB4<(Fa7P_f8-kzU;<2l2`~XBzyz286JP>NfC(@G zCh!~*kd+WWy(GlwWlSFb|8IZ)|M992-$Lim8ajd=zaqr%&@a&U&?D#@$U*m^Q)mx* zyeGtu&=1hp&~4~v)PDrsgT_$)zUPn^PniiY0Vco%m;e)C0!)Aj{GSMXDF|0le4veN z+cmA6Hh~^QAE;|2UKAOns@`?CQHGXsp(r#Ej`fnRlc$kqFxo(sHHy6L{iRbfD3Ye4 z_nqu=mM@)c+ryc3WX)zoS1Ko*NNui5b0+;~Wq3HOb=!Wd%5V^tw`1^d-8+$PuFX|? zGID=A@>lM#(^Y8bkp7WJS75oErRPm}#@koCG9C<$|7})x!n##7!8A_uvF52P z7jtK$sWvG^as7go+sz_qsZ1P-T>GPh`wlQEb1)hlqY-%|V=koWP1veBP})eF zce7TSML(CmOyB*B%H%B%R;kd;hJebs-lhsTq(E&Qm5sGtn>n7Gj#lyfyj6aP_^G1k z)1#w(_Tl*a3jIt@+56t{= 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); } }