Strategy List appearing

Canvas.js

@@ -172,11 +172,11 @@ function newCanvas () {
           animation.addCallBackFunction('Chart Space', thisObject.chartSpace.draw, onFunctionAdded)
           animation.addCallBackFunction('Floating Space', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded)
           animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded)
-          animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded)
           animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded)
           animation.addCallBackFunction('Bottom Space', thisObject.bottomSpace.draw, onFunctionAdded)
           animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded)
           animation.addCallBackFunction('Strategy Space', thisObject.strategySpace.draw, onFunctionAdded)
+          animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded)
           animation.start(onStart)
 
           function onFunctionAdded (err) {

ControlsToolBox/SidePanel.js

@@ -1,6 +1,7 @@
 function newSidePanel () {
   const MODULE_NAME = 'Side Panel'
   let thisObject = {
+    areas: [],
     sidePanelTab: undefined,
     container: undefined,
     draw: draw,
@@ -56,6 +57,11 @@ function newSidePanel () {
     if (isInitialized === false) { return }
     borders()
     thisObject.sidePanelTab.draw()
+
+    for (let i = 0; i < thisObject.areas.length; i++) {
+      let area = thisObject.areas[i]
+      area.draw()
+    }
   }
 
   function borders () {
@@ -126,4 +132,3 @@ function newSidePanel () {
     }
   }
 }
-

Spaces/StrategySpace.js

@@ -24,6 +24,7 @@ function newStrategySpace () {
 
     thisObject.sidePanel = newSidePanel()
     thisObject.sidePanel.initialize()
+    thisObject.sidePanel.areas.push(thisObject.strategyCollection)
   }
 
   function getContainer (point) {

StrategySpace/StrategyCollection.js

@@ -6,6 +6,7 @@ function newStrategyCollection () {
   logger.fileName = MODULE_NAME
 
   let thisObject = {
+    collection: undefined,
     container: undefined,
     draw: draw,
     getContainer: getContainer,
@@ -178,7 +179,7 @@ function newStrategyCollection () {
           })
                   .then(response => {
                     window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies))
-                    let strategies = response.data.strategizer_StrategyByFb.subStrategies
+                    thisObject.collection = response.data.strategizer_StrategyByFb.subStrategies
                     resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies})
                   })
                   .catch(error => {
@@ -223,6 +224,27 @@ function newStrategyCollection () {
   }
 
   function draw () {
-    return // nothing to show.
+    if (thisObject.collection === undefined) {
+      return
+    }
+
+    const ROW_HEIGHT = 50
+    const LEFT_MARGIN = 50
+    const TOP_MARGIN = 10
+
+    for (let i = 0; i < thisObject.collection.length; i++) {
+      let strategy = thisObject.collection[i]
+
+      let labelPoint = {
+        x: LEFT_MARGIN,
+        y: TOP_MARGIN + i * ROW_HEIGHT
+      }
+
+      let labelToPrint = strategy.name
+      let opacity = 1
+      let fontSize = 12
+
+      printLabel(labelToPrint, labelPoint.x, labelPoint.y, opacity, fontSize)
+    }
   }
 }