Implement package states (hidden, revealed, active)

src/area.ts

@@ -1,7 +1,7 @@
 import { BehaviorSubject, Subject } from 'rxjs';
 import { mp5 } from '../main';
 
-export const playerHeadPosition$ = new Subject<{ x: number; y: number }>();
+export const playerHead$ = new Subject<{ x: number; y: number; w: number }>();
 
 export const revealedArea$ = new BehaviorSubject<{ x: number; y: number; w: number }>({
   x: 0,
@@ -9,11 +9,13 @@ export const revealedArea$ = new BehaviorSubject<{ x: number; y: number; w: numb
   w: 0,
 });
 
-export function pointIsRevealed(
+export function areasColliding(
-  point: { x: number; y: number },
+  areaOne: { x: number; y: number; w: number },
-  revealedArea: { x: number; y: number; w: number }
+  areaTwo: { x: number; y: number; w: number },
+  log?: boolean
 ): boolean {
-  const distanceBetweenPoints = mp5.dist(point.x, point.y, revealedArea.x, revealedArea.y);
+  const distanceBetweenPoints = mp5.dist(areaOne.x, areaOne.y, areaTwo.x, areaTwo.y);
+  const shapeArea = areaTwo.w / 2 + areaOne.w / 2;
 
-  return distanceBetweenPoints < revealedArea.w / 2;
+  return distanceBetweenPoints < shapeArea;
 }

src/scenes/DetailScene.ts

@@ -27,9 +27,9 @@ export class DetailScene {
 
   draw() {
     mp5.background(mp5.color(colors.greyLighter));
+
     this.player.drawOnReveal();
     this.player.follow();
-    this.player.move();
 
     this.contributors.forEach((contributor) => {
       contributor.place();
@@ -38,9 +38,10 @@ export class DetailScene {
       legacyObj.place();
     });
     this.packages.forEach((packageObj) => {
-      packageObj.place();
       packageObj.draw();
     });
+
+    this.player.move();
   }
 
   onSceneClick() {

src/sketchObjects/Package.ts

@@ -1,80 +1,82 @@
 import { combineLatest, map } from 'rxjs';
 import { mp5 } from '../../main';
-import { playerHeadPosition$, pointIsRevealed, revealedArea$ } from '../area';
+import { playerHead$, areasColliding, revealedArea$ } from '../area';
 import { colors } from '../constants/colors';
 
+enum PackageStates {
+  HIDDEN = 'HIDDEN',
+  REVEALED = 'REVEALED',
+  ACTIVE = 'ACTIVE',
+  INACTIVE = 'INACTIVE',
+}
+
 export class Package {
   x: number;
   y: number;
   size: number;
   name: string;
-  revealed: boolean;
+  url: string;
-  active: boolean = false;
+  corners: number = 10;
   startSize: number = 5;
-  currentSize: number = 5;
+  currentSize: number;
+  wasTouched: boolean = false;
+  packageState: PackageStates = PackageStates.HIDDEN;
 
-  constructor(x: number, y: number, size: number, name?: string, profileURL?: string) {
+  constructor(x: number, y: number, size: number, name?: string, packageURL?: string) {
     this.x = x;
     this.y = y;
     this.size = size;
+    this.name = name;
+    this.url = packageURL;
+    this.currentSize = this.startSize;
 
-    combineLatest([revealedArea$, playerHeadPosition$]).subscribe(
+    combineLatest([revealedArea$, playerHead$]).subscribe(([revealedArea, playerHead]) => {
-      ([revealedArea, playerHeadPosition]) => {
+      const isRevealed = areasColliding(
-        const isRevealed = pointIsRevealed({ x: this.x, y: this.y }, revealedArea);
+        { x: this.x, y: this.y, w: this.currentSize },
-        const isTouched = isRevealed
+        revealedArea
-          ? pointIsRevealed(
+      );
-              { x: this.x, y: this.y },
+      const isTouched = areasColliding({ x: this.x, y: this.y, w: this.size }, playerHead, true);
-              {
-                x: playerHeadPosition.x,
-                y: playerHeadPosition.y,
-                w: 30,
-              }
-            )
-          : false;
 
-        this.revealed = isRevealed;
+      if (this.wasTouched) {
+        this.packageState = PackageStates.ACTIVE;
+      } else if (isRevealed && !this.wasTouched) {
+        this.packageState = PackageStates.REVEALED;
 
-        if (this.active === false && isTouched) {
+        if (isTouched) {
-          this.active = true;
+          this.wasTouched = true;
-          console.log(this.active);
         }
+      } else {
+        this.packageState = PackageStates.HIDDEN;
       }
-    );
-  }
 
-  public place() {
+      // console.log(this.packageState);
-    mp5.noStroke();
+    });
-    mp5.rectMode('center');
-    mp5.fill(mp5.color(colors.greyLight));
-    mp5.rect(this.x, this.y, this.startSize, this.startSize);
   }
 
   public draw() {
-    if (this.revealed && !this.active) {
+    mp5.noStroke();
-      this.drawRevealedShape();
+
-    } else if ((this.active && this.revealed) || (!this.revealed && this.active)) {
+    if (this.packageState === PackageStates.HIDDEN) {
-      this.drawActiveShape();
+      // Scale down after it was revealed or active
-    } else {
+      if (this.currentSize > this.startSize) {
-      this.drawUnrevealedShape();
+        this.currentSize--;
+      }
+
+      mp5.square(this.x, this.y, this.currentSize, this.corners);
+    } else if (this.packageState === PackageStates.REVEALED) {
+      // Scale up if not large enough
+      if (this.currentSize < this.size) {
+        this.currentSize++;
+      }
+
+      mp5.square(this.x, this.y, this.currentSize, this.corners);
+      mp5.square(this.x - this.size - 10, this.y, this.currentSize, this.corners);
+      mp5.square(this.x, this.y - this.size - 10, this.currentSize, this.corners);
+    } else if (this.packageState === PackageStates.ACTIVE) {
+      mp5.fill(mp5.color(colors.redLight));
+      mp5.square(this.x, this.y, this.currentSize, this.corners);
+      mp5.square(this.x - this.size - 10, this.y, this.currentSize, this.corners);
+      mp5.square(this.x, this.y - this.size - 10, this.currentSize, this.corners);
     }
   }
-
-  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 { playerHeadPosition$, revealedArea$ } from '../area';
+import { playerHead$, revealedArea$ } from '../area';
 import { colors } from '../constants/colors';
 
 export class Player {
@@ -35,7 +35,7 @@ export class Player {
     this.drawPlayerTrail();
     this.drawPlayerShape(this.x, this.y);
 
-    playerHeadPosition$.next({ x: this.x, y: this.y });
+    playerHead$.next({ x: this.x, y: this.y, w: this.r });
   }
 
   public move() {