koneko/bastion.overflow.fun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add prettier config and fix files

Browse Source
This commit is contained in:
koneko 2024-10-03 21:31:50 +02:00
parent 698967c987
commit 1d2473dae8
14 changed files with 500 additions and 470 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.prettierrc Normal file
View File

@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

44
src/base/Assets.ts
View File

@ -1,29 +1,29 @@
import * as PIXI from "pixi.js"; import * as PIXI from 'pixi.js';
import { MissionDefinition } from "./Definitions"; import { MissionDefinition } from './Definitions';
export default class Assets { export default class Assets {
public static async LoadAssets() { public static async LoadAssets() {
console.log("Loading Texture Assets"); console.log('Loading Texture Assets');
Assets.ButtonTexture = await PIXI.Assets.load({ Assets.ButtonTexture = await PIXI.Assets.load({
src: "/assets/gui/button_02.png", src: '/assets/gui/button_02.png',
}); });
console.log("Loading Missions"); console.log('Loading Missions');
await this.LoadMissions(); await this.LoadMissions();
} }
private static async LoadMissions() { private static async LoadMissions() {
Assets.Missions = [ Assets.Missions = [
await this.LoadMission("/assets/missions/mission_01.json"), await this.LoadMission('/assets/missions/mission_01.json'),
]; ];
} }
private static async LoadMission(missionUrl: string) { private static async LoadMission(missionUrl: string) {
const res = await fetch(missionUrl); const res = await fetch(missionUrl);
const mission = await res.json(); const mission = await res.json();
return mission; return mission;
} }
public static ButtonTexture: PIXI.Texture; public static ButtonTexture: PIXI.Texture;
public static Missions: MissionDefinition[]; public static Missions: MissionDefinition[];
} }

128
src/base/Button.ts
View File

@ -1,71 +1,71 @@
import GameObject from "./GameObject"; import GameObject from './GameObject';
import Assets from "./Assets"; import Assets from './Assets';
import * as PIXI from "pixi.js"; import * as PIXI from 'pixi.js';
export default class Button extends GameObject { export default class Button extends GameObject {
private caption: string; private caption: string;
private color: PIXI.Color; private color: PIXI.Color;
private buttonTexture: PIXI.Texture; private buttonTexture: PIXI.Texture;
private enabled: boolean = true; private enabled: boolean = true;
setCaption(caption: string) { setCaption(caption: string) {
this.caption = caption; this.caption = caption;
this.draw(); this.draw();
} }
setEnabled(enabled: boolean) { setEnabled(enabled: boolean) {
this.enabled = enabled; this.enabled = enabled;
} }
constructor( constructor(
caption: string, caption: string,
color: PIXI.Color, color: PIXI.Color,
enabled: boolean = true, enabled: boolean = true,
bounds?: PIXI.Rectangle bounds?: PIXI.Rectangle
) { ) {
super(bounds); super(bounds);
this.caption = caption; this.caption = caption;
this.color = color; this.color = color;
this.container.interactive = true; this.container.interactive = true;
this.buttonTexture = Assets.ButtonTexture; this.buttonTexture = Assets.ButtonTexture;
this.enabled = enabled; this.enabled = enabled;
this.draw(); this.draw();
} }
protected draw() { protected draw() {
this.container.removeChildren(); this.container.removeChildren();
// const button = new PIXI.Graphics(); // const button = new PIXI.Graphics();
// button.rect(0, 0, this.bounds.width, this.bounds.height); // button.rect(0, 0, this.bounds.width, this.bounds.height);
// button.fill(this.color); // button.fill(this.color);
//console.log(this.buttonTexture); //console.log(this.buttonTexture);
const button = new PIXI.NineSliceSprite({ const button = new PIXI.NineSliceSprite({
texture: this.buttonTexture, texture: this.buttonTexture,
leftWidth: 100, leftWidth: 100,
topHeight: 100, topHeight: 100,
rightWidth: 100, rightWidth: 100,
bottomHeight: 100, bottomHeight: 100,
}); });
button.x = 0; button.x = 0;
button.y = 0; button.y = 0;
button.width = this.bounds.width; button.width = this.bounds.width;
button.height = this.bounds.height; button.height = this.bounds.height;
this.container.addChild(button); this.container.addChild(button);
const text = new PIXI.Text({ const text = new PIXI.Text({
text: this.caption, text: this.caption,
style: new PIXI.TextStyle({ style: new PIXI.TextStyle({
fill: 0xffffff, fill: 0xffffff,
fontSize: 24, fontSize: 24,
}), }),
}); });
this.container.addChild(text); this.container.addChild(text);
text.anchor.set(0.5, 0.5); text.anchor.set(0.5, 0.5);
text.x = this.bounds.width / 2; text.x = this.bounds.width / 2;
text.y = this.bounds.height / 2; text.y = this.bounds.height / 2;
this.container.x = this.bounds.x; this.container.x = this.bounds.x;
this.container.y = this.bounds.y; this.container.y = this.bounds.y;
this.container.on("click", () => { this.container.on('click', () => {
if (!this.enabled) return; if (!this.enabled) return;
this.events.emit("click"); this.events.emit('click');
}); });
} }
} }

42
src/base/Definitions.ts
View File

@ -1,43 +1,43 @@
export type MissionDefinition = { export type MissionDefinition = {
name: string; name: string;
description: string; description: string;
mapImageUrl: string; mapImageUrl: string;
gameMap: GameMapDefinition; gameMap: GameMapDefinition;
}; };
export type GameMapDefinition = { export type GameMapDefinition = {
rows: number; rows: number;
columns: number; columns: number;
cells: TerrainType[][]; cells: TerrainType[][];
paths: PathDefinition[]; paths: PathDefinition[];
}; };
export type MissionRoundDefinition = { export type MissionRoundDefinition = {
waves: WaveDefinition[]; waves: WaveDefinition[];
offeredGems: GemType[]; offeredGems: GemType[];
}; };
export type WaveDefinition = { export type WaveDefinition = {
firstCreepSpawnTick: number; firstCreepSpawnTick: number;
spawnIntervalTicks: number; spawnIntervalTicks: number;
creeps: CreepType[]; creeps: CreepType[];
}; };
export type PathDefinition = [[row: number, column: number]]; export type PathDefinition = [[row: number, column: number]];
export enum CreepType { export enum CreepType {
Basic = 0, Basic = 0,
Fast = 1, Fast = 1,
} }
export enum TerrainType { export enum TerrainType {
Restricted = 0, Restricted = 0,
Buildable = 1, Buildable = 1,
} }
export enum GemType { export enum GemType {
Fire = 0, Fire = 0,
Yeti = 1, Yeti = 1,
Titalium = 2, Titalium = 2,
Soulforge = 3, Soulforge = 3,
} }

107
src/base/Game.ts
View File

@ -1,59 +1,64 @@
import MainMenu from "../scenes/MainMenu"; import MainMenu from '../scenes/MainMenu';
import MissionMenuSelect from "../scenes/MissionSelectMenu"; import MissionMenuSelect from '../scenes/MissionSelectMenu';
import GameScene from "../scenes/GameScene"; import GameScene from '../scenes/GameScene';
import GameObject from "./GameObject"; import GameObject from './GameObject';
import * as PIXI from "pixi.js"; import * as PIXI from 'pixi.js';
import SceneBase from "../scenes/SceneBase"; import SceneBase from '../scenes/SceneBase';
export default class Game extends GameObject { export default class Game extends GameObject {
private _currentScene: SceneBase | null = null; private _currentScene: SceneBase | null = null;
constructor(bounds: PIXI.Rectangle) { constructor(bounds: PIXI.Rectangle) {
super(bounds); super(bounds);
this.onMainMenu(); 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();
} }
this._currentScene = scene;
console.log("Setting scene", this._currentScene.constructor);
this.container.addChild(scene.container);
}
private onNewGame = () => { private onMainMenu() {
console.log("New Game"); const mainScene = new MainMenu(this.bounds);
const missionSelectScene = new MissionMenuSelect(this.bounds); mainScene.events.on('newGame', this.onNewGame);
missionSelectScene.events.on("mission", (mission) => { mainScene.events.on('settings', this.onSettings);
console.log("Mission selected", mission); this.setScene(mainScene);
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() { private setScene(scene: SceneBase) {
// Nothing to draw, scene is drawing itself. 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.
}
} }

76
src/base/GameObject.ts
View File

@ -1,50 +1,50 @@
import * as PIXI from "pixi.js"; import * as PIXI from 'pixi.js';
export default abstract class GameObject { 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(bounds: PIXI.Rectangle): void;
public setBounds(x: number, y: number, width: number, height: number): void; public setBounds(x: number, y: number, width: number, height: number): void;
public setBounds( public setBounds(
boundsOrX: PIXI.Rectangle | number, boundsOrX: PIXI.Rectangle | number,
y?: number, y?: number,
width?: number, width?: number,
height?: number height?: number
) { ) {
if (boundsOrX instanceof PIXI.Rectangle) { if (boundsOrX instanceof PIXI.Rectangle) {
this.bounds = boundsOrX; this.bounds = boundsOrX;
} else { } else {
this.bounds = new PIXI.Rectangle(boundsOrX, y, width, height); this.bounds = new PIXI.Rectangle(boundsOrX, y, width, height);
}
this.triggerBoundsChanged(); // GameObject implements this.
} }
this.triggerBoundsChanged(); // GameObject implements this.
}
public destroy() { public destroy() {
this._events.removeAllListeners(); this._events.removeAllListeners();
if (this._container.parent) if (this._container.parent)
this._container.parent.removeChild(this._container); this._container.parent.removeChild(this._container);
this._container.destroy(); this._container.destroy();
} }
public get container(): PIXI.Container { public get container(): PIXI.Container {
return this._container; return this._container;
} }
public get events(): PIXI.EventEmitter { public get events(): PIXI.EventEmitter {
return this._events; return this._events;
} }
protected triggerBoundsChanged() { protected triggerBoundsChanged() {
this.draw(); this.draw();
} }
protected abstract draw(): void; protected abstract draw(): void;
constructor(bounds?: PIXI.Rectangle) { constructor(bounds?: PIXI.Rectangle) {
this.bounds = bounds ?? new PIXI.Rectangle(0, 0, 0, 0); this.bounds = bounds ?? new PIXI.Rectangle(0, 0, 0, 0);
this._container = new PIXI.Container(); this._container = new PIXI.Container();
} }
} }

15
src/components/Creep.ts Normal file
View File

@ -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;
}
}

170
src/components/Grid.ts
View File

@ -1,100 +1,100 @@
import * as PIXI from "pixi.js"; import * as PIXI from 'pixi.js';
import GameObject from "../base/GameObject"; import GameObject from '../base/GameObject';
import { GameMapDefinition, TerrainType } from "../base/Definitions"; import { GameMapDefinition, TerrainType } from '../base/Definitions';
export class Cell extends GameObject { export class Cell extends GameObject {
public type: TerrainType; public type: TerrainType;
public row: number; public row: number;
public column: number; public column: number;
public isPath: boolean = false; public isPath: boolean = false;
constructor( constructor(
type: TerrainType, type: TerrainType,
row: number, row: number,
column: number, column: number,
isPath: boolean, isPath: boolean,
bounds?: PIXI.Rectangle bounds?: PIXI.Rectangle
) { ) {
super(bounds); super(bounds);
this.type = type; this.type = type;
this.row = row; this.row = row;
this.column = column; this.column = column;
this.isPath = isPath; this.isPath = isPath;
this.draw(); this.draw();
} }
protected draw() { protected draw() {
this.container.removeChildren(); this.container.removeChildren();
let g = new PIXI.Graphics(); let g = new PIXI.Graphics();
g.rect(0, 0, this.bounds.width, this.bounds.height); g.rect(0, 0, this.bounds.width, this.bounds.height);
switch (this.type) { switch (this.type) {
case TerrainType.Restricted: case TerrainType.Restricted:
g.fill(0xff0000); g.fill(0xff0000);
break; break;
case TerrainType.Buildable: case TerrainType.Buildable:
g.fill(0x00ff00); g.fill(0x00ff00);
break; 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 { export class Grid extends GameObject {
private gameMap: GameMapDefinition; private gameMap: GameMapDefinition;
private cells: Cell[] = []; private cells: Cell[] = [];
constructor(map: GameMapDefinition, bounds?: PIXI.Rectangle) { constructor(map: GameMapDefinition, bounds?: PIXI.Rectangle) {
super(bounds); super(bounds);
this.gameMap = map; this.gameMap = map;
console.log(this.gameMap.paths); console.log(this.gameMap.paths);
for (let y = 0; y < this.gameMap.rows; y++) { for (let y = 0; y < this.gameMap.rows; y++) {
for (let x = 0; x < this.gameMap.columns; x++) { for (let x = 0; x < this.gameMap.columns; x++) {
let type = this.gameMap.cells[x][y]; let type = this.gameMap.cells[x][y];
const isPath = this.gameMap.paths.some((path) => const isPath = this.gameMap.paths.some((path) =>
path.some((p) => p[0] === x && p[1] === y) path.some((p) => p[0] === x && p[1] === y)
); );
if (isPath) type = TerrainType.Restricted; if (isPath) type = TerrainType.Restricted;
let cell = new Cell(type, x, y, isPath); let cell = new Cell(type, x, y, isPath);
this.cells.push(cell); this.cells.push(cell);
} }
}
console.log(this.cells);
this.draw();
} }
console.log(this.cells);
this.draw();
}
protected draw() { protected draw() {
console.log("Drawing Grid", this.bounds); console.log('Drawing Grid', this.bounds);
this.container.removeChildren(); this.container.removeChildren();
let g = new PIXI.Graphics(); let g = new PIXI.Graphics();
g.rect(0, 0, this.bounds.width, this.bounds.height); g.rect(0, 0, this.bounds.width, this.bounds.height);
g.fill(0x00aa00); g.fill(0x00aa00);
this.container.addChild(g); this.container.addChild(g);
for (let cell of this.cells) { for (let cell of this.cells) {
cell.setBounds( cell.setBounds(
this.gridUnitsToPixels(cell.column), this.gridUnitsToPixels(cell.column),
this.gridUnitsToPixels(cell.row), this.gridUnitsToPixels(cell.row),
this.gridUnitsToPixels(1), this.gridUnitsToPixels(1),
this.gridUnitsToPixels(1) this.gridUnitsToPixels(1)
); );
this.container.addChild(cell.container); 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() { private getPixelScalingFactor() {
const pixelScaleX = this.container.width / this.gameMap.columns; const pixelScaleX = this.container.width / this.gameMap.columns;
const pixelScaleY = this.container.height / this.gameMap.rows; const pixelScaleY = this.container.height / this.gameMap.rows;
return pixelScaleX < pixelScaleY ? pixelScaleX : pixelScaleY; return pixelScaleX < pixelScaleY ? pixelScaleX : pixelScaleY;
} }
public gridUnitsToPixels(amount: number): number { public gridUnitsToPixels(amount: number): number {
return amount * this.getPixelScalingFactor(); return amount * this.getPixelScalingFactor();
} }
public pixelsToGridUnits(pixels: number): number { public pixelsToGridUnits(pixels: number): number {
return pixels / this.getPixelScalingFactor(); return pixels / this.getPixelScalingFactor();
} }
} }

74
src/components/MissionStats.ts
View File

@ -1,42 +1,46 @@
import GameObject from "../base/GameObject"; import GameObject from '../base/GameObject';
import * as PIXI from "pixi.js"; import * as PIXI from 'pixi.js';
export default class MissionStats extends GameObject { export default class MissionStats extends GameObject {
private hp: number = 100; private hp: number = 100;
private gold: number = 0; private gold: number = 0;
public setHP(hp: number) { public setHP(hp: number) {
this.hp = hp; this.hp = hp;
this.draw(); this.draw();
} }
public setGold(gold: number) { public setGold(gold: number) {
this.gold = gold; this.gold = gold;
this.draw(); this.draw();
} }
constructor(initialHP: number, initialGold: number, bounds?: PIXI.Rectangle) { constructor(
super(bounds); initialHP: number,
this.hp = initialHP; initialGold: number,
this.gold = initialGold; bounds?: PIXI.Rectangle
this.draw(); ) {
} super(bounds);
this.hp = initialHP;
this.gold = initialGold;
this.draw();
}
protected draw() { protected draw() {
this.container.removeChildren(); this.container.removeChildren();
const g = new PIXI.Graphics(); const g = new PIXI.Graphics();
g.rect(0, 0, this.bounds.width, this.bounds.height); g.rect(0, 0, this.bounds.width, this.bounds.height);
g.fill(0x000000); g.fill(0x000000);
this.container.addChild(g); this.container.addChild(g);
const text = new PIXI.Text({ const text = new PIXI.Text({
text: `HP: ${this.hp}\nGold: ${this.gold}`, text: `HP: ${this.hp}\nGold: ${this.gold}`,
style: new PIXI.TextStyle({ style: new PIXI.TextStyle({
fill: "white", fill: 'white',
fontSize: 24, fontSize: 24,
}), }),
}); });
this.container.addChild(text); this.container.addChild(text);
this.container.x = this.bounds.x; this.container.x = this.bounds.x;
this.container.y = this.bounds.y; this.container.y = this.bounds.y;
} }
} }

108
src/scenes/GameScene.ts
View File

@ -1,63 +1,63 @@
import Button from "../base/Button"; import Button from '../base/Button';
import { MissionDefinition } from "../base/Definitions"; import { MissionDefinition } from '../base/Definitions';
import { Grid } from "../components/Grid"; import { Grid } from '../components/Grid';
import MissionStats from "../components/MissionStats"; import MissionStats from '../components/MissionStats';
import SceneBase from "./SceneBase"; import SceneBase from './SceneBase';
import * as PIXI from "pixi.js"; import * as PIXI from 'pixi.js';
export default class GameScene extends SceneBase { export default class GameScene extends SceneBase {
private ticker: PIXI.Ticker; private ticker: PIXI.Ticker;
private stats: MissionStats; private stats: MissionStats;
private grid: Grid; private grid: Grid;
constructor(mission: MissionDefinition, bounds: PIXI.Rectangle) { constructor(mission: MissionDefinition, bounds: PIXI.Rectangle) {
super(bounds); super(bounds);
this.ticker = new PIXI.Ticker(); this.ticker = new PIXI.Ticker();
this.ticker = new PIXI.Ticker(); this.ticker = new PIXI.Ticker();
this.ticker.maxFPS = 60; this.ticker.maxFPS = 60;
this.ticker.minFPS = 30; this.ticker.minFPS = 30;
this.ticker.add(this.update); this.ticker.add(this.update);
this.ticker.start(); this.ticker.start();
this.stats = new MissionStats(100, 200); this.stats = new MissionStats(100, 200);
this.grid = new Grid(mission.gameMap); this.grid = new Grid(mission.gameMap);
this.draw(); this.draw();
} }
private getStatusBounds(): PIXI.Rectangle { private getStatusBounds(): PIXI.Rectangle {
// Top / Center // Top / Center
return new PIXI.Rectangle(this.bounds.width / 2 - 200 / 2, 0, 200, 100); return new PIXI.Rectangle(this.bounds.width / 2 - 200 / 2, 0, 200, 100);
} }
private getGridBounds(): PIXI.Rectangle { private getGridBounds(): PIXI.Rectangle {
// Center / Center // Center / Center
return new PIXI.Rectangle( return new PIXI.Rectangle(
this.bounds.width / 2 - 600 / 2, this.bounds.width / 2 - 600 / 2,
this.bounds.height / 2 - 600 / 2, this.bounds.height / 2 - 600 / 2,
600, 600,
600 600
); );
} }
public destroy() { public destroy() {
super.destroy(); super.destroy();
this.ticker.stop(); this.ticker.stop();
this.ticker.destroy(); this.ticker.destroy();
} }
public update() {} public update() {}
protected draw() { protected draw() {
console.log("Drawing Game Scene ", this.bounds); console.log('Drawing Game Scene ', this.bounds);
this.container.removeChildren(); this.container.removeChildren();
const g = new PIXI.Graphics(); const g = new PIXI.Graphics();
g.rect(0, 0, this.bounds.width, this.bounds.height); g.rect(0, 0, this.bounds.width, this.bounds.height);
g.fill(0x000033); g.fill(0x000033);
this.container.addChild(g); this.container.addChild(g);
this.stats.setBounds(this.getStatusBounds()); this.stats.setBounds(this.getStatusBounds());
this.grid.setBounds(this.getGridBounds()); this.grid.setBounds(this.getGridBounds());
this.container.addChild(this.stats.container); this.container.addChild(this.stats.container);
this.container.addChild(this.grid.container); this.container.addChild(this.grid.container);
this.container.x = this.bounds.x; this.container.x = this.bounds.x;
this.container.y = this.bounds.y; this.container.y = this.bounds.y;
} }
} }

82
src/scenes/MainMenu.ts
View File

@ -1,46 +1,46 @@
import Button from "../base/Button"; import Button from '../base/Button';
import SceneBase from "./SceneBase"; import SceneBase from './SceneBase';
import * as PIXI from "pixi.js"; import * as PIXI from 'pixi.js';
export default class MainMenu extends SceneBase { export default class MainMenu extends SceneBase {
private _newGameButton: Button; private _newGameButton: Button;
private _settingsButton: Button; private _settingsButton: Button;
constructor(bounds?: PIXI.Rectangle) { constructor(bounds?: PIXI.Rectangle) {
super(bounds); super(bounds);
this._newGameButton = new Button("New Game", new PIXI.Color("blue")); this._newGameButton = new Button('New Game', new PIXI.Color('blue'));
this._newGameButton.events.on("click", () => { this._newGameButton.events.on('click', () => {
this.events.emit("newGame"); this.events.emit('newGame');
}); });
this._settingsButton = new Button("Settings", new PIXI.Color("gray")); this._settingsButton = new Button('Settings', new PIXI.Color('gray'));
this._settingsButton.events.on("click", () => { this._settingsButton.events.on('click', () => {
this.events.emit("settings"); this.events.emit('settings');
}); });
this.draw(); this.draw();
} }
protected draw() { protected draw() {
console.log("Creating main menu scene", this.bounds); console.log('Creating main menu scene', this.bounds);
this.container.removeChildren(); this.container.removeChildren();
const g = new PIXI.Graphics(); const g = new PIXI.Graphics();
g.rect(0, 0, this.bounds.width, this.bounds.height); g.rect(0, 0, this.bounds.width, this.bounds.height);
g.fill(0x000000); g.fill(0x000000);
this.container.addChild(g); this.container.addChild(g);
this._newGameButton.setBounds( this._newGameButton.setBounds(
this.bounds.width / 2 - 300 / 2, this.bounds.width / 2 - 300 / 2,
this.bounds.height / 2 - 80, this.bounds.height / 2 - 80,
300, 300,
60 60
); );
this._settingsButton.setBounds( this._settingsButton.setBounds(
this.bounds.width / 2 - 300 / 2, this.bounds.width / 2 - 300 / 2,
this.bounds.height / 2 + 20, this.bounds.height / 2 + 20,
300, 300,
60 60
); );
this.container.addChild(this._newGameButton.container); this.container.addChild(this._newGameButton.container);
this.container.addChild(this._settingsButton.container); this.container.addChild(this._settingsButton.container);
this.container.x = this.bounds.x; this.container.x = this.bounds.x;
this.container.y = this.bounds.y; this.container.y = this.bounds.y;
} }
} }

78
src/scenes/MissionSelectMenu.ts
View File

@ -1,48 +1,48 @@
import Assets from "../base/Assets"; import Assets from '../base/Assets';
import Button from "../base/Button"; import Button from '../base/Button';
import { MissionDefinition } from "../base/Definitions"; import { MissionDefinition } from '../base/Definitions';
import SceneBase from "./SceneBase"; import SceneBase from './SceneBase';
import * as PIXI from "pixi.js"; import * as PIXI from 'pixi.js';
export default class MissionMenuSelect extends SceneBase { export default class MissionMenuSelect extends SceneBase {
private _buttons: Button[] = []; private _buttons: Button[] = [];
constructor(bounds: PIXI.Rectangle) { constructor(bounds: PIXI.Rectangle) {
super(bounds); super(bounds);
for (const mission of Assets.Missions) { for (const mission of Assets.Missions) {
this.addMission(mission); this.addMission(mission);
}
this.addButton('Back', () => {
this.events.emit('back');
});
this.draw();
} }
this.addButton("Back", () => {
this.events.emit("back");
});
this.draw();
}
protected draw() { protected draw() {
this.container.removeChildren(); this.container.removeChildren();
const g = new PIXI.Graphics(); const g = new PIXI.Graphics();
g.rect(0, 0, this.bounds.width, this.bounds.height); g.rect(0, 0, this.bounds.width, this.bounds.height);
g.fill(0x000000); g.fill(0x000000);
this.container.addChild(g); this.container.addChild(g);
let y = 50; let y = 50;
for (const button of this._buttons) { for (const button of this._buttons) {
button.setBounds(this.bounds.width / 2 - 300 / 2, y, 300, 60); button.setBounds(this.bounds.width / 2 - 300 / 2, y, 300, 60);
y += 80; y += 80;
this.container.addChild(button.container); 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) { private addMission(mission: MissionDefinition) {
this.addButton(mission.name, () => { this.addButton(mission.name, () => {
this.events.emit("mission", mission); this.events.emit('mission', mission);
}); });
} }
private addButton(caption: string, onClick: () => void) { private addButton(caption: string, onClick: () => void) {
const button = new Button(caption, new PIXI.Color("white")); const button = new Button(caption, new PIXI.Color('white'));
button.events.on("click", onClick); button.events.on('click', onClick);
this._buttons.push(button); this._buttons.push(button);
} }
} }

10
src/scenes/SceneBase.ts
View File

@ -1,7 +1,7 @@
import * as PIXI from "pixi.js"; import * as PIXI from 'pixi.js';
import GameObject from "../base/GameObject"; import GameObject from '../base/GameObject';
export default abstract class SceneBase extends GameObject { export default abstract class SceneBase extends GameObject {
constructor(bounds: PIXI.Rectangle) { constructor(bounds: PIXI.Rectangle) {
super(bounds); super(bounds);
} }
} }

30
src/scenes/SettingsMenu.ts
View File

@ -1,20 +1,20 @@
import Button from "../base/Button"; import Button from '../base/Button';
import SceneBase from "./SceneBase"; import SceneBase from './SceneBase';
import * as PIXI from "pixi.js"; import * as PIXI from 'pixi.js';
export default class SettingsMenu extends SceneBase { export default class SettingsMenu extends SceneBase {
constructor(bounds: PIXI.Rectangle) { constructor(bounds: PIXI.Rectangle) {
super(bounds); super(bounds);
this.draw(); this.draw();
} }
protected draw() { protected draw() {
this.container.removeChildren(); this.container.removeChildren();
const g = new PIXI.Graphics(); const g = new PIXI.Graphics();
g.rect(0, 0, this.bounds.width, this.bounds.height); g.rect(0, 0, this.bounds.width, this.bounds.height);
g.fill(0x000000); g.fill(0x000000);
this.container.x = this.bounds.x; this.container.x = this.bounds.x;
this.container.y = this.bounds.y; this.container.y = this.bounds.y;
} }
} }