Hey everyone,

I want to understand how to use ViewState more effectively and correctly since I'm not really understanding from the docs.
I'm also getting weird behaviour while using it.

I have a game where the state can be described like this:

export class Player extends Schema {
  @type('string') id: string;
  @view() @type([Card]) hand = new ArraySchema<Card>();
  @type('number') handSize: number = 0;

  constructor(id: string) {
    super();
    this.id = id;
  }
}

export class State extends Schema {
  @type([Player]) players = new ArraySchema<Player>();
  @type([PlayedCard]) trick = new ArraySchema<PlayedCard>();
}

With the @view decorator this works just fine. Only the player can see their hand when inspect the view state.

In every round a trick is played and I wanted to store the won trick in a wonTricks array for the player. Similar to the hand only the player can see it. I thought it would be easy, simply by adding a similar array to the hand but it broke everything.

So if

export class TrickPlay extends Schema {
  @type([PlayedCard]) cards = new ArraySchema<PlayedCard>();
}

and then added it as a @view on the Player.

when resolving the trick I would assign it to the correct player while creating new objects like

const trickPlay = new TrickPlay();
this.state.trick.forEach((playedCard) => trickPlay.cards.push(new PlayedCard(/*etc*/))

and after this even the normal trick stopped working.

What am I doing wrong here? How should this feature be tackled?

As another note, I was thinking of having the main state having 2 properties only. The entire data that is completely private and then a viewstate property that I can purposefully alter and maybe that would solve all my issues?
Like this:

export class MainState extends Schema {
  @type(PrivateState) privateState = new PrivateState();
  @view() @type(PublicState) publicState = new PublicState();
}

I'm really not sure, I am not understanding how to use this at all.

Can anyone help?