feat(birthday): allowing autoplay

mateoguzmana · Aug 10, 2022 · cde4d76 · cde4d76
1 parent 31fc371
commit cde4d76
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/components/Balloon.tsx b/src/components/Balloon.tsx
@@ -22,8 +22,10 @@ function Balloon({ x, y = 0, color, r = 40 }: BalloonProps) {
     [x]
   );
 
-  const skewX =
-    SKEW_X_VALUES[Math.floor(Math.random() * SKEW_X_VALUES.length)] ?? 0;
+  const skewX = useMemo(
+    () => SKEW_X_VALUES[Math.floor(Math.random() * SKEW_X_VALUES.length)] ?? 0,
+    []
+  );
 
   return (
     <Group

diff --git a/src/components/Birthday.tsx b/src/components/Birthday.tsx
@@ -13,6 +13,7 @@ import { screenHeight, screenWidth } from '../constants/dimensions';
 
 interface BirthdayProps {
   theme?: string[];
+  autoplay?: boolean;
 }
 
 const xGap = 60;
@@ -22,7 +23,10 @@ const BOTTOM = -350;
 const optimalNumberOfBalloons = Math.floor(screenWidth / xGap);
 const ballonsToRenderArray = [...Array(optimalNumberOfBalloons)];
 
-function Birthday({ theme = FiestaThemes.default }: BirthdayProps) {
+function Birthday({
+  theme = FiestaThemes.default,
+  autoplay = true,
+}: BirthdayProps) {
   const randomisedColors = useMemo(() => shuffleArray(theme), [theme]);
 
   const xPosition = useValue(screenHeight - BOTTOM + 0);
@@ -49,8 +53,8 @@ function Birthday({ theme = FiestaThemes.default }: BirthdayProps) {
   );
 
   useEffect(() => {
-    pushBalloons();
-  }, [pushBalloons]);
+    autoplay && pushBalloons();
+  }, [pushBalloons, autoplay]);
 
   return (
     <Canvas style={styles.canvas}>