Implement package reveal and active handling

src/area.ts

@@ -1,6 +1,8 @@
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Subject } from 'rxjs';
 import { mp5 } from '../main';
 
+export const playerHeadPosition$ = new Subject<{ x: number; y: number }>();
+
 export const revealedArea$ = new BehaviorSubject<{ x: number; y: number; w: number }>({
   x: 0,
   y: 0,

src/scenes/DetailScene.ts

@@ -21,7 +21,7 @@ export class DetailScene {
         (contributor) => new Contributor(100, 200, 100)
       );
       this.legacy = state.currLegacy.map((legacy) => new Legacy(200, 300, 100));
-      this.packages = state.currPackages.map((currPackage) => new Package(400, 300, 100));
+      this.packages = state.currPackages.map((currPackage) => new Package(400, 300, 50));
     });
   }
 
@@ -39,7 +39,7 @@ export class DetailScene {
     });
     this.packages.forEach((packageObj) => {
       packageObj.place();
-      packageObj.drawOnReveal();
+      packageObj.draw();
     });
   }
 

src/sketchObjects/Package.ts

@@ -1,6 +1,6 @@
-import { map } from 'rxjs';
+import { combineLatest, map } from 'rxjs';
 import { mp5 } from '../../main';
-import { pointIsRevealed, revealedArea$ } from '../area';
+import { playerHeadPosition$, pointIsRevealed, revealedArea$ } from '../area';
 import { colors } from '../constants/colors';
 
 export class Package {
@@ -9,27 +9,72 @@ export class Package {
   size: number;
   name: string;
   revealed: boolean;
+  active: boolean = false;
+  startSize: number = 5;
+  currentSize: number = 5;
 
   constructor(x: number, y: number, size: number, name?: string, profileURL?: string) {
     this.x = x;
     this.y = y;
     this.size = size;
 
-    revealedArea$
-      .pipe(map((revealedArea) => pointIsRevealed({ x: this.x, y: this.y }, revealedArea)))
-      .subscribe((isRevealed) => {
+    combineLatest([revealedArea$, playerHeadPosition$]).subscribe(
+      ([revealedArea, playerHeadPosition]) => {
+        const isRevealed = pointIsRevealed({ x: this.x, y: this.y }, revealedArea);
+        const isTouched = isRevealed
+          ? pointIsRevealed(
+              { x: this.x, y: this.y },
+              {
+                x: playerHeadPosition.x,
+                y: playerHeadPosition.y,
+                w: 30,
+              }
+            )
+          : false;
+
         this.revealed = isRevealed;
-      });
+
+        if (this.active === false && isTouched) {
+          this.active = true;
+          console.log(this.active);
+        }
+      }
+    );
   }
 
   public place() {
-    mp5.fill(mp5.color(colors.redDark));
-    mp5.ellipse(this.x, this.y, 10);
+    mp5.noStroke();
+    mp5.rectMode('center');
+    mp5.fill(mp5.color(colors.greyLight));
+    mp5.rect(this.x, this.y, this.startSize, this.startSize);
   }
 
-  public drawOnReveal() {
-    if (this.revealed) {
-      mp5.ellipse(this.x, this.y, this.size);
+  public draw() {
+    if (this.revealed && !this.active) {
+      this.drawRevealedShape();
+    } else if ((this.active && this.revealed) || (!this.revealed && this.active)) {
+      this.drawActiveShape();
+    } else {
+      this.drawUnrevealedShape();
     }
   }
+
+  private drawUnrevealedShape() {
+    mp5.rect(this.x, this.y, this.startSize, this.startSize);
+  }
+
+  private drawRevealedShape() {
+    if (this.currentSize < this.size) {
+      this.currentSize++;
+    } else {
+      this.currentSize = this.size;
+    }
+
+    mp5.rect(this.x, this.y, this.currentSize, this.currentSize);
+  }
+
+  private drawActiveShape() {
+    mp5.fill(mp5.color(colors.redLight));
+    mp5.rect(this.x, this.y, this.currentSize, this.currentSize);
+  }
 }

src/sketchObjects/Player.ts

@@ -1,5 +1,5 @@
 import { mp5 } from '../../main';
-import { revealedArea$ } from '../area';
+import { playerHeadPosition$, revealedArea$ } from '../area';
 import { colors } from '../constants/colors';
 
 export class Player {
@@ -34,6 +34,8 @@ export class Player {
 
     this.drawPlayerTrail();
     this.drawPlayerShape(this.x, this.y);
+
+    playerHeadPosition$.next({ x: this.x, y: this.y });
   }
 
   public move() {