From 1e315841b8d0abfcfb1de196a71ba4c64a06d281 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Fri, 3 May 2019 12:41:22 +0200 Subject: [PATCH] Strategy items get clicked --- FloatingSpace/StrategyPart.js | 312 ++++++++++++++++++++++++ FloatingSpace/StrategyParts.js | 69 ++++++ Spaces/StrategySpace.js | 7 + StrategySpace/StrategyCollection.js | 24 +- StrategySpace/StrategyCollectionItem.js | 5 +- 5 files changed, 399 insertions(+), 18 deletions(-) create mode 100644 FloatingSpace/StrategyPart.js create mode 100644 FloatingSpace/StrategyParts.js diff --git a/FloatingSpace/StrategyPart.js b/FloatingSpace/StrategyPart.js new file mode 100644 index 000000000..c42db919e --- /dev/null +++ b/FloatingSpace/StrategyPart.js @@ -0,0 +1,312 @@ + +function newStrategyPart () { + let thisObject = { + + 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 + }/*, + { + visible: false, + imagePathOn: "Images/menu.icon.on.2.gif", + imagePathOff: "Images/menu.icon.off.2.gif", + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: 20 * 1 + }, + { + visible: false, + imagePathOn: "Images/menu.icon.on.3.gif", + imagePathOff: "Images/menu.icon.off.3.gif", + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -20 + }, + { + visible: false, + imagePathOn: "Images/menu.icon.on.4.gif", + imagePathOff: "Images/menu.icon.off.4.gif", + rawRadius: 8, + targetRadius: 0, + currentRadius: 0, + angle: -60 + } */ + ] + + return thisObject + + function initialize (callBackFunction) { + for (let i = 0; i < ballStringMenu.length; i++) { + let menuItem = ballStringMenu[i] + + menuItem.iconOn = 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. + } + + callBackFunction() + } + + function physicsLoop () { + // The menuItems also have a target. + + for (let i = 0; i < ballStringMenu.length; 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 + } + } + } + } + + function onMouseOver () { + 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 + } + } + + function onMouseClick (pPoint, pFloatingObject) { + /* What we need to do here is to check which menu item was clicked, if any. */ + + let menuItemIndex + + for (let i = 0; i < ballStringMenu.length; 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 (menuItemIndex !== undefined) { + 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 + } + } + } + } + + 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() + } + } + + 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) { + /* Main FloatingObject */ + + var alphaA + + if (pFloatingObject.currentRadius < 3) { + alphaA = 1 + } else { + 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.fillStyle = pFloatingObject.fillStyle + + 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() + } + } + + /* StringBall Menu */ + + for (let i = 0; i < ballStringMenu.length; 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) + } + } + + /* Label Text */ + + if (pFloatingObject.currentRadius > 6) { + browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle + + let labelPoint + let fontSize = pFloatingObject.currentFontSize + + browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY + + let label + + 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.PRIMARY + 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.PRIMARY + browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle + browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y) + } + } + } +} diff --git a/FloatingSpace/StrategyParts.js b/FloatingSpace/StrategyParts.js new file mode 100644 index 000000000..fcd42b795 --- /dev/null +++ b/FloatingSpace/StrategyParts.js @@ -0,0 +1,69 @@ + +function newStrategyParts () { + const MODULE_NAME = 'Strategy Parts' + const ERROR_LOG = true + const logger = newWebDebugLog() + logger.fileName = MODULE_NAME + + /* + + This object deals with Strategy Parts, a type of Floating Object that shows together with other parts a graphical representation of a strategy. + + */ + + let thisObject = { + + createNewStrategyPart: createNewStrategyPart, + destroyStrategyPart: destroyStrategyPart, + initialize: initialize, + finalize: finalize + + } + + let floatingLayer + + return thisObject + + function finalize () { + floatingLayer.finalize() + } + + function initialize (pFloatingLayer, callBackFunction) { + try { + floatingLayer = pFloatingLayer + + callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE) + } catch (err) { + if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) } + callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) + } + } + + function createNewStrategyPart (pPayload, callBackFunction) { + let floatingObject = newFloatingObject() + floatingObject.initialize('Profile Ball', onInitialized) + + function onInitialized (err) { + floatingObject.payload = pPayload + + floatingObject.friction = 0.995 + + floatingObject.initializeMass(100) + floatingObject.initializeRadius(30) + floatingObject.initializeImageSize(50) + floatingObject.initializeFontSize(10) + + floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)' + floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)' + + floatingLayer.addFloatingObject(floatingObject) + + callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE, floatingObject.handle) + } + } + + function destroyStrategyPart (pFloatingObjectHandle) { + floatingLayer.killFloatingObject(pFloatingObjectHandle) + } +} + diff --git a/Spaces/StrategySpace.js b/Spaces/StrategySpace.js index befe0c9d4..18c73f82d 100644 --- a/Spaces/StrategySpace.js +++ b/Spaces/StrategySpace.js @@ -32,10 +32,16 @@ function newStrategySpace () { function getContainer (point) { let container + if (thisObject.strategyCollection !== undefined) { + container = thisObject.strategyCollection.getContainer(point) + if (container !== undefined) { return container } + } + if (thisObject.sidePanel !== undefined) { container = thisObject.sidePanel.getContainer(point) if (container !== undefined) { return container } } + return } @@ -43,3 +49,4 @@ function newStrategySpace () { thisObject.sidePanel.draw() } } + diff --git a/StrategySpace/StrategyCollection.js b/StrategySpace/StrategyCollection.js index 2f7b52400..6056f801c 100644 --- a/StrategySpace/StrategyCollection.js +++ b/StrategySpace/StrategyCollection.js @@ -26,7 +26,7 @@ function newStrategyCollection () { thisObject.container.frame.position.y = 0 thisObject.container.isDraggeable = false - thisObject.container.isClickeable = true + thisObject.container.isClickeable = false return thisObject @@ -40,8 +40,6 @@ function newStrategyCollection () { return } - thisObject.container.eventHandler.listenToEvent('onMouseClick', onClick) - user = JSON.parse(user) const authId = user.authId @@ -233,22 +231,18 @@ function newStrategyCollection () { } } - function onClick () { - - } - function getContainer (point) { let container - /* First we check if this point is inside this object UI. */ - - if (thisObject.container.frame.isThisPointHere(point, true) === true) { - return this.container - } else { - /* This point does not belong to this space. */ - - return undefined + for (let i = 0; i < colletionItems.length; i++) { + let item = colletionItems[i] + container = item.getContainer(point) + if (container !== undefined) { + return container + } } + + return undefined } function draw () { diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index efc1a0eae..a17c1900b 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -37,12 +37,12 @@ function newStrategyCollectionItem () { } function onMouseClick (event) { - + console.log('ITEM CLICKED') } function getContainer (point) { let container - if (thisObject.container.frame.isThispointHere(point, true) === true) { + if (thisObject.container.frame.isThisPointHere(point, true) === true) { return thisObject.container } else { return undefined @@ -161,4 +161,3 @@ function newStrategyCollectionItem () { browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE) } } -