Merge pull request #43 from storybookjs/fix/improve-confetti

Improve confetti colors and shapes
storybookjs · Jun 8, 2023 · 4c88ac0 · 4c88ac0
2 parents 245de33 + 3f0e1eb
commit 4c88ac0
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 5 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -81,9 +81,9 @@ export default function App({ api }: { api: API }) {
     <ThemeProvider theme={theme}>
       {showConfetti && (
         <Confetti
-          numberOfPieces={1000}
-          initialVelocityY={3}
+          numberOfPieces={800}
           recycle={false}
+          tweenDuration={20000}
           onConfettiComplete={(confetti) => {
             confetti.reset();
             setShowConfetti(false);

diff --git a/src/components/Confetti/Confetti.stories.tsx b/src/components/Confetti/Confetti.stories.tsx
@@ -21,10 +21,38 @@ export default meta;
 
 type Story = StoryObj<typeof Confetti>;
 
-export const FullWidth: Story = {};
+export const Default: Story = {
+  args: {
+    recycle: true,
+    numberOfPieces: 200,
+    top: undefined,
+    left: undefined,
+    width: undefined,
+    height: undefined,
+    friction: 0.99,
+    wind: 0,
+    gravity: 0.1,
+    initialVelocityX: 4,
+    initialVelocityY: 10,
+    tweenDuration: 5000,
+  },
+};
+
+export const OneTimeConfetti: Story = {
+  args: {
+    ...Default.args,
+    numberOfPieces: 800,
+    recycle: false,
+    tweenDuration: 20000,
+    onConfettiComplete: (confetti) => {
+      confetti.reset();
+    },
+  },
+};
 
 export const Positioned: Story = {
   args: {
+    ...Default.args,
     top: 100,
     left: 300,
     width: 300,

diff --git a/src/components/Confetti/Confetti.tsx b/src/components/Confetti/Confetti.tsx
@@ -10,6 +10,9 @@ interface ConfettiProps
   left?: number;
   width?: number;
   height?: number;
+  numberOfPieces?: number;
+  recycle?: boolean;
+  colors?: string[];
 }
 
 const Wrapper = styled.div<{
@@ -31,6 +34,7 @@ export function Confetti({
   left = 0,
   width = window.innerWidth,
   height = window.innerHeight,
+  colors = ["#CA90FF", "#FC521F", "#66BF3C", "#FF4785", "#FFAE00", "#1EA7FD"],
   ...confettiProps
 }: ConfettiProps): React.ReactPortal {
   const [confettiContainer] = useState(() => {
@@ -54,8 +58,91 @@ export function Confetti({
 
   return createPortal(
     <Wrapper top={top} left={left} width={width} height={height}>
-      <ReactConfetti {...confettiProps} />
+      <ReactConfetti colors={colors} drawShape={draw} {...confettiProps} />
     </Wrapper>,
     confettiContainer
   );
 }
+
+enum ParticleShape {
+  Circle = 1,
+  Square = 2,
+  TShape = 3,
+  LShape = 4,
+  Triangle = 5,
+  QuarterCircle = 6,
+}
+
+function getRandomInt(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+
+function draw(context: CanvasRenderingContext2D) {
+  this.shape = this.shape || getRandomInt(1, 6);
+
+  switch (this.shape) {
+    case ParticleShape.Square: {
+      const cornerRadius = 2;
+      const width = this.w / 2;
+      const height = this.h / 2;
+
+      context.moveTo(-width + cornerRadius, -height);
+      context.lineTo(width - cornerRadius, -height);
+      context.arcTo(
+        width,
+        -height,
+        width,
+        -height + cornerRadius,
+        cornerRadius
+      );
+      context.lineTo(width, height - cornerRadius);
+      context.arcTo(width, height, width - cornerRadius, height, cornerRadius);
+      context.lineTo(-width + cornerRadius, height);
+      context.arcTo(
+        -width,
+        height,
+        -width,
+        height - cornerRadius,
+        cornerRadius
+      );
+      context.lineTo(-width, -height + cornerRadius);
+      context.arcTo(
+        -width,
+        -height,
+        -width + cornerRadius,
+        -height,
+        cornerRadius
+      );
+
+      break;
+    }
+    case ParticleShape.TShape: {
+      context.rect(-4, -4, 8, 16);
+      context.rect(-12, -4, 24, 8);
+      break;
+    }
+    case ParticleShape.LShape: {
+      context.rect(-4, -4, 8, 16);
+      context.rect(-4, -4, 24, 8);
+      break;
+    }
+    case ParticleShape.Circle: {
+      context.arc(0, 0, this.radius, 0, 2 * Math.PI);
+      break;
+    }
+    case ParticleShape.Triangle: {
+      context.moveTo(16, 4);
+      context.lineTo(4, 24);
+      context.lineTo(24, 24);
+      break;
+    }
+    case ParticleShape.QuarterCircle: {
+      context.arc(4, -4, 4, -Math.PI / 2, 0);
+      context.lineTo(4, 0);
+      break;
+    }
+  }
+
+  context.closePath();
+  context.fill();
+}
diff --git a/src/features/GuidedTour/GuidedTour.tsx b/src/features/GuidedTour/GuidedTour.tsx
@@ -93,7 +93,11 @@ export function GuidedTour({
             <>
               You've learned how to control your stories interactively. Now:
               let's explore how to write your first story.
-              <Confetti numberOfPieces={100} />
+              <Confetti
+                numberOfPieces={800}
+                recycle={false}
+                tweenDuration={20000}
+              />
             </>
           ),
           placement: "right",