Finish up package class

src/scenes/DetailScene.ts

@@ -21,7 +21,9 @@ 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, 50));
+      this.packages = state.currPackages.map(
+        (currPackage) => new Package(400, 300, 50, 'react', '<h3>Test</h3>')
+      );
     });
   }
 
@@ -47,5 +49,9 @@ export class DetailScene {
   onSceneClick() {
     // store.setState({ currentScene: Scenes.OVERVIEW });
     this.player.reveal();
+
+    this.packages.forEach((packageObj) => {
+      packageObj.onClick();
+    });
   }
 }

src/sketchObjects/Package.ts

@@ -2,6 +2,7 @@ import { combineLatest, map } from 'rxjs';
 import { mp5 } from '../../main';
 import { playerHead$, areasColliding, revealedArea$ } from '../area';
 import { colors } from '../constants/colors';
+import store from '../store';
 
 enum PackageStates {
   HIDDEN = 'HIDDEN',
@@ -16,19 +17,30 @@ export class Package {
   size: number;
   name: string;
   url: string;
+  messageContents: string;
   corners: number = 10;
   startSize: number = 5;
   currentSize: number;
   wasTouched: boolean = false;
+  wasInteractedWith: boolean = false;
+  hover: boolean = false;
   packageState: PackageStates = PackageStates.HIDDEN;
 
-  constructor(x: number, y: number, size: number, name?: string, packageURL?: string) {
+  constructor(
+    x: number,
+    y: number,
+    size: number,
+    name?: string,
+    messageContents?: string,
+    packageURL?: string
+  ) {
     this.x = x;
     this.y = y;
     this.size = size;
     this.name = name;
     this.url = packageURL;
     this.currentSize = this.startSize;
+    this.messageContents = messageContents;
 
     combineLatest([revealedArea$, playerHead$]).subscribe(([revealedArea, playerHead]) => {
       const isRevealed = areasColliding(
@@ -37,17 +49,32 @@ export class Package {
       );
       const isTouched = areasColliding({ x: this.x, y: this.y, w: this.size }, playerHead, true);
 
-      if (this.wasTouched) {
+      console.log('Revealed', isRevealed);
-        this.packageState = PackageStates.ACTIVE;
+      console.log('isTouched', isTouched);
-      } else if (isRevealed && !this.wasTouched) {
+      console.log('wasTouched', this.wasTouched);
-        this.packageState = PackageStates.REVEALED;
+      console.log('wasInteractedWith', this.wasInteractedWith);
 
-        if (isTouched) {
+      if (isRevealed) {
+        if (this.packageState !== PackageStates.ACTIVE) {
+          this.packageState = PackageStates.REVEALED;
+        }
+        if (this.wasInteractedWith) {
+          this.packageState = PackageStates.INACTIVE;
+        }
+
+        if (isTouched && !this.wasTouched) {
+          this.packageState = PackageStates.ACTIVE;
           this.wasTouched = true;
         }
+      } else {
+        if (this.wasInteractedWith) {
+          this.packageState = PackageStates.INACTIVE;
+        } else if (this.wasTouched && !this.wasInteractedWith) {
+          this.packageState = PackageStates.ACTIVE;
         } else {
           this.packageState = PackageStates.HIDDEN;
         }
+      }
 
       // console.log(this.packageState);
     });
@@ -55,6 +82,8 @@ export class Package {
 
   public draw() {
     mp5.noStroke();
+    mp5.rectMode('center');
+    mp5.ellipseMode('center');
 
     if (this.packageState === PackageStates.HIDDEN) {
       // Scale down after it was revealed or active
@@ -62,7 +91,7 @@ export class Package {
         this.currentSize--;
       }
 
-      mp5.square(this.x, this.y, this.currentSize, this.corners);
+      /*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) {
@@ -77,6 +106,47 @@ export class Package {
       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);
+
+      // Check if mouse is over the squares, if so animate and enable click
+      const mouseOverShape = areasColliding(
+        { x: mp5.mouseX, y: mp5.mouseY, w: 70 },
+        { x: this.x, y: this.y, w: this.currentSize }
+      );
+
+      if (mouseOverShape) {
+        this.hover = true;
+        mp5.square(this.x, this.y, this.currentSize + mp5.random(-5, 5), this.corners);
+        mp5.square(
+          this.x - this.size - 10,
+          this.y,
+          this.currentSize + mp5.random(-5, 5),
+          this.corners
+        );
+        mp5.square(
+          this.x,
+          this.y - this.size - 10,
+          this.currentSize + mp5.random(-5, 5),
+          this.corners
+        );
+      } else {
+        this.hover = false;
+      }
+    } else if (this.packageState === PackageStates.INACTIVE) {
+      mp5.fill(mp5.color(colors.greyLight));
+      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);
+    }
+  }
+
+  public onClick() {
+    if (this.hover && !this.wasInteractedWith) {
+      console.log('click on shape');
+      this.wasInteractedWith = true;
+      store.getState().addInfoMessage({
+        headline: this.name,
+        innerHTML: this.messageContents,
+      });
     }
   }
 }