diff --git a/public/assets/gui/frame_05.png b/public/assets/gui/frame_05.png new file mode 100755 index 0000000..2b24c7e Binary files /dev/null and b/public/assets/gui/frame_05.png differ diff --git a/src/classes/Assets.ts b/src/classes/Assets.ts index 9a92fd3..528aada 100644 --- a/src/classes/Assets.ts +++ b/src/classes/Assets.ts @@ -7,6 +7,7 @@ export default class GameAssets { public static Frame02Texture: PIXI.Texture; public static Frame03Texture: PIXI.Texture; public static Frame04Texture: PIXI.Texture; + public static Frame05Texture: PIXI.Texture; public static FrameInventory: PIXI.Texture; public static FrameBackground: PIXI.Texture; public static FrameTowerTab: PIXI.Texture; @@ -86,6 +87,7 @@ export default class GameAssets { this.Load('./assets/gui/frame_02.png').then((texture) => (this.Frame02Texture = texture)), this.Load('./assets/gui/frame_03.png').then((texture) => (this.Frame03Texture = texture)), this.Load('./assets/gui/frame_04.png').then((texture) => (this.Frame04Texture = texture)), + this.Load('./assets/gui/frame_05.png').then((texture) => (this.Frame05Texture = texture)), this.Load('./assets/gui/frame_inv.png').then((texture) => (this.FrameInventory = texture)), this.Load('./assets/gui/background_01.png').then((texture) => (this.FrameBackground = texture)), this.Load('./assets/gui/background_02.png').then((texture) => (this.FrameTowerTab = texture)), diff --git a/src/classes/Bastion.ts b/src/classes/Bastion.ts index db5ded7..8821991 100644 --- a/src/classes/Bastion.ts +++ b/src/classes/Bastion.ts @@ -9,6 +9,8 @@ import { GameScene } from '../scenes/Game'; import { AnimationManager } from './game/AnimationManager'; import NotificationManager from './game/NotificationManager'; import Gem from './game/Gem'; +import GameAssets from './Assets'; +import { GemType } from './Definitions'; export class Engine { public static app: PIXI.Application; @@ -27,9 +29,12 @@ export class Engine { public static MouseX: number = 0; public static MouseY: number = 0; - public static gemTest() { - for (let i = 0; i < 2; i++) { - this.GameScene.MissionStats.giveGem(new Gem(0)); + public static TestSuite() { + Engine.NotificationManager.Notify('Loaded testing suite.', 'danger'); + Engine.TowerManager.ToggleChoosingTowerLocation('RESET'); + Engine.TowerManager.PlaceTower(GameAssets.Towers[1], 10, 15, GameAssets.Towers[0].behaviour, true); + for (let i = 0; i < 16; i++) { + this.GameScene.MissionStats.giveGem(new Gem(GemType.Fire), true); } } } diff --git a/src/classes/game/Gem.ts b/src/classes/game/Gem.ts index 185a7ba..15c2614 100644 --- a/src/classes/game/Gem.ts +++ b/src/classes/game/Gem.ts @@ -8,7 +8,7 @@ export default class Gem { public texture: PIXI.Texture; public level: number = 1; public definition: GemDefinition; - private id; + public id; constructor(gemType: GemType) { this.definition = GameAssets.Gems[gemType]; this.texture = this.definition.textures[0]; diff --git a/src/classes/game/NotificationManager.ts b/src/classes/game/NotificationManager.ts index 04f2792..737be4e 100644 --- a/src/classes/game/NotificationManager.ts +++ b/src/classes/game/NotificationManager.ts @@ -55,7 +55,7 @@ export default class NotificationManager extends GameObject { this.bb.x = Engine.app.canvas.width / 2; this.bb.y = 40; this.copyBBToContainer(); - this.container.zIndex = 100; + this.container.zIndex = 200; Engine.app.stage.addChild(this.container); } public Notify(text, type: NotificationType) { @@ -74,7 +74,7 @@ export default class NotificationManager extends GameObject { if (this.ticks >= notif.ticksToFadeAway && !notif.animating) { notif.animating = true; Engine.AnimationManager.Animate( - new FadeInOut('out', 240, notif.textObj, () => { + new FadeInOut('out', 300, notif.textObj, () => { notif.destroy(); }) ); diff --git a/src/classes/game/Tower.ts b/src/classes/game/Tower.ts index 95e9448..3e3615d 100644 --- a/src/classes/game/Tower.ts +++ b/src/classes/game/Tower.ts @@ -64,8 +64,15 @@ export class Tower extends GameObject { public UnslotGem(index) { const gem = this.slottedGems.splice(index, 1)[0]; Engine.GameScene.MissionStats.giveGem(gem, true); + for (let i = index; i < this.slottedGems.length - 1; i++) { + if (this.slottedGems[i] == null) { + this.slottedGems[i] = this.slottedGems[i + 1]; + this.slottedGems[i + 1] = null; + } + } + this.slottedGems = this.slottedGems.filter((gem) => gem != null); Engine.NotificationManager.Notify( - `Gem Lv. ${gem.level} ${gem.definition.name} unslotted from ${this.name} and placed back in your inventory.`, + `Lv. ${gem.level} ${gem.definition.name} unslotted and placed back in your inventory.`, 'info' ); } @@ -111,7 +118,7 @@ export class Tower extends GameObject { } } - override destroy(): void { + public destroy(): void { super.destroy(); this.parent.clickDetector.off('pointerenter', this.onParentCellEnter); this.parent.clickDetector.off('pointerleave', this.onParentCellLeave); diff --git a/src/classes/game/TowerManager.ts b/src/classes/game/TowerManager.ts index 1082e62..d63d0e6 100644 --- a/src/classes/game/TowerManager.ts +++ b/src/classes/game/TowerManager.ts @@ -88,7 +88,7 @@ export default class TowerManager { return returnTower; } public PlaceTower(definition: TowerDefinition, row, column, behaviour: string, ignoreCost?) { - const sprite = this.selectedTower.texture; + const sprite = definition.texture; if (!Engine.GameScene.MissionStats.hasEnoughGold(definition.stats.cost) && !ignoreCost) return Engine.NotificationManager.Notify('Not enough gold.', 'warn'); if ( @@ -96,7 +96,7 @@ export default class TowerManager { Engine.Grid.getCellByRowAndCol(row, column).type != TerrainType.Path && Engine.Grid.getCellByRowAndCol(row, column).type != TerrainType.Restricted ) { - Engine.GameScene.MissionStats.spendGold(definition.stats.cost); + if (!ignoreCost) Engine.GameScene.MissionStats.spendGold(definition.stats.cost); let tower = new Tower(row, column, sprite, definition, behaviour); this.towers.push(tower); this.ToggleChoosingTowerLocation('RESET'); diff --git a/src/classes/gui/GemTab.ts b/src/classes/gui/GemTab.ts index 50cbf82..38777c6 100644 --- a/src/classes/gui/GemTab.ts +++ b/src/classes/gui/GemTab.ts @@ -37,12 +37,12 @@ export default class GemTab extends GuiObject { this.RebuildInventoryVisual(); }); } + // TODO: add more visual clarity public TowerPanelSelectingGem(gem: Gem, index: number, tower: Tower) { - console.log(this); - if (this.isSelectingGem) { - this.isSelectingGem = false; - this.selectingGemSlotIndex = -1; - } else { + console.log('TOWER PANEL SELECTING GEM ' + index); + if (index < 0) console.error('TOWER PANEL SELECTING GEM INDEX IS LESS THAN 0, ', index); + // index = Engine.GameScene.towerPanel.vGems.indexOf(gem); + if (!this.isSelectingGem) { this.isSelectingGem = true; if (gem == null) { // Want to select gem to slot in, already checked if player has a Gem. @@ -58,6 +58,13 @@ export default class GemTab extends GuiObject { this.RebuildInventoryVisual(); Engine.GameScene.towerPanel.Hide(); Engine.GameScene.towerPanel.Show(tower); + this.isSelectingGem = false; + this.selectingGemSlotIndex = -1; + this.selectingGemTowerObject = null; + } + } else { + if (gem == null) { + this.isSelectingGem = false; this.selectingGemSlotIndex = -1; this.selectingGemTowerObject = null; } @@ -69,8 +76,8 @@ export default class GemTab extends GuiObject { Engine.GameScene.MissionStats.getInventory().forEach((gem, index) => { let vGem = new VisualGemSlot(0, this.container, gem); - let vGemYCoord = 5; - let vGemXCoord = (index % 4) * 64 + 20; + let vGemYCoord = 10; + let vGemXCoord = (index % 4) * 70 + 10; let vGemYIdx = index; while (true) { if (vGemYIdx <= 3) break; diff --git a/src/classes/gui/TowerPanel.ts b/src/classes/gui/TowerPanel.ts index 167b906..b77e10b 100644 --- a/src/classes/gui/TowerPanel.ts +++ b/src/classes/gui/TowerPanel.ts @@ -11,17 +11,17 @@ import { GemEvents } from '../Events'; export class VisualGemSlot extends GuiObject { public iconSprite: PIXI.Sprite; private background: PIXI.Sprite; - private gem: Gem; - private i: number = 0; + private frame: PIXI.Sprite; + public i: number = 0; constructor(index: number, parent: PIXI.Container, gem: Gem | null) { super(true); let gtexture; + this.i = index; this.container.x = 10; - this.container.y = index * Engine.GridCellSize + 300; + this.container.y = index * (Engine.GridCellSize + 6) + 300; this.background = new PIXI.Sprite({ - texture: GameAssets.FrameInventory, + texture: GameAssets.Frame01Texture, }); - this.gem = gem; if (gem == null) { gtexture = GameAssets.PlusIconTexture; } else { @@ -45,18 +45,47 @@ export class VisualGemSlot extends GuiObject { this.iconSprite.width = Engine.GridCellSize - 8; this.iconSprite.height = Engine.GridCellSize - 8; } + this.frame = new PIXI.Sprite({ + texture: GameAssets.Frame05Texture, + width: 64, + height: 64, + }); + this.container.addChild(this.background); this.container.addChild(this.iconSprite); + this.container.addChild(this.frame); + if (Engine.latestCommit == 'DEVELOPMENT') { + let txt = gem ? gem.id : ''; + let dbgText = new PIXI.Text({ + text: txt, + zIndex: 11, + style: { + fill: 'white', + stroke: { + color: 0x000000, + width: 5, + }, + }, + }); + this.container.addChild(dbgText); + } parent.addChild(this.container); } - public onClick(e: PIXI.FederatedPointerEvent): void {} + + public setTint(color) { + this.frame.tint = color; + } + + public resetTint() { + this.frame.tint = 0xffffff; + } } export default class TowerPanel extends GuiObject { private bounds: PIXI.Rectangle; private towerPanel: PIXI.NineSliceSprite; private closeBtn: Button; - private vGems: VisualGemSlot[] = []; + public vGems: VisualGemSlot[] = []; public isShown: boolean = false; public titleText: PIXI.Text; @@ -119,10 +148,11 @@ export default class TowerPanel extends GuiObject { let amount = tower.definition.stats.gemSlotsAmount; // amount = 6; for (let i = 0; i < amount; i++) { + console.log('BUILDING TOWER PANEL ' + i); let gem = tower.slottedGems[i]; - console.log(gem); if (!gem) gem = null; const vGem = new VisualGemSlot(i, this.container, gem); + vGem.resetTint(); this.vGems.push(vGem); vGem.container.onpointermove = () => { if (!gem) return; @@ -134,8 +164,10 @@ export default class TowerPanel extends GuiObject { }; vGem.onClick = () => { Engine.GameScene.tooltip.Hide(); - console.log('MAKESLOTS ', gem); - Engine.GameScene.events.emit(GemEvents.TowerPanelSelectGem, gem, i, tower); + console.warn('EMITTING TOWER PANEL SELECT GEM', gem, vGem.i, i, tower); + Engine.GameScene.events.emit(GemEvents.TowerPanelSelectGem, gem, vGem.i, tower); + if (!gem && Engine.GameScene.sidebar.gemTab.isSelectingGem) vGem.setTint(0x00ffff); + else vGem.resetTint(); }; } } diff --git a/src/main.ts b/src/main.ts index fac0057..39659c1 100644 --- a/src/main.ts +++ b/src/main.ts @@ -67,4 +67,5 @@ import GameUIConstants from './classes/GameUIConstants'; window.onbeforeunload = () => { return 'You are about to leave.'; }; + else Engine.TestSuite(); })(); diff --git a/src/scenes/Game.ts b/src/scenes/Game.ts index 89a11ff..b6a58d8 100644 --- a/src/scenes/Game.ts +++ b/src/scenes/Game.ts @@ -114,15 +114,17 @@ export class GameScene extends Scene { 'You require atleast 1 Gem in your inventory to slot it in a Gem slot.', 'warn' ); - console.log(gem); - this.sidebar.gemTab.TowerPanelSelectingGem(gem, index, tower); - } else { - this.sidebar.gemTab.TowerPanelSelectingGem(gem, -1, tower); } + this.sidebar.gemTab.TowerPanelSelectingGem(gem, index, tower); }); this.ticker = new PIXI.Ticker(); this.ticker.maxFPS = 60; this.ticker.minFPS = 30; + // fix tooltip behaving weirdly for some reason + this.tooltip.SetContentTower(0, 0, 0, 0); + this.tooltip.Show(Engine.MouseX, Engine.MouseY); + this.tooltip.Hide(); + this.ticker.add(() => { if (this.update) this.update(this.ticker.elapsedMS); });