Strategy items get clicked

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)
+      }
+    }
+  }
+}

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)
+  }
+}
+

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()
   }
 }
+

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 () {

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)
   }
 }
-