From 70218e5425d74f68e3abb46aacc1e64fe6547621 Mon Sep 17 00:00:00 2001 From: koneko <67551503+koneko@users.noreply.github.com> Date: Tue, 21 Jan 2025 01:09:29 +0100 Subject: [PATCH] tower panel begin --- package.json | 2 +- src/classes/Assets.ts | 2 + src/classes/game/Gem.ts | 1 + src/classes/game/Grid.ts | 3 +- src/classes/game/Tower.ts | 23 ++----- src/classes/game/TowerManager.ts | 2 +- src/classes/gui/SelectedTowerPanel.ts | 32 --------- src/classes/gui/TowerPanel.ts | 97 +++++++++++++++++++++++++++ src/classes/gui/TowerTab.ts | 1 + src/scenes/Game.ts | 3 + 10 files changed, 113 insertions(+), 53 deletions(-) create mode 100644 src/classes/game/Gem.ts delete mode 100644 src/classes/gui/SelectedTowerPanel.ts create mode 100644 src/classes/gui/TowerPanel.ts diff --git a/package.json b/package.json index 7693224..7ea34d0 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite", + "dev": "vite --host", "build": "tsc && vite build", "preview": "vite preview" }, diff --git a/src/classes/Assets.ts b/src/classes/Assets.ts index 85ff4cb..ef06319 100644 --- a/src/classes/Assets.ts +++ b/src/classes/Assets.ts @@ -28,6 +28,7 @@ export default class GameAssets { public static ExclamationIconTexture: PIXI.Texture; public static HomeIconTexture: PIXI.Texture; public static HammerIconTexture: PIXI.Texture; + public static XIconTexture: PIXI.Texture; public static GemAmountIcons: PIXI.Texture[] = []; public static Missions: MissionDefinition[]; @@ -99,6 +100,7 @@ export default class GameAssets { this.Load('/assets/gui/icons/exclamation.png').then((texture) => (this.ExclamationIconTexture = texture)), this.Load('/assets/gui/icons/home.png').then((texture) => (this.HomeIconTexture = texture)), this.Load('/assets/gui/icons/hammer.png').then((texture) => (this.HammerIconTexture = texture)), + this.Load('/assets/gui/icons/cross.png').then((texture) => (this.XIconTexture = texture)), this.LoadMissions(), this.LoadTowers(), this.LoadCreeps(), diff --git a/src/classes/game/Gem.ts b/src/classes/game/Gem.ts new file mode 100644 index 0000000..4a51259 --- /dev/null +++ b/src/classes/game/Gem.ts @@ -0,0 +1 @@ +export default class Gem {} diff --git a/src/classes/game/Grid.ts b/src/classes/game/Grid.ts index 81a09d9..3706226 100644 --- a/src/classes/game/Grid.ts +++ b/src/classes/game/Grid.ts @@ -38,7 +38,6 @@ export class Cell extends GameObject { zIndex: 99, interactive: true, }); - // ? TODO: make range preview 1 global graphics obj, child. fix this.g = new PIXI.Graphics({ zIndex: 5, @@ -83,6 +82,8 @@ export class Cell extends GameObject { } public OpenSelectedTowerPanel() { if (this.hasTowerPlaced) { + const tower = Engine.TowerManager.GetTowerByRowAndCol(this.row, this.column); + Engine.GameScene.towerPanel.Show(tower); } } public checkIfCantPlace() { diff --git a/src/classes/game/Tower.ts b/src/classes/game/Tower.ts index 9bbd0c3..8e58ed0 100644 --- a/src/classes/game/Tower.ts +++ b/src/classes/game/Tower.ts @@ -5,28 +5,13 @@ import { TowerDefinition } from '../Definitions'; import { Cell } from './Grid'; import { TowerBehaviours } from './TowerManager'; import Projectile, { calculateAngleToPoint } from './Projectile'; -import GameAssets from '../Assets'; import Creep from './Creep'; +import Gem from './Gem'; function distance(x1, y1, x2, y2) { return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); } -export type TowerInstance = { - row: number; - column: number; - sprite: PIXI.Sprite; - projectiles: Array; - baseDamage: number; - damage: number; - cooldown: number; - ticksToFireAt: number; - slottedGems: Array; - cost: number; - baseRange: number; - range: number; -}; - export enum TowerEvents { TowerPlacedEvent = 'towerPlacedEvent', TowerSoldEvent = 'towerSoldEvent', @@ -35,9 +20,11 @@ export enum TowerEvents { export class Tower extends GameObject { public row: number; public column: number; + public definition: TowerDefinition; + public slottedGems: Array; + public damageDealt: number = 0; private projectiles: Projectile[] = []; private behaviour: string; - private definition: TowerDefinition; private sprite: PIXI.Sprite; private ticksUntilNextShot: number; private graphics: PIXI.Graphics = new PIXI.Graphics(); @@ -51,7 +38,6 @@ export class Tower extends GameObject { this.definition = definition; this.ticksUntilNextShot = 0; this.parent = Engine.Grid.getCellByRowAndCol(row, column); - console.log(texture); this.sprite = new PIXI.Sprite({ texture: texture, height: Engine.GridCellSize, @@ -97,6 +83,7 @@ export class Tower extends GameObject { public update(elapsedMS: any): void { this.projectiles.forEach((proj) => { if (proj.deleteMe) { + this.damageDealt += this.definition.stats.damage; this.projectiles.splice(this.projectiles.indexOf(proj), 1); proj = null; } else proj.update(elapsedMS); diff --git a/src/classes/game/TowerManager.ts b/src/classes/game/TowerManager.ts index 7267015..d58ff41 100644 --- a/src/classes/game/TowerManager.ts +++ b/src/classes/game/TowerManager.ts @@ -71,7 +71,7 @@ export default class TowerManager { 'TowerManager.selectedTower is null when trying to place tower.', 'danger' ); - throw console.warn('TowerManager.selectedTower is null when trying to place tower.'); + return console.warn('TowerManager.selectedTower is null when trying to place tower.'); } this.PlaceTower(this.selectedTower, row, column, this.selectedTower.behaviour); } diff --git a/src/classes/gui/SelectedTowerPanel.ts b/src/classes/gui/SelectedTowerPanel.ts deleted file mode 100644 index 322f407..0000000 --- a/src/classes/gui/SelectedTowerPanel.ts +++ /dev/null @@ -1,32 +0,0 @@ -import * as PIXI from 'pixi.js'; -import GuiObject from '../GuiObject'; -import GameAssets from '../Assets'; -import { Engine } from '../Bastion'; - -// ! TODO NEXT! - -export default class SelectedTowerPanel extends GuiObject { - private bounds: PIXI.Rectangle; - private towerPanel: PIXI.NineSliceSprite; - - constructor(bounds: PIXI.Rectangle) { - super(false); - this.bounds = bounds; - this.container.x = this.bounds.x; - this.container.y = this.bounds.y; - this.towerPanel = new PIXI.NineSliceSprite({ - texture: GameAssets.FrameTowerTab, - leftWidth: 1000, - topHeight: 1000, - rightWidth: 1000, - bottomHeight: 1000, - }); - this.towerPanel.x = -300; - this.towerPanel.y = -300; - this.towerPanel.width = this.bounds.width; - this.towerPanel.height = this.bounds.height; - - this.container.addChild(this.towerPanel); - Engine.GameMaster.currentScene.stage.addChild(this.container); - } -} diff --git a/src/classes/gui/TowerPanel.ts b/src/classes/gui/TowerPanel.ts new file mode 100644 index 0000000..53e2b5a --- /dev/null +++ b/src/classes/gui/TowerPanel.ts @@ -0,0 +1,97 @@ +import * as PIXI from 'pixi.js'; +import GuiObject from '../GuiObject'; +import GameAssets from '../Assets'; +import { Engine } from '../Bastion'; +import GameUIConstants from '../GameUIConstants'; +import Button, { ButtonTexture } from './Button'; +import { Tower } from '../game/Tower'; + +export default class TowerPanel extends GuiObject { + private bounds: PIXI.Rectangle; + private towerPanel: PIXI.NineSliceSprite; + private closeBtn: Button; + public isShown: boolean = false; + titleText: PIXI.Text; + + constructor(bounds: PIXI.Rectangle) { + super(false); + this.bounds = bounds; + this.towerPanel = new PIXI.NineSliceSprite({ + texture: GameAssets.Frame03Texture, + leftWidth: 100, + topHeight: 100, + rightWidth: 100, + bottomHeight: 100, + }); + this.towerPanel.width = this.bounds.width; + this.towerPanel.height = this.bounds.height - this.bounds.height / 3.5; + this.closeBtn = new Button(new PIXI.Rectangle(-20, -20, 60, 60), '', ButtonTexture.Button01, true); + this.closeBtn.container.removeFromParent(); + // Added custom button logic to still keep all the regular events for the button, just have an icon instead of text. + // TODO: maybe make this better? add like a seperate class for icon buttons or smth + this.closeBtn.CustomButtonLogic = () => { + this.closeBtn.buttonIcon = new PIXI.Sprite({ + texture: GameAssets.XIconTexture, + x: this.closeBtn.container.width / 2, + y: this.closeBtn.container.height / 2, + scale: 0.2, + }); + this.closeBtn.buttonIcon.anchor.set(0.5, 0.5); + this.closeBtn.container.addChild(this.closeBtn.buttonIcon); + }; + this.closeBtn.onClick = () => { + this.Hide(); + }; + this.Hide(); + this.closeBtn.CustomButtonLogic(); + this.container.y = Engine.app.canvas.height / 2 - Engine.app.canvas.height / 2.7; + this.container.addChild(this.towerPanel); + this.container.addChild(this.closeBtn.container); + Engine.GameMaster.currentScene.stage.addChild(this.container); + + this.titleText = new PIXI.Text({ + x: this.bounds.width / 3, + y: 50, + zIndex: 5, + style: new PIXI.TextStyle({ + fill: 0xffffff, + stroke: { + color: 0x000000, + width: 2, + }, + }), + }); + this.titleText.anchor.set(0.5, 0); + this.container.addChild(this.titleText); + } + public Show(tower: Tower) { + let mouseX = Engine.MouseX; + this.isShown = true; + this.SetContent(tower); + if (mouseX < 900) { + this.ShowRight(); + } else { + this.ShowLeft(); + } + } + private SetContent(tower: Tower) { + this.titleText.text = tower.definition.name; + } + private ShowLeft() { + this.towerPanel.x = -100; + this.container.x = 0; + this.container.alpha = 1; + this.closeBtn.container.x = this.container.width - 150; + } + private ShowRight() { + this.towerPanel.x = -10; + this.container.x = GameUIConstants.SidebarRect.x - 210; + this.closeBtn.container.x = -20; + this.container.alpha = 1; + } + public Hide() { + this.isShown = false; + this.container.alpha = 0; + this.container.x = GameUIConstants.SidebarRect.x + 10; + } +} diff --git a/src/classes/gui/TowerTab.ts b/src/classes/gui/TowerTab.ts index e5b2901..81c2056 100644 --- a/src/classes/gui/TowerTab.ts +++ b/src/classes/gui/TowerTab.ts @@ -76,6 +76,7 @@ class TowerButton extends GuiObject { Engine.GameScene.sidebar.towerTab.resetTint(); Engine.TowerManager.ResetChooseTower(); } + Engine.GameScene.towerPanel.Hide(); Engine.GameScene.tooltip.Hide(); if (this.frameSprite.tint == 0x00ff00) { this.frameSprite.tint = 0xffffff; diff --git a/src/scenes/Game.ts b/src/scenes/Game.ts index e313420..edc0708 100644 --- a/src/scenes/Game.ts +++ b/src/scenes/Game.ts @@ -13,6 +13,7 @@ import TowerManager from '../classes/game/TowerManager'; import { MissionPickerScene } from './MissionPicker'; import GameUIConstants from '../classes/GameUIConstants'; import Tooltip from '../classes/gui/Tooltip'; +import TowerPanel from '../classes/gui/TowerPanel'; enum RoundMode { Purchase = 0, @@ -29,6 +30,7 @@ export class GameScene extends Scene { public changeRoundButton: Button; public sidebar: Sidebar; public tooltip: Tooltip; + public towerPanel: TowerPanel; private currentRound: number = 0; private isWaveManagerFinished: boolean = false; private playerWon: boolean = false; @@ -72,6 +74,7 @@ export class GameScene extends Scene { this.events.on(CreepEvents.Died, (playerAward, creepThatDied) => { this.MissionStats.earnGold(playerAward); }); + this.towerPanel = new TowerPanel(GameUIConstants.SidebarRect); this.sidebar = new Sidebar(GameUIConstants.SidebarRect); this.tooltip = new Tooltip(new PIXI.Rectangle(0, 0, 350, 160)); this.changeRoundButton = new Button(GameUIConstants.ChangeRoundButtonRect, '', ButtonTexture.Button01, true);