Solving geometry to launch confetti bc middle age crisis issues

nacmartin · Mar 12, 2023 · c5e84d8 · c5e84d8
1 parent f757f67
commit c5e84d8
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/examples/ui-react/src/App.tsx b/examples/ui-react/src/App.tsx
@@ -3,7 +3,12 @@ import { GestureEvent, AirfingerEvent } from "manitas";
 import { useEffect, useRef } from "react";
 import { useSprings, animated, to } from "@react-spring/web";
 import styles from "./styles.module.css";
-import { contains, inScreen, rectRelativeToParent } from "./geometry";
+import {
+  confettiPosition,
+  contains,
+  inScreen,
+  rectRelativeToParent,
+} from "./geometry";
 import confetti from "canvas-confetti";
 import { Instructions } from "./Instructions";
 
@@ -125,15 +130,19 @@ function App() {
       });
     }
     if (gesture === "Victory") {
+      if (!containerRef.current) {
+        return;
+      }
+      const position = confettiPosition(
+        e.detail.airpoint,
+        containerRef.current.getBoundingClientRect()
+      );
       confetti({
         particleCount: 100,
         startVelocity: 30,
         spread: 360,
         scalar: 2,
-        origin: {
-          x: ((1 - e.detail.airpoint.x) * AREA_WIDTH) / window.innerWidth,
-          y: e.detail.airpoint.y + 0.2,
-        },
+        origin: position,
       });
     }
   };

diff --git a/examples/ui-react/src/geometry.ts b/examples/ui-react/src/geometry.ts
@@ -1,4 +1,13 @@
 import { Point3D } from "manitas";
+export function confettiPosition(point: Point3D, container: DOMRect): Point2D {
+  const { x: xRect, y: yRect } = container;
+  const canvasPos = inScreen({ x: 1 - point.x, y: point.y, z: point.z });
+  return {
+    x: (xRect + canvasPos.x) / window.innerWidth,
+    y: (yRect + canvasPos.y) / window.innerHeight,
+  };
+}
+
 export function inScreen(point: Point3D) {
   return {
     x: point.x * 1280,