Refactor detail scene elements to single class
This commit is contained in:
Dennis Schoepf
parent
85214fad3f
commit
d084511c6b
11 changed files with 162 additions and 335 deletions
|
|
@ -1,100 +0,0 @@
|
|||
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 ContribStates {
|
||||
HIDDEN = 'HIDDEN',
|
||||
REVEALED = 'REVEALED',
|
||||
ACTIVE = 'ACTIVE',
|
||||
INACTIVE = 'INACTIVE',
|
||||
}
|
||||
|
||||
export class Contributor {
|
||||
x: number;
|
||||
y: number;
|
||||
size: number;
|
||||
currentSize: number;
|
||||
startSize: number = 5;
|
||||
name: string;
|
||||
url: string;
|
||||
messageContents: string;
|
||||
wasTouched: boolean = false;
|
||||
wasInteractedWith: boolean = false;
|
||||
hover: boolean = false;
|
||||
contribState: ContribStates = ContribStates.HIDDEN;
|
||||
|
||||
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(
|
||||
{ x: this.x, y: this.y, w: this.currentSize },
|
||||
revealedArea
|
||||
);
|
||||
|
||||
if (isRevealed) {
|
||||
this.contribState = ContribStates.REVEALED;
|
||||
} else {
|
||||
this.contribState = ContribStates.HIDDEN;
|
||||
}
|
||||
|
||||
// console.log(this.packageState);
|
||||
});
|
||||
}
|
||||
|
||||
public draw() {
|
||||
mp5.noStroke();
|
||||
mp5.rectMode('center');
|
||||
mp5.ellipseMode('center');
|
||||
mp5.angleMode('degrees');
|
||||
|
||||
if (this.contribState === ContribStates.HIDDEN) {
|
||||
} else if (this.contribState === ContribStates.REVEALED) {
|
||||
mp5.arc(this.x, this.y, this.size, this.size, 10, 170, mp5.CHORD);
|
||||
mp5.fill(mp5.color(colors.redDark));
|
||||
mp5.arc(this.x, this.y, this.size, this.size, 170, 370, mp5.CHORD);
|
||||
mp5.fill(mp5.color(colors.greyDark));
|
||||
mp5.ellipse(this.x - this.size / 5, this.y + this.size / 4, this.size / 5);
|
||||
mp5.ellipse(this.x + this.size / 5, this.y + this.size / 4, this.size / 5);
|
||||
mp5.arc(this.x, this.y + this.size / 3, this.size / 3, this.size / 5, 0, 180, mp5.CHORD);
|
||||
} else if (this.contribState === ContribStates.ACTIVE) {
|
||||
// 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;
|
||||
} else {
|
||||
this.hover = false;
|
||||
}
|
||||
} else if (this.contribState === ContribStates.INACTIVE) {
|
||||
}
|
||||
}
|
||||
|
||||
public onClick() {
|
||||
if (this.hover && !this.wasInteractedWith) {
|
||||
this.wasInteractedWith = true;
|
||||
store.getState().addInfoMessage({
|
||||
headline: this.name,
|
||||
innerHTML: this.messageContents,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import { mp5 } from '../../main';
|
||||
import { colors } from '../constants/colors';
|
||||
|
||||
export class Legacy {
|
||||
x: number;
|
||||
y: number;
|
||||
size: number;
|
||||
name: string;
|
||||
revealed: boolean;
|
||||
|
||||
constructor(x: number, y: number, size: number, name?: string, profileURL?: string) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.size = size;
|
||||
}
|
||||
|
||||
private place() {
|
||||
mp5.fill(mp5.color(colors.red));
|
||||
mp5.ellipse(this.x, this.y, this.size);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,146 +0,0 @@
|
|||
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',
|
||||
REVEALED = 'REVEALED',
|
||||
ACTIVE = 'ACTIVE',
|
||||
INACTIVE = 'INACTIVE',
|
||||
}
|
||||
|
||||
export class Package {
|
||||
x: number;
|
||||
y: number;
|
||||
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,
|
||||
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(
|
||||
{ x: this.x, y: this.y, w: this.currentSize },
|
||||
revealedArea
|
||||
);
|
||||
const isTouched = areasColliding({ x: this.x, y: this.y, w: this.size }, playerHead, true);
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
public draw() {
|
||||
mp5.noStroke();
|
||||
mp5.rectMode('center');
|
||||
mp5.ellipseMode('center');
|
||||
|
||||
if (this.packageState === PackageStates.HIDDEN) {
|
||||
// Scale down after it was revealed or active
|
||||
if (this.currentSize > this.startSize) {
|
||||
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);
|
||||
|
||||
// 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) {
|
||||
this.wasInteractedWith = true;
|
||||
store.getState().addInfoMessage({
|
||||
headline: this.name,
|
||||
innerHTML: this.messageContents,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
63
src/sketchObjects/Revealable.ts
Normal file
63
src/sketchObjects/Revealable.ts
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import { combineLatest } from 'rxjs';
|
||||
import { mp5 } from '../../main';
|
||||
import { areasColliding, playerHead$, revealedArea$ } from '../area';
|
||||
import { colors } from '../constants/colors';
|
||||
import { Area } from '../types';
|
||||
|
||||
export enum RevealableTypes {
|
||||
LEGACY = 'LEGACY',
|
||||
CONTRIBUTOR = 'CONTRIBUTOR',
|
||||
PACKAGE = 'PACKAGE',
|
||||
}
|
||||
|
||||
export interface RevealableInterface {
|
||||
type: RevealableTypes;
|
||||
name: string;
|
||||
contents: string;
|
||||
url: string;
|
||||
path?: string;
|
||||
imageUrl?: string;
|
||||
}
|
||||
|
||||
enum RevealableStates {
|
||||
HIDDEN = 'HIDDEN',
|
||||
REVEALED = 'REVEALED',
|
||||
FOUND = 'FOUND',
|
||||
}
|
||||
|
||||
export class Revealable {
|
||||
state: RevealableStates = RevealableStates.HIDDEN;
|
||||
area: Area;
|
||||
hover: boolean;
|
||||
|
||||
constructor({ type, name, path, contents, url, imageUrl }: RevealableInterface, area: Area) {
|
||||
this.area = area;
|
||||
|
||||
combineLatest([revealedArea$, playerHead$]).subscribe(([revealedArea, playerHead]) => {
|
||||
const isRevealed = areasColliding(revealedArea, this.area);
|
||||
const isHovered = areasColliding(playerHead, this.area);
|
||||
|
||||
if (isRevealed && isHovered) {
|
||||
this.state = RevealableStates.FOUND;
|
||||
} else if (isRevealed && !isHovered) {
|
||||
this.state = RevealableStates.REVEALED;
|
||||
} else {
|
||||
this.state = RevealableStates.HIDDEN;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public draw() {
|
||||
if (this.state === RevealableStates.HIDDEN) {
|
||||
mp5.fill(mp5.color(colors.greyLight));
|
||||
} else if (this.state === RevealableStates.REVEALED) {
|
||||
mp5.fill(mp5.color(colors.red));
|
||||
} else if (this.state === RevealableStates.FOUND) {
|
||||
mp5.fill(mp5.color(colors.redDark));
|
||||
}
|
||||
|
||||
mp5.ellipse(this.area.x, this.area.y, this.area.w);
|
||||
}
|
||||
|
||||
public onClick() {}
|
||||
}
|
||||
Reference in a new issue