diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js index c8c4493ee..a8fd8dd6f 100644 --- a/FloatingSpace/ProfileBall.js +++ b/FloatingSpace/ProfileBall.js @@ -1,28 +1,27 @@ - -function newProfileBall() { - let thisObject = { +function newProfileBall () { + let thisObject = { - physicsLoop: physicsLoop, - onMouseOver: onMouseOver, - onMouseClick: onMouseClick, - onMouseNotOver: onMouseNotOver, - drawBackground: drawBackground, - drawForeground: drawForeground, - initialize: initialize + physicsLoop: physicsLoop, + onMouseOver: onMouseOver, + onMouseClick: onMouseClick, + onMouseNotOver: onMouseNotOver, + drawBackground: drawBackground, + drawForeground: drawForeground, + initialize: initialize - }; + } - let ballStringMenu = [ - { - visible: false, - imagePathOn: "Images/menu.icon.on.1.gif", - imagePathOff: "Images/menu.icon.off.1.gif", - rawRadius: 8, - targetRadius: 0, - currentRadius: 0, - angle: 60 - }, + let ballStringMenu = [ + { + visible: false, + imagePathOn: 'Images/menu.icon.on.1.gif', + imagePathOff: 'Images/menu.icon.off.1.gif', + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 60 + }/*, { visible: false, imagePathOn: "Images/menu.icon.on.2.gif", @@ -49,308 +48,266 @@ function newProfileBall() { targetRadius: 0, currentRadius: 0, angle: -60 - } - ]; + } */ + ] - return thisObject; + return thisObject - function initialize(callBackFunction) { + function initialize (callBackFunction) { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] - for (let i = 0; i < ballStringMenu.length; i++) { + menuItem.iconOn = new Image() - let menuItem = ballStringMenu[i]; + menuItem.iconOn.onload = onImageLoad - menuItem.iconOn = new Image(); + function onImageLoad () { + menuItem.iconOff = new Image() - menuItem.iconOn.onload = onImageLoad; - - function onImageLoad() { - - menuItem.iconOff = new Image(); - - menuItem.iconOff.onload = onImageLoad; - - function onImageLoad() { - menuItem.canDrawIcon = true; - } - - menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff; - - } - - menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn; - - menuItem.icon = menuItem.iconOn; // The default value is ON. + menuItem.iconOff.onload = onImageLoad + function onImageLoad () { + menuItem.canDrawIcon = true } - callBackFunction(); + menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff + } + menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn + + menuItem.icon = menuItem.iconOn // The default value is ON. } - function physicsLoop() { + callBackFunction() + } + function physicsLoop () { // The menuItems also have a target. - for (let i = 0; i < ballStringMenu.length; i++) { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] - let menuItem = ballStringMenu[i]; - - if (Math.abs(menuItem.currentRadius - menuItem.targetRadius) >= 0.5) { - - if (menuItem.currentRadius < menuItem.targetRadius) { - menuItem.currentRadius = menuItem.currentRadius + 0.5; - } else { - menuItem.currentRadius = menuItem.currentRadius - 0.5; - } - } + if (Math.abs(menuItem.currentRadius - menuItem.targetRadius) >= 0.5) { + if (menuItem.currentRadius < menuItem.targetRadius) { + menuItem.currentRadius = menuItem.currentRadius + 0.5 + } else { + menuItem.currentRadius = menuItem.currentRadius - 0.5 } + } } + } - function onMouseOver() { + function onMouseOver () { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] - for (let i = 0; i < ballStringMenu.length; i++) { - - let menuItem = ballStringMenu[i]; - - menuItem.targetRadius = menuItem.rawRadius * 1.5; - } - } - - function onMouseNotOver() { - - for (let i = 0; i < ballStringMenu.length; i++) { - - let menuItem = ballStringMenu[i]; - - menuItem.targetRadius = menuItem.rawRadius * 0 - i * 5; - } + menuItem.targetRadius = menuItem.rawRadius * 1.5 } + } - function onMouseClick(pPoint, pFloatingObject) { + function onMouseNotOver () { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] + menuItem.targetRadius = menuItem.rawRadius * 0 - i * 5 + } + } + + function onMouseClick (pPoint, pFloatingObject) { /* What we need to do here is to check which menu item was clicked, if any. */ - let menuItemIndex; + let menuItemIndex - for (let i = 0; i < ballStringMenu.length; i++) { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] - let menuItem = ballStringMenu[i]; - - if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { - - let position = { - x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) - }; - - browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2); - - let distance = Math.sqrt(Math.pow(position.x - pPoint.x, 2) + Math.pow(position.y - pPoint.y, 2)); - - if (distance < menuItem.currentRadius) { - menuItemIndex = i; - } - } + if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { + let position = { + x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), + y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) } - if (menuItemIndex !== undefined) { + browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2) - switch (menuItemIndex) { - - case 0: { // This menu item is to turn ON / OFF the plotting of this bot. - - if (pFloatingObject.payload.profile.plot === true) { - - pFloatingObject.payload.profile.plot = false; - - let menuItem = ballStringMenu[0]; - menuItem.icon = menuItem.iconOff; - - } else { - - pFloatingObject.payload.profile.plot = true; - - let menuItem = ballStringMenu[0]; - menuItem.icon = menuItem.iconOn; - - } - - break; - } - - case 1: { // This menu item is to turn ON the Debug Log pannel for the bot. - - break; - } - } + let distance = Math.sqrt(Math.pow(position.x - pPoint.x, 2) + Math.pow(position.y - pPoint.y, 2)) + if (distance < menuItem.currentRadius) { + menuItemIndex = i } + } } - function drawBackground(pFloatingObject) { + if (menuItemIndex !== undefined) { + switch (menuItemIndex) { - let point = { - x: pFloatingObject.payload.profile.position.x, - y: pFloatingObject.payload.profile.position.y - }; + case 0: { + // This menu item is to turn ON / OFF the plotting of this bot. - point = viewPort.fitIntoVisibleArea(point); + if (pFloatingObject.payload.profile.plot === true) { + pFloatingObject.payload.profile.plot = false - if (pFloatingObject.currentRadius > 1) { + let menuItem = ballStringMenu[0] + menuItem.icon = menuItem.iconOff + } else { + pFloatingObject.payload.profile.plot = true + let menuItem = ballStringMenu[0] + menuItem.icon = menuItem.iconOn + } + + break + } + + case 1: { + // This menu item is to turn ON the Debug Log pannel for the bot. + + break + } + } + } + } + + function drawBackground (pFloatingObject) { + let point = { + x: pFloatingObject.payload.profile.position.x, + y: pFloatingObject.payload.profile.position.y + } + + point = viewPort.fitIntoVisibleArea(point) + + if (pFloatingObject.currentRadius > 1) { /* Target Line */ - browserCanvasContext.beginPath(); - browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y); - browserCanvasContext.lineTo(point.x, point.y); - browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)'; - browserCanvasContext.setLineDash([4, 2]); - browserCanvasContext.lineWidth = 1; - browserCanvasContext.stroke(); - browserCanvasContext.setLineDash([0, 0]); - - } - - if (pFloatingObject.currentRadius > 0.5) { - - /* Target Spot */ - - var radius = 1; - - browserCanvasContext.beginPath(); - browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true); - browserCanvasContext.closePath(); - browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)'; - browserCanvasContext.fill(); - - } + browserCanvasContext.beginPath() + browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y) + browserCanvasContext.lineTo(point.x, point.y) + browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)' + browserCanvasContext.setLineDash([4, 2]) + browserCanvasContext.lineWidth = 1 + browserCanvasContext.stroke() + browserCanvasContext.setLineDash([0, 0]) } - function drawForeground(pFloatingObject) { + if (pFloatingObject.currentRadius > 0.5) { + /* Target Spot */ - if (pFloatingObject.currentRadius > 5) { + var radius = 1 + browserCanvasContext.beginPath() + browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)' + browserCanvasContext.fill() + } + } + + function drawForeground (pFloatingObject) { + if (pFloatingObject.currentRadius > 5) { /* Contourn */ - browserCanvasContext.beginPath(); - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true); - browserCanvasContext.closePath(); - browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)'; - browserCanvasContext.lineWidth = 1; - browserCanvasContext.stroke(); - - } - - if (pFloatingObject.currentRadius > 0.5) { + browserCanvasContext.beginPath() + browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)' + browserCanvasContext.lineWidth = 1 + browserCanvasContext.stroke() + } + if (pFloatingObject.currentRadius > 0.5) { /* Main FloatingObject */ - var alphaA; + var alphaA - if (pFloatingObject.currentRadius < 3) { - alphaA = 1; - } else { - alphaA = 0.75; - } + if (pFloatingObject.currentRadius < 3) { + alphaA = 1 + } else { + alphaA = 0.75 + } - alphaA = 0.75; + alphaA = 0.75 - browserCanvasContext.beginPath(); - browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true); - browserCanvasContext.closePath(); + browserCanvasContext.beginPath() + browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true) + browserCanvasContext.closePath() - browserCanvasContext.fillStyle = pFloatingObject.fillStyle; + browserCanvasContext.fillStyle = pFloatingObject.fillStyle - browserCanvasContext.fill(); - - } + browserCanvasContext.fill() + } /* Image */ - if (pFloatingObject.payload.profile.imageId !== undefined) { - - let image = pFloatingObject.payload.profile.botAvatar; - - if (image !== null && image !== undefined) { - - browserCanvasContext.save(); - browserCanvasContext.beginPath(); - browserCanvasContext.arc(pFloatingObject.currentPosition.x , pFloatingObject.currentPosition.y , pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true); - browserCanvasContext.closePath(); - browserCanvasContext.clip(); - browserCanvasContext.drawImage(image, pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize); - browserCanvasContext.beginPath(); - browserCanvasContext.arc(pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true); - browserCanvasContext.clip(); - browserCanvasContext.closePath(); - browserCanvasContext.restore(); - } - } + if (pFloatingObject.payload.profile.imageId !== undefined) { + let image = pFloatingObject.payload.profile.botAvatar + if (image !== null && image !== undefined) { + browserCanvasContext.save() + browserCanvasContext.beginPath() + browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true) + browserCanvasContext.closePath() + browserCanvasContext.clip() + browserCanvasContext.drawImage(image, pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize) + browserCanvasContext.beginPath() + browserCanvasContext.arc(pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true) + browserCanvasContext.clip() + browserCanvasContext.closePath() + browserCanvasContext.restore() + } + } /* StringBall Menu */ - for (let i = 0; i < ballStringMenu.length; i++) { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] - let menuItem = ballStringMenu[i]; - - if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { - - let position = { - x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) - }; - - browserCanvasContext.drawImage(menuItem.icon, position.x - menuItem.currentRadius, position.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2); - } + if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) { + let position = { + x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)), + y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle)) } + browserCanvasContext.drawImage(menuItem.icon, position.x - menuItem.currentRadius, position.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2) + } + } + /* Label Text */ - if (pFloatingObject.currentRadius > 6) { + if (pFloatingObject.currentRadius > 6) { + browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle - browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle; + let labelPoint + let fontSize = pFloatingObject.currentFontSize - let labelPoint; - let fontSize = pFloatingObject.currentFontSize; + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY; + let label - let label; + label = pFloatingObject.payload.profile.upLabel - label = pFloatingObject.payload.profile.upLabel; - - if (label !== undefined) { - - labelPoint = { - x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10 - }; - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY; - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle; - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); - - } - - label = pFloatingObject.payload.profile.downLabel; - - if (label !== undefined) { - - labelPoint = { - x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, - y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15 - }; - - browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY; - browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle; - browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y); - - } + if (label !== undefined) { + labelPoint = { + x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10 } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + + label = pFloatingObject.payload.profile.downLabel + + if (label !== undefined) { + labelPoint = { + x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO, + y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15 + } + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } } + } } - -