initial gem sell and upg

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)),

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();

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;
+    }
+}

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);
     }
 }

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;