diff --git a/public/assets/gui/banner_01.png b/public/assets/gui/banner_01.png index 63258b3..002858e 100755 Binary files a/public/assets/gui/banner_01.png and b/public/assets/gui/banner_01.png differ diff --git a/public/assets/gui/banner_02.png b/public/assets/gui/banner_02.png deleted file mode 100755 index dae9558..0000000 Binary files a/public/assets/gui/banner_02.png and /dev/null differ diff --git a/public/assets/gui/banner_03.png b/public/assets/gui/banner_03.png new file mode 100755 index 0000000..63258b3 Binary files /dev/null and b/public/assets/gui/banner_03.png differ diff --git a/public/assets/gui/icons/cross.png b/public/assets/gui/icons/cross.png index deda6cb..e0bebb3 100755 Binary files a/public/assets/gui/icons/cross.png and b/public/assets/gui/icons/cross.png differ diff --git a/src/classes/Assets.ts b/src/classes/Assets.ts index 528aada..ee2edbe 100644 --- a/src/classes/Assets.ts +++ b/src/classes/Assets.ts @@ -23,7 +23,7 @@ export default class GameAssets { public static WaveTexture: PIXI.Texture; public static SwordsTexture: PIXI.Texture; public static TitleTexture: PIXI.Texture; - public static GemFrame: PIXI.Texture; + public static BannerGemsmith: PIXI.Texture; public static PlayIconTexture: PIXI.Texture; public static PauseIconTexture: PIXI.Texture; @@ -95,7 +95,7 @@ export default class GameAssets { 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/gem_frame.png').then((texture) => (this.GemFrame = texture)), + this.Load('./assets/gui/banner_01.png').then((texture) => (this.BannerGemsmith = 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)), diff --git a/src/classes/gui/GemTab.ts b/src/classes/gui/GemTab.ts index 04b0833..f7da1d5 100644 --- a/src/classes/gui/GemTab.ts +++ b/src/classes/gui/GemTab.ts @@ -32,7 +32,7 @@ export default class GemTab extends GuiObject { this.gemTabSprite.x = 0; this.gemTabSprite.y = 0; this.gemTabSprite.width = this.bounds.width; - this.gemTabSprite.height = this.bounds.height - 255; + this.gemTabSprite.height = this.bounds.height; this.container.addChild(this.gemTabSprite); Engine.app.canvas.addEventListener('pointermove', () => { this.pointerMoveEvent(); diff --git a/src/classes/gui/Gemsmith.ts b/src/classes/gui/Gemsmith.ts new file mode 100644 index 0000000..0b3441c --- /dev/null +++ b/src/classes/gui/Gemsmith.ts @@ -0,0 +1,59 @@ +import * as PIXI from 'pixi.js'; +import GuiObject from '../GuiObject'; +import GameAssets from '../Assets'; +import { VisualGemSlot } from './TowerPanel'; + +export default class Gemsmith extends GuiObject { + private bounds: PIXI.Rectangle; + public sellVGem: VisualGemSlot; + public upgradeVGem: VisualGemSlot; + + constructor(bounds: PIXI.Rectangle) { + super(false); + this.bounds = bounds; + this.container.x = this.bounds.x; + this.container.y = this.bounds.y; + let background = new PIXI.Sprite({ + x: 0, + y: 0, + width: this.bounds.width, + height: this.bounds.height, + texture: GameAssets.BannerGemsmith, + }); + this.container.addChild(background); + let sellLabel = new PIXI.Text({ + x: 40, + y: this.bounds.height / 6.5, + text: 'Sell gem', + style: new PIXI.TextStyle({ + fill: 0xffdb00, // orange color + fontSize: 18, + stroke: { + color: 0x000000, + width: 2, + }, + }), + }); + this.container.addChild(sellLabel); + let upgradeLabel = new PIXI.Text({ + x: 155, + y: this.bounds.height / 6.5, + text: 'Upgrade gem', + style: new PIXI.TextStyle({ + fill: 0x2df937, + fontSize: 18, + stroke: { + color: 0x000000, + width: 2, + }, + }), + }); + this.container.addChild(upgradeLabel); + this.sellVGem = new VisualGemSlot(0, this.container, null, 'SELL'); + this.sellVGem.container.x = 45; + this.sellVGem.container.y = this.bounds.height / 4; + this.upgradeVGem = new VisualGemSlot(0, this.container, null, 'UPGRADE'); + this.upgradeVGem.container.x = 180; + this.upgradeVGem.container.y = this.bounds.height / 4; + } +} diff --git a/src/classes/gui/Sidebar.ts b/src/classes/gui/Sidebar.ts index 8389279..a3a34fc 100644 --- a/src/classes/gui/Sidebar.ts +++ b/src/classes/gui/Sidebar.ts @@ -3,10 +3,12 @@ import GuiObject from '../GuiObject'; import GameAssets from '../Assets'; import TowerTab from './TowerTab'; import GemTab from './GemTab'; +import Gemsmith from './Gemsmith'; export default class Sidebar extends GuiObject { public towerTab: TowerTab; public gemTab: GemTab; + public gemsmith: Gemsmith; private bounds: PIXI.Rectangle; private sidebarSprite: PIXI.NineSliceSprite; @@ -33,8 +35,17 @@ export default class Sidebar extends GuiObject { this.towerTab = new TowerTab(towerTabRect); this.container.addChild(this.towerTab.container); - const gemTabRect = new PIXI.Rectangle(60, 180, this.bounds.width - 65, this.bounds.height - 280); + const gemTabRect = new PIXI.Rectangle(60, 180, this.bounds.width - 65, this.bounds.height - 280 - 255); this.gemTab = new GemTab(gemTabRect); this.container.addChild(this.gemTab.container); + + const gemSmithRect = new PIXI.Rectangle( + 60, + 185 + gemTabRect.height, + this.bounds.width - 65, + this.bounds.height - 840 + ); + this.gemsmith = new Gemsmith(gemSmithRect); + this.container.addChild(this.gemsmith.container); } } diff --git a/src/classes/gui/TowerPanel.ts b/src/classes/gui/TowerPanel.ts index f75b2e7..c090ebf 100644 --- a/src/classes/gui/TowerPanel.ts +++ b/src/classes/gui/TowerPanel.ts @@ -15,7 +15,7 @@ export class VisualGemSlot extends GuiObject { private frame: PIXI.Sprite; public i: number = 0; public gem: Gem = null; - constructor(index: number, parent: PIXI.Container, gem: Gem | null) { + constructor(index: number, parent: PIXI.Container, gem: Gem | null, extra?) { super(true); let gtexture; this.i = index; @@ -24,7 +24,11 @@ export class VisualGemSlot extends GuiObject { this.background = new PIXI.Sprite({ texture: GameAssets.Frame01Texture, }); - if (gem == null) { + if (gem == null && !extra) { + gtexture = GameAssets.PlusIconTexture; + } else if (extra == 'SELL') { + gtexture = GameAssets.GoldTexture; + } else if (extra == 'UPGRADE') { gtexture = GameAssets.PlusIconTexture; } else { gtexture = gem.texture; @@ -36,12 +40,24 @@ export class VisualGemSlot extends GuiObject { }); this.background.width = Engine.GridCellSize; this.background.height = Engine.GridCellSize; - if (gem == null) { + if (gem == null && !extra) { 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); + } else if (extra == 'SELL') { + this.iconSprite.x = 4; + this.iconSprite.y = 4; + this.iconSprite.width = Engine.GridCellSize - 8; + this.iconSprite.height = Engine.GridCellSize - 8; + } else if (extra == 'UPGRADE') { + 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.tint = 0x2df937; + this.iconSprite.anchor.set(0.5, 0.5); } else { this.iconSprite.x = 4; this.iconSprite.y = 4;