diff --git a/src/classes/Assets.ts b/src/classes/Assets.ts index a31d9c8..85ff4cb 100644 --- a/src/classes/Assets.ts +++ b/src/classes/Assets.ts @@ -13,6 +13,7 @@ export default class GameAssets { public static VioletBackground: PIXI.Texture; public static RedBackground: PIXI.Texture; public static GreenBackground: PIXI.Texture; + public static BlueBackground: PIXI.Texture; public static Button01Texture: PIXI.Texture; public static Button02Texture: PIXI.Texture; public static ButtonSmallTexture: PIXI.Texture; @@ -20,6 +21,7 @@ export default class GameAssets { public static GoldTexture: PIXI.Texture; public static WaveTexture: PIXI.Texture; public static SwordsTexture: PIXI.Texture; + public static TitleTexture: PIXI.Texture; public static PlayIconTexture: PIXI.Texture; public static PauseIconTexture: PIXI.Texture; @@ -86,10 +88,12 @@ export default class GameAssets { this.Load('/assets/gui/frame_violet.png').then((texture) => (this.VioletBackground = texture)), this.Load('/assets/gui/frame_red.png').then((texture) => (this.RedBackground = texture)), this.Load('/assets/gui/frame_green.png').then((texture) => (this.GreenBackground = texture)), + this.Load('/assets/gui/frame_blue.png').then((texture) => (this.BlueBackground = texture)), this.Load('/assets/gui/heart.png').then((texture) => (this.HealthTexture = texture)), this.Load('/assets/gui/money.png').then((texture) => (this.GoldTexture = texture)), this.Load('/assets/gui/wave.png').then((texture) => (this.WaveTexture = texture)), this.Load('/assets/gui/sword_02.png').then((texture) => (this.SwordsTexture = texture)), + this.Load('/assets/gui/title01.png').then((texture) => (this.TitleTexture = texture)), this.Load('/assets/gui/icons/play.png').then((texture) => (this.PlayIconTexture = texture)), this.Load('/assets/gui/icons/pause.png').then((texture) => (this.PauseIconTexture = texture)), this.Load('/assets/gui/icons/exclamation.png').then((texture) => (this.ExclamationIconTexture = texture)), diff --git a/src/classes/gui/Tooltip.ts b/src/classes/gui/Tooltip.ts index 29c4c06..763176a 100644 --- a/src/classes/gui/Tooltip.ts +++ b/src/classes/gui/Tooltip.ts @@ -9,9 +9,10 @@ export default class Tooltip extends GuiObject { private bounds: PIXI.Rectangle; private tooltipSprite: PIXI.NineSliceSprite; - public titleText: PIXI.Text; - public costText: PIXI.Text; - public previewSprite: PIXI.Sprite; + private titleText: PIXI.Text; + private costText: PIXI.Text; + private damageText: PIXI.Text; + private gemAmount: PIXI.Text; private gemAmountSprite: PIXI.Sprite; constructor(bounds: PIXI.Rectangle) { @@ -28,80 +29,113 @@ export default class Tooltip extends GuiObject { }); this.tooltipSprite.width = this.bounds.width; this.tooltipSprite.height = this.bounds.height; - this.container.addChild(this.tooltipSprite); this.titleText = new PIXI.Text({ - x: 87, - y: 34, - text: 'Something went wrong if you see this.', - style: { + x: this.tooltipSprite.width / 2, + y: -20, + zIndex: 5, + style: new PIXI.TextStyle({ fill: 0xffffff, - dropShadow: true, - }, + stroke: { + color: 0x000000, + width: 2, + }, + }), }); - this.titleText.anchor.set(0, 0.5); - this.container.addChild(this.titleText); + this.titleText.anchor.set(0.5, 0); + let title = new PIXI.Sprite({ + x: this.tooltipSprite.width / 2, + y: -20, + width: 250, + height: 40, + texture: GameAssets.TitleTexture, + }); + title.anchor.set(0.5, 0); - this.previewSprite = new PIXI.Sprite({ - x: 27, - y: 30, - width: 50, + const costSprite = new PIXI.Sprite({ + texture: GameAssets.GoldTexture, + x: 10, + y: 20, + width: 56, height: 50, }); - - this.container.addChild(this.previewSprite); - let frameSprite = new PIXI.NineSliceSprite({ - texture: GameAssets.Frame02Texture, - leftWidth: 150, - topHeight: 150, - rightWidth: 150, - bottomHeight: 150, - roundPixels: true, - height: 64, - width: 64, - x: 20, - y: 20, - }); - this.container.addChild(frameSprite); - this.costText = new PIXI.Text({ - x: 113, - y: 40, + x: 54, + y: 26, + zIndex: 5, text: 'Something went wrong if you see this.', style: { fill: 'gold', fontWeight: 'bold', - dropShadow: true, + stroke: { + color: 0x000000, + width: 5, + }, }, }); - this.container.addChild(this.costText); - const goldSprite = new PIXI.Sprite({ - texture: GameAssets.GoldTexture, - x: 82, - y: 40, - width: 36, - height: 34, - }); - this.container.addChild(goldSprite); + this.damageText = new PIXI.Text({ + x: 54, + y: 65, + zIndex: 5, + text: 'Something went wrong if you see this.', + style: { + fill: 'red', + fontWeight: 'bold', + stroke: { + color: 0x000000, + width: 5, + }, + }, + }); + const damageSprite = new PIXI.Sprite({ + texture: GameAssets.SwordsTexture, + x: 22, + y: 70, + width: 32, + height: 32, + }); this.gemAmountSprite = new PIXI.Sprite({ texture: GameAssets.GemAmountIcons[0], - x: 300, - y: 20, - width: 64, - height: 64, + x: 22, + y: 110, + width: 32, + height: 32, + }); + this.gemAmount = new PIXI.Text({ + x: 54, + y: 108, + zIndex: 5, + text: 'Something went wrong if you see this.', + style: { + fill: 'white', + fontWeight: 'bold', + stroke: { + color: 0x000000, + width: 5, + }, + }, }); + this.container.addChild(this.tooltipSprite); + this.container.addChild(title); + this.container.addChild(costSprite); + this.container.addChild(damageSprite); this.container.addChild(this.gemAmountSprite); + this.container.addChild(this.costText); + this.container.addChild(this.titleText); + this.container.addChild(this.damageText); + this.container.addChild(this.gemAmount); Engine.GameMaster.currentScene.stage.addChild(this.container); } - public SetContent(title, spriteTexture, damage: number, cost: number, gemSlotsAmount: number) { + public SetContent(title, damage: number, cost: number, gemSlotsAmount: number) { this.titleText.text = title; - this.previewSprite.texture = spriteTexture; + this.gemAmount.text = `Has ${gemSlotsAmount} Gem slots.`; this.gemAmountSprite.texture = GameAssets.GemAmountIcons[gemSlotsAmount]; - this.costText.text = cost; + this.costText.text = `Costs ${cost} gold.`; + this.damageText.text = `Deals ${damage} base damage.`; } public Show(x, y) { this.container.alpha = 1; diff --git a/src/classes/gui/TowerTab.ts b/src/classes/gui/TowerTab.ts index 6df83ca..e5b2901 100644 --- a/src/classes/gui/TowerTab.ts +++ b/src/classes/gui/TowerTab.ts @@ -49,34 +49,39 @@ class TowerButton extends GuiObject { }); this.container.onmousemove = (e) => { if (Engine.TowerManager.isPlacingTower) return; - let definition: TowerDefinition; - GameAssets.Towers.forEach((item) => { - if (item.name == towerName) { - definition = item; - } - }); - Engine.GameScene.tooltip.SetContent( - this.towerName, - definition.texture, - definition.stats.damage, - definition.stats.cost, - definition.stats.gemSlotsAmount - ); - Engine.GameScene.tooltip.Show(Engine.MouseX, Engine.MouseY); + this.ShowTooltip(); }; this.container.onpointerleave = (e) => { Engine.GameScene.tooltip.Hide(); }; } + private ShowTooltip() { + let definition: TowerDefinition; + GameAssets.Towers.forEach((item) => { + if (item.name == this.towerName) { + definition = item; + } + }); + Engine.GameScene.tooltip.SetContent( + this.towerName, + definition.stats.damage, + definition.stats.cost, + definition.stats.gemSlotsAmount + ); + Engine.GameScene.tooltip.Show(Engine.MouseX, Engine.MouseY); + } public onClick(e: PIXI.FederatedPointerEvent): void { if (Engine.TowerManager.isPlacingTower && Engine.TowerManager.selectedTower.name != this.towerName) { Engine.GameScene.sidebar.towerTab.resetTint(); Engine.TowerManager.ResetChooseTower(); } - if (this.frameSprite.tint == 0x00ff00) this.frameSprite.tint = 0xffffff; - else this.frameSprite.tint = 0x00ff00; Engine.GameScene.tooltip.Hide(); + if (this.frameSprite.tint == 0x00ff00) { + this.frameSprite.tint = 0xffffff; + this.ShowTooltip(); + } else this.frameSprite.tint = 0x00ff00; + Engine.TowerManager.ToggleChoosingTowerLocation(this.towerName); } public resetTint() { @@ -115,7 +120,7 @@ export default class TowerTab extends GuiObject { this.container, GameAssets.RedBackground, 'Basic Tower', - GameAssets.HammerIconTexture + GameAssets.Towers[0].texture ) ); this.towerButtons.push( @@ -127,7 +132,7 @@ export default class TowerTab extends GuiObject { this.container, GameAssets.GreenBackground, 'Circle Tower', - GameAssets.HomeIconTexture + GameAssets.Towers[1].texture ) ); } diff --git a/src/scenes/Game.ts b/src/scenes/Game.ts index 65cdda4..e313420 100644 --- a/src/scenes/Game.ts +++ b/src/scenes/Game.ts @@ -73,7 +73,7 @@ export class GameScene extends Scene { this.MissionStats.earnGold(playerAward); }); this.sidebar = new Sidebar(GameUIConstants.SidebarRect); - this.tooltip = new Tooltip(new PIXI.Rectangle(0, 0, 400, 200)); + this.tooltip = new Tooltip(new PIXI.Rectangle(0, 0, 350, 160)); this.changeRoundButton = new Button(GameUIConstants.ChangeRoundButtonRect, '', ButtonTexture.Button01, true); this.changeRoundButton.container.removeFromParent(); this.sidebar.container.addChild(this.changeRoundButton.container);