dennis/codewanderer
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Backdrop when companion is openend

Browse source
This commit is contained in:
Dennis Schoepf 2021-08-06 16:17:11 +02:00
parent 48c021228e
commit b8023c0ef0
5 changed files with 27 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/helpers.ts
View file

@ -11,8 +11,8 @@ export function getEdgeDimensions({ size }: JSONSubproject): number {
export function generateRandomEdgeCoordinates(): Coordinates {
return {
x: mp5.random(150, SCREEN_WIDTH - 150),
y: mp5.random(150, SCREEN_HEIGHT - 150),
x: mp5.random(200, SCREEN_WIDTH - 200),
y: mp5.random(200, SCREEN_HEIGHT - 200),
};
}
@ -115,7 +115,7 @@ export function generateRevealables(revealables: RevealableInterface[]): Reveala
area: {
x: coordinates.x,
y: coordinates.y,
w: revealable.size < 50 ? 50 : revealable.size > 600 ? 600 : revealable.size,
w: revealable.size < 50 ? 50 : revealable.size > 400 ? 400 : revealable.size,
},
});
});

8
src/scenes/DetailScene.ts
View file

@ -36,13 +36,17 @@ export class DetailScene {
this.startTime = mp5.millis();
}
if (mp5.millis() > this.startTime + 3000 && !this.wasInteractedWith) {
if (mp5.millis() > this.startTime + 6000 && !this.wasInteractedWith) {
this.wasInteractedWith = true;
store.getState().addUserMessage({
inputWanted: false,
text: 'Trouble knowing what to do? You should try clicking somewhere in order to spawn reveal bubbles. Try this in different parts of the canvas to see what you can find',
});
} else if (mp5.millis() > this.startTime + 8000 && !this.wasHovered && this.wasInteractedWith) {
} else if (
mp5.millis() > this.startTime + 16000 &&
!this.wasHovered &&
this.wasInteractedWith
) {
this.wasHovered = true;
store.getState().addUserMessage({
inputWanted: false,

4
src/ui/companion.ts
View file

@ -23,6 +23,7 @@ export class Companion {
messageTextRef: HTMLElement;
messageInputRef: HTMLElement;
messageButtonRef: HTMLElement;
backdrop: HTMLElement;
hoverAnimation: any;
message: CompanionMessage;
@ -32,6 +33,7 @@ export class Companion {
this.messageTextRef = document.getElementById('message-text');
this.messageInputRef = document.getElementById('message-input');
this.messageButtonRef = document.getElementById('message-confirm');
this.backdrop = document.getElementById('comp-backdrop');
this.ref.addEventListener('click', () => this.handleClick());
this.ref.addEventListener('mouseover', () => this.handleMouseEnter());
@ -44,11 +46,13 @@ export class Companion {
store.subscribe(
(companionState) => {
if (companionState === CompanionState.ACTIVE) {
this.backdrop.style.display = 'block';
this.stopAwaitAnimation();
this.showActiveShape();
this.scaleUpCompanion();
this.showMessage(this.message);
} else if (companionState === CompanionState.IDLE) {
this.backdrop.style.display = 'none';
this.scaleDownCompanion();
this.showIdleShape();
this.stopAwaitAnimation();