Images appearing well

StrategySpace/StrategyCollection.js

@@ -210,7 +210,7 @@ function newStrategyCollection () {
 
   function createCollectionItems () {
     const TOP_MARGIN = 100
-    const ITEMS_SEPARATION = 70
+    const ITEMS_SEPARATION = 90
 
     for (let i = 0; i < thisObject.strategies.length; i++) {
       let strategy = thisObject.strategies[i]
@@ -222,6 +222,14 @@ function newStrategyCollection () {
       collectionItem.container.frame.position.y = i * ITEMS_SEPARATION + TOP_MARGIN
 
       colletionItems.push(collectionItem)
+
+      /* Load Strategies Icons */
+
+      let imageIndex = i + 1
+      if (imageIndex > 14) { imageIndex = 14 }
+
+      let strategyImage = loadEmoji('Symbols/Emoji Symbols-' + (112 + imageIndex) + '.png')
+      collectionItem.icon = strategyImage
     }
   }
 

StrategySpace/StrategyCollectionItem.js

@@ -1,6 +1,7 @@
 function newStrategyCollectionItem () {
   const MODULE_NAME = 'Strategy Collection Item'
   let thisObject = {
+    icon: undefined,
     strategy: undefined,
     container: undefined,
     draw: draw,
@@ -20,7 +21,7 @@ function newStrategyCollectionItem () {
 
   function initialize () {
     const ITEM_WIDTH = 430
-    const ITEM_HEIGHT = 60
+    const ITEM_HEIGHT = 80
 
     thisObject.container.frame.width = ITEM_WIDTH
     thisObject.container.frame.height = ITEM_HEIGHT
@@ -41,7 +42,7 @@ function newStrategyCollectionItem () {
 
   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
@@ -53,6 +54,8 @@ function newStrategyCollectionItem () {
 
     borders()
     text()
+    arrow()
+    icon()
   }
 
   function text () {
@@ -60,17 +63,17 @@ function newStrategyCollectionItem () {
       return
     }
 
-    const LEFT_MARGIN = 70
-    const TOP_MARGIN = 35
+    const LEFT_MARGIN = 80
+    const TOP_MARGIN = 45
 
     let strategy = thisObject.strategy
 
-    let labelPoint = {
+    let labelpoint = {
       x: LEFT_MARGIN,
       y: TOP_MARGIN
     }
 
-    labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
+    labelpoint = thisObject.container.frame.frameThisPoint(labelpoint)
 
     let labelToPrint = strategy.name
     labelToPrint = labelToPrint.toUpperCase()
@@ -78,7 +81,7 @@ function newStrategyCollectionItem () {
     let opacity = 1
     let fontSize = 15
 
-    printLabel(labelToPrint, labelPoint.x, labelPoint.y, opacity, fontSize)
+    printLabel(labelToPrint, labelpoint.x, labelpoint.y, opacity, fontSize)
   }
 
   function borders () {
@@ -94,5 +97,68 @@ function newStrategyCollectionItem () {
 
     roundedCornersBackground(params)
   }
+
+  function arrow () {
+    const X_OFFSET = 400
+    const Y_OFFSET = 40
+    const HEIGHT = 12
+    const WIDTH = 6
+    const LINE_WIDTH = 2
+    const OPACITY = 0.6
+
+    point1 = {
+      x: X_OFFSET,
+      y: Y_OFFSET - HEIGHT / 2
+    }
+
+    point2 = {
+      x: X_OFFSET + WIDTH,
+      y: Y_OFFSET
+    }
+
+    point3 = {
+      x: X_OFFSET,
+      y: Y_OFFSET + HEIGHT / 2
+    }
+
+        /* Now the transformations. */
+
+    point1 = thisObject.container.frame.frameThisPoint(point1)
+    point2 = thisObject.container.frame.frameThisPoint(point2)
+    point3 = thisObject.container.frame.frameThisPoint(point3)
+
+    browserCanvasContext.setLineDash([0, 0])
+
+          /* The Arrow  */
+
+    browserCanvasContext.beginPath()
+
+    browserCanvasContext.moveTo(point1.x, point1.y)
+    browserCanvasContext.lineTo(point2.x, point2.y)
+    browserCanvasContext.lineTo(point3.x, point3.y)
+
+    browserCanvasContext.lineWidth = LINE_WIDTH
+    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
+    browserCanvasContext.stroke()
+  }
+
+  function icon () {
+    if (thisObject.icon === undefined) { return }
+
+    const X_OFFSET = 45
+    const Y_OFFSET = 40
+    const IMAGE_SIZE = 40
+
+    point1 = {
+      x: X_OFFSET,
+      y: Y_OFFSET
+    }
+
+        /* Now the transformations. */
+
+    point1 = thisObject.container.frame.frameThisPoint(point1)
+
+    browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE)
+  }
 }