From 1d2473dae8933417aff46452cc958e9dcb8f1f20 Mon Sep 17 00:00:00 2001 From: koneko <67551503+koneko@users.noreply.github.com> Date: Thu, 3 Oct 2024 21:31:50 +0200 Subject: [PATCH] add prettier config and fix files --- .prettierrc | 6 ++ src/base/Assets.ts | 44 ++++----- src/base/Button.ts | 128 ++++++++++++------------ src/base/Definitions.ts | 42 ++++---- src/base/Game.ts | 107 ++++++++++---------- src/base/GameObject.ts | 76 +++++++------- src/components/Creep.ts | 15 +++ src/components/Grid.ts | 170 ++++++++++++++++---------------- src/components/MissionStats.ts | 74 +++++++------- src/scenes/GameScene.ts | 108 ++++++++++---------- src/scenes/MainMenu.ts | 82 +++++++-------- src/scenes/MissionSelectMenu.ts | 78 +++++++-------- src/scenes/SceneBase.ts | 10 +- src/scenes/SettingsMenu.ts | 30 +++--- 14 files changed, 500 insertions(+), 470 deletions(-) create mode 100644 .prettierrc create mode 100644 src/components/Creep.ts diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..f914884 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "trailingComma": "es5", + "tabWidth": 4, + "semi": true, + "singleQuote": true +} diff --git a/src/base/Assets.ts b/src/base/Assets.ts index c40b167..50dee96 100644 --- a/src/base/Assets.ts +++ b/src/base/Assets.ts @@ -1,29 +1,29 @@ -import * as PIXI from "pixi.js"; -import { MissionDefinition } from "./Definitions"; +import * as PIXI from 'pixi.js'; +import { MissionDefinition } from './Definitions'; export default class Assets { - public static async LoadAssets() { - console.log("Loading Texture Assets"); - Assets.ButtonTexture = await PIXI.Assets.load({ - src: "/assets/gui/button_02.png", - }); - console.log("Loading Missions"); - await this.LoadMissions(); - } + public static async LoadAssets() { + console.log('Loading Texture Assets'); + Assets.ButtonTexture = await PIXI.Assets.load({ + src: '/assets/gui/button_02.png', + }); + console.log('Loading Missions'); + await this.LoadMissions(); + } - private static async LoadMissions() { - Assets.Missions = [ - await this.LoadMission("/assets/missions/mission_01.json"), - ]; - } + private static async LoadMissions() { + Assets.Missions = [ + await this.LoadMission('/assets/missions/mission_01.json'), + ]; + } - private static async LoadMission(missionUrl: string) { - const res = await fetch(missionUrl); - const mission = await res.json(); - return mission; - } + private static async LoadMission(missionUrl: string) { + const res = await fetch(missionUrl); + const mission = await res.json(); + return mission; + } - public static ButtonTexture: PIXI.Texture; + public static ButtonTexture: PIXI.Texture; - public static Missions: MissionDefinition[]; + public static Missions: MissionDefinition[]; } diff --git a/src/base/Button.ts b/src/base/Button.ts index ecb9804..6bbeaf0 100644 --- a/src/base/Button.ts +++ b/src/base/Button.ts @@ -1,71 +1,71 @@ -import GameObject from "./GameObject"; -import Assets from "./Assets"; -import * as PIXI from "pixi.js"; +import GameObject from './GameObject'; +import Assets from './Assets'; +import * as PIXI from 'pixi.js'; export default class Button extends GameObject { - private caption: string; - private color: PIXI.Color; - private buttonTexture: PIXI.Texture; - private enabled: boolean = true; + private caption: string; + private color: PIXI.Color; + private buttonTexture: PIXI.Texture; + private enabled: boolean = true; - setCaption(caption: string) { - this.caption = caption; - this.draw(); - } + setCaption(caption: string) { + this.caption = caption; + this.draw(); + } - setEnabled(enabled: boolean) { - this.enabled = enabled; - } + setEnabled(enabled: boolean) { + this.enabled = enabled; + } - constructor( - caption: string, - color: PIXI.Color, - enabled: boolean = true, - bounds?: PIXI.Rectangle - ) { - super(bounds); - this.caption = caption; - this.color = color; - this.container.interactive = true; - this.buttonTexture = Assets.ButtonTexture; - this.enabled = enabled; - this.draw(); - } + constructor( + caption: string, + color: PIXI.Color, + enabled: boolean = true, + bounds?: PIXI.Rectangle + ) { + super(bounds); + this.caption = caption; + this.color = color; + this.container.interactive = true; + this.buttonTexture = Assets.ButtonTexture; + this.enabled = enabled; + this.draw(); + } - protected draw() { - this.container.removeChildren(); - // const button = new PIXI.Graphics(); - // button.rect(0, 0, this.bounds.width, this.bounds.height); - // button.fill(this.color); - //console.log(this.buttonTexture); - const button = new PIXI.NineSliceSprite({ - texture: this.buttonTexture, - leftWidth: 100, - topHeight: 100, - rightWidth: 100, - bottomHeight: 100, - }); - button.x = 0; - button.y = 0; - button.width = this.bounds.width; - button.height = this.bounds.height; - this.container.addChild(button); - const text = new PIXI.Text({ - text: this.caption, - style: new PIXI.TextStyle({ - fill: 0xffffff, - fontSize: 24, - }), - }); - this.container.addChild(text); - text.anchor.set(0.5, 0.5); - text.x = this.bounds.width / 2; - text.y = this.bounds.height / 2; - this.container.x = this.bounds.x; - this.container.y = this.bounds.y; - this.container.on("click", () => { - if (!this.enabled) return; - this.events.emit("click"); - }); - } + protected draw() { + this.container.removeChildren(); + // const button = new PIXI.Graphics(); + // button.rect(0, 0, this.bounds.width, this.bounds.height); + // button.fill(this.color); + //console.log(this.buttonTexture); + const button = new PIXI.NineSliceSprite({ + texture: this.buttonTexture, + leftWidth: 100, + topHeight: 100, + rightWidth: 100, + bottomHeight: 100, + }); + button.x = 0; + button.y = 0; + button.width = this.bounds.width; + button.height = this.bounds.height; + this.container.addChild(button); + const text = new PIXI.Text({ + text: this.caption, + style: new PIXI.TextStyle({ + fill: 0xffffff, + fontSize: 24, + }), + }); + this.container.addChild(text); + text.anchor.set(0.5, 0.5); + text.x = this.bounds.width / 2; + text.y = this.bounds.height / 2; + this.container.x = this.bounds.x; + this.container.y = this.bounds.y; + this.container.on('click', () => { + if (!this.enabled) return; + this.events.emit('click'); + }); + } } diff --git a/src/base/Definitions.ts b/src/base/Definitions.ts index 5ff1b14..698cbab 100644 --- a/src/base/Definitions.ts +++ b/src/base/Definitions.ts @@ -1,43 +1,43 @@ export type MissionDefinition = { - name: string; - description: string; - mapImageUrl: string; - gameMap: GameMapDefinition; + name: string; + description: string; + mapImageUrl: string; + gameMap: GameMapDefinition; }; export type GameMapDefinition = { - rows: number; - columns: number; - cells: TerrainType[][]; - paths: PathDefinition[]; + rows: number; + columns: number; + cells: TerrainType[][]; + paths: PathDefinition[]; }; export type MissionRoundDefinition = { - waves: WaveDefinition[]; - offeredGems: GemType[]; + waves: WaveDefinition[]; + offeredGems: GemType[]; }; export type WaveDefinition = { - firstCreepSpawnTick: number; - spawnIntervalTicks: number; - creeps: CreepType[]; + firstCreepSpawnTick: number; + spawnIntervalTicks: number; + creeps: CreepType[]; }; export type PathDefinition = [[row: number, column: number]]; export enum CreepType { - Basic = 0, - Fast = 1, + Basic = 0, + Fast = 1, } export enum TerrainType { - Restricted = 0, - Buildable = 1, + Restricted = 0, + Buildable = 1, } export enum GemType { - Fire = 0, - Yeti = 1, - Titalium = 2, - Soulforge = 3, + Fire = 0, + Yeti = 1, + Titalium = 2, + Soulforge = 3, } diff --git a/src/base/Game.ts b/src/base/Game.ts index 3bcff75..607894d 100644 --- a/src/base/Game.ts +++ b/src/base/Game.ts @@ -1,59 +1,64 @@ -import MainMenu from "../scenes/MainMenu"; -import MissionMenuSelect from "../scenes/MissionSelectMenu"; -import GameScene from "../scenes/GameScene"; -import GameObject from "./GameObject"; -import * as PIXI from "pixi.js"; -import SceneBase from "../scenes/SceneBase"; +import MainMenu from '../scenes/MainMenu'; +import MissionMenuSelect from '../scenes/MissionSelectMenu'; +import GameScene from '../scenes/GameScene'; +import GameObject from './GameObject'; +import * as PIXI from 'pixi.js'; +import SceneBase from '../scenes/SceneBase'; export default class Game extends GameObject { - private _currentScene: SceneBase | null = null; + private _currentScene: SceneBase | null = null; - constructor(bounds: PIXI.Rectangle) { - super(bounds); - this.onMainMenu(); - } - - private onMainMenu() { - const mainScene = new MainMenu(this.bounds); - mainScene.events.on("newGame", this.onNewGame); - mainScene.events.on("settings", this.onSettings); - this.setScene(mainScene); - } - - private setScene(scene: SceneBase) { - if (this._currentScene) { - this.container.removeChild(this._currentScene.container); - this._currentScene.destroy(); + constructor(bounds: PIXI.Rectangle) { + super(bounds); + this.onMainMenu(); } - this._currentScene = scene; - console.log("Setting scene", this._currentScene.constructor); - this.container.addChild(scene.container); - } - private onNewGame = () => { - console.log("New Game"); - const missionSelectScene = new MissionMenuSelect(this.bounds); - missionSelectScene.events.on("mission", (mission) => { - console.log("Mission selected", mission); - this.setScene(new GameScene(mission, this.bounds)); - }); - missionSelectScene.events.on("back", () => { - this.onMainMenu(); - }); - this.setScene(missionSelectScene); - }; - - private onSettings = () => { - console.log("Settings"); - }; - - protected triggerBoundsChanged(): void { - if (this._currentScene) { - this._currentScene.setBounds(0, 0, this.bounds.width, this.bounds.height); + private onMainMenu() { + const mainScene = new MainMenu(this.bounds); + mainScene.events.on('newGame', this.onNewGame); + mainScene.events.on('settings', this.onSettings); + this.setScene(mainScene); } - } - protected draw() { - // Nothing to draw, scene is drawing itself. - } + private setScene(scene: SceneBase) { + if (this._currentScene) { + this.container.removeChild(this._currentScene.container); + this._currentScene.destroy(); + } + this._currentScene = scene; + console.log('Setting scene', this._currentScene.constructor); + this.container.addChild(scene.container); + } + + private onNewGame = () => { + console.log('New Game'); + const missionSelectScene = new MissionMenuSelect(this.bounds); + missionSelectScene.events.on('mission', (mission) => { + console.log('Mission selected', mission); + this.setScene(new GameScene(mission, this.bounds)); + }); + missionSelectScene.events.on('back', () => { + this.onMainMenu(); + }); + this.setScene(missionSelectScene); + }; + + private onSettings = () => { + console.log('Settings'); + }; + + protected triggerBoundsChanged(): void { + if (this._currentScene) { + this._currentScene.setBounds( + 0, + 0, + this.bounds.width, + this.bounds.height + ); + } + } + + protected draw() { + // Nothing to draw, scene is drawing itself. + } } diff --git a/src/base/GameObject.ts b/src/base/GameObject.ts index a6c01bd..6c3c9b3 100644 --- a/src/base/GameObject.ts +++ b/src/base/GameObject.ts @@ -1,50 +1,50 @@ -import * as PIXI from "pixi.js"; +import * as PIXI from 'pixi.js'; export default abstract class GameObject { - protected _container: PIXI.Container; + protected _container: PIXI.Container; - protected bounds: PIXI.Rectangle; + protected bounds: PIXI.Rectangle; - private _events: PIXI.EventEmitter = new PIXI.EventEmitter(); + private _events: PIXI.EventEmitter = new PIXI.EventEmitter(); - public setBounds(bounds: PIXI.Rectangle): void; - public setBounds(x: number, y: number, width: number, height: number): void; - public setBounds( - boundsOrX: PIXI.Rectangle | number, - y?: number, - width?: number, - height?: number - ) { - if (boundsOrX instanceof PIXI.Rectangle) { - this.bounds = boundsOrX; - } else { - this.bounds = new PIXI.Rectangle(boundsOrX, y, width, height); + public setBounds(bounds: PIXI.Rectangle): void; + public setBounds(x: number, y: number, width: number, height: number): void; + public setBounds( + boundsOrX: PIXI.Rectangle | number, + y?: number, + width?: number, + height?: number + ) { + if (boundsOrX instanceof PIXI.Rectangle) { + this.bounds = boundsOrX; + } else { + this.bounds = new PIXI.Rectangle(boundsOrX, y, width, height); + } + this.triggerBoundsChanged(); // GameObject implements this. } - this.triggerBoundsChanged(); // GameObject implements this. - } - public destroy() { - this._events.removeAllListeners(); - if (this._container.parent) - this._container.parent.removeChild(this._container); - this._container.destroy(); - } + 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 container(): PIXI.Container { + return this._container; + } - public get events(): PIXI.EventEmitter { - return this._events; - } + public get events(): PIXI.EventEmitter { + return this._events; + } - protected triggerBoundsChanged() { - this.draw(); - } + protected triggerBoundsChanged() { + this.draw(); + } - protected abstract draw(): void; + protected abstract draw(): void; - constructor(bounds?: PIXI.Rectangle) { - this.bounds = bounds ?? new PIXI.Rectangle(0, 0, 0, 0); - this._container = new PIXI.Container(); - } + constructor(bounds?: PIXI.Rectangle) { + this.bounds = bounds ?? new PIXI.Rectangle(0, 0, 0, 0); + this._container = new PIXI.Container(); + } } diff --git a/src/components/Creep.ts b/src/components/Creep.ts new file mode 100644 index 0000000..0562917 --- /dev/null +++ b/src/components/Creep.ts @@ -0,0 +1,15 @@ +import GameObject from '../base/GameObject'; +import * as PIXI from 'pixi.js'; + +export class Creep extends GameObject { + constructor(bounds?: PIXI.Rectangle) { + super(bounds); + } + + protected draw() { + this.container.removeChildren(); + + this.container.x = this.bounds.x; + this.container.y = this.bounds.y; + } +} diff --git a/src/components/Grid.ts b/src/components/Grid.ts index f7f39a9..d6301d8 100644 --- a/src/components/Grid.ts +++ b/src/components/Grid.ts @@ -1,100 +1,100 @@ -import * as PIXI from "pixi.js"; -import GameObject from "../base/GameObject"; -import { GameMapDefinition, TerrainType } from "../base/Definitions"; +import * as PIXI from 'pixi.js'; +import GameObject from '../base/GameObject'; +import { GameMapDefinition, TerrainType } from '../base/Definitions'; export class Cell extends GameObject { - public type: TerrainType; - public row: number; - public column: number; - public isPath: boolean = false; + public type: TerrainType; + public row: number; + public column: number; + public isPath: boolean = false; - constructor( - type: TerrainType, - row: number, - column: number, - isPath: boolean, - bounds?: PIXI.Rectangle - ) { - super(bounds); - this.type = type; - this.row = row; - this.column = column; - this.isPath = isPath; - this.draw(); - } - - protected draw() { - this.container.removeChildren(); - let g = new PIXI.Graphics(); - g.rect(0, 0, this.bounds.width, this.bounds.height); - switch (this.type) { - case TerrainType.Restricted: - g.fill(0xff0000); - break; - case TerrainType.Buildable: - g.fill(0x00ff00); - break; + constructor( + type: TerrainType, + row: number, + column: number, + isPath: boolean, + bounds?: PIXI.Rectangle + ) { + super(bounds); + this.type = type; + this.row = row; + this.column = column; + this.isPath = isPath; + this.draw(); + } + + protected draw() { + this.container.removeChildren(); + let g = new PIXI.Graphics(); + g.rect(0, 0, this.bounds.width, this.bounds.height); + switch (this.type) { + case TerrainType.Restricted: + g.fill(0xff0000); + break; + case TerrainType.Buildable: + g.fill(0x00ff00); + break; + } + this.container.addChild(g); + this.container.x = this.bounds.x; + this.container.y = this.bounds.y; } - this.container.addChild(g); - this.container.x = this.bounds.x; - this.container.y = this.bounds.y; - } } export class Grid extends GameObject { - private gameMap: GameMapDefinition; - private cells: Cell[] = []; + private gameMap: GameMapDefinition; + private cells: Cell[] = []; - constructor(map: GameMapDefinition, bounds?: PIXI.Rectangle) { - super(bounds); - this.gameMap = map; - console.log(this.gameMap.paths); - for (let y = 0; y < this.gameMap.rows; y++) { - for (let x = 0; x < this.gameMap.columns; x++) { - let type = this.gameMap.cells[x][y]; - const isPath = this.gameMap.paths.some((path) => - path.some((p) => p[0] === x && p[1] === y) - ); - if (isPath) type = TerrainType.Restricted; - let cell = new Cell(type, x, y, isPath); - this.cells.push(cell); - } + constructor(map: GameMapDefinition, bounds?: PIXI.Rectangle) { + super(bounds); + this.gameMap = map; + console.log(this.gameMap.paths); + for (let y = 0; y < this.gameMap.rows; y++) { + for (let x = 0; x < this.gameMap.columns; x++) { + let type = this.gameMap.cells[x][y]; + const isPath = this.gameMap.paths.some((path) => + path.some((p) => p[0] === x && p[1] === y) + ); + if (isPath) type = TerrainType.Restricted; + let cell = new Cell(type, x, y, isPath); + this.cells.push(cell); + } + } + console.log(this.cells); + this.draw(); } - console.log(this.cells); - this.draw(); - } - protected draw() { - console.log("Drawing Grid", this.bounds); - this.container.removeChildren(); - let g = new PIXI.Graphics(); - g.rect(0, 0, this.bounds.width, this.bounds.height); - g.fill(0x00aa00); - this.container.addChild(g); - for (let cell of this.cells) { - cell.setBounds( - this.gridUnitsToPixels(cell.column), - this.gridUnitsToPixels(cell.row), - this.gridUnitsToPixels(1), - this.gridUnitsToPixels(1) - ); - this.container.addChild(cell.container); + protected draw() { + console.log('Drawing Grid', this.bounds); + this.container.removeChildren(); + let g = new PIXI.Graphics(); + g.rect(0, 0, this.bounds.width, this.bounds.height); + g.fill(0x00aa00); + this.container.addChild(g); + for (let cell of this.cells) { + cell.setBounds( + this.gridUnitsToPixels(cell.column), + this.gridUnitsToPixels(cell.row), + this.gridUnitsToPixels(1), + this.gridUnitsToPixels(1) + ); + this.container.addChild(cell.container); + } + this.container.x = this.bounds.x; + this.container.y = this.bounds.y; } - this.container.x = this.bounds.x; - this.container.y = this.bounds.y; - } - private getPixelScalingFactor() { - const pixelScaleX = this.container.width / this.gameMap.columns; - const pixelScaleY = this.container.height / this.gameMap.rows; - return pixelScaleX < pixelScaleY ? pixelScaleX : pixelScaleY; - } + private getPixelScalingFactor() { + const pixelScaleX = this.container.width / this.gameMap.columns; + const pixelScaleY = this.container.height / this.gameMap.rows; + return pixelScaleX < pixelScaleY ? pixelScaleX : pixelScaleY; + } - public gridUnitsToPixels(amount: number): number { - return amount * this.getPixelScalingFactor(); - } + public gridUnitsToPixels(amount: number): number { + return amount * this.getPixelScalingFactor(); + } - public pixelsToGridUnits(pixels: number): number { - return pixels / this.getPixelScalingFactor(); - } + public pixelsToGridUnits(pixels: number): number { + return pixels / this.getPixelScalingFactor(); + } } diff --git a/src/components/MissionStats.ts b/src/components/MissionStats.ts index b3224d6..07ef765 100644 --- a/src/components/MissionStats.ts +++ b/src/components/MissionStats.ts @@ -1,42 +1,46 @@ -import GameObject from "../base/GameObject"; -import * as PIXI from "pixi.js"; +import GameObject from '../base/GameObject'; +import * as PIXI from 'pixi.js'; export default class MissionStats extends GameObject { - private hp: number = 100; - private gold: number = 0; + private hp: number = 100; + private gold: number = 0; - public setHP(hp: number) { - this.hp = hp; - this.draw(); - } + public setHP(hp: number) { + this.hp = hp; + this.draw(); + } - public setGold(gold: number) { - this.gold = gold; - this.draw(); - } + public setGold(gold: number) { + this.gold = gold; + this.draw(); + } - constructor(initialHP: number, initialGold: number, bounds?: PIXI.Rectangle) { - super(bounds); - this.hp = initialHP; - this.gold = initialGold; - this.draw(); - } + constructor( + initialHP: number, + initialGold: number, + bounds?: PIXI.Rectangle + ) { + super(bounds); + this.hp = initialHP; + this.gold = initialGold; + this.draw(); + } - protected draw() { - this.container.removeChildren(); - const g = new PIXI.Graphics(); - g.rect(0, 0, this.bounds.width, this.bounds.height); - g.fill(0x000000); - this.container.addChild(g); - const text = new PIXI.Text({ - text: `HP: ${this.hp}\nGold: ${this.gold}`, - style: new PIXI.TextStyle({ - fill: "white", - fontSize: 24, - }), - }); - this.container.addChild(text); - this.container.x = this.bounds.x; - this.container.y = this.bounds.y; - } + protected draw() { + this.container.removeChildren(); + const g = new PIXI.Graphics(); + g.rect(0, 0, this.bounds.width, this.bounds.height); + g.fill(0x000000); + this.container.addChild(g); + const text = new PIXI.Text({ + text: `HP: ${this.hp}\nGold: ${this.gold}`, + style: new PIXI.TextStyle({ + fill: 'white', + fontSize: 24, + }), + }); + this.container.addChild(text); + this.container.x = this.bounds.x; + this.container.y = this.bounds.y; + } } diff --git a/src/scenes/GameScene.ts b/src/scenes/GameScene.ts index d269354..1da71dc 100644 --- a/src/scenes/GameScene.ts +++ b/src/scenes/GameScene.ts @@ -1,63 +1,63 @@ -import Button from "../base/Button"; -import { MissionDefinition } from "../base/Definitions"; -import { Grid } from "../components/Grid"; -import MissionStats from "../components/MissionStats"; -import SceneBase from "./SceneBase"; -import * as PIXI from "pixi.js"; +import Button from '../base/Button'; +import { MissionDefinition } from '../base/Definitions'; +import { Grid } from '../components/Grid'; +import MissionStats from '../components/MissionStats'; +import SceneBase from './SceneBase'; +import * as PIXI from 'pixi.js'; export default class GameScene extends SceneBase { - private ticker: PIXI.Ticker; - private stats: MissionStats; - private grid: Grid; + private ticker: PIXI.Ticker; + private stats: MissionStats; + private grid: Grid; - constructor(mission: MissionDefinition, bounds: PIXI.Rectangle) { - super(bounds); - this.ticker = new PIXI.Ticker(); - this.ticker = new PIXI.Ticker(); - this.ticker.maxFPS = 60; - this.ticker.minFPS = 30; - this.ticker.add(this.update); - this.ticker.start(); - this.stats = new MissionStats(100, 200); - this.grid = new Grid(mission.gameMap); - this.draw(); - } + constructor(mission: MissionDefinition, bounds: PIXI.Rectangle) { + super(bounds); + this.ticker = new PIXI.Ticker(); + this.ticker = new PIXI.Ticker(); + this.ticker.maxFPS = 60; + this.ticker.minFPS = 30; + this.ticker.add(this.update); + this.ticker.start(); + this.stats = new MissionStats(100, 200); + this.grid = new Grid(mission.gameMap); + this.draw(); + } - private getStatusBounds(): PIXI.Rectangle { - // Top / Center - return new PIXI.Rectangle(this.bounds.width / 2 - 200 / 2, 0, 200, 100); - } + private getStatusBounds(): PIXI.Rectangle { + // Top / Center + return new PIXI.Rectangle(this.bounds.width / 2 - 200 / 2, 0, 200, 100); + } - private getGridBounds(): PIXI.Rectangle { - // Center / Center - return new PIXI.Rectangle( - this.bounds.width / 2 - 600 / 2, - this.bounds.height / 2 - 600 / 2, - 600, - 600 - ); - } + private getGridBounds(): PIXI.Rectangle { + // Center / Center + return new PIXI.Rectangle( + this.bounds.width / 2 - 600 / 2, + this.bounds.height / 2 - 600 / 2, + 600, + 600 + ); + } - public destroy() { - super.destroy(); - this.ticker.stop(); - this.ticker.destroy(); - } + public destroy() { + super.destroy(); + this.ticker.stop(); + this.ticker.destroy(); + } - public update() {} + public update() {} - protected draw() { - console.log("Drawing Game Scene ", this.bounds); - this.container.removeChildren(); - const g = new PIXI.Graphics(); - g.rect(0, 0, this.bounds.width, this.bounds.height); - g.fill(0x000033); - this.container.addChild(g); - this.stats.setBounds(this.getStatusBounds()); - this.grid.setBounds(this.getGridBounds()); - this.container.addChild(this.stats.container); - this.container.addChild(this.grid.container); - this.container.x = this.bounds.x; - this.container.y = this.bounds.y; - } + protected draw() { + console.log('Drawing Game Scene ', this.bounds); + this.container.removeChildren(); + const g = new PIXI.Graphics(); + g.rect(0, 0, this.bounds.width, this.bounds.height); + g.fill(0x000033); + this.container.addChild(g); + this.stats.setBounds(this.getStatusBounds()); + this.grid.setBounds(this.getGridBounds()); + this.container.addChild(this.stats.container); + this.container.addChild(this.grid.container); + this.container.x = this.bounds.x; + this.container.y = this.bounds.y; + } } diff --git a/src/scenes/MainMenu.ts b/src/scenes/MainMenu.ts index ce8d18b..d45d145 100644 --- a/src/scenes/MainMenu.ts +++ b/src/scenes/MainMenu.ts @@ -1,46 +1,46 @@ -import Button from "../base/Button"; -import SceneBase from "./SceneBase"; -import * as PIXI from "pixi.js"; +import Button from '../base/Button'; +import SceneBase from './SceneBase'; +import * as PIXI from 'pixi.js'; export default class MainMenu extends SceneBase { - private _newGameButton: Button; - private _settingsButton: Button; + private _newGameButton: Button; + private _settingsButton: Button; - constructor(bounds?: PIXI.Rectangle) { - super(bounds); - this._newGameButton = new Button("New Game", new PIXI.Color("blue")); - this._newGameButton.events.on("click", () => { - this.events.emit("newGame"); - }); - this._settingsButton = new Button("Settings", new PIXI.Color("gray")); - this._settingsButton.events.on("click", () => { - this.events.emit("settings"); - }); - this.draw(); - } + constructor(bounds?: PIXI.Rectangle) { + super(bounds); + this._newGameButton = new Button('New Game', new PIXI.Color('blue')); + this._newGameButton.events.on('click', () => { + this.events.emit('newGame'); + }); + this._settingsButton = new Button('Settings', new PIXI.Color('gray')); + this._settingsButton.events.on('click', () => { + this.events.emit('settings'); + }); + this.draw(); + } - protected draw() { - console.log("Creating main menu scene", this.bounds); - this.container.removeChildren(); - const g = new PIXI.Graphics(); - g.rect(0, 0, this.bounds.width, this.bounds.height); - g.fill(0x000000); - this.container.addChild(g); - this._newGameButton.setBounds( - this.bounds.width / 2 - 300 / 2, - this.bounds.height / 2 - 80, - 300, - 60 - ); - this._settingsButton.setBounds( - this.bounds.width / 2 - 300 / 2, - this.bounds.height / 2 + 20, - 300, - 60 - ); - this.container.addChild(this._newGameButton.container); - this.container.addChild(this._settingsButton.container); - this.container.x = this.bounds.x; - this.container.y = this.bounds.y; - } + protected draw() { + console.log('Creating main menu scene', this.bounds); + this.container.removeChildren(); + const g = new PIXI.Graphics(); + g.rect(0, 0, this.bounds.width, this.bounds.height); + g.fill(0x000000); + this.container.addChild(g); + this._newGameButton.setBounds( + this.bounds.width / 2 - 300 / 2, + this.bounds.height / 2 - 80, + 300, + 60 + ); + this._settingsButton.setBounds( + this.bounds.width / 2 - 300 / 2, + this.bounds.height / 2 + 20, + 300, + 60 + ); + this.container.addChild(this._newGameButton.container); + this.container.addChild(this._settingsButton.container); + this.container.x = this.bounds.x; + this.container.y = this.bounds.y; + } } diff --git a/src/scenes/MissionSelectMenu.ts b/src/scenes/MissionSelectMenu.ts index 00c433e..e7b9779 100644 --- a/src/scenes/MissionSelectMenu.ts +++ b/src/scenes/MissionSelectMenu.ts @@ -1,48 +1,48 @@ -import Assets from "../base/Assets"; -import Button from "../base/Button"; -import { MissionDefinition } from "../base/Definitions"; -import SceneBase from "./SceneBase"; -import * as PIXI from "pixi.js"; +import Assets from '../base/Assets'; +import Button from '../base/Button'; +import { MissionDefinition } from '../base/Definitions'; +import SceneBase from './SceneBase'; +import * as PIXI from 'pixi.js'; export default class MissionMenuSelect extends SceneBase { - private _buttons: Button[] = []; + private _buttons: Button[] = []; - constructor(bounds: PIXI.Rectangle) { - super(bounds); - for (const mission of Assets.Missions) { - this.addMission(mission); + constructor(bounds: PIXI.Rectangle) { + super(bounds); + for (const mission of Assets.Missions) { + this.addMission(mission); + } + this.addButton('Back', () => { + this.events.emit('back'); + }); + this.draw(); } - this.addButton("Back", () => { - this.events.emit("back"); - }); - this.draw(); - } - protected draw() { - this.container.removeChildren(); - const g = new PIXI.Graphics(); - g.rect(0, 0, this.bounds.width, this.bounds.height); - g.fill(0x000000); - this.container.addChild(g); - let y = 50; - for (const button of this._buttons) { - button.setBounds(this.bounds.width / 2 - 300 / 2, y, 300, 60); - y += 80; - this.container.addChild(button.container); + protected draw() { + this.container.removeChildren(); + const g = new PIXI.Graphics(); + g.rect(0, 0, this.bounds.width, this.bounds.height); + g.fill(0x000000); + this.container.addChild(g); + let y = 50; + for (const button of this._buttons) { + button.setBounds(this.bounds.width / 2 - 300 / 2, y, 300, 60); + y += 80; + this.container.addChild(button.container); + } + this.container.x = this.bounds.x; + this.container.y = this.bounds.y; } - this.container.x = this.bounds.x; - this.container.y = this.bounds.y; - } - private addMission(mission: MissionDefinition) { - this.addButton(mission.name, () => { - this.events.emit("mission", mission); - }); - } + private addMission(mission: MissionDefinition) { + this.addButton(mission.name, () => { + this.events.emit('mission', mission); + }); + } - private addButton(caption: string, onClick: () => void) { - const button = new Button(caption, new PIXI.Color("white")); - button.events.on("click", onClick); - this._buttons.push(button); - } + private addButton(caption: string, onClick: () => void) { + const button = new Button(caption, new PIXI.Color('white')); + button.events.on('click', onClick); + this._buttons.push(button); + } } diff --git a/src/scenes/SceneBase.ts b/src/scenes/SceneBase.ts index 04f2178..5ad4249 100644 --- a/src/scenes/SceneBase.ts +++ b/src/scenes/SceneBase.ts @@ -1,7 +1,7 @@ -import * as PIXI from "pixi.js"; -import GameObject from "../base/GameObject"; +import * as PIXI from 'pixi.js'; +import GameObject from '../base/GameObject'; export default abstract class SceneBase extends GameObject { - constructor(bounds: PIXI.Rectangle) { - super(bounds); - } + constructor(bounds: PIXI.Rectangle) { + super(bounds); + } } diff --git a/src/scenes/SettingsMenu.ts b/src/scenes/SettingsMenu.ts index 4c4b464..ab003aa 100644 --- a/src/scenes/SettingsMenu.ts +++ b/src/scenes/SettingsMenu.ts @@ -1,20 +1,20 @@ -import Button from "../base/Button"; -import SceneBase from "./SceneBase"; -import * as PIXI from "pixi.js"; +import Button from '../base/Button'; +import SceneBase from './SceneBase'; +import * as PIXI from 'pixi.js'; export default class SettingsMenu extends SceneBase { - constructor(bounds: PIXI.Rectangle) { - super(bounds); - this.draw(); - } + constructor(bounds: PIXI.Rectangle) { + super(bounds); + this.draw(); + } - protected draw() { - this.container.removeChildren(); - const g = new PIXI.Graphics(); - g.rect(0, 0, this.bounds.width, this.bounds.height); - g.fill(0x000000); + protected draw() { + this.container.removeChildren(); + const g = new PIXI.Graphics(); + g.rect(0, 0, this.bounds.width, this.bounds.height); + g.fill(0x000000); - this.container.x = this.bounds.x; - this.container.y = this.bounds.y; - } + this.container.x = this.bounds.x; + this.container.y = this.bounds.y; + } }