multyx-client 0.1.0 → 0.1.2

package/src/index.ts

@@ -1,10 +1,9 @@
-import { Message } from "./message";
-import { Unpack, EditWrapper, Add } from './utils';
-import { RawObject } from "./types";
+import { Message, UncompressUpdate } from "./message";
+import { Unpack, EditWrapper, Add, Edit, Done } from './utils';
+import { RawObject, ResponseUpdate } from "./types";
 import { Controller } from "./controller";
-import { MultyxClientObject } from "./items";
+import { MultyxClientObject, MultyxClientValue } from "./items";
 import { DefaultOptions, Options } from "./options";
-
 export default class Multyx {
     ws: WebSocket;
     uuid: string;
@@ -12,15 +11,17 @@ export default class Multyx {
     ping: number;
     events: Map<string | Symbol, ((data?: any) => void)[]>;
     self: RawObject;
+    tps: number;
     all: RawObject;
-    clients: RawObject;
-    teams: RawObject;
+    space: string;
+    clients: { [key: string]: MultyxClientObject };
+    teams: MultyxClientObject;
     controller: Controller;
 
     options: Options;
     
     // Queue of functions to be called after each frame
-    private listenerQueue: ((...args: any[]) => void)[];
+    [Done]: ((...args: any[]) => void)[] = [];
 
     static Start = Symbol('start');
     static Connection = Symbol('connection');
@@ -33,16 +34,17 @@ export default class Multyx {
     constructor(options: Options = {}, callback?: () => void) {
         this.options = { ...DefaultOptions, ...options };
 
-        const url = `ws${this.options.secure ? 's' : ''}://${this.options.uri}:${this.options.port}/`;
+        const url = `ws${this.options.secure ? 's' : ''}://${this.options.uri.split('/')[0]}:${this.options.port}/${this.options.uri.split('/')[1] ?? ''}`;
         this.ws = new WebSocket(url);
         this.ping = 0;
+        this.space = 'default';
         this.events = new Map();
         this.self = {};
+        this.tps = 0;
         this.all = {};
-        this.teams = {};
+        this.teams = new MultyxClientObject(this, {}, [], true);
         this.clients = {};
         this.controller = new Controller(this.ws);
-        this.listenerQueue = [];
 
         callback?.();
 
@@ -53,25 +55,51 @@ export default class Multyx {
             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);
+            } else {
+                this.events.get(msg.name)?.forEach(cb => {
+                    const response = cb(msg.data);
+                    if(response !== undefined) this.send(msg.name, response);
+                });
                 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) {
+    /**
+     * Listen for a message from the server
+     * @param name Name of the message
+     * @param callback Function to call when the message is received
+     */
+    on(name: string | Symbol, callback: (data: RawObject) => any) {
         const events = this.events.get(name) ?? [];
         events.push(callback);
         this.events.set(name, events);
     }
 
-    send(name: string, data: any, expectResponse: boolean = false) {
+    /**
+     * Send a message to the server
+     * @param name Name of the message
+     * @param data Data to send
+     */
+    send(name: string, data: any) {
         if(name[0] === '_') name = '_' + name;
-        this.ws.send(Message.Create(name, data));
-        if(!expectResponse) return;
+        const update = {
+            instruction: 'resp',
+            name,
+            response: data
+        } as ResponseUpdate;
+        this.ws.send(Message.Native(update));
+    }
 
+    /**
+     * Send a message to the server and wait for a response
+     * @param name Name of the message
+     * @param data Data to send
+     * @returns Promise that resolves when the message is received
+     */
+    await(name: string, data?: any) {
+        this.send(name, data);
         return new Promise(res => this.events.set(Symbol.for("_" + name), [res]));
     }
 
@@ -92,20 +120,21 @@ export default class Multyx {
         }
     }
 
-    
     /**
-     * Create a callback function that gets called for any current or future client
-     * @param callbackfn Function to call for every client
+     * Add a function to be called after each frame
+     * @param callback Function to call after each frame
      */
-    forAll(callback: (client: MultyxClientObject) => void) {
-        this.on(Multyx.Start, () => {
-            this.teams.all.clients.forAll((uuid) => callback(this.clients[uuid]));
-        });
-        this.on(Multyx.Connection, callback);
+    [Add](callback: () => void) {
+        this[Done].push(callback);
     }
 
+    /**
+     * Parse a native event from the server
+     * @param msg Message to parse
+     */
     private parseNativeEvent(msg: Message) {
-        if(this.options.logUpdateFrame) console.log(msg);
+        msg.data = msg.data.map(UncompressUpdate);
+        if(this.options.logUpdateFrame) console.log(msg.data);
 
         for(const update of msg.data) {
             switch(update.instruction) {
@@ -114,7 +143,7 @@ export default class Multyx {
                     this.initialize(update);
 
                     for(const listener of this.events.get(Multyx.Start) ?? []) {
-                        this.listenerQueue.push(() => listener(update));
+                        this[Done].push(() => listener(update));
                     }
                     
                     // Clear start event as it will never be called again
@@ -124,10 +153,27 @@ export default class Multyx {
 
                 // Client or team data edit
                 case 'edit': {
-                    this.parseEdit(update);
+                    if(update.path.length == 1) {
+                        if(update.team) {
+                            this.teams.set(update.path[0], new EditWrapper(update.value));
+                        } else {
+                            this.clients[update.path[0]] = new MultyxClientObject(
+                                this,
+                                new EditWrapper(update.value),
+                                [update.path[0]],
+                                false
+                            );
+                        }
+                    } else {
+                        const agent = update.team
+                            ? this.teams.get(update.path[0]) as MultyxClientObject
+                            : this.clients[update.path[0]];
+                        if(!agent) return;
+                        agent.set(update.path.slice(1), new EditWrapper(update.value));
+                    }
 
                     for(const listener of this.events.get(Multyx.Edit) ?? []) {
-                        this.listenerQueue.push(() => listener(update));
+                        this[Done].push(() => listener(update));
                     }
                     break;
                 }
@@ -148,7 +194,7 @@ export default class Multyx {
                     );
 
                     for(const listener of this.events.get(Multyx.Connection) ?? []) {
-                        this.listenerQueue.push(() => listener(this.clients[update.uuid]));
+                        this[Done].push(() => listener(this.clients[update.uuid]));
                     }
                     break;
                 }
@@ -157,7 +203,7 @@ export default class Multyx {
                 case 'dcon': {
                     for(const listener of this.events.get(Multyx.Disconnect) ?? []) {
                         const clientValue = this.clients[update.client].value;
-                        this.listenerQueue.push(() => listener(clientValue));
+                        this[Done].push(() => listener(clientValue));
                     }
                     delete this.clients[update.client];
                     break;
@@ -166,7 +212,8 @@ export default class Multyx {
                 // Response to client
                 case 'resp': {
                     const promiseResolve = this.events.get(Symbol.for("_" + update.name))[0];
-                    promiseResolve(update.response);
+                    this.events.delete(Symbol.for("_" + update.name));
+                    this[Done].push(() => promiseResolve(update.response));
                     break;
                 }
 
@@ -178,17 +225,17 @@ export default class Multyx {
             }
         }
 
-        this.listenerQueue.forEach(x => x());
-        this.listenerQueue.length = 0;
+        this[Done].forEach(x => x());
+        this[Done].length = 0;
     }
 
     private initialize(update: RawObject) {
+        this.tps = update.tps;
         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]);
         }
@@ -222,40 +269,36 @@ export default class Multyx {
         }
     }
 
-    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') {
+        if(update.property == 'controller') {
             this.controller.listening = new Set(update.data);
-        } else if(update.prop == 'uuid') {
+        } else if(update.property == 'uuid') {
             this.uuid = update.data;
-        } else if(update.prop == 'constraint') {
+        } else if(update.property == '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 });
+        } else if(update.property == 'space') {
+            this.space = update.data;
+            this.updateSpace();
         }
     }
 
-    /**
-     * Add function to listener queue
-     * @param fn Function to call once frame is complete
-     */
-    [Add](fn: ((...args: any[]) => void)) {
-        this.listenerQueue.push(fn);
+    // Hide all spaces except the current one
+    private updateSpace() {
+        if(this.space == 'default') {
+            (document.querySelectorAll('[data-multyx-space]') as NodeListOf<HTMLElement>).forEach(space => {
+                space.style.display = 'block';
+                space.style.pointerEvents = 'auto';
+            });
+            return;
+        }
+
+        (document.querySelectorAll('[data-multyx-space]') as NodeListOf<HTMLElement>).forEach(space => {
+            space.style.display = space.dataset.multyxSpace == this.space ? 'block' : 'none';
+            space.style.pointerEvents = space.dataset.multyxSpace == this.space ? 'auto' : 'none';
+        });
     }
 }

package/src/items/index.ts

@@ -6,9 +6,14 @@ type MultyxClientItem<T = any> = T extends any[] ? MultyxClientList
     : T extends object ? MultyxClientObject
     : MultyxClientValue;
 
+function IsMultyxClientItem(value: any): value is MultyxClientItem {
+    return value instanceof MultyxClientList || value instanceof MultyxClientObject || value instanceof MultyxClientValue;
+}
+
 export {
     MultyxClientList,
     MultyxClientObject,
     MultyxClientValue,
     MultyxClientItem,
+    IsMultyxClientItem,
 };

package/src/items/list.ts

@@ -1,76 +1,251 @@
 import Multyx from '../';
-import { MultyxClientItem } from '.';
-import { EditWrapper } from '../utils';
-import MultyxClientObject from "./object";
+import { IsMultyxClientItem, type MultyxClientItem, type MultyxClientObject, MultyxClientValue } from '.';
+import { Add, Done, Edit, EditWrapper, Unpack } from '../utils';
+import MultyxClientItemRouter from './router';
+import { Message } from '../message';
 
-export default class MultyxClientList extends MultyxClientObject {
-    length: number;
+export default class MultyxClientList {
+    protected list: MultyxClientItem[];
+    private multyx: Multyx;
+    propertyPath: string[];
+    editable: boolean;
+
+    private editCallbacks: ((index: number, value: any, oldValue: any) => void)[] = [];
+
+    addEditCallback(callback: (index: number, value: any, oldValue: any) => void) {
+        this.editCallbacks.push(callback);
+    }
 
     get value() {
         const parsed: any[] = [];
-        for(let i=0; i<this.length; i++) parsed[i] = this.get(i).value;
+        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);
+    get length() {
+        return this.list.length;
+    }
 
-        this.length = 0;
-        this.push(...(list instanceof EditWrapper ? list.value.map(x => new EditWrapper(x)) : list));
+    set length(length: number) {
+        this.list.length = length;
+    }
+
+    /**
+     * Shifting operations are needed to ensure that operations on elements in
+     * the list do not need to worry about the index of the element.
+     * 
+     * Instead of changing each element's value when shifting, these shift
+     * operations are used to ensure that each MultyxClientItem stays the same
+     * @param index Index to shift from, -1 if special operation
+     * @param shift Shift amount, positive for right, negative for left
+     */
+    private handleShiftOperation(index: number, shift: number) {
+        const operation = index >= 0
+            ? shift >= 0 ? 'right': 'left'
+            : shift == 0 ? 'reverse' : shift < 0 ? 'length' : 'unknown';
+        
+        switch(operation) {
+            // Reverse the array
+            case 'reverse':
+                for(let i=0; i<Math.floor(this.length/2); i++) {
+                    const temp = this.list[i];
+                    this.list[i] = this.list[this.length-1-i];
+                    this.list[this.length-1-i] = temp;
+                }
+                break;
+
+            // Shift items to the left
+            case 'left':    
+                for(let i=index; i<this.length; i++) {
+                    if(i+shift < 0) continue;
+                    this.list[i+shift] = this.list[i];
+                }
+                break;
+            
+            // Shift items to the right
+            case 'right':
+                for(let i=this.length-1; i>=index; i--) {
+                    this.list[i+shift] = this.list[i];
+                }
+                break;
+
+            // Alter the length of the array
+            case 'length':
+                this.length += shift;
+                break;
+
+            // Unknown operation
+            default:
+                if(this.multyx.options.verbose) {
+                    console.error("Unknown shift operation: " + operation);
+                }
+        }
+    }
+
+    constructor(multyx: Multyx, list: any[] | EditWrapper<any[]>, propertyPath: string[] = [], editable: boolean){
+        this.list = [];
+        this.propertyPath = propertyPath;
+        this.multyx = multyx;
+        this.editable = editable;
+
+        const isEditWrapper = list instanceof EditWrapper;
+        if(list instanceof MultyxClientList) list = list.value;
+        if(list instanceof EditWrapper) list = list.value;
+
+        for(let i=0; i<list.length; i++) {
+            this.set(i, isEditWrapper
+                ? new EditWrapper(list[i])
+                : list[i]
+            );
+        }
 
         return new Proxy(this, {
-            has: (o, p) => {
-                if(p in o) return true;
-                return o.has(p);
+            has: (o, p: any) => {
+                if(typeof p == 'number') return o.has(p);
+                return p in o;
             },
-            get: (o, p) => {
+            get: (o, p: any) => {
                 if(p in o) return o[p];
-                return o.get(p);
+                if(!isNaN(parseInt(p))) p = parseInt(p);
+                return o.get(p) as MultyxClientItem;
             },
-            set: (o, p, v) => {
+            set: (o, p: any, v) => {
                 if(p in o) {
                     o[p] = v;
                     return true;
                 }
-                return o.set(p as string, v);
+                return !!o.set(p, v);
             },
-            deleteProperty: (o, p) => {
-                return o.delete(p as string, false);
+            deleteProperty: (o, p: any) => {
+                if(typeof p == 'number') return o.delete(p);
+                return 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);
+    has(index: number): boolean {
+        return index >= 0 && index < this.length;
+    }
+
+    get(index: number | string[]): MultyxClientItem {
+        if(typeof index === 'number') return this.list[index];
+        if(index.length == 0) return this;
+        if(index.length == 1) return this.list[parseInt(index[0])];
+
+        const item = this.list[parseInt(index[0])];
+        if(!item || (item instanceof MultyxClientValue)) return undefined;
+        return item.get(index.slice(1));
+    }
+
+    private recursiveSet(path: string[], value: any): boolean {
+        if(path.length == 0) {
+            if(this.multyx.options.verbose) {
+                console.error(`Attempting to edit MultyxClientList with no path. Setting '${this.propertyPath.join('.')}' to ${value}`);
+            }
+            return false;
+        }
+        
+        if(path[0] == "shift" && value instanceof EditWrapper) {
+            this.handleShiftOperation(parseInt(path[1]), value.value);
+            return true;
+        }
 
-        const result = super.set(index, value);
-        if(result && index >= this.length) this.length = index+1;
+        if(path.length == 1) return this.set(parseInt(path[0]), value);
         
-        return result;
+        let next = this.get(parseInt(path[0]));
+        if(next instanceof MultyxClientValue || next == undefined) {
+            this.set(parseInt(path[0]), new EditWrapper({}));
+            next = this.get(parseInt(path[0])) as MultyxClientObject;
+        }
+        return next.set(path.slice(1), value);
     }
 
-    delete(index: string | number, native: boolean = false) {
+    set(index: number | string[], value: any): boolean {
+        if(Array.isArray(index)) return this.recursiveSet(index, value);
+
+        const oldValue = this.get(index);
+
+        const serverSet = value instanceof EditWrapper;
+        const allowed = serverSet || this.editable;
+        if(serverSet || IsMultyxClientItem(value)) value = value.value;
+        if(value === undefined) return this.delete(index, serverSet);
+
+        // If value is a MultyxClientValue, set the value
+        if(this.list[index] instanceof MultyxClientValue && typeof value != 'object') {
+            return this.list[index].set(serverSet ? new EditWrapper(value) : value);
+        }
+        
+        // Attempting to edit property not editable to client
+        if(!allowed) {
+            if(this.multyx.options.verbose) {
+                console.error(`Attempting to set property that is not editable. Setting '${this.propertyPath.join('.') + '.' + index}' to ${value}`);
+            }
+            return false;
+        }
+        
+        this.list[index] = new (MultyxClientItemRouter(value))(
+            this.multyx,
+            serverSet ? new EditWrapper(value) : value,
+            [...this.propertyPath, index.toString()],
+            this.editable
+        );
+
+        const propSymbol = Symbol.for("_" + this.propertyPath.join('.') + '.' + index);
+        if(this.multyx.events.has(propSymbol)) {
+            this.multyx[Done].push(...this.multyx.events.get(propSymbol).map(e =>
+                () => e(this.list[index])
+            ));
+        }
+
+        // We have to push into queue, since object may not be fully created
+        // and there may still be more updates to parse
+        for(const listener of this.editCallbacks) {
+            this.multyx[Add](() => listener(index, this.get(index), oldValue));
+        }
+        
+        return true;
+    }
+
+    delete(index: number, native: boolean = false) {
+        const oldValue = this.get(index);
+
         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;
+        if(!this.editable && !native) {
+            if(this.multyx.options.verbose) {
+                console.error(`Attempting to delete property that is not editable. Deleting '${this.propertyPath.join('.') + '.' + index}'`);
+            }
+            return false;
+        }
+        
+        delete this.list[index];
+
+        for(const listener of this.editCallbacks) {
+            this.multyx[Add](() => listener(index, undefined, oldValue));
+        }
+
+        if(!native) {
+            this.multyx.ws.send(Message.Native({
+                instruction: 'edit',
+                path: [...this.propertyPath, index.toString()],
+                value: undefined
+            }));
+        }
+
+        return true;
     }
 
     /**
-     * Create a callback function that gets called for any current or future element in list
-     * @param callbackfn Function to call for every element
+     * Wait for a specific index to be set
+     * @param index Index to wait for
+     * @returns Promise that resolves when the value is set
      */
-    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));
+    await(index: number) {
+        if(this.has(index)) return Promise.resolve(this.get(index));
+        const propSymbol = Symbol.for("_" + this.propertyPath.join('.') + '.' + index);
+        return new Promise(res => this.multyx.on(propSymbol, res));
     }
 
-
     /* All general array methods */
     push(...items: any) {
         for(const item of items) this.set(this.length, item);
@@ -152,8 +327,9 @@ export default class MultyxClientList extends MultyxClientObject {
     }
 
     map(callbackfn: (value: any, index: number, array: MultyxClientList) => any) {
+        const mapped = [];
         for(let i=0; i<this.length; i++) {
-            this.set(i, callbackfn(this.get(i), i, this));
+            mapped.push(callbackfn(this.get(i), i, this));
         }
     }
 
@@ -229,22 +405,6 @@ export default class MultyxClientList extends MultyxClientObject {
         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++) {
@@ -257,6 +417,11 @@ export default class MultyxClientList extends MultyxClientObject {
         return Array(this.length).fill(0).map((_, i) => i);
     }
 
+    [Unpack](constraints: any[]) {
+        for(let i=0; i<this.length; i++) {
+            this.get(i)?.[Unpack](constraints[i]);
+        }
+    }
     
     /* Native methods to allow MultyxClientList to be treated as array */
     [Symbol.iterator](): Iterator<MultyxClientItem> {