Adding an object to game data

[mzagrabe]

Hello,

If I try to create an object with a constructor and append that object to the game data it appears as though the code hangs. That is, I do not see the debug panel on the side of the app. However, if I change the code to append an integer, then the sidebar does appear.

Here is the code:

───────┬────────────────────────────────────────────────────────────────────────
       │ File: src/App.js
───────┼────────────────────────────────────────────────────────────────────────
   1   │ import { Client }    from 'boardgame.io/client';
   2   │ import { ZooGnu } from './Game';
   3   │ 
   4   │ class ZooGnuClient {
   5   │     constructor(rootElement) {
   6   │         this.client = Client({ game: ZooGnu });
   7   │         this.client.start();
   8   │         this.rootElement = rootElement;
   9   │     }
  10   │ }
  11   │ 
  12   │ const appElement = document.getElementById('app');
  13   │ const app = new ZooGnuClient(appElement);
───────┴────────────────────────────────────────────────────────────────────────
───────┬────────────────────────────────────────────────────────────────────────
       │ File: src/Game.js
───────┼────────────────────────────────────────────────────────────────────────
   1   │ import { INVALID_MOVE } from 'boardgame.io/core';
   2   │ 
   3   │ class Player {
   4   │     constructor() {
   5   │         this.money = 25;
   6   │     }
   7   │ }
   8   │ 
   9   │ export const ZooGnu = {
  10   │     setup: () => {
  11   │         let number_of_players = 4;
  12   │         const _players = [];
  13   │         for (let i = 0; i < number_of_players; i++) {
  14   │             let player = new Player();
  15   │             alert(player.money);
  16   │ 
  17   │             // this works and I get the debugging sidebar...
  18   │             //_players.push(i);
  19   │ 
  20   │             // this does NOT work and I do not get the
  21   │             // debugging sidebar....
  22   │             _players.push(player);
  23   │         }
  24   │ 
  25   │         return {
  26   │             players: _players,
  27   │         }
  28   │     },
  29   │ 
  30   │     turn: {
  31   │         minMoves: 1,
  32   │         maxMoves: 1,
  33   │     },
  34   │ 
  35   │ };

Does anyone know what I'm doing wrong?

Thank you!

-m

[fladrif]

This looks like a javascript question rather than specifically a boardgame.io question. Someone might be able to help you with getting up to speed in javascript here, but typically project specific repos are not the right place for them.

That said I would recommend using an LLM to learn javascript, they're pretty good at reasoning through code and explaining how things work and how they typically should. Feel free to follow up with your experiences with that.

[mzagrabe]

Agreed. There are subtleties of using the bgio framework that make working with vanilla JS a little more involved.

I write front-end code so infrequently I forgot about devtools. Here is the error in the console:

Uncaught Error: Move state is not JSON-serialiazable.
See https://boardgame.io/documentation/#/?id=state for more information.
    at turn-order-8cc4909b.js:435:19
    at turn-order-8cc4909b.js:367:19
    at Object.onBegin (reducer-24ea3e4c.js:49:20)
    at StartPhase (reducer-24ea3e4c.js:228:33)
    at Process (reducer-24ea3e4c.js:167:21)
    at Object.init (reducer-24ea3e4c.js:666:20)
    at InitializeGame (initialize-7316768f.js:44:25)
    at new _ClientImpl (client-f7f02b82.js:232:47)
    at Client (client-f7f02b82.js:519:12)
    at new ZooGnuClient (App.js:6:29)

...and from the documentation [https://boardgame.io/documentation/#/], we see:

Because state can be sent between client and server, G must be a JSON-serializable object; in particular, it must not contain classes or functions.

...so I'll look to have more basic structure with something like:

function create_player() {
    return {
        money: 25,
    };
}

which does not error in the console.

[fladrif]

Have you tried typescript before? I would highly recommend that over vanilla js, it'll at least catch type errors in compilation which covers a pretty large swath of common javascript errors devs face.