Colyseus: Vuex store integration

[DenisNP]

Vue has very powerful state management option named Vuex store. It will be cool and quite logical to integrate it with Colyseus state at least on the client side.

Almost any turn-based game can be completely a function of its state. Some event hooks can me made inside reactivity itself (in Vue there are watchers), so Colyseus could just update entire state without the need of per-entity trigger within every update.

[endel]

Thanks for the heads-up, there's also mobx as an alternative. I personally haven't tried Vuex store yet.

Ideally, the framework should be agnostic of which one you use. Currently, it relies purely on a mutable state object. The problem may be supporting the client-side for each language. (JavaScript, LUA, Haxe, etc)

In the server-side it should be pretty straghtforward, but not currently supported without hacks I think

[DenisNP]

So, yes, maybe it should be Vue plugin rather than part of Colyseus. Will think about writing it :)

[oyed]

I use Vuex in my games - I think it depends on how you want to write the game client. If you're doing it entirely in Vue/Vuex, I'm not sure how performant it would be with so many updates to the store. For me, I just use it for the UI, so it only listens to certain state/Player changes.

[endel]

An integration of vuex / mobx in the client-side is not going to happen anytime soon in the clients. For the server-side, it's already possible to use it, though.

I haven't tested thoroughly the base classes described below - they're not mandatory, but they improve when to check for patches - you can extend them instead of the Room class if you're going to use vuex or mobx to handle your state.

Using vuex to handle your state.

import { Room } from "colyseus";
import * as Vuex from "vuex";

abstract class VuexRoom<T> extends Room<T> {
    private _unsubscribe: () => void;
    private _hasStateChange: boolean = true;

    setState(store: Vuex.Store<T>) {
        super.setState(store);

        this._unsubscribe = store.subscribe(() => this._hasStateChange = true);
    }

    broadcastPatch () {
        if (!this._hasStateChange) {
            // no changes, skip.
            return false;
        }

        const success = super.broadcastPatch();
        this._hasStateChange = false;

        return success;
    }

    onDispose () {
      this._unsubscribe();
    }
}

Using mobx to handle your state.

import { Room } from "colyseus";
import { Lambda, observe } from "mobx";

abstract class MobxRoom<T> extends Room<T> {
    private _disposeObserver: Lambda;
    private _hasStateChange: boolean = true;

    setState(state) {
        super.setState(state);
        this._disposeObserver = observe(state, () => this._hasStateChange = true);
    }

    broadcastPatch () {
        if (!this._hasStateChange) {
            // no changes, skip.
            return false;
        }

        const success = super.broadcastPatch();
        this._hasStateChange = false;

        return success;
    }

    onDispose () {
      this._disposeObserver();
    }
}

[R4wizard]

I have created a small library to help anybody using Vue with this library. It doesn't use Vuex, although it is an "Observable" meaning it's reactive and accessible like a Vuex store.

Feel free to check it out if you find yourself looking at this issue:
https://github.com/ouropencode/ObservableSchema