diff --git a/public/assets/gems/fire/1.png b/public/assets/gems/fire/1.png new file mode 100644 index 0000000..64c4c3e Binary files /dev/null and b/public/assets/gems/fire/1.png differ diff --git a/public/assets/gems/fire/2.png b/public/assets/gems/fire/2.png new file mode 100644 index 0000000..a5d4666 Binary files /dev/null and b/public/assets/gems/fire/2.png differ diff --git a/public/assets/json/Gems.json b/public/assets/json/Gems.json new file mode 100644 index 0000000..e69de29 diff --git a/src/classes/Assets.ts b/src/classes/Assets.ts index ef06319..2579e29 100644 --- a/src/classes/Assets.ts +++ b/src/classes/Assets.ts @@ -29,6 +29,7 @@ export default class GameAssets { public static HomeIconTexture: PIXI.Texture; public static HammerIconTexture: PIXI.Texture; public static XIconTexture: PIXI.Texture; + public static PlusIconTexture: PIXI.Texture; public static GemAmountIcons: PIXI.Texture[] = []; public static Missions: MissionDefinition[]; @@ -101,6 +102,7 @@ export default class GameAssets { this.Load('/assets/gui/icons/home.png').then((texture) => (this.HomeIconTexture = texture)), this.Load('/assets/gui/icons/hammer.png').then((texture) => (this.HammerIconTexture = texture)), this.Load('/assets/gui/icons/cross.png').then((texture) => (this.XIconTexture = texture)), + this.Load('/assets/gui/icons/plus.png').then((texture) => (this.PlusIconTexture = texture)), this.LoadMissions(), this.LoadTowers(), this.LoadCreeps(), diff --git a/src/classes/Definitions.ts b/src/classes/Definitions.ts index da4701d..e3ab53e 100644 --- a/src/classes/Definitions.ts +++ b/src/classes/Definitions.ts @@ -72,18 +72,19 @@ export type TowerStatsDefinition = { export type PathDefinition = [[row: number, column: number]]; -export enum CreepType { - Basic = 0, - Quick = 1, - Tank = 2, -} - export enum TerrainType { Restricted = 0, Buildable = 1, Path = 9, } +// Make sure to sync these with the respective JSON files. +export enum CreepType { + Basic = 0, + Quick = 1, + Tank = 2, +} + export enum GemType { Fire = 0, Yeti = 1, diff --git a/src/classes/game/Gem.ts b/src/classes/game/Gem.ts index 4a51259..ec292ec 100644 --- a/src/classes/game/Gem.ts +++ b/src/classes/game/Gem.ts @@ -1 +1,9 @@ -export default class Gem {} +import * as PIXI from 'pixi.js'; +import { GemType } from '../Definitions'; +export default class Gem { + public texture: PIXI.Texture; + public type: GemType; + public level: number = 1; + // TODO: create and load from Gems.json and also load gem textures + constructor(gemType) {} +} diff --git a/src/classes/game/Grid.ts b/src/classes/game/Grid.ts index 3706226..8169204 100644 --- a/src/classes/game/Grid.ts +++ b/src/classes/game/Grid.ts @@ -84,6 +84,8 @@ export class Cell extends GameObject { if (this.hasTowerPlaced) { const tower = Engine.TowerManager.GetTowerByRowAndCol(this.row, this.column); Engine.GameScene.towerPanel.Show(tower); + } else { + // TODO: hide the sidepanel somehow } } public checkIfCantPlace() { diff --git a/src/classes/game/Inventory.ts b/src/classes/game/Inventory.ts new file mode 100644 index 0000000..d360f8e --- /dev/null +++ b/src/classes/game/Inventory.ts @@ -0,0 +1,5 @@ +import GameObject from '../GameObject'; + +export default class Inventory extends GameObject { + public update() {} +} diff --git a/src/classes/gui/Tooltip.ts b/src/classes/gui/Tooltip.ts index 763176a..93d6558 100644 --- a/src/classes/gui/Tooltip.ts +++ b/src/classes/gui/Tooltip.ts @@ -105,7 +105,7 @@ export default class Tooltip extends GuiObject { }); this.gemAmount = new PIXI.Text({ x: 54, - y: 108, + y: 105, zIndex: 5, text: 'Something went wrong if you see this.', style: { diff --git a/src/classes/gui/TowerPanel.ts b/src/classes/gui/TowerPanel.ts index 53e2b5a..3038fb6 100644 --- a/src/classes/gui/TowerPanel.ts +++ b/src/classes/gui/TowerPanel.ts @@ -5,13 +5,48 @@ import { Engine } from '../Bastion'; import GameUIConstants from '../GameUIConstants'; import Button, { ButtonTexture } from './Button'; import { Tower } from '../game/Tower'; +import Gem from '../game/Gem'; + +class VisualGemSlot extends GuiObject { + private background: PIXI.Sprite; + private iconSprite: PIXI.Sprite; + private i: number = 0; + constructor(index: number, parent: PIXI.Container, gem: Gem | null) { + super(true); + let gtexture; + if (gem == null) { + gtexture = GameAssets.PlusIconTexture; + } else { + gtexture = gem.texture; + } + this.container.x = 10; + this.container.y = index * Engine.GridCellSize + 300; + this.background = new PIXI.Sprite({ + texture: GameAssets.FrameInventory, + }); + this.iconSprite = new PIXI.Sprite({ + texture: gtexture, + }); + this.background.width = Engine.GridCellSize; + this.background.height = Engine.GridCellSize; + this.iconSprite.x = Engine.GridCellSize / 2; + this.iconSprite.y = Engine.GridCellSize / 2; + this.iconSprite.width = Engine.GridCellSize / 2; + this.iconSprite.height = Engine.GridCellSize / 2; + this.iconSprite.anchor.set(0.5, 0.5); + this.container.addChild(this.background); + this.container.addChild(this.iconSprite); + parent.addChild(this.container); + } + public onClick(e: PIXI.FederatedPointerEvent): void {} +} export default class TowerPanel extends GuiObject { private bounds: PIXI.Rectangle; private towerPanel: PIXI.NineSliceSprite; private closeBtn: Button; public isShown: boolean = false; - titleText: PIXI.Text; + public titleText: PIXI.Text; constructor(bounds: PIXI.Rectangle) { super(false); @@ -64,10 +99,18 @@ export default class TowerPanel extends GuiObject { this.titleText.anchor.set(0.5, 0); this.container.addChild(this.titleText); } + private MakeSlots(tower: Tower) { + let amount = tower.definition.stats.gemSlotsAmount; + amount = 6; + for (let i = 0; i < amount; i++) { + const element = new VisualGemSlot(i, this.container, null); + } + } public Show(tower: Tower) { let mouseX = Engine.MouseX; this.isShown = true; this.SetContent(tower); + this.MakeSlots(tower); if (mouseX < 900) { this.ShowRight(); } else { @@ -81,7 +124,7 @@ export default class TowerPanel extends GuiObject { this.towerPanel.x = -100; this.container.x = 0; this.container.alpha = 1; - this.closeBtn.container.x = this.container.width - 150; + this.closeBtn.container.x = this.bounds.width - 150; } private ShowRight() { this.towerPanel.x = -10;