Feature: Add multi-seller auction

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

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Custom component to allow rendering any shape which are used in only some specific cases and are not resuable
+ * as the flow relies on a component to be used for each step.
+ * @param {object} props Component props
+ * @param props.render Render fuction to execute inside the Custom function.
+ * @returns {any} Return anything that render function wants to return, mostly nextTip object.
+ */
+const Custom = ({ render }) => {
+  return render();
+};
+
+export default Custom;

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

@@ -18,3 +18,5 @@ export { default as Branches } from './branches';
 export { default as ProgressLine } from './progressLine';
 export { default as RippleEffect } from './rippleEffect';
 export { default as FlowExpander } from './flowExpander';
+export { default as Text } from './text';
+export { default as Custom } from './custom';

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

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Internal dependencies.
+ */
+import app from '../app';
+import config from '../config';
+
+const Text = ({ text, x, y }) => {
+  x = typeof x === 'function' ? x() : x;
+  y = typeof y === 'function' ? y() : y;
+
+  const nextTip = {
+    x: x,
+    y: y,
+  };
+
+  const p = app.p;
+
+  p.push();
+  p.textAlign(p.CENTER, p.CENTER);
+  p.fill(config.flow.colors.box.text);
+  p.strokeWeight(0);
+  p.textFont('sans-serif');
+  p.text(text, x, y);
+  p.pop();
+
+  return nextTip;
+};
+
+export default Text;

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

@@ -17,6 +17,8 @@ const config = {
   canvas: {
     width: 700,
     height: 500,
+    extraHeight: 1600, // @todo: It needs to be calculated based on the content.
+    extraWidth: 450, // @todo: It needs to be calculated based on the content.
     background: '#fff',
     fontSize: 12,
   },

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

@@ -542,6 +542,17 @@ app.toggleMultSeller = (event) => {
 
 // Define the sketch
 export const sketch = (p) => {
+  p.updateWithProps = (props) => {
+    if (app.isMultiSeller !== props.isMultiSeller) {
+      app.reset();
+      setTimeout(() => {
+        app.play(true);
+      }, 500);
+    }
+
+    app.isMultiSeller = props.isMultiSeller;
+  };
+
   app.promiseQueue = new Queue({
     concurrency: 1,
     autostart: false,