Interactive text animations using PIXI.js and state management with Redux

In my game class, I created an element:

private winAmountText: PIXI.Text = new PIXI.Text('0')

Within the constructor, I have the following code:

this.winAmountText.style = new PIXI.TextStyle({
    fill: 0xFFFFFF,
    fontSize: 86
})
this.setWinAmountText(0)
store.subscribe(() =>
    this.setWinAmountText(store.getState().winAmount)
)

This is the function I am using:

private setWinAmountText(value: number) {
    this.winAmountText.text = value.toString()
    this.winAmountText.x = this.width * 0.56 - this.winAmountText.width
    this.winAmountText.y = this.height * 0.905
}

Upon opening the page, the win amount text displays correctly. However, when the state updates, the win amount moves to the top left corner.

Any suggestions on how to resolve this issue?

Answer №1

Resolved: I made the necessary changes including:

requestAnimationFrame(() => {})

which resulted in the following code snippet:

private updateWinAmountDisplay(value: number) {
    this.winAmountDisplay.text = value.toString()
    requestAnimationFrame(() => {
        this.winAmountDisplay.x = this.width * 2.4 - this.winAmountDisplay.width
        this.winAmountDisplay.y = this.height * 3.88
    })
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can we determine the data type of a value within a class instance by utilizing a function to retrieve it?

Is it feasible to create a function that maintains typing and functions in the same way as this: class Example { someNumber:number = 1; someString:string = "test"; } const example = new Example(); const value = example.someNumber; // typ ...

Creating a fresh dataset using a 2D array in node-gdal-async

I'm facing a challenge in JavaScript where I need to create a new dataset from a 2D array. Despite my efforts, I can't seem to figure out the necessary steps from the documentation. It seems that in order to create this new dataset, I must utili ...

Conceal or remove disabled years in Angular Material datepicker

I previously disabled years prior to 2018, but now I would like to hide or delete them. The year selection range currently starts from 1998, but it should begin at 2018 instead. Is there a way to display only 3-4 years instead of the current 24-year rang ...

Tips for Creating a Higher-Order Component for NextPage

I have a higher order component (HOC) that I use for authentication purposes. Currently, I am in the process of converting it to be TypeScript friendly. Here is the existing code: import { NextPage } from 'next'; import { useAccount } from ' ...

An issue has occurred: TypeError - the data is not a function

I am attempting to pass the alpha2code variable through another component so that when a row in my table is clicked, it should display data specific to the alpha2code. This is the function that is triggered when a specific row in the table is clicked: on ...

When using Angular 4 CanActivate guard in conjunction with a service, the component may not load properly. However, by simply using Observable

When attempting to implement the CanActivate guard in Angular, I encountered an issue where it didn't work when calling a service and using return true, or even return Observable.of(true);. However, the guard did work and the component loaded success ...

Creating a personalized menu using Nextron (electron) - Step by step guide

I'm currently in the process of developing an app with Nextron (Electron with Nextjs and Typescript). Although I have the foundation of my Next app set up, I've been encountering issues when attempting to create a custom electron menu bar. Every ...

Challenges of implementing dark mode with a checkbox and local storage

I'm experiencing an issue with local storage. When I enable the dark mode, everything functions properly and the local storage 'dark' is set to true. However, upon refreshing the page, the local storage remains true but the toggle switches b ...

React Native: Avoiding Infinite Loops in useEffect

I am facing an issue where my app goes into an infinite loop because pointsData is inside the useEffect function. How can I resolve this situation? function useGetPoints() { const [pointsData, setPointsData] = useState<PointTbleType[]>([]); ...

How can I dispatch multiple actions simultaneously within a single epic using redux-observable?

I am a newcomer to rxjs/redux observable and have two goals in mind: 1) enhance this epic to follow best practices 2) dispatch two actions from a single epic Many of the examples I've come across assume that the API library will throw an exception ...

The property you are trying to access is not defined on the enum type in Types

Looking to revise the TypeScript syntax of a lesson found at this link. I am aiming to extract a specific type from a union type using the following syntax: Actions['type'][ActionTypes.FEED_CREATE_POST] The available action types are defined a ...

Is Angular Template Polymorphism Failing?

So I'm working with a base class that has another class extending it. export class Person { public name: string; public age: number; } export class Teacher extends Person { public yearsTeaching: number; } Now, in my component, I need to ...

React App generation error - Missing module: Error encountered while resolving

In my React front-end app created with create-react-app, all the source files are located in the ./src folder. Additionally, I have a Firebase cloud functions project for the backend in the ./functions folder with its sources in ./functions/src. Within th ...

In Typescript, it is possible to provide values other than undefined for a parameter that is

I experimented with the code below in TypeScript Playground with all settings enabled. My expectation was that the TS compiler would only allow the first call() to be valid. However, to my surprise, all four calls were accepted. Upon inspecting the calls, ...

Sortable layouts and tables in Ionic 3

I found a great example of an Ionic table that I'm using as reference: https://codepen.io/anon/pen/pjzKMZ <ion-content> <div class="row header"> <div class="col">Utility Company Name</div> <div c ...

The absence of property 'files' on type 'EventTarget' in Vue 3 Typescript Composition API

With Vue 3's Composition API, I am aiming to dynamically display the selected photo as the background image of a button temporarily. Upon uploading, the button's background image should revert back to its default state. Initially, I encountered ...

Mastering ngClass for validation in Angular 2: Step-by-step guide

I am facing an issue with a form I have created where I applied ngclass to display an error when the form value is missing. However, the error is showing up when the form is initially loaded. It seems that by default, my input tag is invalid when the form ...

Troubleshooting TypeScript in VSCode while working with Asp.Net Core 3.1

Attempting the method outlined in this inquiry has only been successful when using the "debugger" command in typescript code, as opposed to breakpoints. This is my launch.json file: { "version": "0.2.0", "compounds": [ { "name ...

Determining the return type by analyzing the parameter type

I'm currently struggling to find the correct way to define this function in order for all four "tests" that come after it to pass. I've experimented with different function overloads and conditional types, but haven't fully grasped them yet. ...

Is there a solution for resolving the Element Implicitness and Lack of Index Signature Error?

I encountered an issue with specialCodes[letter]. It mentions that The element implicitly has an 'any' type because the expression of type 'string' cannot be used to index type and No index signature with a parameter of type 'strin ...