diff --git a/src/scenes/DetailScene.ts b/src/scenes/DetailScene.ts index 0b36403..93151f6 100644 --- a/src/scenes/DetailScene.ts +++ b/src/scenes/DetailScene.ts @@ -1,12 +1,8 @@ import { mp5 } from '../../main'; import { colors } from '../constants/colors'; -import { Contributor } from '../sketchObjects/Contributor'; -import { Legacy } from '../sketchObjects/Legacy'; -import { Package } from '../sketchObjects/Package'; import { Player } from '../sketchObjects/Player'; import { Revealable, RevealableInterface } from '../sketchObjects/Revealable'; import store from '../store'; -import { Scenes } from './scenes'; export class DetailScene { player: Player; @@ -19,7 +15,7 @@ export class DetailScene { store.subscribe((state) => { this.revealables = state.revealables; this.revealableObjects = this.revealables.map( - (revealable) => new Revealable(revealable, { x: 100, y: 200, w: 100 }) + (revealable) => new Revealable(revealable, { x: 100, y: 200, w: 65 }) ); }); } @@ -38,10 +34,12 @@ export class DetailScene { } onSceneClick() { - this.player.reveal(); - this.revealableObjects.forEach((revObj) => { - revObj.onClick(); + if (revObj.isHovered) { + revObj.onClick(); + } else { + this.player.reveal(); + } }); } } diff --git a/src/sketchObjects/Player.ts b/src/sketchObjects/Player.ts index 79411ec..b68e8a3 100644 --- a/src/sketchObjects/Player.ts +++ b/src/sketchObjects/Player.ts @@ -59,7 +59,7 @@ export class Player { if (this.showRevealEl) { const x = this.cursorOnRevealClick.x; const y = this.cursorOnRevealClick.y; - const w = timeElapsedSinceRevealClick * 0.4; + const w = timeElapsedSinceRevealClick * 0.5; mp5.fill(mp5.color(colors.greyLighter)); mp5.strokeWeight(5); diff --git a/src/sketchObjects/Revealable.ts b/src/sketchObjects/Revealable.ts index def7fde..376c359 100644 --- a/src/sketchObjects/Revealable.ts +++ b/src/sketchObjects/Revealable.ts @@ -28,36 +28,82 @@ enum RevealableStates { export class Revealable { state: RevealableStates = RevealableStates.HIDDEN; area: Area; - hover: boolean; + + isHovered: boolean; + isRevealed: boolean; + + minSize: number = 5; + currentSize: number; + maxSize: number; constructor({ type, name, path, contents, url, imageUrl }: RevealableInterface, area: Area) { this.area = area; + this.currentSize = this.minSize; + this.maxSize = area.w; combineLatest([revealedArea$, playerHead$]).subscribe(([revealedArea, playerHead]) => { - const isRevealed = areasColliding(revealedArea, this.area); - const isHovered = areasColliding(playerHead, this.area); + const isRevealed = areasColliding(revealedArea, { + x: this.area.x, + y: this.area.y, + w: this.currentSize, + }); + const isHovered = areasColliding(playerHead, { + x: this.area.x, + y: this.area.y, + w: this.currentSize, + }); - if (isRevealed && isHovered) { + if ( + ((isRevealed && isHovered) || (!isRevealed && isHovered)) && + (this.state === RevealableStates.REVEALED || this.state === RevealableStates.FOUND) + ) { this.state = RevealableStates.FOUND; } else if (isRevealed && !isHovered) { this.state = RevealableStates.REVEALED; } else { this.state = RevealableStates.HIDDEN; } + + this.isHovered = this.state === RevealableStates.FOUND ? isHovered : false; + this.isRevealed = isRevealed; }); } public draw() { if (this.state === RevealableStates.HIDDEN) { - mp5.fill(mp5.color(colors.greyLight)); + this.reduceSize(); } else if (this.state === RevealableStates.REVEALED) { - mp5.fill(mp5.color(colors.red)); + this.increaseSize(); + + mp5.fill(mp5.color(colors.greyLight)); + mp5.ellipse(this.area.x, this.area.y, this.currentSize); } else if (this.state === RevealableStates.FOUND) { mp5.fill(mp5.color(colors.redDark)); + mp5.ellipse(this.area.x, this.area.y, this.currentSize); } - - mp5.ellipse(this.area.x, this.area.y, this.area.w); } - public onClick() {} + public onClick() { + if (this.isHovered) { + console.log('Clicked on Revealable'); + } + } + + private reduceSize() { + if (this.currentSize > this.minSize) { + this.currentSize -= 8; + } else { + this.currentSize = this.minSize; + } + } + + private increaseSize() { + if (this.currentSize < this.maxSize) { + this.currentSize += 8; + } else { + this.currentSize = this.maxSize; + } + } + + private pulsate() {} }