tooltips final

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

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;
+    private titleText: PIXI.Text;
-    public costText: PIXI.Text;
+    private costText: PIXI.Text;
-    public previewSprite: PIXI.Sprite;
+    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,
+            x: this.tooltipSprite.width / 2,
-            y: 34,
+            y: -20,
-            text: 'Something went wrong if you see this.',
+            zIndex: 5,
-            style: {
+            style: new PIXI.TextStyle({
                 fill: 0xffffff,
-                dropShadow: true,
+                stroke: {
+                    color: 0x000000,
+                    width: 2,
                 },
+            }),
         });
-        this.titleText.anchor.set(0, 0.5);
+        this.titleText.anchor.set(0.5, 0);
-        this.container.addChild(this.titleText);
+        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({
+        const costSprite = new PIXI.Sprite({
-            x: 27,
+            texture: GameAssets.GoldTexture,
-            y: 30,
+            x: 10,
-            width: 50,
+            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,
+            x: 54,
-            y: 40,
+            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,
+            x: 22,
-            y: 20,
+            y: 110,
-            width: 64,
+            width: 32,
-            height: 64,
+            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;

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;
+            this.ShowTooltip();
-            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.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
             )
         );
     }

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