State pattern behavior in javascript clarification - javascript

I have this code provided by chat gpt api, i have been self studying and understanding its generated code, but this time im having trouble, I would like to seek assistance for the experts.
here is the generate code
class State {
constructor(player) {
this.player = player;
}
}
class PlayingState extends State {
play() {
console.log('Music is already playing');
}
pause() {
console.log('Pausing music');
this.player.setState(new PausedState(this.player));
}
stop() {
console.log('Stopping music');
this.player.setState(new StoppedState(this.player));
}
}
class PausedState extends State {
play() {
console.log('Resuming music');
this.player.setState(new PlayingState(this.player));
}
pause() {
console.log('Music is already paused');
}
stop() {
console.log('Stopping music');
this.player.setState(new StoppedState(this.player));
}
}
class MusicPlayer {
constructor() {
this._state = new StoppedState(this);
}
setState(state) {
this._state = state;
}
play() {
this._state.play();
}
pause() {
this._state.pause();
}
stop() {
this._state.stop();
}
}
class StoppedState extends State {
play() {
console.log('Music playing.');
this.player.setState(new PlayingState(this.player));
}
pause() {
console.log("Can't pause. Music is not playing.");
}
stop() {
console.log('Music is already stopped');
}
}
// Usage
const player = new MusicPlayer();
player.play(); // Output: Music playing
player.pause(); // Output: Pausing music
player.play();
I'm having a confusion on StoppedState class part, under play method.
As you can see there, the code is this.player.setState(new PlayingState(this.player))
my number one question is, how come that the player has an setState method ? wherein if i navigate to that, its reference is State class with no setState method. the set state method is under MusicPlayer, how come it has setState method ? it has something to do with referencing in javascript ? how come ?
my next question is this part new PlayingState(this.player) under the same table, in PlayingState
why this.player is passing to the constructor ? i get it because it extending state class and it has a player constructor, but my main issue is what is the value or data or what this.player contains to be exact upon passing to playing state.
Thankyou folks, i just studying and i want it to understand deeply, whats happening in the code
addition, also tried asking chat gpt about this one like i ask, but he keeps saying
I apologize for the mistake. You are correct, the this._player object does not have a setState function. That function needs to be defined in the MusicPlayer class for the code to work correctly:
thats why I desperately ask here. to hear some guide from expert

I don't really understand why you'd want to ask chatGPT to write some code and then try to understand this code...
In any case, here's what's going on:
In the line const player = new MusicPlayer();, a new MusicPlayer instance is created and stored in the player constant.
When this instance is created, its constructor is run and so this line is run this.state = new StoppedState(this);.
Since we're in the MusicPlayer's constructor, this is the current instance and we pass it to the constructor of StoppedState.
StoppedState extends State so the constructor of State is run, which causes this line to run this.player = player;.
The player here is a reference to the same MusicPlayer instance we created and so it is stored in the player property of the StoppedState.
At this point, all constructors have finished and you have an instance of MusicPlayer with a property called _state which contains a StoppedState instance with a property called player that holds a reference to the MusicPlayer instance.
When the line player.play() is run, this line this._state.play(); is executed in the MusicPlayer class for the current instance.
This in turn executes this line console.log('Music playing.'); and this line this.player.setState(new PlayingState(this.player)); from the StoppedState class instance we have stored in the MusicPlayer instance.
The later line calls the setState function that is part of the MusicPlayer instance that is stored on the state, passing new PlayingState(this.player) as a parameter.
The code new PlayingState(this.player) creates a new instance of the PlayingState class that extends the state class and passes along the same reference to the MusicPlayer instance, which is stored in the player property of the new PlayingState instance.
The setState function stores the resulting PlayingState instance in the _state property of the MusicPlayer instance.
The same goes for both the pause and stop functions.
As you can see, only one instance is created for the MusicPlayer class and new instances are created for the different states. Each time a new state is created, the reference to the current instance of the MusicPlayer class is stored inside it.

Related

Can I decouple Classes by adding logic to the Controller in MVC?

I have hopefully explained my problem below by writing a short simplified example with the same conceptual question as my actual larger application. My question is centred around ways in which I can de-couple classes from each other. Whilst I accept no application can be free of coupling completely and modules have to interact with each other, I am trying to establish best ways in which I can keep each class as a separate unit so that if changes are made in one class it won't affect another. I want to keep changes simple.
Below I have outlined an example to the regular problem I face. As an example I have centred this example around a simple game where we can add a player named 'Kevin' everytime we press enter. Then everytime we click a button we add a score of 10 to every players running score and print the updated score of the current player to the screen.
Like most things I have used the MVC pattern to achieve this small example game. The Model has a Player class with data and methods. One of the methods adds 10 to the players score.
I also have a PlayerCircle class in the Model which returns things like the current player as-well as changing which players turn it is.
Lastly in the Model I have a Game Class which imports PlayerCircle. PlayerCircle is then a property of the Game class. Its the only property at the moment but as the game grows, further classes will be added e.g. Dice class
The controller module calls methods from the Model and passes things into view much like how an MVC pattern should work.
This is my PlayerCircle class
export class PlayersCircle {
constructor() {
this.players = [];
this.playersTurn = 0;
}
addPlayer(name) {
const player = new Player(name);
this.players.push(player);
}
changePlayer() {
this.playersTurn++;
}
getPlayer() {
return this.players[this.playersTurn];
}
increaseAllScores() {
this.players.forEach((player) => {
player.add10();
});
}
getAllPlayers() {
return this.players;
}
}
This is my player class
export class Player {
constructor(name) {
this.name = name;
this.score = 0;
}
add10() {
this.score += 10;
}
getScore() {
return this.score;
}
}
This is my game class
import { PlayersCircle } from "./PlayersCircle.js";
export class Game {
constructor() {
this.playersCircle = new PlayersCircle();
}
}
Now I have set up the classes for this very simple game, I now write this very simple function from the controller which adds a player to the game.
import { Game } from "./model/Game.js";
import { viewShowScore } from "./view/viewShowScore.js";
const game = new Game();
const addPlayer = () => {
game.playersCircle.addPlayer("kevin");
};
document.querySelector("body").addEventListener("keypress", addPlayer);
Ok so now I want to add 10 points to all the players in the game. Lets say I have fired the keypress 5 times and have 5 players. This is where I often struggle to establish the best Architectural Plan going forward with an Application.
The two options I normally have are
Call the add10 method on each player from the playerCircle class :-
This will enable me to use my controller just to call methods which change data or get data to the render the state into the view. This keeps my controller short and concise.However it means that the PlayersCircle class is now tightly coupled with the Player Class as one of the PlayerCircle methods uses a method of the Player class ( the add10 method) which means any changes in the Player Class on the add10 method will now break the PlayerCircle class.
My function from the controller to add 10 point to each player looks like this:
const increaseAllScores = () => {
game.playersCircle.increaseAllScores();
const currentPlayer = game.playersCircle.getPlayer();
viewShowScore(currentPlayer.getScore()); // function from view prints 10
};
document.querySelector("button").addEventListener("click", increaseAllScores);
Return all the players to the controller and then from inside the controller module run a loop on the returned array which holds the players-:
This will enable my PlayersCircle class to be completely independent from the Player class and just control the state of who'es turn it is, return all the players at once or separately. It won't have to concern itself with the inner methods of the Player class. The Player class as the game grows will have many methods. If I want to call a method on more than one player at a time then (like the add10 method) then the playersCircle class is very tightly coupled and changes from both classes will almost have to simultaneously occur.
However this would mean that my controller module isn't now just calling methods from the Model and passing results into the view but is now containing loops. Whilst I prefer this way whenever I see examples of MVC the controller is full of simple methods calls from the Model to the view.
The function inside the controller now looks like this:
const increaseAllScores = () => {
const allPlayers = game.playersCircle.getAllPlayers();
allPlayers.forEach((player) => {
player.add10();
});
const currentPlayer = game.playersCircle.getPlayer();
viewShowScore(currentPlayer.getScore()); // function from view prints 10
};
Both Pieces of code give the same result. However for long term code management when the game increases in complexity and may have new features in the future, which one is better than the other and why - option 1 which calls the add10 from the playersCircle targeting every player or option 2 which runs a loop from the controller targeting every player which is returned from the playerCircle class ?

property is being triggered before ngOnInit() in component

I'm new to Angular and I tried some code where the property set is being triggered before the ngOnInit().
export class App implements OnInit{
isTriggered = false;
constructor(){
...
}
ngOnInit(){
this.isTriggered = true;
}
}
I'm not sure how this works but isTriggered = false; is getting triggered first before the debugger moves to this.isTriggered = true;
Can someone explain me why this is happening and whats the approach to trigger this.isTriggered = true; from ngOnInit()
It's pretty obvious actually. To invoke ngOnInit you need an instance of App class. When you create an instance all declared fields are initialized first.
The issue is that ngOnInit is an Angular lifecycle method, whereas the isTriggered = false is a class property, native to Javascript, same as if you had placed it inside the constructor.
In the old way of doing things before Javascript Classes even came around, it might've been more obvious.
export function App() {
this.isTriggered = false;
this.ngOnInit = function() { };
}
Seen this way, it's pretty obvious that isTriggered = false will be invoked immediately upon creating a new App() vs. ngOnInit which will only be invoked by something calling ngOnInit after the new object is already created.
Angular lifecycle methods will happen on Angular's framework timing, meaning it's going to happen sometime after that class is initialized. During the initialization of that class, the class property will be set, hence why you see the debugger go to that line first.
When you declare isTriggered = false, that is the same as doing it as initializing it as if it was a part of the constructor. ngOnInit happens afterwards, so that's why you're getting it set to false and then to true.
You can declare isTriggered without assigning it a value simply by removing = false; and then only in ngOnInit assign it to true if that's what you're looking to do.

Why do we need to use bind() in ReactJS to access this.props or this.state? [duplicate]

This question already has answers here:
Why and when do we need to bind functions and eventHandlers in React?
(2 answers)
Closed 3 years ago.
look at this code for example
import React, { Component } from ‘react’;
class App extends Component {
constructor(props) {
super(props);
this.clickFunction = this.clickFunction.bind(this);
}
clickFunction() {
console.log(this.props.value);
}
render() {
return(
<div onClick={this.clickFunction}>Click Me!</div>
);
}
}
what's the purpose of bind(this) ? it binds the function clickFunction to the context of the object which clickFunction is already bound to , let me illustrate what i am trying to say with a normal javascript code :
class my_class {
constructor() {
this.run = this.run.bind(this)
}
run() {
console.log(this.data)
}
}
my_class.data = 'this is data'
new my_class().run() //outputs 'undefined'
and if you remove bind(this) it will give you the same results
constructor() {
this.run = this.run
}
results :
new my_class().run() //still outputs 'undefined'
i am sure i am understanding something wrong and this might the worst question on earth however i am new to es6 and i am not used to classes yet so i apologize for that
Blame JavaScript not React. This is done to retain object instance when the function is going to be passed. Certainly, it must be semantically correct for the function to expect such object. Most common case is to bind this when passing object method. The keyword This depends on how the function is called not how/where it is created. The relationship to This should be maintained at invocation.
Consider:
class Welcome extends React.Component {
render() {
return <button onClick={this.sayName}>Say My
Name</button>;
}
sayName() {
alert(this.props.name);
}
}
In React, you invoke like this: . This renders a button. Clicking the button should trigger an alert with "Bob".
Except it doesn't. Because in the above example, this would be undefined in the sayName function.
What's happening inside the render function is that this refers to the current instance of our React component. That component has a sayName function defined, so this.sayName points to our function, just fine and dandy.
But what React is doing behind the scenes is assigning this.sayName to another variable. That is, it's just like this:
let onClick = this.sayName;
onClick(); // Technically a click event is passed
to onClick
// but this doesn't matter for our purposes
We get an error. Because this is undefined. This is
extra confusing because in previous versions of React, React would "autobind" the event handler for you, so it would work. But at some point, Facebook decided to stop doing that, so ... here we are.
So how can we fix our component? We just do binding ourselves, like this:
<button onClick={this.sayName.bind(this)}>Say My
Name</button>;
Or with ES6 syntax:
<button onClick={() => this.sayName()}>Say My
Name</button>;
And it should work!

How to correctly use Typescript extended classes with Phaser

I am new to both Javascript and Typescript. I've written a simple Phaser game in Javascript and now want to re-write it in Typescript ES2015 (ES6).
I have extended the Phaser.Game class such that it is passed a variable through it's constructor. This is used to create a websocket. This socket could exist as a property of the Game or State types (I show this in the example).
I've extended the Phaser.State class to include the property that needs to be set by the websocket data through the websocket's .onmessage member function.
I've shown the createWebsocket as a function just for completeness, in reality it's a member function of one of the classes.
function createWebsocket(wsPath, callback){
var ws = new WebSocket(wxPath);
ws.onmessage = callback;
return ws;
}
export class Game extends Phaser.Game {
csocket: WebSocket;
constructor(wsPath, container) {
this.state.add('Boot', Boot, false);
this.csocket = createWebsocket(wsPath, this.handleMsg);
}
export class Boot extends Phaser.State {
csocket: WebSocket;
constructor(){super();}
my_value: number;
setMyValue(value) {this.my_value = value};
this.csocket = createWebsocket(wsPath, this.handleMsg);
}
How do I either pass data from the extended Game class instance to the Boot instance or access the createWebsocket member function of the Boot instance?
If I use the following in Game;
state = this.state.getCurrentState();
state.setValue()
I get a (trans)compiler error as getCurrentState() returns the instance of the base class not the extended class even though the extended class type is passed to the state.add function
I see no way to pass the wsPath to the constructor for the Boot class as a type is passed to the .add function.
The simple answers are always the best ones. So, answering my own question......
Though the examples don't clearly show this, the this.state.add call does not just allow a class, it also allows a class instance. Just use new.
export class Game extends Phaser.Game {
csocket: WebSocket;
constructor(wsPath, container) {
var bootState = new Boot(wsPath);
this.state.add('Boot', bootState, false);
...

Preventing Circular Dependencies with Exported Singleton Class

I have a question regarding a scenario I keep running into building HTML5 games resulting in difficult to manage circular dependencies.
I understand completely why the circular dependency is occuring and where it is occurring. However, I can't seem to figure out a convenient way to get around it, so I assume my logic / approach is fundamentally flawed.
Here's a little bit of context.
I have a game that has a single point of entry (compiled with Webpack) called Game.js. I have a basic event manager that allows for two functions on(key, callback) and fire(key, parameters).
The event manager simply creates an object, sets the supplied key of on as a property with an array value populated with any callback functions registered to that key. When the fire method is called that property is retrieved and all of the fuctions defined in it's array value are invoked.
What I'm trying to do
I want to be able to instance the event manager on Game.js and export an instance of Game that other classes can import and subsequently register callbacks to the Game instances event manager.
class Game {
constructor() {
this.events = new EventManager();
window.addEventListener('resize', this.resize.bind(this));
}
resize(event) {
if(window.innerWidth < window.innerHeight) {
this.events.fire('orientation-change', 'vertical');
} else {
this.events.fire('orientation-change', 'horizontal');
}
}
}
export default new Game();
Then for example a Button class may need to respond to an orientation change event fired by the Game. Please note the above is simply an example of a circumstance in which the event manager may fire an event, but this condition could be anything.
import Game from '../core/Game';
class Button {
constructor() {
Game.events.on('orientation-change', this.reorient.bind(this));
}
reorient() {
// ...
}
}
export default Button;
The above class is a UI component called Button that needs to know when the orientation-change event is fired, again please note this event could be anything.
What's the problem?
Nothing looks particularly wrong with the above, however, because Game.js is the entry point, at some point an instance of Button is created whether it be directly in Game.js or through another class which is subsequently instanced via Game.js which of course causes a circular dependency because even if not directly, Game imports Button and Button imports Game.
What I've tried
There are two main solutions that I have found that work (to some degree). The first being simply waiting for the export to be available using an interval check of the value of Game in the constructor of Button, like this:
import Game from '../core/Game';
class Button {
constructor() {
let check = setInterval(() => {
if(Game !== undefined) {
Game.events.on('orientation-change', this.reorient.bind(this));
clearInterval(check);
}
}, 100);
}
reorient() {
// ...
}
}
export default Button;
This will typically resolve in a single iteration.
The second solution being to use dependency injection and pass reference of Game to Button when it's instanced, which again works great, but the prospect of having to repeatedly do this per class seems unintuitive. The interval check works fine too, but seems hacky.
I'm feel like I'm completely missing something and that the solution isn't a difficult as I'm making it.
Thanks for any help regarding this.

Categories

Resources