Resync.js

Installation

 npm install resync-js

createGame

The createGame function will create a flux like game store.

const { createGame } = require('resync-js');

The game sotre requires:

• state - inital state object.
• mutate - contains all state mutation logic.
• update - dispatches actions when game state passes certain conditions.

createGame({

    state: {
        players: {
            'player-1': {
                position: { x: 0, y: 0 },
                velocity: { x: 0, y: 0 },
                health: 100,
                onFire: true
            }
        }
    },

    mutate (state, action) {
        switch (action.type) {
            case 'SET_PLAYER_HP': {
                const { id, health } = action;
                state.players[id].health = health;
                return state;
            }
        }
        return state;
    },

    update (game, dt) {
        const players = game.getState().players;
        for (let playerID in players) {
            let player = players[playerID];
            if (player.onFire) {
                const action = {
                    type: 'SET_PLAYER_HP',
                    id: playerID,
                    health: player.health - 10,
                };
                game.dispatch(action);
            }
        }
    },
});

createHost

The createHost function will set up the hosting logic for your backend.

const { createHost } = require('resync-js');

• game - game instance.
• onReady - calls when host is ready.
• onConnection - new client has connected.
• onDisconnect - client has disconnected.
• onDispatch - client dispatched an action.

createHost({

    game: createGame ({ /* ... */ }),

    onReady (host) {

        // Start game loop ...
        gameLoop((dt) => {
            host.game.update(dt);
        });
    },

    onConnection (host, event) {
        const { connectionID } = event;

        // Create unique player ID.
        const playerID = 'player-' + connectionID;

        // Create action for adding player to game state.
        const action = addPlayer(playerID);

        // Execute dispatch locally and send to other peer players.
        host.game.dispatch(action);
        host.socket.connections.forEach(connection => {
            if (connection !== connectionID) {
                host.socket.dispatch(connection, action);
            }
        });

        // Get current game state and accept player connection.
        const state = host.game.getState();
        host.socket.connection(connectionID, { playerID, state });
    },

    onDisconnect (host, event) {
        const { connectionID } = event;
        const playerID = 'player-' + connectionID;
        const action = removePlayer(playerID);

        // Sync ...
        host.game.dispatch(action);
        host.socket.connections.forEach(connection => {
            if (connection !== connectionID) {
                host.socket.dispatch(connection, action);
            }
        });
    },

    onDispatch (host, event) {
        const { connectionID, action } = event;
        const playerID = 'player-' + connectionID;

        // Sync ...
        host.game.dispatch(action);
        host.socket.connections.forEach(connection => {
            if (connection !== connectionID) {
                host.socket.dispatch(connection, action);
            }
        });
    },
});

createClient

The createClient function will set up the frontend logic for the player.

const { createClient } = require('resync-js');

• game - game instance.
• onReady - calls when host is ready.
• onConnection - new client has connected.
• onDisconnect - client has disconnected.
• onDispatch - client dispatched an action.

createClient({

    game: createGame ({ /* ... */ }),

    onConnection (client, event) {
        const { playerID, state } = event;

        // Sync clients input ...
        onKeyboardInput((input, value) => {
            const action = setPlayerInput(playerID, input, value);
            client.game.dispatch(action);
            client.socket.dispatch(action);
        });

        // Start game loop ...
        gameLoop((dt) => {
            client.game.update(dt);
            render(client.game.getState());
        });
    },

    onDisconnect (client, event) {
        console.log('Disconnected from game server ...');
    },

    onDispatch (client, action) {
        client.game.dispatch(action);
    },
});