refactor with even more composition

Signed-off-by: Sam Biggins <sambiggins@gmail.com>

src/components/attack.ts

@@ -0,0 +1,52 @@
+import { EventBus } from '@src/systems';
+import { IComponent } from '@components/component';
+
+export class Attack implements IComponent {
+    private _eventBus!: EventBus;
+
+    constructor(amount: number) {
+        this._amount = amount;
+    }
+
+    private _target?: string | undefined;
+
+    get target() {
+        return this._target;
+    }
+
+    private _amount: number;
+
+    get amount() {
+        return this._amount;
+    }
+
+    set amount(amount) {
+        this._amount = amount;
+    }
+
+    public subscribe(eventBus: EventBus) {
+        this._eventBus = eventBus;
+        this._eventBus.subscribe('performAttack', this.performAttack);
+        this._eventBus.subscribe('focusChanged', this.focusChanged);
+    }
+
+    public destroy() {
+        this.unsubscribe();
+    }
+
+    private unsubscribe() {
+        this._eventBus.unsubscribe('performAttack', this.performAttack);
+        this._eventBus.unsubscribe('focusChanged', this.focusChanged);
+    }
+
+    private performAttack(universeEventBus: EventBus) {
+        universeEventBus.publish('attackPerformed', {
+            target: this._target,
+            damage: this._amount
+        });
+    }
+
+    private focusChanged(interactableId: string) {
+        this._target = interactableId;
+    }
+}

src/components/component.ts

@@ -0,0 +1,11 @@
+import { EventBus } from '@src/systems';
+
+export interface ComponentMap {
+    [componentName: string]: IComponent;
+}
+
+export interface IComponent {
+    subscribe?: (eventBus: EventBus) => void;
+    update?: () => void;
+    destroy?: () => void;
+}

src/components/health.ts

@@ -0,0 +1,80 @@
+import { log } from '@src/utilities';
+import { IComponent } from './';
+import { EventBus } from '@src/systems';
+
+export interface DamageEvent {
+    target: string;
+    damage: number;
+}
+
+export class Health implements IComponent {
+    private readonly _maxHealth: number;
+    private readonly _brokenThreshold: number;
+    private _eventBus!: EventBus;
+
+    constructor(amount: number, maxHealth: number, brokenThreshold: number) {
+        this._amount = amount;
+        this._maxHealth = maxHealth;
+        this._brokenThreshold = brokenThreshold;
+    }
+
+    private _amount: number;
+
+    get amount() {
+        return this._amount;
+    }
+
+    set amount(amount) {
+        this._amount = amount;
+        this._eventBus.publish('healthChanged', this._amount);
+        if (this._amount <= 0) {
+            this.destroy();
+        }
+        if (this._amount < this._brokenThreshold) {
+            this._isBroken = true;
+            this._eventBus.publish('broken', this._amount);
+            log.info(`Object is broken`); // TODO: move logging to subscriber
+        } else {
+            this._isBroken = false;
+            this._eventBus.publish('fixed', this._amount);
+            log.info(`Object is no longer broken`);
+        }
+    }
+
+    private _isBroken = false;
+
+    get isBroken(): boolean {
+        return this._isBroken;
+    }
+
+    get maxHealth(): number {
+        return this._maxHealth;
+    }
+
+    public subscribe(eventBus: EventBus) {
+        this._eventBus = eventBus;
+        this._eventBus.subscribe('takeDamage', this.handleTakeDamage);
+    }
+
+    public update() {
+        // do nothing
+    }
+
+    public destroy() {
+        this._eventBus.publish('destroyed', this.amount);
+        log.info(`Object is destroyed`);
+        this.unsubscribe();
+    }
+
+    public handleTakeDamage = (amount: number) => {
+        this.takeDamage(amount);
+    };
+
+    public takeDamage(amount: number) {
+        this.amount = Math.max(0, this.amount - amount);
+    }
+
+    private unsubscribe() {
+        this._eventBus.unsubscribe('takeDamage', this.handleTakeDamage);
+    }
+}

src/components/healthBar.ts

@@ -0,0 +1,35 @@
+import { IComponent } from './';
+import { HealthBarUI } from '@src/ui';
+import { EventBus } from '@src/systems';
+import Vector2 = Phaser.Math.Vector2;
+
+export class HealthBarComponent implements IComponent {
+    private _eventBus!: EventBus;
+
+    constructor(readonly _healthBar: HealthBarUI) {}
+
+    public subscribe(eventBus: EventBus) {
+        this._eventBus = eventBus;
+        this._eventBus.subscribe('healthChanged', this.updateHealth);
+        this._eventBus.subscribe('positionChanged', this.updatePosition);
+    }
+
+    public updateHealth(amount: number): void {
+        this._healthBar.updateHealth(amount);
+    }
+
+    public updatePosition(position: Vector2): void {
+        const { x, y } = position;
+        this._healthBar.updatePosition(x, y);
+    }
+
+    public destroy(): void {
+        this._healthBar.destroy();
+        this.unsubscribe();
+    }
+
+    private unsubscribe() {
+        this._eventBus.unsubscribe('healthChanged', this.updateHealth);
+        this._eventBus.unsubscribe('positionChanged', this.updatePosition);
+    }
+}

src/components/index.ts

@@ -1,3 +1,18 @@
-import Thing from './thing';
+import { ComponentMap, IComponent } from './component';
+import { DamageEvent, Health } from './health';
+import { MoveEvent, Movement } from './movement';
+import { BaseDamage, Speed, Stat } from './stats';
+import { HealthBarComponent } from './healthBar';
 
-export { Thing };
+export {
+    type IComponent,
+    type ComponentMap,
+    type DamageEvent,
+    type MoveEvent,
+    Movement,
+    Health,
+    HealthBarComponent,
+    Stat,
+    BaseDamage,
+    Speed
+};

src/components/movement.ts

@@ -0,0 +1,71 @@
+import { IComponent } from './';
+import { Direction, EventBus } from '@src/systems';
+
+export interface MoveEvent {
+    interactableId: string;
+    direction: Direction;
+}
+
+export class Movement implements IComponent {
+    private _direction = Direction.down;
+    private _velocity = new Phaser.Math.Vector2(0, 0);
+    private _eventBus!: EventBus;
+
+    constructor(private _speed: number) {}
+
+    public subscribe(eventBus: EventBus) {
+        this._eventBus = eventBus;
+        this._eventBus.subscribe('move', this.handleMove);
+        this._eventBus.subscribe('stop', this.handleStop);
+    }
+
+    handleStop() {
+        this._velocity.x = 0;
+        this._velocity.y = 0;
+        this._eventBus.publish('spriteAnimationShouldChange', {
+            velocity: this._velocity,
+            animationKey: `idle-${this._direction}`,
+            ignoreIfPlaying: false
+        });
+    }
+
+    public destroy(): void {
+        this.unsubscribe();
+    }
+
+    private handleMove(direction: Direction) {
+        this._direction = direction;
+        this._velocity.x = this.calcVelocity().x * this._speed;
+        this._velocity.y = this.calcVelocity().y * this._speed;
+
+        this._eventBus.publish('spriteShouldUpdate', {
+            velocity: this._velocity,
+            animationKey: `move-${this._direction}`,
+            ignoreIfPlaying: false
+        });
+    }
+
+    private calcVelocity() {
+        const velocity = new Phaser.Math.Vector2(0, 0);
+        switch (this._direction) {
+            case 'up':
+                velocity.y -= 1;
+                break;
+            case 'down':
+                velocity.y += 1;
+                break;
+            case 'left':
+                velocity.x -= 1;
+                break;
+            case 'right':
+                velocity.x += 1;
+                break;
+        }
+        return velocity.normalize();
+    }
+
+    private unsubscribe() {
+        this._eventBus.unsubscribe('move', this.handleMove);
+        this._eventBus.unsubscribe('stop', this.handleStop);
+    }
+}

src/components/sprite.ts

@@ -0,0 +1,55 @@
+import { IComponent } from './';
+import { EventBus } from '@src/systems';
+
+export interface SpriteUpdate {
+    velocity: Phaser.Math.Vector2;
+    animationKey: string;
+    ignoreIfPlaying?: boolean;
+}
+
+export class Sprite implements IComponent {
+    private _eventBus!: EventBus;
+
+    constructor(private _sprite: Phaser.Physics.Arcade.Sprite) {}
+
+    get sprite() {
+        return this._sprite;
+    }
+
+    set sprite(sprite: Phaser.Physics.Arcade.Sprite) {
+        this._sprite = sprite;
+    }
+
+    public subscribe(eventBus: EventBus) {
+        this._eventBus = eventBus;
+        this._eventBus.subscribe('spriteShouldUpdate', this.handleSpriteUpdate);
+    }
+
+    public setPlayerSpriteProperties() {
+        this._sprite.setCollideWorldBounds(true);
+        this._sprite.setPushable(false);
+        this._sprite.setImmovable(false);
+        this._sprite.play('idle-down');
+    }
+
+    public handleSpriteUpdate = (update: SpriteUpdate) => {
+        this._sprite.play(update.animationKey, update.ignoreIfPlaying);
+        this._sprite.setVelocity(update.velocity.x, update.velocity.y);
+    };
+
+    public update(): void {
+        this._sprite.update();
+    }
+
+    public destroy(): void {
+        this._sprite.destroy();
+        this.unsubscribe();
+    }
+
+    private unsubscribe() {
+        this._eventBus.unsubscribe(
+            'spriteShouldUpdate',
+            this.handleSpriteUpdate
+        );
+    }
+}

src/components/stats.ts

@@ -0,0 +1,33 @@
+import { IComponent } from './';
+
+export class Stat implements IComponent {
+    constructor(private _amount: number) {}
+
+    get amount() {
+        return this._amount;
+    }
+
+    set amount(amount) {
+        this._amount = amount;
+    }
+
+    public update() {
+        // do nothing
+    }
+
+    public destroy() {
+        // do nothing
+    }
+}
+
+export class Speed extends Stat {
+    constructor(amount: number) {
+        super(amount);
+    }
+}
+
+export class BaseDamage extends Stat {
+    constructor(amount: number) {
+        super(amount);
+    }
+}