diff --git a/public/assets/gui/button_01.png b/public/assets/gui/button_01.png new file mode 100755 index 0000000..45d7a92 Binary files /dev/null and b/public/assets/gui/button_01.png differ diff --git a/public/assets/gui/frame.png b/public/assets/gui/frame.png deleted file mode 100755 index 2eb8e3b..0000000 Binary files a/public/assets/gui/frame.png and /dev/null differ diff --git a/public/assets/gui/frame_01.png b/public/assets/gui/frame_01.png new file mode 100755 index 0000000..4e8d957 Binary files /dev/null and b/public/assets/gui/frame_01.png differ diff --git a/public/assets/gui/frame_green.png b/public/assets/gui/frame_green.png new file mode 100755 index 0000000..2df7428 Binary files /dev/null and b/public/assets/gui/frame_green.png differ diff --git a/public/assets/gui/frame_red.png b/public/assets/gui/frame_red.png new file mode 100755 index 0000000..69d3a94 Binary files /dev/null and b/public/assets/gui/frame_red.png differ diff --git a/public/assets/gui/frame_violet.png b/public/assets/gui/frame_violet.png new file mode 100755 index 0000000..0adecfb Binary files /dev/null and b/public/assets/gui/frame_violet.png differ diff --git a/public/assets/gui/gems.png b/public/assets/gui/gems.png new file mode 100755 index 0000000..3568b33 Binary files /dev/null and b/public/assets/gui/gems.png differ diff --git a/public/assets/gui/money.png b/public/assets/gui/money.png new file mode 100755 index 0000000..12c40de Binary files /dev/null and b/public/assets/gui/money.png differ diff --git a/public/assets/gui/shield.png b/public/assets/gui/shield_01.png similarity index 100% rename from public/assets/gui/shield.png rename to public/assets/gui/shield_01.png diff --git a/public/assets/gui/shield_02.png b/public/assets/gui/shield_02.png new file mode 100755 index 0000000..618adb8 Binary files /dev/null and b/public/assets/gui/shield_02.png differ diff --git a/public/assets/gui/w_anvil.png b/public/assets/gui/w_anvil.png new file mode 100755 index 0000000..b641848 Binary files /dev/null and b/public/assets/gui/w_anvil.png differ diff --git a/src/classes/Bastion.ts b/src/classes/Bastion.ts index 1203bf4..96c0fbc 100644 --- a/src/classes/Bastion.ts +++ b/src/classes/Bastion.ts @@ -2,20 +2,47 @@ import * as PIXI from 'pixi.js'; import DynamicObject from './DynamicObject'; export class Foundation { + public static _PIXIApp: PIXI.Application; public static Master: Master; public static WindowHeight: number; public static WindowWidth: number; + public static AspectRatio: number = 4 / 3; } export default class Master { - public DynamicObjects: DynamicObject[]; - public ticker: PIXI.Ticker; + private DynamicObjects: DynamicObject[]; + private ticker: PIXI.Ticker; + public stage: PIXI.Container = new PIXI.Container({ + width: Foundation.WindowWidth, + height: Foundation.WindowHeight, + }); + constructor() { Foundation.Master = this; this.ticker = new PIXI.Ticker(); this.ticker.maxFPS = 60; this.ticker.minFPS = 30; - this.ticker.add(() => this.update(this.ticker.elapsedMS)); // bruh + this.ticker.add(() => this.update(this.ticker.elapsedMS)); + } + + public _CreateDynamicObject(object: DynamicObject) { + this.DynamicObjects.push(object); + } + + public _RemoveDynamicObject(object: DynamicObject) { + this.DynamicObjects.splice(this.DynamicObjects.indexOf(object), 1); + } + + public RefreshStage() { + Foundation._PIXIApp.stage.removeChildren(); + this.stage.width = Foundation.WindowWidth; + this.stage.height = Foundation.WindowHeight; + Foundation._PIXIApp.stage.addChild(this.stage); + } + + public update(elapsedMS) { + this.DynamicObjects.forEach((element) => { + element.update(elapsedMS); + }); } - public update(elapsedMS) {} } diff --git a/src/classes/DynamicObject.ts b/src/classes/DynamicObject.ts index eb32f25..a8ea86b 100644 --- a/src/classes/DynamicObject.ts +++ b/src/classes/DynamicObject.ts @@ -2,27 +2,30 @@ import * as PIXI from 'pixi.js'; import { Foundation } from './Bastion'; export default abstract class DynamicObject { - protected _container: PIXI.Container; + public readonly name: string = this.constructor.name; - protected bounds: PIXI.Rectangle; + protected _container: PIXI.Container = new PIXI.Container(); - private _events: PIXI.EventEmitter = new PIXI.EventEmitter(); - - public abstract events: Enumerator; + protected _events: PIXI.EventEmitter = new PIXI.EventEmitter(); public destroy() { this._events.removeAllListeners(); if (this._container.parent) this._container.parent.removeChild(this._container); this._container.destroy(); + Foundation.Master._RemoveDynamicObject(this); } public get container(): PIXI.Container { return this._container; } - constructor(bounds?: PIXI.Rectangle) { - this.bounds = bounds ?? new PIXI.Rectangle(0, 0, 0, 0); - this._container = new PIXI.Container(); - Foundation.Master.DynamicObjects.push(this); + public get events(): PIXI.EventEmitter { + return this._events; + } + + public update(elapsedMS) {} + + constructor() { + Foundation.Master._CreateDynamicObject(this); } } diff --git a/src/classes/GuiObject.ts b/src/classes/GuiObject.ts new file mode 100644 index 0000000..5767253 --- /dev/null +++ b/src/classes/GuiObject.ts @@ -0,0 +1,41 @@ +import * as PIXI from 'pixi.js'; + +export default abstract class GuiObject { + public readonly name: string = this.constructor.name; + + protected _container: PIXI.Container; + + protected _events: PIXI.EventEmitter = new PIXI.EventEmitter(); + + public destroy() { + this._events.removeAllListeners(); + if (this._container.parent) this._container.parent.removeChild(this._container); + this._container.destroy(); + } + + public get container(): PIXI.Container { + return this._container; + } + + public get events(): PIXI.EventEmitter { + return this._events; + } + + public onClick(e: PIXI.FederatedPointerEvent) { + console.warn(`[${this.name} does not implement GuiObject.onClick()]`); + } + public onWheel(e: PIXI.FederatedWheelEvent) { + console.warn(`[${this.name} does not implement GuiObject.onWheel()]`); + } + + constructor() { + this._container = new PIXI.Container(); + this._container.interactive = true; + this._container.onwheel = (e) => { + this.onWheel(e); + }; + this._container.onclick = (e) => { + this.onClick(e); + }; + } +} diff --git a/src/main.ts b/src/main.ts index 45d46ed..399b6ac 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,13 +3,14 @@ import Master, { Foundation } from './classes/Bastion'; (async () => { const app = new PIXI.Application(); - const aspectRatio = 4 / 3; + const aspectRatio = Foundation.AspectRatio; const maxWidth = window.innerWidth; const maxHeight = window.innerHeight; const width = Math.min(maxWidth * 0.75, maxHeight * aspectRatio); const height = width / aspectRatio; Foundation.WindowWidth = width; Foundation.WindowHeight = height; + Foundation._PIXIApp = app; await app.init({ width: width, @@ -20,19 +21,14 @@ import Master, { Foundation } from './classes/Bastion'; }); document.body.appendChild(app.canvas); + let master = new Master(); + master.RefreshStage(); window.addEventListener('resize', () => { const newWidth = Math.min(window.innerWidth * 0.75, window.innerHeight * aspectRatio); const newHeight = newWidth / aspectRatio; Foundation.WindowWidth = newWidth; Foundation.WindowHeight = newHeight; app.renderer.resize(newWidth, newHeight); + master.RefreshStage(); }); - new Master(); - // await Assets.LoadAssets(); - // const game = new Game(app.screen); - // app.stage.addChild(game.container); - // window.addEventListener("resize", () => { - // app.renderer.resize(window.innerWidth, window.innerHeight); - // game.setBounds(0, 0, app.screen.width, app.screen.height); - // }); })();