From fb164af2058e32569086b2e05f46de703e40aeea Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Wed, 31 Oct 2018 07:55:46 +0100
Subject: [PATCH] All bots without picture or team picture are not shown at the
 products panel. Fix #37

---
 Panels/ProductsPanel.js | 22 ++++++++++++++--------
 ProductCard.js          | 22 ++++++++++++++++++++++
 2 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/Panels/ProductsPanel.js b/Panels/ProductsPanel.js
index 7eb76715a..13a13eafa 100644
--- a/Panels/ProductsPanel.js
+++ b/Panels/ProductsPanel.js
@@ -104,14 +104,7 @@
 
                         }
 
-                        /* Add to the Product Array */
-
-                        productCards.push(productCard);
-
-                        /* Listen to Status Changes Events */
-
-                        productCard.container.eventHandler.listenToEvent('Status Changed', onProductCardStatusChanged);
-                        productCard.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel);
+                        productCard.container.eventHandler.listenToEvent("Images Loaded", addProductCardToArray)
 
                     }
                 }
@@ -123,6 +116,19 @@
 
     }
 
+    function addProductCardToArray(productCard) {
+
+        /* Add to the Product Array */
+
+        productCards.push(productCard);
+
+        /* Listen to Status Changes Events */
+
+        productCard.container.eventHandler.listenToEvent('Status Changed', onProductCardStatusChanged);
+        productCard.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel);
+
+    }
+
     function onMouseWheel(pDelta) {
 
         if (pDelta > 0) {
diff --git a/ProductCard.js b/ProductCard.js
index b66493d17..09c88475d 100644
--- a/ProductCard.js
+++ b/ProductCard.js
@@ -93,6 +93,11 @@
     let botAvatar; // stores the avatar image of the team the bot portrayed at this card belongs to.
     let botAvatarLoaded = false;
 
+    /* Add an Event Handler */
+
+    thisObject.eventHandler = newEventHandler();
+    let imagesLoaded = 0;
+
     return thisObject;
 
     function initialize() {
@@ -189,6 +194,7 @@
 
         function onLegacyImageLoad() {
             legacyTeamAvatarLoaded = true;
+            imageLoaded();
         }
         
         legacyTeamAvatar.src = WEB_URL + "/Images/" + LEGACY_TEAM + "/" + LEGACY_TEAM + ".png";
@@ -212,6 +218,7 @@
 
         function onLegacyPlotterBanner() {
             legacyPlotterBannerLoaded = true;
+            imageLoaded();
         }
 
         legacyPlotterBanner.src = WEB_URL + "/Images/" + PLOTTER_TEAM + "/" + PLOTTER_REPO + "/" + PLOTTER_PROFILE_PIC;
@@ -231,6 +238,7 @@
 
         function onImageLoad() {
             teamAvatarLoaded = true;
+            imageLoaded();
         }
          
         teamAvatar.src = STORAGE_URL + "/" + TEAM + "/" + TEAM + "-" + "avatar.jpg";
@@ -245,12 +253,26 @@
         function onImageLoadBot() {
             botAvatarLoaded = true;
             thisObject.bot.avatar = botAvatar;
+            imageLoaded();
         }
 
         botAvatar.src = STORAGE_URL + "/" + TEAM + "/" + TEAM + "-" + "banner.jpg";
 
     }
 
+    function imageLoaded() {
+
+        /* We need 2 images, one for the team and one for the bot, to consider this Card valid and able to be shown. */
+
+        imagesLoaded++;
+
+        if (imagesLoaded === 2) {
+
+            thisObject.container.eventHandler.raiseEvent("Images Loaded", thisObject);
+
+        }
+    }
+
     function getContainer(point) {
 
         var container;