Implement reveal bubbles on click

metadata/project.json

@@ -5,34 +5,10 @@
       "path": "packages/block",
       "size": 2450,
       "contents": {
-        "legacy": ["Test"],
+        "contributors": [],
-        "contributors": ["Test"],
+        "legacy": [],
-        "packages": ["Test"]
+        "packages": []
       }
-    },
-    {
-      "name": "client",
-      "path": "packages/client",
-      "size": 5600,
-      "contents": {}
-    },
-    {
-      "name": "blockchain",
-      "path": "packages/blockchain",
-      "size": 4000,
-      "contents": {}
-    },
-    {
-      "name": "ethash",
-      "path": "packages/ethash",
-      "size": 3600,
-      "contents": {}
-    },
-    {
-      "name": "common",
-      "path": "packages/common",
-      "size": 1000,
-      "contents": {}
     }
   ]
 }

src/scenes/DetailScene.ts

@@ -27,6 +27,7 @@ export class DetailScene {
 
   draw() {
     mp5.background(mp5.color(colors.greyLighter));
+    this.player.drawOnReveal();
     this.player.follow();
     this.player.move();
 
@@ -42,8 +43,7 @@ export class DetailScene {
   }
 
   onSceneClick() {
-    console.log('Click on detail scene');
+    // store.setState({ currentScene: Scenes.OVERVIEW });
-    console.log('Changing back to overview');
+    this.player.reveal();
-    store.setState({ currentScene: Scenes.OVERVIEW });
   }
 }

src/sketchObjects/Player.ts

@@ -7,6 +7,11 @@ export class Player {
   r: number;
   easing: number;
   history: Array<{ x: number; y: number }> = [];
+  lastTrailEl: { x: number; y: number };
+  cursorOnRevealClick: { x: number; y: number };
+  showRevealEl: boolean;
+  revealElCoordinates: { x: number; y: number };
+  lastRevealClickTime: number;
 
   constructor() {
     this.x = mp5.height / 2;
@@ -34,6 +39,37 @@ export class Player {
     this.drawCursorIndicator(mp5.mouseX, mp5.mouseY, 4);
   }
 
+  public reveal() {
+    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 };
+      this.lastRevealClickTime = mp5.millis();
+    }
+  }
+
+  public drawOnReveal() {
+    const timeElapsedSinceRevealClick = mp5.millis() - this.lastRevealClickTime;
+
+    if (this.showRevealEl) {
+      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
+      );
+
+      if (timeElapsedSinceRevealClick > 2000) {
+        this.showRevealEl = false;
+      }
+    }
+  }
+
   private drawPlayerShape(x: number, y: number) {
     mp5.fill(mp5.color(colors.grey));
     mp5.noStroke();
@@ -48,6 +84,11 @@ export class Player {
 
   private drawPlayerTrail() {
     const immediateHistory = this.history.slice(1).slice(-30);
+    const lastTrailElPosition = immediateHistory[0];
+
+    if (lastTrailElPosition) {
+      this.lastTrailEl = lastTrailElPosition;
+    }
 
     immediateHistory.forEach((pointInHistory, i) => {
       if (i % 5 === 0) {