multyx-client 0.1.0

package/src/index.ts

@@ -0,0 +1,261 @@
+import { Message } from "./message";
+import { Unpack, EditWrapper, Add } from './utils';
+import { RawObject } from "./types";
+import { Controller } from "./controller";
+import { MultyxClientObject } from "./items";
+import { DefaultOptions, Options } from "./options";
+
+export default class Multyx {
+    ws: WebSocket;
+    uuid: string;
+    joinTime: number;
+    ping: number;
+    events: Map<string | Symbol, ((data?: any) => void)[]>;
+    self: RawObject;
+    all: RawObject;
+    clients: RawObject;
+    teams: RawObject;
+    controller: Controller;
+
+    options: Options;
+    
+    // Queue of functions to be called after each frame
+    private listenerQueue: ((...args: any[]) => void)[];
+
+    static Start = Symbol('start');
+    static Connection = Symbol('connection');
+    static Disconnect = Symbol('disconnect');
+    static Edit = Symbol('edit');
+    static Native = Symbol('native');
+    static Custom = Symbol('custom');
+    static Any = Symbol('any');
+
+    constructor(options: Options = {}, callback?: () => void) {
+        this.options = { ...DefaultOptions, ...options };
+
+        const url = `ws${this.options.secure ? 's' : ''}://${this.options.uri}:${this.options.port}/`;
+        this.ws = new WebSocket(url);
+        this.ping = 0;
+        this.events = new Map();
+        this.self = {};
+        this.all = {};
+        this.teams = {};
+        this.clients = {};
+        this.controller = new Controller(this.ws);
+        this.listenerQueue = [];
+
+        callback?.();
+
+        this.ws.onmessage = event => {
+            const msg = Message.Parse(event.data);
+            this.ping = 2 * (Date.now() - msg.time);
+
+            if(msg.native) {
+                this.parseNativeEvent(msg);
+                this.events.get(Multyx.Native)?.forEach(cb => cb(msg));
+            } else if(msg.name in this.events) {
+                this.events[msg.name](msg.data);
+                this.events.get(Multyx.Custom)?.forEach(cb => cb(msg));
+            }
+            this.events.get(Multyx.Any)?.forEach(cb => cb(msg));
+        }
+    }
+
+    on(name: string | Symbol, callback: (data: RawObject) => void) {
+        const events = this.events.get(name) ?? [];
+        events.push(callback);
+        this.events.set(name, events);
+    }
+
+    send(name: string, data: any, expectResponse: boolean = false) {
+        if(name[0] === '_') name = '_' + name;
+        this.ws.send(Message.Create(name, data));
+        if(!expectResponse) return;
+
+        return new Promise(res => this.events.set(Symbol.for("_" + name), [res]));
+    }
+
+    /**
+     * Loop over a function
+     * @param callback Function to call on a loop
+     * @param timesPerSecond Recommended to leave blank. Number of times to loop in each second, if undefined, use requestAnimationFrame
+     */
+    loop(callback: () => void, timesPerSecond?: number) {
+        if(timesPerSecond) {
+            this.on(Multyx.Start, () => setInterval(callback, Math.round(1000/timesPerSecond)));
+        } else {
+            const caller = () => {
+                callback();
+                requestAnimationFrame(caller);
+            }
+            this.on(Multyx.Start, () => requestAnimationFrame(caller));
+        }
+    }
+
+    
+    /**
+     * Create a callback function that gets called for any current or future client
+     * @param callbackfn Function to call for every client
+     */
+    forAll(callback: (client: MultyxClientObject) => void) {
+        this.on(Multyx.Start, () => {
+            this.teams.all.clients.forAll((uuid) => callback(this.clients[uuid]));
+        });
+        this.on(Multyx.Connection, callback);
+    }
+
+    private parseNativeEvent(msg: Message) {
+        if(this.options.logUpdateFrame) console.log(msg);
+
+        for(const update of msg.data) {
+            switch(update.instruction) {
+                // Initialization
+                case 'init': {
+                    this.initialize(update);
+
+                    for(const listener of this.events.get(Multyx.Start) ?? []) {
+                        this.listenerQueue.push(() => listener(update));
+                    }
+                    
+                    // Clear start event as it will never be called again
+                    if(this.events.has(Multyx.Start)) this.events.get(Multyx.Start).length = 0;
+                    break;
+                }
+
+                // Client or team data edit
+                case 'edit': {
+                    this.parseEdit(update);
+
+                    for(const listener of this.events.get(Multyx.Edit) ?? []) {
+                        this.listenerQueue.push(() => listener(update));
+                    }
+                    break;
+                }
+
+                // Other data change
+                case 'self': {
+                    this.parseSelf(update);
+                    break;
+                }
+
+                // Connection
+                case 'conn': {
+                    this.clients[update.uuid] = new MultyxClientObject(
+                        this,
+                        update.data,
+                        [update.uuid],
+                        false
+                    );
+
+                    for(const listener of this.events.get(Multyx.Connection) ?? []) {
+                        this.listenerQueue.push(() => listener(this.clients[update.uuid]));
+                    }
+                    break;
+                }
+
+                // Disconnection
+                case 'dcon': {
+                    for(const listener of this.events.get(Multyx.Disconnect) ?? []) {
+                        const clientValue = this.clients[update.client].value;
+                        this.listenerQueue.push(() => listener(clientValue));
+                    }
+                    delete this.clients[update.client];
+                    break;
+                }
+
+                // Response to client
+                case 'resp': {
+                    const promiseResolve = this.events.get(Symbol.for("_" + update.name))[0];
+                    promiseResolve(update.response);
+                    break;
+                }
+
+                default: {
+                    if(this.options.verbose) {
+                        console.error("Server error: Unknown native Multyx instruction");
+                    }
+                }
+            }
+        }
+
+        this.listenerQueue.forEach(x => x());
+        this.listenerQueue.length = 0;
+    }
+
+    private initialize(update: RawObject) {
+        this.uuid = update.client.uuid;
+        this.joinTime = update.client.joinTime;
+        this.controller.listening = new Set(update.client.controller);
+
+        // Create MultyxClientObject for all teams
+        this.teams = new MultyxClientObject(this, {}, [], true);
+        for(const team of Object.keys(update.teams)) {
+            this.teams[team] = new EditWrapper(update.teams[team]);
+        }
+        this.all = this.teams['all'];
+
+        // Create MultyxClientObject for all clients
+        this.clients = {};
+        for(const [uuid, client] of Object.entries(update.clients)) {
+            if(uuid == this.uuid) continue;
+            this.clients[uuid] = new MultyxClientObject(
+                this,
+                new EditWrapper(client),
+                [uuid],
+                false
+            );
+        };
+
+        const client = new MultyxClientObject(
+            this, 
+            new EditWrapper(update.client.self), 
+            [this.uuid], 
+            true
+        );
+        this.self = client;
+        this.clients[this.uuid] = client;
+
+        // Apply all constraints on self and teams
+        for(const [uuid, table] of Object.entries(update.constraintTable)) {
+            const obj = this.uuid == uuid ? this.self : this.teams[uuid];
+            obj[Unpack](table);
+        }
+    }
+
+    private parseEdit(update: RawObject) {
+        let route: any = update.team ? this.teams : this.clients;
+        if(!route) return;
+
+        // Loop through path to get to object being edited
+        for(const p of update.path.slice(0, -1)) {
+            // Create new object at path if non-existent
+            if(!(p in route)) route[p] = new EditWrapper({});
+            route = route[p];
+        }
+
+        const prop = update.path.slice(-1)[0];
+        route[prop] = new EditWrapper(update.value);
+    }
+
+    private parseSelf(update: RawObject) {
+        if(update.prop == 'controller') {
+            this.controller.listening = new Set(update.data);
+        } else if(update.prop == 'uuid') {
+            this.uuid = update.data;
+        } else if(update.prop == 'constraint') {
+            let route = this.uuid == update.data.path[0] ? this.self : this.teams[update.data.path[0]];
+            for(const prop of update.data.path.slice(1)) route = route?.[prop];
+            if(route === undefined) return;
+
+            route[Unpack]({ [update.data.name]: update.data.args });
+        }
+    }
+
+    /**
+     * Add function to listener queue
+     * @param fn Function to call once frame is complete
+     */
+    [Add](fn: ((...args: any[]) => void)) {
+        this.listenerQueue.push(fn);
+    }
+}

package/src/items/index.ts

@@ -0,0 +1,14 @@
+import MultyxClientList from "./list";
+import MultyxClientObject from "./object";
+import MultyxClientValue from "./value";
+
+type MultyxClientItem<T = any> = T extends any[] ? MultyxClientList
+    : T extends object ? MultyxClientObject
+    : MultyxClientValue;
+
+export {
+    MultyxClientList,
+    MultyxClientObject,
+    MultyxClientValue,
+    MultyxClientItem,
+};

package/src/items/list.ts

@@ -0,0 +1,270 @@
+import Multyx from '../';
+import { MultyxClientItem } from '.';
+import { EditWrapper } from '../utils';
+import MultyxClientObject from "./object";
+
+export default class MultyxClientList extends MultyxClientObject {
+    length: number;
+
+    get value() {
+        const parsed: any[] = [];
+        for(let i=0; i<this.length; i++) parsed[i] = this.get(i).value;
+        return parsed;
+    }
+
+    constructor(multyx: Multyx, list: any[] | EditWrapper<any[]>, propertyPath: string[] = [], editable: boolean){
+        super(multyx, {}, propertyPath, editable);
+
+        this.length = 0;
+        this.push(...(list instanceof EditWrapper ? list.value.map(x => new EditWrapper(x)) : list));
+
+        return new Proxy(this, {
+            has: (o, p) => {
+                if(p in o) return true;
+                return o.has(p);
+            },
+            get: (o, p) => {
+                if(p in o) return o[p];
+                return o.get(p);
+            },
+            set: (o, p, v) => {
+                if(p in o) {
+                    o[p] = v;
+                    return true;
+                }
+                return o.set(p as string, v);
+            },
+            deleteProperty: (o, p) => {
+                return o.delete(p as string, false);
+            }
+        });
+    }
+
+    set(index: string | number, value: any) {
+        if(typeof index == 'string') index = parseInt(index);
+        if(value === undefined) return this.delete(index, false);
+        if(value instanceof EditWrapper && value.value === undefined) return this.delete(index, true);
+
+        const result = super.set(index, value);
+        if(result && index >= this.length) this.length = index+1;
+        
+        return result;
+    }
+
+    delete(index: string | number, native: boolean = false) {
+        if(typeof index == 'string') index = parseInt(index);
+
+        const res = super.delete(index, native);
+        if(res) this.length = this.reduce((a, c, i) => c !== undefined ? i+1 : a, 0);
+        return res;
+    }
+
+    /**
+     * Create a callback function that gets called for any current or future element in list
+     * @param callbackfn Function to call for every element
+     */
+    forAll(callbackfn: (value: any, index: number) => void) {
+        for(let i=0; i<this.length; i++) {
+            callbackfn(this.get(i), i);
+        }
+        super.forAll((key, value) => callbackfn(value, key));
+    }
+
+
+    /* All general array methods */
+    push(...items: any) {
+        for(const item of items) this.set(this.length, item);
+        return this.length;
+    }
+    
+    pop(): MultyxClientItem | null {
+        if(this.length === 0) return null;
+
+        const res = this.get(this.length);
+        this.delete(this.length);
+        return res;
+    }
+
+    unshift(...items: any[]) {
+        for(let i=this.length-1; i>=0; i--) {
+            if(i >= items.length) {
+                this.set(i, this.get(i-items.length));
+            } else {
+                this.set(i, items[i]);
+            }
+        }
+
+        return this.length;
+    }
+
+    shift() {
+        if(this.length == 0) return undefined;
+        this.length--;
+
+        const res = this.get(0);
+        for(let i=0; i<this.length; i++) {
+            this.set(i, this.get(i+1));
+        }
+        return res;
+    }
+    
+    splice(start: number, deleteCount?: number, ...items: any[]) {
+        if(deleteCount === undefined) {
+            deleteCount = this.length - start;
+        }
+
+        // Move elements in front of splice forward or backward
+        let move = items.length - deleteCount;
+        if(move > 0) {
+            for(let i=this.length-1; i>=start + deleteCount; i--) {
+                this.set(i + move, this.get(i));
+            }
+        } else if(move < 0) {
+            for(let i=start+deleteCount; i<this.length; i++) {
+                this.set(i + move, this.get(i));
+            }
+
+            // Delete elements past end of new list
+            const originalLength = this.length;
+            for(let i=originalLength+move; i<originalLength; i++) {
+                this.set(i, undefined);
+            }
+        }
+
+        // Insert new elements starting at start
+        for(let i=start; i<items.length; i++) {
+            this.set(i, items[i]);
+        }
+    }
+
+    
+    filter(predicate: (value: any, index: number, array: MultyxClientList) => boolean) {
+        const keep = [];
+        for(let i=0; i<this.length; i++) {
+            keep.push(predicate(this.get(i), i, this));
+        }
+
+        let negativeOffset = 0;
+        for(let i=0; i<keep.length; i++) {
+            if(keep[i] && negativeOffset) this.set(i - negativeOffset, this.get(i));
+            if(!keep[i]) negativeOffset--;
+        }
+    }
+
+    map(callbackfn: (value: any, index: number, array: MultyxClientList) => any) {
+        for(let i=0; i<this.length; i++) {
+            this.set(i, callbackfn(this.get(i), i, this));
+        }
+    }
+
+    flat() {
+        for(let i=0; i<this.length; i++) {
+            const item = this.get(i);
+
+            if(item instanceof MultyxClientList) {
+                for(let j=0; j<item.length; j++) {
+                    i++;
+                    this.set(i, item[j]);
+                }
+            }
+        }
+    }
+
+    reduce(callbackfn: (accumulator: any, currentValue: any, index: number, array: MultyxClientList) => any, startingAccumulator: any) {
+        for(let i=0; i<this.length; i++) {
+            startingAccumulator = callbackfn(startingAccumulator, this.get(i), i, this);
+        }
+        return startingAccumulator;
+    }
+
+    reduceRight(callbackfn: (accumulator: any, currentValue: any, index: number, array: MultyxClientList) => any, startingAccumulator: any) {
+        for(let i=this.length-1; i>=0; i--) {
+            startingAccumulator = callbackfn(startingAccumulator, this.get(i), i, this);
+        }
+        return startingAccumulator;
+    }
+
+    reverse() {
+        let right = this.length-1;
+        for(let left=0; left<right; left++) {
+            const a = this.get(left);
+            const b = this.get(right);
+            this.set(left, b);
+            this.set(right, a);
+        }
+        return this;
+    }
+
+    forEach(callbackfn: (value: any, index: number, array: MultyxClientList) => void) {
+        for(let i=0; i<this.length; i++) {
+            callbackfn(this.get(i), i, this);
+        }
+    }
+
+    every(predicate: (value: any, index: number, array: MultyxClientList) => boolean) {
+        for(let i=0; i<this.length; i++) {
+            if(!predicate(this.get(i), i, this)) return false;
+        }
+        return true;
+    }
+
+    some(predicate: (value: any, index: number, array: MultyxClientList) => boolean) {
+        for(let i=0; i<this.length; i++) {
+            if(predicate(this.get(i), i, this)) return true;
+        }
+        return false;
+    }
+
+    find(predicate: (value: any, index: number, array: MultyxClientList) => boolean) {
+        for(let i=0; i<this.length; i++) {
+            if(predicate(this.get(i), i, this)) return this.get(i);
+        }
+        return undefined;
+    }
+    
+    findIndex(predicate: (value: any, index: number, array: MultyxClientList) => boolean) {
+        for(let i=0; i<this.length; i++) {
+            if(predicate(this.get(i), i, this)) return i;
+        }
+        return -1;
+    }
+
+    deorder(): MultyxClientItem[] {
+        const values = [];
+        for(const index in this.object) {
+            values.push(this.get(index));
+        }
+        return values;
+    }
+
+    deorderEntries(): [number, MultyxClientItem][] {
+        const values = [];
+        for(const index in this.object) {
+            values.push([parseInt(index), this.get(index)]);
+        }
+        return values;
+    }
+
+    entries(): [any, number][] {
+        const entryList: [any, number][] = [];
+        for(let i=0; i<this.length; i++) {
+            entryList.push([this.get(i), i]);
+        }
+        return entryList;
+    }
+
+    keys(): number[] {
+        return Array(this.length).fill(0).map((_, i) => i);
+    }
+
+    
+    /* Native methods to allow MultyxClientList to be treated as array */
+    [Symbol.iterator](): Iterator<MultyxClientItem> {
+        const values = [];
+        for(let i=0; i<this.length; i++) values[i] = this.get(i);
+        return values[Symbol.iterator]();
+    }
+    toString = () => this.value.toString();
+    valueOf = () => this.value;
+    [Symbol.toPrimitive] = () => this.value;
+}