PA EE code refactoring and small fixes

packages/explorable-explanations/src/protectedAudience/canvas/setupMainCanvas.js

@@ -28,6 +28,8 @@ import throttle from 'just-throttle';
 export const setupMainCanvas = async (p, doNotPlay = false) => {
   const { height, width } = calculateCanvasDimensions();
   const canvas = p.createCanvas(width, height);
+
+  p.smooth();
   canvas.parent('ps-canvas');
   canvas.style('z-index', 0);
   p.background(config.canvas.background);

packages/explorable-explanations/src/protectedAudience/components/box.js

@@ -31,7 +31,7 @@ const Box = ({
   width = config.flow.box.width,
   height = config.flow.box.height,
   color,
-  info = true,
+  info = false,
 }) => {
   x = typeof x === 'function' ? x() : x;
   y = typeof y === 'function' ? y() : y;
@@ -73,9 +73,7 @@ const Box = ({
         mouseY >= iconY &&
         mouseY <= iconY + INFO_ICON_SIZE
       ) {
-        console.log('Hovering over'); // eslint-disable-line no-console
-      } else {
-        console.log('Not hovering over'); // eslint-disable-line no-console
+        console.log(info); // eslint-disable-line no-console
       }
     };
 

packages/explorable-explanations/src/protectedAudience/components/progressLine.js

@@ -90,9 +90,10 @@ const ProgressLine = ({
     p.push();
     p.stroke(0);
     p.strokeWeight(1);
-    p.pop();
 
     returnCoordinates = draw[direction]();
+
+    p.pop();
   };
 
   let currentX = x1; // For horizontal directions
@@ -120,7 +121,6 @@ const ProgressLine = ({
       p.push();
       p.stroke(0);
       p.strokeWeight(1);
-      p.pop();
 
       switch (direction) {
         case 'right':
@@ -182,6 +182,8 @@ const ProgressLine = ({
           throw new Error(`Invalid direction: ${direction}`);
       }
 
+      p.pop();
+
       if (app.cancelPromise) {
         resolve();
         return;

packages/explorable-explanations/src/protectedAudience/config.js

@@ -17,7 +17,7 @@ const config = {
   canvas: {
     width: 700,
     height: 500,
-    background: 245,
+    background: '#fff',
     fontSize: 12,
   },
   timeline: {

packages/explorable-explanations/src/protectedAudience/index.js

@@ -109,6 +109,7 @@ app.expandBubbleActions = () => {
   bubbles.generateBubbles(true);
   app.pause();
 };
+
 app.minifiedBubbleClickListener = (event, expandOverride) => {
   const rect = app.minifiedBubbleContainer.getBoundingClientRect();
 
@@ -466,6 +467,7 @@ app.toggleMultSeller = (event) => {
 // Define the sketch
 export const sketch = (p) => {
   app.handleControls();
+
   p.setup = () => {
     setupMainCanvas(p);
   };
@@ -537,6 +539,7 @@ app.reset = async (callFromExtension = false) => {
   utils.markVisitedValue(config.timeline.circles.length, false);
   timeline.eraseAndRedraw();
   await utils.delay(1000);
+
   if (!callFromExtension) {
     setupInterestGroupCanvas(app.igp);
     setupUserCanvas(app.up);
@@ -565,6 +568,7 @@ app.createCanvas = () => {
     new p5(userSketch);
   }
 };
+
 app.createCanvas();
 
 export { app };

packages/explorable-explanations/src/protectedAudience/modules/auctions.js

@@ -47,20 +47,75 @@ auction.setupAuctions = () => {
  */
 auction.setUp = (index) => {
   const { circles } = config.timeline;
-  const { box, colors } = config.flow;
+  const { box } = config.flow;
   const currentCircle = circles[index];
 
-  const { x, y } = flow.getTimelineCircleCoordinates(index);
-
   if (currentCircle.type !== 'publisher') {
     app.auction.auctions.push(null);
     return;
   }
 
-  const steps = [];
+  app.isMultiSeller = true;
+
+  auction.steps = [];
+
+  const steps = auction.steps;
+
+  auction.setUpAdUnitCode(index);
+  auction.setupBranches(index);
+  auction.setUpfirstSSPTagFlow(index);
+
+  steps.push({
+    component: ProgressLine,
+    props: {
+      direction: 'right',
+      x1: () => app.auction.nextTipCoordinates?.x - 10 + box.width / 2,
+      y1: () => {
+        return app.auction.nextTipCoordinates?.y - 10 - box.height / 2;
+      },
+    },
+    callBack: (returnValue) => {
+      app.auction.nextTipCoordinates = returnValue;
+    },
+  });
+
+  auction.setUpRunadAuction();
+
+  steps.push({
+    component: ProgressLine,
+    props: {
+      direction: 'right',
+      x1: () => app.auction.nextTipCoordinates?.x + box.width / 2,
+      y1: () => {
+        return app.auction.nextTipCoordinates?.y + 10;
+      },
+    },
+    callBack: (returnValue) => {
+      app.auction.nextTipCoordinates = returnValue;
+    },
+  });
 
-  // Setup Ad unit codes
   steps.push({
+    component: Box,
+    props: {
+      title: 'Show Winning Ad',
+      x: () => app.auction.nextTipCoordinates?.x + 10,
+      y: () => app.auction.nextTipCoordinates?.y - box.height / 2,
+    },
+    callBack: (returnValue) => {
+      app.auction.nextTipCoordinates = returnValue.down;
+    },
+  });
+
+  app.auction.auctions.push(auction.steps);
+};
+
+auction.setUpAdUnitCode = (index) => {
+  const { colors } = config.flow;
+  const { x, y } = flow.getTimelineCircleCoordinates(index);
+
+  // Setup Ad unit codes
+  auction.steps.push({
     component: Branches,
     props: {
       x1: x,
@@ -91,9 +146,10 @@ auction.setUp = (index) => {
       app.auction.nextTipCoordinates = returnValue[1];
     },
   });
+};
 
-  // Setup Branches
-  steps.push({
+auction.setupBranches = (index) => {
+  auction.steps.push({
     component: Branches,
     props: {
       x1: () => app.auction.nextTipCoordinates?.x,
@@ -121,8 +177,12 @@ auction.setUp = (index) => {
       app.auction.nextTipCoordinates = returnValue[1];
     },
   });
+};
 
-  steps.push({
+auction.setUpfirstSSPTagFlow = () => {
+  const { box, colors } = config.flow;
+
+  auction.steps.push({
     component: ProgressLine,
     props: {
       direction: 'down',
@@ -135,7 +195,7 @@ auction.setUp = (index) => {
     },
   });
 
-  steps.push({
+  auction.steps.push({
     component: Box,
     props: {
       title: 'SSP Tag',
@@ -147,7 +207,7 @@ auction.setUp = (index) => {
     },
   });
 
-  steps.push({
+  auction.steps.push({
     component: ProgressLine,
     props: {
       direction: 'down',
@@ -159,7 +219,7 @@ auction.setUp = (index) => {
     },
   });
 
-  steps.push({
+  auction.steps.push({
     component: Box,
     props: {
       title: 'SSP',
@@ -172,7 +232,7 @@ auction.setUp = (index) => {
     },
   });
 
-  steps.push({
+  auction.steps.push({
     component: ProgressLine,
     props: {
       direction: 'down',
@@ -184,7 +244,7 @@ auction.setUp = (index) => {
     },
   });
 
-  steps.push({
+  auction.steps.push({
     component: Box,
     props: {
       title: 'DSPs',
@@ -197,7 +257,7 @@ auction.setUp = (index) => {
     },
   });
 
-  steps.push({
+  auction.steps.push({
     component: ProgressLine,
     props: {
       direction: 'up',
@@ -211,7 +271,7 @@ auction.setUp = (index) => {
     },
   });
 
-  steps.push({
+  auction.steps.push({
     component: ProgressLine,
     props: {
       direction: 'up',
@@ -224,20 +284,11 @@ auction.setUp = (index) => {
       app.auction.nextTipCoordinates = returnValue;
     },
   });
+};
 
-  steps.push({
-    component: ProgressLine,
-    props: {
-      direction: 'right',
-      x1: () => app.auction.nextTipCoordinates?.x - 10 + box.width / 2,
-      y1: () => {
-        return app.auction.nextTipCoordinates?.y - 10 - box.height / 2;
-      },
-    },
-    callBack: (returnValue) => {
-      app.auction.nextTipCoordinates = returnValue;
-    },
-  });
+auction.setUpRunadAuction = () => {
+  const steps = auction.steps;
+  const { box, colors } = config.flow;
 
   steps.push({
     component: Box,
@@ -419,34 +470,6 @@ auction.setUp = (index) => {
       },
     });
   });
-
-  steps.push({
-    component: ProgressLine,
-    props: {
-      direction: 'right',
-      x1: () => app.auction.nextTipCoordinates?.x + box.width / 2,
-      y1: () => {
-        return app.auction.nextTipCoordinates?.y + 10;
-      },
-    },
-    callBack: (returnValue) => {
-      app.auction.nextTipCoordinates = returnValue;
-    },
-  });
-
-  steps.push({
-    component: Box,
-    props: {
-      title: 'Show Winning Ad',
-      x: () => app.auction.nextTipCoordinates?.x + 10,
-      y: () => app.auction.nextTipCoordinates?.y - box.height / 2,
-    },
-    callBack: (returnValue) => {
-      app.auction.nextTipCoordinates = returnValue.down;
-    },
-  });
-
-  app.auction.auctions.push(steps);
 };
 
 /**

packages/explorable-explanations/src/protectedAudience/modules/timeline.js

@@ -377,12 +377,18 @@ timeline.drawCircle = (index, completed = false) => {
   const position = app.timeline.circlePositions[index];
   const { diameter } = circleProps;
 
-  app.p.circle(position.x, position.y, diameter);
+  app.p.push();
 
   if (!completed) {
+    app.p.circle(position.x, position.y, diameter);
     return;
   }
 
+  app.p.stroke(colors.visitedBlue);
+  app.p.circle(position.x, position.y, diameter);
+
+  app.p.pop();
+
   if (app.isInteractiveMode) {
     if (app.usedNextOrPrev && app.timeline.currentIndex === index) {
       app.up.image(