CODEWITHSUNDEEP
angularrxjsstatestore
yathern
yathern

Reputation: 329

Store pattern for game state in angular

I'm working on a web game built in Angular, using WebSockets to communicate to the backend. So far I've decided that the clients send "events" as needed, and the server sends back the "state", 10 times a second or so.

On the client side, this is handled by a ConnectionService that components can consume. This service exposes a "sendEvent" method and a gameState object which is updated at 10hz or so.

This has worked fairly well - but as the state tree from the server grows, I'm wondering how to handle this data in a scalable way. Here are some concerns/use cases I'd like to be able to solve:

  1. Not rerender everything 10 times a second. Currently I do a naive "this.gameState = newState". I can probably do a deep iteration on keys and mutate the state instead? Is that wise?

  2. Make it easier to say "when gameState.pilot.switches[5] changes, do X". I'd love to be able to listen to a subset of state changes.

Is rxjs what I need here?

Upvotes: 1

Views: 483

Answers (1)

Fan Cheung
Fan Cheung

Reputation: 11345

Rxjs could be a very good utility for this purpose as long as you are comfortable with it. A very simple store in Rx

const store=new BehaviorSubject({gameState:{planeSpeed:0}})

listening for a desired state

store.asObservable().pipe(pluck('gameState','planeSpeed'),distinctUntilChanged())

updating the state

store.next({....store.value, {gameState:{planeSpeed:13}}})

Upvotes: 3

Related Questions