Basic reveal mechanic

src/sketchObjects/Package.ts

@@ -1,5 +1,8 @@
+import { asyncScheduler, distinct, distinctUntilKeyChanged, throttleTime } from 'rxjs';
 import { mp5 } from '../../main';
+import { revealedArea$ } from '../area';
 import { colors } from '../constants/colors';
+import { shapeCollision } from '../helpers';
 
 export class Package {
   x: number;
@@ -12,10 +15,20 @@ export class Package {
     this.x = x;
     this.y = y;
     this.size = size;
+
+    revealedArea$.subscribe((revealedArea) => {
+      this.revealed = shapeCollision({ x: this.x, y: this.y, w: 10 }, revealedArea);
+    });
   }
 
   public place() {
     mp5.fill(mp5.color(colors.redDark));
-    mp5.ellipse(this.x, this.y, this.size);
+    mp5.ellipse(this.x, this.y, 10);
+  }
+
+  public drawOnReveal() {
+    if (this.revealed) {
+      mp5.ellipse(this.x, this.y, this.size);
+    }
   }
 }

src/sketchObjects/Player.ts

@@ -1,4 +1,5 @@
 import { mp5 } from '../../main';
+import { revealedArea$ } from '../area';
 import { colors } from '../constants/colors';
 
 export class Player {
@@ -43,7 +44,6 @@ export class Player {
     const { x, y } = this.lastTrailEl;
 
     if (x && y) {
-      console.log('Drawing');
       this.showRevealEl = true;
       this.revealElCoordinates = { x, y };
       this.cursorOnRevealClick = { x: mp5.mouseX, y: mp5.mouseY };
@@ -55,17 +55,20 @@ export class Player {
     const timeElapsedSinceRevealClick = mp5.millis() - this.lastRevealClickTime;
 
     if (this.showRevealEl) {
+      const x = this.cursorOnRevealClick.x;
+      const y = this.cursorOnRevealClick.y;
+      const w = Math.floor(timeElapsedSinceRevealClick * 0.4);
+
       mp5.fill(mp5.color(colors.greyLighter));
       mp5.strokeWeight(5);
       mp5.stroke(mp5.color(255));
-      mp5.ellipse(
-        this.cursorOnRevealClick.x,
-        this.cursorOnRevealClick.y,
-        timeElapsedSinceRevealClick * 0.4
-      );
+      mp5.ellipse(x, y, w);
+
+      revealedArea$.next({ x, y, w });
 
       if (timeElapsedSinceRevealClick > 2000) {
         this.showRevealEl = false;
+        revealedArea$.next({ x: 0, y: 0, w: 0 });
       }
     }
   }