add prettier config and fix files
This commit is contained in:
parent
698967c987
commit
1d2473dae8
6
.prettierrc
Normal file
6
.prettierrc
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 4,
|
||||
"semi": true,
|
||||
"singleQuote": true
|
||||
}
|
||||
@ -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[];
|
||||
}
|
||||
|
||||
@ -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');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
}
|
||||
|
||||
107
src/base/Game.ts
107
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.
|
||||
}
|
||||
}
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
15
src/components/Creep.ts
Normal file
15
src/components/Creep.ts
Normal 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;
|
||||
}
|
||||
}
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user