diff --git a/.vs/AAWeb/v15/.suo b/.vs/AAWeb/v15/.suo index 218327e8c..79942868e 100644 Binary files a/.vs/AAWeb/v15/.suo and b/.vs/AAWeb/v15/.suo differ diff --git a/FloatingSpace/Bubble.js b/FloatingSpace/Bubble.js index 4dee1d155..31349458f 100644 --- a/FloatingSpace/Bubble.js +++ b/FloatingSpace/Bubble.js @@ -19,12 +19,6 @@ function newBubble() { function drawBackground(pFloatingObject) { - if (pFloatingObject.payloadBubbleIndex >= pFloatingObject.payload.bubbles.length) { - - return; // The bubbles array changed at the plotter before it was reflected here. We ignore this object from now on. - - } - if (pFloatingObject.currentRadius > 1) { /* Target Line */ @@ -57,32 +51,26 @@ function newBubble() { function drawForeground(pFloatingObject) { - if (pFloatingObject.payloadBubbleIndex >= pFloatingObject.payload.bubbles.length) { - - return; // The bubbles array changed at the plotter before it was reflected here. We ignore this object from now on. - - } - - const BUBBLE_CORNERS_RADIOUS = 10; + const BUBBLE_CORNERS_RADIOUS = 5; const TITLE_BAR_HEIGHT = 14; - const BUBBLE_WIDTH = BUBBLE_CORNERS_RADIOUS * 4 + pFloatingObject.currentRadius; - const BUBBLE_HEIGHT = BUBBLE_CORNERS_RADIOUS * 2 + pFloatingObject.currentRadius; + const BUBBLE_WIDTH = BUBBLE_CORNERS_RADIOUS + pFloatingObject.currentRadius * 4; + const BUBBLE_HEIGHT = BUBBLE_CORNERS_RADIOUS + pFloatingObject.currentRadius * 2; let borderPoint1; let borderPoint2; let borderPoint3; let borderPoint4; + let intialDisplace = { + x: pFloatingObject.currentPosition.x - BUBBLE_WIDTH / 2, + y: pFloatingObject.currentPosition.y - BUBBLE_HEIGHT / 2 + } + if (pFloatingObject.currentRadius > 5) { /* Rounded Background */ - let intialDisplace = { - x: pFloatingObject.currentPosition.x - BUBBLE_WIDTH / 2, - y: pFloatingObject.currentPosition.y - BUBBLE_HEIGHT / 2 - } - borderPoint1 = { x: intialDisplace.x + BUBBLE_CORNERS_RADIOUS, y: intialDisplace.y + BUBBLE_CORNERS_RADIOUS @@ -115,7 +103,7 @@ function newBubble() { /* We paint the panel background first */ - browserCanvasContext.fillStyle = 'rgba(255, 255, 255, 0.75)'; + browserCanvasContext.fillStyle = 'rgba(255, 249, 196, 0.75)'; browserCanvasContext.beginPath(); browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI); @@ -137,7 +125,7 @@ function newBubble() { /* We paint the title bar now */ - browserCanvasContext.fillStyle = 'rgba(255, 151, 48, 0.75)'; + browserCanvasContext.fillStyle = 'rgba(244, 224, 44, 0.75)'; browserCanvasContext.beginPath(); browserCanvasContext.moveTo(titleBarPoint1.x, titleBarPoint1.y); @@ -154,28 +142,6 @@ function newBubble() { browserCanvasContext.strokeStyle = 'rgba(12, 64, 148, 0.75)'; browserCanvasContext.stroke(); - /* print the title */ - - let labelPoint; - let fontSize = 10; - - browserCanvasContext.font = fontSize + 'px Courier New'; - - let label = pFloatingObject.payload.bubbles[pFloatingObject.payloadBubbleIndex].title; - - let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO; - let yOffset = (TITLE_BAR_HEIGHT - fontSize) / 2 + 2; - - labelPoint = { - x: intialDisplace.x + BUBBLE_WIDTH / 2 - xOffset, - y: intialDisplace.y + TITLE_BAR_HEIGHT - yOffset - }; - - //labelPoint = frame.frameThisPoint(labelPoint); - - browserCanvasContext.fillStyle = 'rgba(240, 240, 240, 1)'; - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); - } if (pFloatingObject.currentRadius > 0.5) { @@ -183,8 +149,8 @@ function newBubble() { /* Image */ let imagePosition = { - x: borderPoint1.x, - y: borderPoint1.y + TITLE_BAR_HEIGHT + x: pFloatingObject.currentPosition.x, + y: pFloatingObject.currentPosition.y + BUBBLE_HEIGHT / 2 }; if (pFloatingObject.payload.profile.imageId !== undefined) { @@ -207,26 +173,54 @@ function newBubble() { browserCanvasContext.lineWidth = 1; browserCanvasContext.stroke(); - /* Label Text */ + /* Labels */ if (pFloatingObject.currentRadius > 6) { browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle; + const SIZE_PERCENTAGE = Math.trunc(pFloatingObject.currentRadius / pFloatingObject.targetRadius * 100) / 100; + const ALPHA = 0.5 - (1 - SIZE_PERCENTAGE) * 5; + let labelPoint; let fontSize = 10; let label; + /* print the title */ + + label = pFloatingObject.payload.bubbles[pFloatingObject.payloadBubbleIndex].title; + + if (label !== undefined) { + + if (SIZE_PERCENTAGE > 0.9) { + + browserCanvasContext.font = fontSize + 'px Courier New'; + + let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO; + let yOffset = (TITLE_BAR_HEIGHT - fontSize) / 2 + 2; + + labelPoint = { + x: intialDisplace.x + BUBBLE_WIDTH / 2 - xOffset, + y: intialDisplace.y + TITLE_BAR_HEIGHT - yOffset + }; + + browserCanvasContext.fillStyle = 'rgba(30, 30, 30, ' + ALPHA + ')' + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); + + } + } + + /* Message Body */ + label = pFloatingObject.payload.bubbles[pFloatingObject.payloadBubbleIndex].body; if (label !== undefined) { - const WORDS_PER_ROW = 4; + const WORDS_PER_ROW = 5; const TOTAL_ROWS = 5; - const ALPHA = Math.trunc(pFloatingObject.currentRadius / pFloatingObject.targetRadius * 100) / 100 / 2; - if (ALPHA > 0.4) { + if (SIZE_PERCENTAGE > 0.9) { let startingPosition = { x: pFloatingObject.currentPosition.x, diff --git a/FloatingSpace/BubbleSets.js b/FloatingSpace/BubbleSets.js index ca47e2a4f..e8c606fb4 100644 --- a/FloatingSpace/BubbleSets.js +++ b/FloatingSpace/BubbleSets.js @@ -77,7 +77,9 @@ function newBubbleSets() { if (INFO_LOG === true) { logger.write("[INFO] createBubbleSet -> onBubblesChanged -> Remove old Bubbles -> j = " + j); } - for (let i = 0; i < pNewBubbles.length; i++) { + let i; + + for (i = 0; i < pNewBubbles.length; i++) { let plotterBubble = pNewBubbles[i]; let plotterBubbleKey = plotterBubble.date.toString() + plotterBubble.rate.toString(); @@ -113,6 +115,12 @@ function newBubbleSets() { if (INFO_LOG === true) { logger.write("[INFO] createBubbleSet -> onBubblesChanged -> Remove old Bubbles -> Added to newFloatingBubbles."); } if (INFO_LOG === true) { logger.write("[INFO] createBubbleSet -> onBubblesChanged -> Remove old Bubbles -> newFloatingBubbles.length = " + newFloatingBubbles.length); } + let floatingObject = floatingLayer.getFloatingObject(floatingBubble.floatingHandle); + floatingObject.payloadBubbleIndex = i; + + if (INFO_LOG === true) { logger.write("[INFO] createBubbleSet -> onBubblesChanged -> Remove old Bubbles -> floatingObject index updated."); } + if (INFO_LOG === true) { logger.write("[INFO] createBubbleSet -> onBubblesChanged -> Remove old Bubbles -> floatingObject.payloadBubbleIndex = " + i); } + } } @@ -175,14 +183,17 @@ function newBubbleSets() { floatingObject.initializeMass(200); - let bodyText = pNewBubbles[i].body; + //let bodyText = pNewBubbles[i].body; let radius; + /* if (bodyText.length < 100) { radius = 100; } else { radius = bodyText.length; } + */ + radius = 50; floatingObject.initializeRadius(radius); floatingObject.initializeImageSize(15); @@ -214,6 +225,12 @@ function newBubbleSets() { if (INFO_LOG === true) { logger.write("[INFO] createBubbleSet -> onBubblesChanged -> Add new Bubbles -> onInitialized -> Added to newFloatingBubbles."); } if (INFO_LOG === true) { logger.write("[INFO] createBubbleSet -> onBubblesChanged -> Add new Bubbles -> onInitialized -> newFloatingBubbles.length = " + newFloatingBubbles.length); } + let floatingObject = floatingLayer.getFloatingObject(floatingBubble.floatingHandle); + floatingObject.payloadBubbleIndex = i; + + if (INFO_LOG === true) { logger.write("[INFO] createBubbleSet -> onBubblesChanged -> Add new Bubbles -> onInitialized -> floatingObject index updated."); } + if (INFO_LOG === true) { logger.write("[INFO] createBubbleSet -> onBubblesChanged -> Add new Bubbles -> onInitialized -> floatingObject.payloadBubbleIndex = " + i); } + } } diff --git a/FloatingSpace/FloatingLayer.js b/FloatingSpace/FloatingLayer.js index 507a90e9e..e871f7814 100644 --- a/FloatingSpace/FloatingLayer.js +++ b/FloatingSpace/FloatingLayer.js @@ -11,6 +11,7 @@ function newFloatingLayer() { floatingObjects: undefined, // This is the array of floatingObjects being displayed addFloatingObject: addFloatingObject, removeFloatingObject: removeFloatingObject, + getFloatingObject: getFloatingObject, physicsLoop: physicsLoop, isInside: isInside, isInsideFloatingObject: isInsideFloatingObject, @@ -80,6 +81,32 @@ function newFloatingLayer() { } } + function getFloatingObject(pFloatingObjectHandle) { + + if (INFO_LOG === true) { logger.write("[INFO] getFloatingObject -> Entering function."); } + + for (let i = 0; i < innactiveFloatingObjects.length; i++) { + + let floatingObject = innactiveFloatingObjects[i]; + + if (floatingObject.handle === pFloatingObjectHandle) { + + return floatingObject; + } + } + + for (let i = 0; i < thisObject.floatingObjects.length; i++) { + + let floatingObject = thisObject.floatingObjects[i]; + + if (floatingObject.handle === pFloatingObjectHandle) { + + return floatingObject; + } + } + } + + /******************************************/ /* */ /* Physics Engine Follows */ @@ -121,14 +148,19 @@ function newFloatingLayer() { } case "Bubble": { - if (floatingObject.payloadBubbleIndex >= floatingObject.payload.bubbles.length) { + try { - continue; // The bubbles array changed at the plotter before it was reflected here. We ignore this object. + payload.position = floatingObject.payload.bubbles[floatingObject.payloadBubbleIndex].position; + payload.visible = floatingObject.payload.bubbles[floatingObject.payloadBubbleIndex].visible; - } + } catch (err) { - payload.position = floatingObject.payload.bubbles[floatingObject.payloadBubbleIndex].position; - payload.visible = floatingObject.payload.bubbles[floatingObject.payloadBubbleIndex].visible; + if (ERROR_LOG === true) { logger.write("[ERROR] physicsLoop -> err = " + err); } + if (ERROR_LOG === true) { logger.write("[ERROR] physicsLoop -> floatingObject.payloadBubbleIndex = " + floatingObject.payloadBubbleIndex); } + if (ERROR_LOG === true) { logger.write("[ERROR] physicsLoop -> floatingObject.payload.bubbles.length = " + floatingObject.payload.bubbles.length); } + + continue; + } break; } default: {