mnml/client/src/socket.js

const toast = require('izitoast');
const cbor = require('borc');

const SOCKET_URL = process.env.NODE_ENV === 'production' ? 'wss://cryps.gg/ws' : 'ws://localhost:40000';

function errorToast(err) {
    console.error(err);
    return toast.error({
        title: 'BEEP BOOP',
        message: err,
        position: 'topRight',
    });
}

function createSocket(events) {
    let ws;

    // handle account auth within the socket itself
    // https://www.christian-schneider.net/CrossSiteWebSocketHijacking.html
    let account = null;

    // -------------
    //   Outgoing
    // -------------
    function send(msg) {
        console.log('outgoing msg', msg);
        msg.token = account && account.token;
        ws.send(cbor.encode(msg));
    }

    function sendAccountLogin(name, password) {
        send({ method: 'account_login', params: { name, password } });
    }

    function sendAccountCreate(name, password) {
        send({ method: 'account_create', params: { name, password } });
    }

    function sendAccountDemo() {
        send({ method: 'account_demo', params: {} });
    }

    function sendAccountCryps() {
        send({ method: 'account_cryps', params: {} });
    }

    function sendAccountItems() {
        send({ method: 'account_items', params: {} });
    }

    function sendAccountZone() {
        send({ method: 'account_zone', params: {} });
    }

    function sendCrypSpawn(name) {
        send({ method: 'cryp_spawn', params: { name } });
    }

    function sendCrypLearn(id, skill) {
        send({ method: 'cryp_learn', params: { id, skill } });
    }

    function sendCrypForget(id, skill) {
        send({ method: 'cryp_forget', params: { id, skill } });
    }

    function sendGameState(id) {
        send({ method: 'game_state', params: { id } });
    }

    function sendGamePve(crypIds, mode) {
        send({ method: 'game_pve', params: { cryp_ids: crypIds, mode } });
    }

    function sendGamePvp(crypIds) {
        send({ method: 'game_pvp', params: { cryp_ids: crypIds } });
    }

    function sendGameJoin(gameId, crypIds) {
        send({ method: 'game_join', params: { game_id: gameId, cryp_ids: crypIds } });
    }

    function sendGameJoinableList() {
        send({ method: 'game_joinable_list', params: { } });
    }


    function sendGameSkill(gameId, crypId, targetTeamId, skill) {
        send({
            method: 'game_skill',
            params: {
                game_id: gameId, cryp_id: crypId, target_team_id: targetTeamId, skill,
            },
        });
        events.setActiveSkill(null);
    }

    function sendGameTarget(gameId, crypId, skillId) {
        send({ method: 'game_target', params: { game_id: gameId, cryp_id: crypId, skill_id: skillId } });
        events.setActiveSkill(null);
    }

    function sendItemUse(item, target) {
        send({ method: 'item_use', params: { item, target } });
    }

    function sendZoneCreate() {
        send({ method: 'zone_create', params: {} });
    }


    // -------------
    //   Incoming
    // -------------
    function accountLogin(res) {
        const [struct, login] = res;

        account = login;
        events.setAccount(login);
        sendAccountItems();
        sendAccountCryps();
        sendGameJoinableList();
    }

    function accountCryps(response) {
        const [structName, cryps] = response;
        events.setCryps(cryps);
    }

    function gameState(response) {
        const [structName, game] = response;
        events.setGame(game);
    }

    function gameJoinableList(response) {
        const [structName, gameList] = response;
        events.setGameList(gameList);
    }

    function crypSpawn(response) {
        const [structName, cryp] = response;
    }

    function gamePve(response) {
        const [structName, game] = response;
    }

    function accountItems(response) {
        const [structName, items] = response;
        events.setItems(items);
    }

    function zoneState(response) {
        const [structName, zone] = response;
        events.setZone(zone);
    }

    // -------------
    //   Setup
    // -------------

    // when the server sends a reply it will have one of these message types
    // this object wraps the reply types to a function
    const handlers = {
        cryp_spawn: crypSpawn,
        cryp_learn: () => true,
        game_pve: gamePve,
        game_state: gameState,
        game_joinable_list: gameJoinableList,
        account_login: accountLogin,
        account_create: accountLogin,
        account_cryps: accountCryps,
        account_items: accountItems,
        zone_create: res => console.log(res),
        zone_state: zoneState,
    };

    // decodes the cbor and
    // calls the handlers defined above based on message type
    function onMessage(event) {
        // decode binary msg from server
        const blob = new Uint8Array(event.data);
        const res = cbor.decode(blob);

        console.log(res);

        // check for error and split into response type and data
        if (res.err) return errorToast(res.err);
        const { method, params } = res;
        if (!handlers[method]) return errorToast(`${method} handler missing`);
        return handlers[method](params);
    }

    function connect() {
        ws = new WebSocket(SOCKET_URL);
        ws.binaryType = 'arraybuffer';

        // Connection opened
        ws.addEventListener('open', () => {
            toast.info({
                message: 'connected',
                position: 'topRight',
            });

            if (!account) events.loginPrompt();
            if (process.env.NODE_ENV !== 'production') {
                send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
            }

            return true;
        });

        // Listen for messages
        ws.addEventListener('message', onMessage);

        ws.addEventListener('error', (event) => {
            console.error('WebSocket error', event);
            // account = null;
            // return setTimeout(connect, 5000);
        });

        ws.addEventListener('close', (event) => {
            console.error('WebSocket closed', event);
            toast.warning({
                message: 'disconnected',
                position: 'topRight',
            });
            return setTimeout(connect, 5000);
        });

        return ws;
    }

    return {
        sendAccountLogin,
        sendAccountCreate,
        sendAccountDemo,
        sendAccountCryps,
        sendAccountItems,
        sendAccountZone,
        sendGameState,
        sendGamePve,
        sendGamePvp,
        sendGameJoin,
        sendGameJoinableList,
        sendGameSkill,
        sendGameTarget,
        sendCrypSpawn,
        sendCrypLearn,
        sendCrypForget,
        sendItemUse,
        sendZoneCreate,
        connect,
    };
}

module.exports = createSocket;