[Nesting states] $enter called 2 times even than 1

[MattiaPontonioKineton]

1. In $enter of the state Multiplayer I immediately call this._setState('Multiplayer.InitialState'))
2. From a function defined in Multiplayer.InitialState I call this._setState('Multiplayer.Play'))
3. The Multiplayer state is re-entered so the state goes to this._setState('Multiplayer.InitialState'))

It should not happen because I'm even in the state Multiplayer from his nesting states so I don't expect to re-$enter the parent state.

Should be good if I call this._setState('Play')) in a nested state the Router searches inside the sibling's states and not starting from the grandparent.

[erikhaandrikman]

Can you provide an example that we can run and debug? Would really safe some time

[ghost]

• I do not like that I have to specify the full state path in the nested states, with complex state structures becomes less maintainable. Sounds weird that if I call this.somenthing I go up in the tree even then down.
• I do not like that the this changes in the state classes, there are classes so I want to use the features of classes.
• I even understand that nested states should be avoided in favour of new components.

Anyway, I understand the behaviour and I can use it. For reference, here's an experiment of dealing with the state machine.

class StatesExample extends lng.Application {
  _handleRight() {
    this._setState('A1');
  }
  static _states() {
    return [
        class A1 extends this {
        _handleDown() {
          this._setState('A2');
        }
        _handleLeft() {
          this._setState('');
        }
        _handleRight() {
          this._setState('A1.B1');
        }
                static _states() {
          return [
            class B1 extends A1 {
              _handleDown() {
                this._setState('A1.B2');
              }
              _handleLeft() {
                this._setState('A1');
              }
            },
            class B2 extends A1 {
              _handleUp() {
                this._setState('A1.B1');
              }
              _handleLeft() {
                this._setState('A1');
              }
            }
          ]
        }
      },
      class A2 extends this {
        _handleUp() {
          this._setState('A1');
        }
        _handleLeft() {
          this._setState('');
        }
        _handleRight() {
          this._setState('A2.B1');
        }
                static _states() {
          return [
            class B1 extends A2 {
              _handleDown() {
                this._setState('A2.B2');
              }
              _handleLeft() {
                this._setState('A2');
              }
            },
            class B2 extends A2 {
              _handleUp() {
                this._setState('A2.B1');
              }
              _handleLeft() {
                this._setState('A2');
              }
            }
          ]
        }
      }
    ]
  }
}
const options = {stage: {w: 100, h: 100, clearColor: 0xFF000000, canvas2d: false, useImageWorker: false}, debug: true}
const app = new StatesExample(options);
window.app = app;
document.body.appendChild(app.stage.getCanvas());