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

Compare commits

base: timy:7b57cbe97ad05dc715b70a3890ce20473084bc2d
Branches Tags
timy:master
timy:web
timy:IPV6
timy:Development
..
compare: timy:a19cb99b9d7c4da6befd6c7024f441323ae6396a
Branches Tags
timy:web
timy:master
timy:IPV6
timy:Development

No commits in common. "7b57cbe97ad05dc715b70a3890ce20473084bc2d" and "a19cb99b9d7c4da6befd6c7024f441323ae6396a" have entirely different histories.
7b57cbe97a ... a19cb99b9d

2 changed files with 33 additions and 120 deletions
Show Stats Expand all files Collapse all files

2
Web/index.html
View File

@ -25,7 +25,7 @@
</form>
-->
<canvas id='MainCanvas' width='700 ' height='400' style="border:1px solid #000000;"></canvas>
<canvas id='MainCanvas' width='700 ' height='400' style="border:1px solid #000000;">
<script src="allpuzzles.js"></script>
<script src="selectmenu.js"></script>

149
Web/ui.js
View File

@ -15,7 +15,6 @@ var ui_highlightRect = null;
var ui_HadHighlight = false;
var ui_status_height = 25;
var ui_StatusText="";
var ui_HighlightArray = [];
//The user interface mode. 0=network, 1=network information, 2=puzzle-selection menu
var uiMode=1;
@ -109,32 +108,28 @@ function PrintScreen(WhatPassedIn=-1)
MainCanvas_ctx.fillStyle = maincanvasBackground;
MainCanvas_ctx.fillRect(0, 0, MainCanvas.width, MainCanvas.height);
////Do any highlight we need to
//if (ui_highlightRect !== null) {
// //console.log("trying to highlight something: " + JSON.stringify(ui_highlightRect));
// MainCanvas_ctx.fillStyle = "white";
// MainCanvas_ctx.globalAlpha = 0.4; //mostly transparent
// if (ui_highlightRect.shapeText == "square")
// MainCanvas_ctx.fillRect(ui_highlightRect.sx, ui_highlightRect.sy, ui_highlightRect.deltax, ui_highlightRect.deltay);
// else if (ui_highlightRect.shapeText == "line") {
// var oldWidth = MainCanvas_ctx.lineWidth;
// MainCanvas_ctx.lineWidth += 6;
// MainCanvas_ctx.strokeStyle = "white";
// MainCanvas_ctx.beginPath();
// MainCanvas_ctx.moveTo(ui_highlightRect.sx, ui_highlightRect.sy);
// MainCanvas_ctx.lineTo(ui_highlightRect.dx, ui_highlightRect.dy);
// MainCanvas_ctx.stroke();
// MainCanvas_ctx.lineWidth = oldWidth;
// MainCanvas_ctx.strokeStyle = "black";
// }
// MainCanvas_ctx.globalAlpha = 1.0; //reset
// MainCanvas_ctx.fillStyle = "black"; //reset
// ui_HadHighlight = true;
//}
//else ui_HadHighlight = false;
//print highlights. If we have mouseover highlights, note that.
if (printHighlights("mouseover") > 0) ui_HadHighlight = true;
//Do any highlight we need to
if (ui_highlightRect !== null) {
//console.log("trying to highlight something: " + JSON.stringify(ui_highlightRect));
MainCanvas_ctx.fillStyle = "white";
MainCanvas_ctx.globalAlpha = 0.4; //mostly transparent
if (ui_highlightRect.shapeText == "square")
MainCanvas_ctx.fillRect(ui_highlightRect.sx, ui_highlightRect.sy, ui_highlightRect.deltax, ui_highlightRect.deltay);
else if (ui_highlightRect.shapeText == "line") {
var oldWidth = MainCanvas_ctx.lineWidth;
MainCanvas_ctx.lineWidth += 6;
MainCanvas_ctx.strokeStyle = "white";
MainCanvas_ctx.beginPath();
MainCanvas_ctx.moveTo(ui_highlightRect.sx, ui_highlightRect.sy);
MainCanvas_ctx.lineTo(ui_highlightRect.dx, ui_highlightRect.dy);
MainCanvas_ctx.stroke();
MainCanvas_ctx.lineWidth = oldWidth;
MainCanvas_ctx.strokeStyle = "black";
}
MainCanvas_ctx.globalAlpha = 1.0; //reset
MainCanvas_ctx.fillStyle = "black"; //reset
ui_HadHighlight = true;
}
else ui_HadHighlight = false;
//Draw the puzzle-select button
@ -373,17 +368,17 @@ function handleMouseMove(evt)
else //Mouse is not down. Not dragging
{
var needrefresh = false;
var oldRect = structuredClone(findHighlightsNamed("mouseover"));
removeHighlightsNamed("mouseover");
var oldRect = structuredClone(ui_highlightRect);
if (!CheckForActions(evt, "mouseover")) {
//We did not find anything
if (JSON.stringify(findHighlightsNamed("mouseover")) === JSON.stringify(oldRect)) {
if (JSON.stringify(ui_highlightRect) === JSON.stringify(oldRect)) {
}
else {
//console.log("Rects are not equal:" + JSON.stringify(ui_highlightRect) + " - " + JSON.stringify(oldRect) )
needrefresh = true;
}
ui_highlightRect = null; //nothing to highlight
if (ui_HadHighlight) { needrefresh = true; }
if (needrefresh) {
PrintScreen();
@ -660,104 +655,22 @@ function setStatus(text) {
ui_StatusText = text; //set the text.
}
//go through all highlights and print all of them
function printHighlights(countof="mouseover") {
var count = 0;
for (var index = 0; index < ui_HighlightArray.length; index++) {
var highlight = ui_HighlightArray[index];
//console.log("trying to highlight something: " + JSON.stringify(highlight));
if (highlight.shapeName == countof) count++;
MainCanvas_ctx.fillStyle = highlight.shapeColor;
MainCanvas_ctx.globalAlpha = highlight.opaciticy; //mostly transparent
if (highlight.shapeText == "square")
MainCanvas_ctx.fillRect(highlight.shapePoints.sx, highlight.shapePoints.sy, highlight.shapePoints.deltax, highlight.shapePoints.deltay);
else if (highlight.shapeText == "line") {
var oldWidth = MainCanvas_ctx.lineWidth;
MainCanvas_ctx.lineWidth += 6;
MainCanvas_ctx.strokeStyle = highlight.shapeColor;
MainCanvas_ctx.beginPath();
MainCanvas_ctx.moveTo(highlight.shapePoints.sx, highlight.shapePoints.sy);
MainCanvas_ctx.lineTo(highlight.shapePoints.dx, highlight.shapePoints.dy);
MainCanvas_ctx.stroke();
MainCanvas_ctx.lineWidth = oldWidth;
MainCanvas_ctx.strokeStyle = "black";
}
MainCanvas_ctx.globalAlpha = 1.0; //reset
MainCanvas_ctx.fillStyle = "black"; //reset
}
return countof; //the count of the item we were supposed to count
}
function countHighlightsNamed(countof = "mouseover") {
var count = 0;
for (var index = 0; index < ui_HighlightArray.length; index++) {
if (ui_HighlightArray[index].shapeName == countof)
count++;
}
return countof; //the count of the item we were supposed to count
}
//There may be multiple things
function registerHighlightShape(shapeText, shapePoints, shapeColor, shapeName, opaciticy=0.4) {
//Create a highlight record with the needed info
var newhighlight = {
shapeText: shapeText,
shapePoints: structuredClone(shapePoints),
shapeColor: shapeColor,
shapeName: shapeName, //Used when we remove them later
opaciticy, opaciticy,
}
//console.log("registering a highlight: " + JSON.stringify(newhighlight));
//Add it to the list of highlights.
ui_HighlightArray.unshift(newhighlight);
return newhighlight;
}
function removeHighlightsNamed(shapeName) {
//console.log("Trying to remove " + shapeName + " in array of " + ui_HighlightArray.length);
for (var index = ui_HighlightArray.length; index > 0; index--) {
if (ui_HighlightArray[index] == null) { }
else {
//console.log("Comparing " + shapeName + " in " + JSON.stringify(ui_HighlightArray[index]));
if (ui_HighlightArray[index].shapeName == shapeName) {
//console.log("removing " + shapeName + " at index:" + index + " " + ui_HighlightArray.length);
ui_HighlightArray.splice(index, 1); //remove it if found
}
}
}
}
function findHighlightsNamed(shapeName) {
for (var index = ui_HighlightArray.length; index < 0; index--) {
if (ui_HighlightArray[index].shapeName == shapeName)
return ui_HighlightArray[index];
}
return null; //null if not there
}
//This takes generic information for us to highlight the background
function generic_mouseoverHighlight(point, actionrec) {
//console.log("Found highlight " + JSON.stringify(actionrec));
//The point is the place where the mouse is, but the actionrec.shapePoints is the rectangle (or shape) we want to highlight
//var oldrec = structuredClone(ui_highlightRect);
var oldrec = findHighlightsNamed("mouseover");
var newrec = null;
//console.log("setting highlights to:" + JSON.stringify(actionrec));
removeHighlightsNamed("mouseover");
var oldrec = structuredClone(ui_highlightRect);
if (actionrec.shapeText == "square") {
//ui_highlightRect = structuredClone(actionrec.shapePoints);
//ui_highlightRect.shapeText = "square";
newrec = registerHighlightShape("square", actionrec.shapePoints, "white", "mouseover"); //opacity is default
ui_highlightRect = structuredClone(actionrec.shapePoints);
ui_highlightRect.shapeText = "square";
//console.log("setting highlights to:" + JSON.stringify(ui_highlightRect));
}
if (actionrec.shapeText == "line") {
//ui_highlightRect = structuredClone(actionrec.shapePoints);
//ui_highlightRect.shapeText = "line";
newrec = registerHighlightShape("line", actionrec.shapePoints, "white", "mouseover"); //opacity is default
ui_highlightRect = structuredClone(actionrec.shapePoints);
ui_highlightRect.shapeText = "line";
//console.log("setting highlights to:" + JSON.stringify(ui_highlightRect));
}
if (JSON.stringify(newrec) === JSON.stringify(oldrec)) {
if (JSON.stringify(ui_highlightRect) === JSON.stringify(oldrec)) {
//they are the same. Nothing to do
}
else