diff --git a/src/assets/assets.ts b/src/assets/assets.ts index c3a10ea..6ffe610 100644 --- a/src/assets/assets.ts +++ b/src/assets/assets.ts @@ -108,7 +108,11 @@ const spritesheets: SpriteSheet[] = [ spritesheet('temp/pillowtalk', 'pillowtalk', 100, 100), spritesheet('temp/shuriken', 'shuriken', 100, 100), spritesheet('temp/redx', 'redx', 64, 64), - + spritesheet('temp/anger', 'anger', 64, 64), + spritesheet('temp/ellipse', 'ellipse', 64, 64), + spritesheet('temp/redsparks', 'redspark', 64, 64), + spritesheet('temp/greensparks', 'greenspark', 64, 64), + spritesheet('temp/defaultsparks', 'defaultspark', 64, 64), spritesheet('temp/blankspr', 'blankspr', 100, 100), ]; diff --git a/src/assets/images/temp/defaultsparks.png b/src/assets/images/temp/defaultsparks.png new file mode 100644 index 0000000..069783c Binary files /dev/null and b/src/assets/images/temp/defaultsparks.png differ diff --git a/src/assets/images/temp/ellipse.png b/src/assets/images/temp/ellipse.png new file mode 100644 index 0000000..34a2951 Binary files /dev/null and b/src/assets/images/temp/ellipse.png differ diff --git a/src/assets/images/temp/greensparks.png b/src/assets/images/temp/greensparks.png new file mode 100644 index 0000000..d3e7809 Binary files /dev/null and b/src/assets/images/temp/greensparks.png differ diff --git a/src/assets/images/temp/redsparks.png b/src/assets/images/temp/redsparks.png new file mode 100644 index 0000000..9e399ac Binary files /dev/null and b/src/assets/images/temp/redsparks.png differ diff --git a/src/components/Customer.ts b/src/components/Customer.ts index 5dabe72..b3ce101 100644 --- a/src/components/Customer.ts +++ b/src/components/Customer.ts @@ -9,6 +9,7 @@ import { StationType } from "./StationData"; import { CustomerData, CustomerId } from "./CustomerData"; import { Effect } from "./Effect"; import { TextEffect } from "./TextEffect"; +import { PatienceTimer } from "./PatienceTimer"; export interface CustomerType { spr: string; @@ -63,6 +64,9 @@ export class Customer extends Button { private angryImage: Phaser.GameObjects.Image; private patienceTimer: Timer; + private testTimer:PatienceTimer; + + //testing stuff constructor( scene: GameScene, x: number, @@ -105,6 +109,8 @@ export class Customer extends Button { this.angryImage.setVisible(false); this.add(this.angryImage); + this.testTimer = new PatienceTimer(this.scene,-80,-40,1,0xff0000); + this.add(this.testTimer); this.thoughtBubble = new ThoughtBubble( scene, 0.4 * cellSize, @@ -151,8 +157,9 @@ export class Customer extends Button { interpolateColor(0xff0000, 0x00ff00, this.patience) ); this.patienceTimer.redraw(this.patience / this.maxPatience); + this.testTimer.redraw(((this.patience / this.maxPatience) > 1) ? 1 : (this.patience / this.maxPatience)); this.angryImage.setVisible(this.patience <= 0.5); - + this.testTimer.update(time,delta); if (this.patience <= 0) { if(this.hasCompleted){ if(Math.random()>0.2){ @@ -160,21 +167,35 @@ export class Customer extends Button { this.scene.addEffect(new TextEffect(this.scene, this.x-70+(Math.random()*80), this.y-80, "+" + this.moneySpent +" €", "yellow", 40, true, "red", 800, 100, 0.7, 0)); this.emit("pay", this.moneySpent); } else { - this.scene.sound.play("fail"); + this.scene.sound.play("rip"); } } else { - this.scene.sound.play("fail"); + this.scene.sound.play("rip"); } this.leave(); this.thoughtBubble.showSymbol("sad"); this.emit("angry"); } } else { + this.testTimer.update(time,delta); this.patienceTimer.setVisible(false); this.angryImage.setVisible(false); } } + onOver( pointer: Phaser.Input.Pointer, + localX: number, + localY: number, + event: Phaser.Types.Input.EventData){ + super.onOver(pointer,localX,localY,event); + this.toggleTimer(); + } + + onOut(pointer: Phaser.Input.Pointer, event: Phaser.Types.Input.EventData) { + super.onOut(pointer,event); + this.untoggleTimer(); + } + onDragStart(pointer: Phaser.Input.Pointer, dragX: number, dragY: number) { this.emit("pickup"); this.dragged = true; @@ -207,6 +228,22 @@ export class Customer extends Button { } } + toggleTimer(){ + this.testTimer.unveil(); + } + + untoggleTimer(){ + this.testTimer.veil(); + } + + lockTimer(){ + this.testTimer.lockTimer(); + } + + unlockTimer(){ + this.testTimer.unlockTimer(); + } + snapTo(x: number, y: number) { this.dragX = x; this.dragY = y; @@ -231,6 +268,10 @@ export class Customer extends Button { this.sprite.input!.enabled = !employee; + if(employee){ + this.untoggleTimer(); + this.lockTimer(); + } this.thoughtBubble.showSymbol(Phaser.Math.RND.pick(["happy", "love"])); } @@ -297,7 +338,7 @@ export class Customer extends Button { leave() { this.sprite.input!.enabled = false; - + this.testTimer.setVisible(false); this.setRequest(null); this.patienceTimer.setVisible(false); diff --git a/src/components/PatienceTimer.ts b/src/components/PatienceTimer.ts new file mode 100644 index 0000000..61fd1b7 --- /dev/null +++ b/src/components/PatienceTimer.ts @@ -0,0 +1,168 @@ +import { GameScene } from "@/scenes/GameScene"; + +export class PatienceTimer extends Phaser.GameObjects.Container { + private background: Phaser.GameObjects.Image; + private bar: Phaser.GameObjects.Rectangle; + private anger: Phaser.GameObjects.Sprite; + private sparks: Phaser.GameObjects.Sprite + private graphics: Phaser.GameObjects.Graphics; + private size: number; + private color: number; + private veiled: boolean = true; + private vTimer: number = 0; + private vfTimer: number = 0; + private critical:boolean = false; + private DEFAULT_ALPHA: number = 0.8; + private workingAlpha: number = 0.8; + private lock: boolean = false; + + constructor( + scene: GameScene, + x: number, + y: number, + scale: number, + color: number + ) { + super(scene, x, y); + scene.add.existing(this); + + this.scene = scene; + this.scale = scale; + this.color = color; + this.bar = this.scene.add.rectangle(0,-60,16,128,0x00FF00); + this.bar.setOrigin(0.5,0); + this.anger = new Phaser.GameObjects.Sprite(this.scene,0,-80,"ellipse"); + this.sparks = new Phaser.GameObjects.Sprite(this.scene,0,64,"defaultspark"); + this.sparks.setTint(0x00FF00); + this.sparks.setScale(0.5); + + this.add(this.bar); + this.add(this.sparks); + this.add(this.anger); + this.updateAlpha(this.DEFAULT_ALPHA); + //this.background = this.scene.add.image(0, 0, "timer"); + //this.background.setScale(size / this.background.width); + //this.add(this.background); + + this.graphics = this.scene.add.graphics(); + this.add(this.graphics); + this.setVisible(false); + } + + setColor(color: number) { + this.color = color; + } + + update(t:number,d:number){ + if(Math.sin(t/120) > 0){ + this.anger.setFrame(0); + this.sparks.setFrame(0); + } else { + this.anger.setFrame(1); + this.sparks.setFrame(1); + } + + + + if(this.veiled) { + if(this.vTimer > 0) { + this.vTimer -= d; + if(this.vTimer <= 0) { + this.setVisible(false); + this.updateAlpha(this.DEFAULT_ALPHA); + this.vTimer = 0; + } else { + this.updateAlpha(this.DEFAULT_ALPHA*this.vTimer/500); + } + } + } else if (!this.veiled) { + if(this.vfTimer > 0) { + this.vfTimer -= d; + if(this.vfTimer <= 0) { + this.vfTimer = 0; + this.updateAlpha(this.DEFAULT_ALPHA); + } else { + this.updateAlpha(this.DEFAULT_ALPHA*((200-this.vfTimer)/200)); + } + } + } + } + + lockTimer(){ + this.lock = true; + } + + unlockTimer() { + this.lock = false; + } + + unveil(){ + if(this.lock) { + return; + } + this.setVisible(true); + this.vTimer = 0; + this.vfTimer = 200; + this.veiled = false; + } + + veil(){ + if(this.lock){ + return; + } + this.updateAlpha(this.DEFAULT_ALPHA); + this.vTimer = 500; + this.veiled = true; + } + + updateAlpha(n: number){ + this.sparks.setAlpha(n); + this.bar.setAlpha(n); + this.anger.setAlpha(n); + } + + resetAlpha(){ + if(this.critical){ + this.sparks.setAlpha(1); + this.bar.setAlpha(1); + this.anger.setAlpha(1); + } else { + this.sparks.setAlpha(0.5); + this.bar.setAlpha(0.5); + this.anger.setAlpha(0.5); + } + } + + redraw(factor: number) { + + /* + const radius = 0.24 * this.size; + const border = 0.055 * this.size; + + this.graphics.clear(); + this.graphics.beginPath(); + this.graphics.fillStyle(this.color); + this.graphics.moveTo(0, 0); + this.graphics.arc( + 0, + 0, + radius - border, + -Math.PI / 2, + -Math.PI / 2 + factor * 2 * Math.PI + ); + this.graphics.closePath(); + this.graphics.fillPath(); + */ + this.bar.setScale(1,factor); + this.sparks.setY(-64+(128*factor)); + if((factor < 0.5) && !(this.critical)){ + this.critical = true; + this.anger.setTexture("anger"); + this.sparks.setTint(0xFF0000); + this.sparks.setAlpha(1); + this.bar.setAlpha(1); + this.anger.setAlpha(1); + this.bar.fillColor = 0xFF0000; + } + } +} diff --git a/src/scenes/GameScene.ts b/src/scenes/GameScene.ts index c03aab9..9f5c312 100644 --- a/src/scenes/GameScene.ts +++ b/src/scenes/GameScene.ts @@ -355,6 +355,7 @@ export class GameScene extends BaseScene { if (customer && employee) { customer.setAction(false); customer.setEmployee(null); + customer.unlockTimer(); employee.setAction(false); employee.setCustomer(null); @@ -483,6 +484,20 @@ export class GameScene extends BaseScene { } }); + /* + + customer.on("over", () => { + customer.toggleTimer(); + this.sound.play("meme_explosion_sound"); + }); + + customer.on("out", () => { + customer.untoggleTimer(); + }); + */ + + + // Customer leaving the game customer.on("offscreen", () => { this.customers = this.customers.filter((c) => c !== customer);