Within my parent class, I have inherited from Phaser.GameObjects.Container. This parent class contains a property called InformationPanel which is of a custom class. The container also has multiple children of type Container.
I am attempting to access the informationPanel in the main container from a child that is located two levels down using the following code:
this.parentContainer.parentContainer.informationPanel.setText(text)The structure can be visualized as follows: Shop --> button container --> button.
While the code works, it generates an error message:
Property 'informationPanel' does not exist on type 'Container'
Although the functionality is intact, the presence of these error indicators is bothersome. I'm curious if there's a way to eliminate them.
export default class ShopContainer extends Phaser.GameObjects.Container {
private upgrades!: UpgradeContainer
constructor(scene: Phaser.Scene, x: number, y: number, width: number, height: number, playerMoney: MoneyLabel) {
super(scene, x, y)
this.upgrades = new UpgradeContainer(scene, width / 2, 100)
}
export class UpgradeContainer extends Phaser.GameObjects.Container {
private _buttons!: Array<UpgradeButton>
.
.
.
public createButton(texture: string, description: string, func: string, label: string, price: number, priceMultiplier: number) {
let X_OFFSET = 0
let Y_OFFSET = 0
const index = this._buttons.length
if (this.isLandscape) {
const y_off = 58
const row = this._buttons.length
Y_OFFSET = row * y_off
} else {
const x_off = 200
X_OFFSET = -200 + index * x_off
}
const button = new UpgradeButton(
this.scene,
X_OFFSET,
Y_OFFSET,
texture,
description,
() => {
// 1. Subtract money
this.eventDispatcher.emit('add-money', -button.getPrice())
// 2. Increase price
button.increasePrice()
// 3. Emit upgrade
this.eventDispatcher.emit(func)
},
label,
price,
priceMultiplier,
index
)
this._buttons.push(button)
this.add(button)
}
/**
* Creates a Upgrade Button that, in addition to the Button functionality,
* controls the upgrades availability
*/
export default class UpgradeButton extends Button {
.
.
.
}
export default class Button extends Phaser.GameObjects.Container {
private func: Function
private buttonImage: Phaser.GameObjects.Image
private label: string
private description: string
private cost: number
constructor(scene: Phaser.Scene, x: number, y: number, buttonTexture: string, label: string, description: string, cost:number, event: Function) {
super(scene, x, y)
this.func = event
this.label = label
this.description = description
this.cost = cost
// Create the image
this.buttonImage = scene.add.image(0, 0, buttonTexture)
.setOrigin(0.5)
// Add image to container
this.add(this.buttonImage)
// Add the information panel
this.setSize(this.buttonImage.width, this.buttonImage.height)
// Add interactive actions
this.makeInteractive()
}
useHoverState() {
this.buttonImage.setTint(EColor.Buttons.Basic.HOVER)
this.parentContainer.parentContainer.informationPanel.setLabel(this.label) // This is where the error squiggles appear (on .informationPanel)
this.parentContainer.parentContainer.informationPanel.setDescription(this.description)
this.parentContainer.parentContainer.informationPanel.setCost(this.cost)
this.parentContainer.parentContainer.informationPanel.setVisible(true)
}