multyx-client 0.1.1 → 0.1.2

package/src/items/object.ts

@@ -1,9 +1,9 @@
 import { Message } from "../message";
 import { RawObject } from '../types';
-import { Add, EditWrapper, Unpack } from "../utils";
+import { Done, Edit, EditWrapper, Unpack } from "../utils";
 
 import type Multyx from '../index';
-import type { MultyxClientItem } from ".";
+import { IsMultyxClientItem, type MultyxClientList, type MultyxClientItem } from ".";
 import MultyxClientItemRouter from "./router";
 import MultyxClientValue from "./value";
 
@@ -13,7 +13,7 @@ export default class MultyxClientObject {
     propertyPath: string[];
     editable: boolean;
 
-    private setterListeners: ((key: any, value: any) => void)[]
+    private editCallbacks: ((key: any, value: any) => void)[] = [];
 
     get value() {
         const parsed = {};
@@ -21,19 +21,39 @@ export default class MultyxClientObject {
         return parsed;
     }
 
+    addEditCallback(callback: (key: any, value: any) => void) {
+        this.editCallbacks.push(callback);
+    }
+
+    [Edit](updatePath: string[], value: any) {
+        if(updatePath.length == 1) {
+            this.set(updatePath[0], new EditWrapper(value));
+            return;
+        }
+
+        if(updatePath.length == 0 && this.multyx.options.verbose) {
+            console.error("Update path is empty. Attempting to edit MultyxClientObject with no path.");
+        }
+
+        if(!this.has(updatePath[0])) {
+            this.set(updatePath[0], new EditWrapper({}));
+        }
+        this.get(updatePath[0])[Edit](updatePath.slice(1), value);
+    }
+
     constructor(multyx: Multyx, object: RawObject | EditWrapper<RawObject>, propertyPath: string[] = [], editable: boolean) {
         this.object = {};
         this.propertyPath = propertyPath;
         this.multyx = multyx;
         this.editable = editable;
 
-        this.setterListeners = [];
-
+        const isEditWrapper = object instanceof EditWrapper;
         if(object instanceof MultyxClientObject) object = object.value;
+        if(object instanceof EditWrapper) object = object.value;
 
-        for(const prop in (object instanceof EditWrapper ? object.value : object)) {
-            this.set(prop, object instanceof EditWrapper
-                ? new EditWrapper(object.value[prop])
+        for(const prop in object) {
+            this.set(prop, isEditWrapper
+                ? new EditWrapper(object[prop])
                 : object[prop]
             );
         }
@@ -44,11 +64,11 @@ export default class MultyxClientObject {
             has: (o, p) => {
                 return o.has(p);
             },
-            get: (o, p) => {
+            get: (o, p: string) => {
                 if(p in o) return o[p];
                 return o.get(p);
             },
-            set: (o, p, v) => {
+            set: (o, p: string, v) => {
                 if(p in o) {
                     o[p] = v;
                     return true;
@@ -65,47 +85,74 @@ export default class MultyxClientObject {
         return property in this.object;
     }
 
-    get(property: any): MultyxClientItem {
-        return this.object[property];
+    get(property: string | string[]): MultyxClientItem {
+        if(typeof property === 'string') return this.object[property];
+        if(property.length == 0) return this;
+        if(property.length == 1) return this.object[property[0]];
+
+        const next = this.object[property[0]];
+        if(!next || (next instanceof MultyxClientValue)) return undefined;
+        return next.get(property.slice(1));
+    }
+
+    private recursiveSet(path: string[], value: any): boolean {
+        if(path.length == 0) {
+            if(this.multyx.options.verbose) {
+                console.error(`Attempting to edit MultyxClientObject with no path. Setting '${this.propertyPath.join('.')}' to ${value}`);
+            }
+            return false;
+        }
+        if(path.length == 1) return this.set(path[0], value);
+
+        let next = this.get(path[0]);
+        if(next instanceof MultyxClientValue || next == undefined) {
+            if(isNaN(parseInt(path[1]))) {
+                this.set(path[0], new EditWrapper({}));
+                next = this.get(path[0]) as MultyxClientObject;
+            } else {
+                this.set(path[0], new EditWrapper([]));
+                next = this.get(path[0]) as MultyxClientList;
+            }
+        }
+        return next.set(path.slice(1), value);
     }
     
-    set(property: any, value: any): boolean {
-        if(value === undefined) return this.delete(property);
+    set(property: string | string[], value: any): boolean {
+        if(Array.isArray(property)) return this.recursiveSet(property, value);
 
-        // Only create new MultyxClientItem when needed
-        if(this.object[property] instanceof MultyxClientValue) return this.object[property].set(value);
+        const serverSet = value instanceof EditWrapper;
+        const allowed = serverSet || this.editable;
+        if(serverSet || IsMultyxClientItem(value)) value = value.value;
+        if(value === undefined) return this.delete(property, serverSet);
 
-        // If value was deleted by the server
-        if(value instanceof EditWrapper && value.value === undefined) return this.delete(property, true);
+        // Only create new MultyxClientItem when needed
+        if(this.object[property] instanceof MultyxClientValue && typeof value != 'object') {
+            return this.object[property].set(serverSet ? new EditWrapper(value) : value);
+        }
         
         // Attempting to edit property not editable to client
-        if(!(value instanceof EditWrapper) && !this.editable) {
+        if(!allowed) {
             if(this.multyx.options.verbose) {
                 console.error(`Attempting to set property that is not editable. Setting '${this.propertyPath.join('.') + '.' + property}' to ${value}`);
             }
             return false;
         }
-        
+
         // Creating a new value
-        this.object[property] = new (MultyxClientItemRouter(
-            value instanceof EditWrapper ? value.value : value
-        ))(this.multyx, value, [...this.propertyPath, property], this.editable);
-
-        // 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.setterListeners) {
-            this.multyx[Add](() => {
-                if(this.has(property)) listener(property, this.get(property));
-            });
+        this.object[property] = new (MultyxClientItemRouter(value))(
+            this.multyx,
+            serverSet ? new EditWrapper(value) : value,
+            [...this.propertyPath, property],
+            this.editable
+        );
+
+        const propSymbol = Symbol.for("_" + this.propertyPath.join('.') + '.' + property);
+        if(this.multyx.events.has(propSymbol)) {
+            this.multyx[Done].push(...this.multyx.events.get(propSymbol).map(e =>
+                () => e(this.object[property])
+            ));
         }
 
-        // Relay change to server if not edit wrapped
-        if(!(value instanceof EditWrapper)) this.multyx.ws.send(Message.Native({
-            instruction: 'edit',
-            path: this.propertyPath,
-            value: this.object[property].value
-        }));
-        
         return true;
     }
 
@@ -131,17 +178,6 @@ export default class MultyxClientObject {
         return true;
     }
 
-    /**
-     * Create a callback function that gets called for any current or future property in object
-     * @param callbackfn Function to call for every property
-     */
-    forAll(callbackfn: (key: any, value: any) => void) {
-        for(let prop in this.object) {
-            callbackfn(prop, this.get(prop));
-        }
-        this.setterListeners.push(callbackfn);
-    }
-
     keys(): any[] {
         return Object.keys(this.object);
     }
@@ -158,13 +194,24 @@ export default class MultyxClientObject {
         return entryList;
     }
 
+    /**
+     * Wait for a specific property to be set
+     * @param property Property to wait for
+     * @returns Promise that resolves when the value is set
+     */
+    await(property: string) {
+        if(this.has(property)) return Promise.resolve(this.get(property));
+        const propSymbol = Symbol.for("_" + this.propertyPath.join('.') + '.' + property);
+        return new Promise(res => this.multyx.on(propSymbol, res));
+    }
+
     /**
      * Unpack constraints from server
      * @param constraints Packed constraints object mirroring MultyxClientObject shape
      */
     [Unpack](constraints: RawObject) {
         for(const prop in constraints) {
-            this.object[prop][Unpack](constraints[prop]);
+            this.object[prop]?.[Unpack](constraints[prop]);
         }
     }
 }

package/src/items/value.ts

@@ -1,7 +1,7 @@
 import type Multyx from '../';
 import { Message } from "../message";
 import { Constraint, RawObject, Value } from "../types";
-import { BuildConstraint, EditWrapper, Unpack } from '../utils';
+import { BuildConstraint, Done, Edit, EditWrapper, Unpack } from '../utils';
 
 export default class MultyxClientValue {
     private _value: Value;
@@ -10,20 +10,29 @@ export default class MultyxClientValue {
     editable: boolean;
     constraints: { [key: string]: Constraint };
 
-    private interpolator: undefined | {
-        get: () => Value,
-        set: () => void,
-        history: { time: number, value: Value }[]
-    };
-
+    private readModifiers: ((value: Value) => Value)[] = [];
+    private editCallbacks: ((value: Value, previousValue: Value) => void)[] = [];
+    
     get value() {
-        if(this.interpolator) return this.interpolator.get();
-        return this._value;
+        return this.readModifiers.reduce((value, modifier) => modifier(value), this._value);
     }
 
     set value(v) {
         this._value = v;
-        if(this.interpolator) this.interpolator.set();
+    }
+
+    addReadModifier(modifier: (value: Value) => Value) {
+        this.readModifiers.push(modifier);
+    }
+
+    addEditCallback(callback: (value: Value, previousValue: Value) => void) {
+        this.editCallbacks.push(callback);
+    }
+
+    [Edit](updatePath: string[], value: any) {
+        if(updatePath.length != 0) return;
+
+        this.set(new EditWrapper(value));
     }
 
     constructor(multyx: Multyx, value: Value | EditWrapper<Value>, propertyPath: string[] = [], editable: boolean) {
@@ -32,11 +41,20 @@ export default class MultyxClientValue {
         this.multyx = multyx;
         this.constraints = {};
         this.set(value);
+
+        const propSymbol = Symbol.for("_" + this.propertyPath.join('.'));
+        if(this.multyx.events.has(propSymbol)) {
+            this.multyx[Done].push(...this.multyx.events.get(propSymbol).map(e =>
+                () => e(this.value)
+            ));
+        }
     }
 
     set(value: Value | EditWrapper<Value>) {
         if(value instanceof EditWrapper) {
+            const oldValue = this.value;
             this.value = value.value;
+            this.editCallbacks.forEach(fn => fn(value.value, oldValue));
             return true;
         }
 
@@ -53,7 +71,7 @@ export default class MultyxClientValue {
             const fn = this.constraints[constraint];
             nv = fn(nv);
             
-            if(nv === null) {    
+            if(nv === null) {
                 if(this.multyx.options.verbose) {
                     console.error(`Attempting to set property that failed on constraint. Setting '${this.propertyPath.join('.')}' to ${value}, stopped by constraint '${constraint}'`);
                 }
@@ -76,6 +94,14 @@ export default class MultyxClientValue {
         return true;
     }
 
+    bindElement(element: HTMLElement) {
+        this.addEditCallback((value, previousValue) => {
+            if(value !== previousValue) {
+                element.innerText = value.toString();
+            }
+        });
+    }
+
     /**
      * Unpack constraints sent from server and store 
      * @param constraints Packed constraints from server
@@ -88,61 +114,6 @@ export default class MultyxClientValue {
         }
     }
 
-    /**
-     * Linearly interpolate value across frames
-     * Will run 1 frame behind on average
-     */
-    Lerp() {
-        this.interpolator = {
-            history: [
-                { value: this._value, time: Date.now() },
-                { value: this._value, time: Date.now() }
-            ],
-            get: () => {
-                const [e, s] = this.interpolator.history;
-                const ratio = Math.min(1, (Date.now() - e.time) / Math.min(250, e.time - s.time));
-                if(Number.isNaN(ratio) || typeof e.value != 'number' || typeof s.value != 'number') return e.value;
-                return e.value * ratio + s.value * (1 - ratio);
-            },
-            set: () => {
-                this.interpolator.history.pop();
-                this.interpolator.history.unshift({
-                    value: this._value,
-                    time: Date.now()
-                });
-            }
-        }
-    }
-
-    PredictiveLerp() {
-        this.interpolator = {
-            history: [
-                { value: this._value, time: Date.now() },
-                { value: this._value, time: Date.now() },
-                { value: this._value, time: Date.now() }
-            ],
-            get: () => {
-                const [e, s, p] = this.interpolator.history;
-                const ratio = Math.min(1, (Date.now() - e.time) / (e.time - s.time));
-
-                if(Number.isNaN(ratio) || typeof p.value != 'number') return e.value;
-                if(typeof e.value != 'number' || typeof s.value != 'number') return e.value;
-
-                // Speed changed too fast, don't interpolate, return new value
-                if(Math.abs((e.value - s.value) / (s.value - p.value) - 1) > 0.2) return e.value;
-
-                return e.value * (1 + ratio) - s.value * ratio;
-            },
-            set: () => {
-                this.interpolator.history.pop();
-                this.interpolator.history.unshift({
-                    value: this._value,
-                    time: Date.now()
-                });
-            }
-        }
-    }
-
     /* Native methods to allow MultyxValue to be treated as primitive */
     toString = () => this.value.toString();
     valueOf = () => this.value;

package/src/message.ts

@@ -1,5 +1,58 @@
 import { Update } from "./types";
 
+export function UncompressUpdate(str: string) {
+    const [target, ...escapedData] = str.split(/;,/);
+    const instruction = target[0];
+    const specifier = target.slice(1).replace(/;_/g, ';');
+    const data = escapedData.map(d => d.replace(/;_/g, ';')).map(d => d == "undefined" ? undefined : JSON.parse(d));
+
+    if(instruction == '0') return { instruction: 'edit', team: false, path: specifier.split('.'), value: data[0] };
+    if(instruction == '1') return { instruction: 'edit', team: true, path: specifier.split('.'), value: data[0] };
+
+    if(instruction == '2') return { instruction: 'self', property: "controller", data: JSON.parse(specifier) };
+    if(instruction == '3') return { instruction: 'self', property: "uuid", data: JSON.parse(specifier) };
+    if(instruction == '4') return { instruction: 'self', property: "constraint", data: JSON.parse(specifier) };
+    if(instruction == '9') return { instruction: 'self', property: "space", data: JSON.parse(specifier) };
+
+    if(instruction == '5') return { instruction: 'resp', name: specifier, response: data[0] };
+    if(instruction == '6') return { instruction: 'conn', uuid: specifier, publicData: data[0] };
+    if(instruction == '7') return { instruction: 'dcon', clientUUID: specifier };
+    
+    if(instruction == '8') return {
+        instruction: 'init',
+        client: JSON.parse(specifier),
+        tps: data[0],
+        constraintTable: data[1],
+        clients: data[2],
+        teams: data[3]
+    };
+}
+
+export function CompressUpdate(update: Update) {
+    let code, pieces;
+    if(update.instruction == 'edit') {
+        code = 0;
+        pieces = [
+            update.path.join('.'),
+            JSON.stringify(update.value)
+        ];
+    } else if(update.instruction == 'input') {
+        code = 1;
+        pieces = [update.input];
+    } else if(update.instruction == 'resp') {
+        code = 2;
+        pieces = [update.name, JSON.stringify(update.response)];
+    }
+
+    if(!pieces) return '';
+    let compressed = code;
+    for(let i = 0; i < pieces.length; i++) {
+        compressed += pieces[i].replace(/;/g, ';_');
+        if(i < pieces.length - 1) compressed += ';,';
+    }
+    return JSON.stringify([compressed]);
+}
+
 export class Message {
     name: string;
     data: any;
@@ -13,20 +66,23 @@ export class Message {
         this.native = native;
     }
 
-    static BundleOperations(deltaTime, operations) {
+    static BundleOperations(deltaTime: number, operations: Update[]) {
         if(!Array.isArray(operations)) operations = [operations];
         return JSON.stringify(new Message('_', { operations, deltaTime }));
     }
 
     static Native(update: Update) {
-        return JSON.stringify(new Message('_', update, true));
+        return CompressUpdate(update);
     }
 
     static Parse(str: string) {
         const parsed = JSON.parse(str);
-        if(parsed.name[0] == '_') parsed.name = parsed.name.slice(1);
 
-        return new Message(parsed.name, parsed.data, parsed.name == '');
+        if(Array.isArray(parsed)) {
+            return new Message('_', parsed, true);
+        }
+
+        return new Message(parsed.name ?? '', parsed.data ?? '', false);
     }
 
     static Create(name: string, data: any) {

package/src/types.ts

@@ -14,4 +14,10 @@ export type InputUpdate = {
     data?: RawObject<Value>
 };
 
-export type Update = EditUpdate | InputUpdate;
+export type ResponseUpdate = {
+    instruction: 'resp',
+    name: string,
+    response: any
+};
+
+export type Update = EditUpdate | InputUpdate | ResponseUpdate;

package/src/utils.ts

@@ -3,6 +3,7 @@ import { Constraint, RawObject, Value } from "./types";
 export const Unpack = Symbol("unpack");
 export const Done = Symbol("done");
 export const Add = Symbol("add");
+export const Edit = Symbol("edit");
 
 export class EditWrapper<T> {
     value: T;