From 96d14610bd96453d95d80a18f675e5719fc0882e Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Sun, 4 Mar 2018 08:31:08 +0100
Subject: [PATCH] Some pics at the Product Panel

---
 .vs/AAWebPlatform/v15/.suo | Bin 83456 -> 80384 bytes
 Animation.js               |  11 +++-----
 ProductCard.js             |  53 +++++++++++++++++++++++++++++--------
 index.html                 |   7 ++---
 4 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/.vs/AAWebPlatform/v15/.suo b/.vs/AAWebPlatform/v15/.suo
index e31f3643289f6a3d601679a9c2c9bd7f837c0264..a4cbb8bd03d74e0bed8a7832e7137c16aa6a2146 100644
GIT binary patch
delta 2741
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
L*PojEA20kTaIlpK

delta 3132
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
BTaEw#

diff --git a/Animation.js b/Animation.js
index 073bde721..de5aa8683 100644
--- a/Animation.js
+++ b/Animation.js
@@ -66,19 +66,16 @@ function newAnimation() {
 
         });
 
-        /* We also draw this array of circles, that is used for debugging purposes. */
-
-        drawSmallBall();
-
-        /* We request the next frame to be drawn, and stablishing a loop */
-
-        animationLoopHandle = window.requestAnimationFrame(animationLoop);
 
         /* We animate the zoom of the viewPort */
 
         viewPort.animate();
         viewPort.draw();
 
+        /* We request the next frame to be drawn, and stablishing a loop */
+
+        animationLoopHandle = window.requestAnimationFrame(animationLoop);
+
     }
 }
 
diff --git a/ProductCard.js b/ProductCard.js
index daf9d49cb..3e35d49fb 100644
--- a/ProductCard.js
+++ b/ProductCard.js
@@ -284,9 +284,46 @@
 
     function drawProductCard() {
 
+        /*
+
+        Put image on the card.
+
+        */
+
+        let teamImagePoint = {
+            x: 10,
+            y: 5
+        };
+
+        teamImagePoint = thisObject.container.frame.frameThisPoint(teamImagePoint);
+
+        let teamImage = document.getElementById("AAMasters");
+        browserCanvasContext.drawImage(teamImage, teamImagePoint.x, teamImagePoint.y, 45, 45);
+
         centerPoint = {
-            x: 7,
-            y: 7
+            x: thisObject.container.frame.width - 10,
+            y: thisObject.container.frame.height / 2
+        };
+
+        if (thisObject.bot.codeName === "AAOlivia") {
+
+            let botImagePoint = {
+                x: thisObject.container.frame.width - 10 - 50,
+                y: 5
+            };
+
+            botImagePoint = thisObject.container.frame.frameThisPoint(botImagePoint);
+
+            let botImage = document.getElementById("AAOlivia");
+            browserCanvasContext.drawImage(botImage, botImagePoint.x, botImagePoint.y, 45, 45);
+
+        }
+
+        /* Now the small circle */
+
+        centerPoint = {
+            x: thisObject.container.frame.width - 10,
+            y: thisObject.container.frame.height / 2
         };
 
         /* Now the transformations. */
@@ -336,18 +373,12 @@
 
         let label;
 
-        let xOffset;
-        let yOffset;
-
         /* devTeam */
 
         label = "Dev Team: " + thisObject.devTeam.displayName;
 
-        xOffset = 0;
-        yOffset = 0;
-
         labelPoint = {
-            x: 20,
+            x: 65,
             y: thisObject.container.frame.height - 45
         };
 
@@ -361,7 +392,7 @@
         label = "Bot: " + thisObject.bot.displayName;
 
         labelPoint = {
-            x: 20,
+            x: 65,
             y: thisObject.container.frame.height - 30
         };
 
@@ -375,7 +406,7 @@
         label = "Product: " + thisObject.product.displayName;
 
         labelPoint = {
-            x: 20,
+            x: 65,
             y: thisObject.container.frame.height - 15
         };
 
diff --git a/index.html b/index.html
index 592596d95..4f5434e25 100644
--- a/index.html
+++ b/index.html
@@ -74,8 +74,9 @@
         }
     </style>
 </head>
-<body id="body" style="margin: 0px; padding: 0px; border: 0px; overflow:hidden;"  onload="dashboardStart();">
-    <canvas id="canvas" width="1400" height="600" border="0">
-></canvas>
+<body id="body" style="margin: 0px; padding: 0px; border: 0px; overflow:hidden;" onload="dashboardStart();">
+    <canvas id="canvas" width="1400" height="600" border="0"></canvas>
+    <img id="AAMasters" width="0" height="0" src="https://avatars2.githubusercontent.com/u/36243600?s=400&u=4df23798487a2853d211e764efa55233b1147ddb&v=4">
+    <img id="AAOlivia" width="0" height="0" src="https://raw.githubusercontent.com/AAMasters/AAOlivia-Indicator-Bot/master/ProfilePicture.png">
 </body>
 </html>
\ No newline at end of file