diff --git a/metadata/project.json b/metadata/project.json index 8297af4..b930f03 100644 --- a/metadata/project.json +++ b/metadata/project.json @@ -5,34 +5,10 @@ "path": "packages/block", "size": 2450, "contents": { - "legacy": ["Test"], - "contributors": ["Test"], - "packages": ["Test"] + "contributors": [], + "legacy": [], + "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": {} } ] } diff --git a/src/scenes/DetailScene.ts b/src/scenes/DetailScene.ts index 521efb0..00b0c52 100644 --- a/src/scenes/DetailScene.ts +++ b/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'); - console.log('Changing back to overview'); - store.setState({ currentScene: Scenes.OVERVIEW }); + // store.setState({ currentScene: Scenes.OVERVIEW }); + this.player.reveal(); } } diff --git a/src/sketchObjects/Player.ts b/src/sketchObjects/Player.ts index e31fb78..b63ea7e 100644 --- a/src/sketchObjects/Player.ts +++ b/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) {