Fix reveal mechanic

src/area.ts

@@ -1,7 +1,18 @@
 import { BehaviorSubject } from 'rxjs';
+import { mp5 } from '../main';
 
 export const revealedArea$ = new BehaviorSubject<{ x: number; y: number; w: number }>({
   x: 0,
   y: 0,
   w: 0,
 });
+
+export function pointIsRevealed(
+  point: { x: number; y: number },
+  revealedArea: { x: number; y: number; w: number }
+): boolean {
+  const distanceBetweenPoints = mp5.dist(point.x, point.y, revealedArea.x, revealedArea.y);
+  console.log(distanceBetweenPoints, revealedArea.w);
+
+  return distanceBetweenPoints < revealedArea.w / 2;
+}

src/helpers.ts

@@ -30,13 +30,6 @@ export function isColliding(
   );
 }
 
-export function shapeCollision(
-  firstShape: { x: number; y: number; w: number },
-  secondShape: { x: number; y: number; w: number }
-) {
-  return mp5.dist(firstShape.x, firstShape.y, secondShape.x, secondShape.y) < secondShape.w - 150;
-}
-
 export function generateEdgeCoords(existingEdges: Edge[]): Coordinates {
   let newCoords: Coordinates;
   const existingCoordinates = existingEdges.map(({ x, y }) => ({ x, y }));

src/sketchObjects/Package.ts

@@ -1,8 +1,7 @@
-import { asyncScheduler, distinct, distinctUntilKeyChanged, throttleTime } from 'rxjs';
+import { map } from 'rxjs';
 import { mp5 } from '../../main';
-import { revealedArea$ } from '../area';
+import { pointIsRevealed, revealedArea$ } from '../area';
 import { colors } from '../constants/colors';
-import { shapeCollision } from '../helpers';
 
 export class Package {
   x: number;
@@ -16,8 +15,10 @@ export class Package {
     this.y = y;
     this.size = size;
 
-    revealedArea$.subscribe((revealedArea) => {
-      this.revealed = shapeCollision({ x: this.x, y: this.y, w: 10 }, revealedArea);
+    revealedArea$
+      .pipe(map((revealedArea) => pointIsRevealed({ x: this.x, y: this.y }, revealedArea)))
+      .subscribe((isRevealed) => {
+        this.revealed = isRevealed;
       });
   }
 

src/sketchObjects/Player.ts

@@ -57,7 +57,7 @@ export class Player {
     if (this.showRevealEl) {
       const x = this.cursorOnRevealClick.x;
       const y = this.cursorOnRevealClick.y;
-      const w = Math.floor(timeElapsedSinceRevealClick * 0.4);
+      const w = timeElapsedSinceRevealClick * 0.4;
 
       mp5.fill(mp5.color(colors.greyLighter));
       mp5.strokeWeight(5);