multyx-client 0.1.0

package/src/items/object.ts

@@ -0,0 +1,170 @@
+import { Message } from "../message";
+import { RawObject } from '../types';
+import { Add, EditWrapper, Unpack } from "../utils";
+
+import type Multyx from '../index';
+import type { MultyxClientItem } from ".";
+import MultyxClientItemRouter from "./router";
+import MultyxClientValue from "./value";
+
+export default class MultyxClientObject {
+    protected object: RawObject<MultyxClientItem>;
+    private multyx: Multyx;
+    propertyPath: string[];
+    editable: boolean;
+
+    private setterListeners: ((key: any, value: any) => void)[]
+
+    get value() {
+        const parsed = {};
+        for(const prop in this.object) parsed[prop] = this.object[prop];
+        return parsed;
+    }
+
+    constructor(multyx: Multyx, object: RawObject | EditWrapper<RawObject>, propertyPath: string[] = [], editable: boolean) {
+        this.object = {};
+        this.propertyPath = propertyPath;
+        this.multyx = multyx;
+        this.editable = editable;
+
+        this.setterListeners = [];
+
+        if(object instanceof MultyxClientObject) object = object.value;
+
+        for(const prop in (object instanceof EditWrapper ? object.value : object)) {
+            this.set(prop, object instanceof EditWrapper
+                ? new EditWrapper(object.value[prop])
+                : object[prop]
+            );
+        }
+
+        if(this.constructor !== MultyxClientObject) return;
+        
+        return new Proxy(this, {
+            has: (o, p) => {
+                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, v);
+            },
+            deleteProperty: (o, p) => {
+                return o.delete(p, false);
+            }
+        });
+    }
+
+    has(property: any): boolean {
+        return property in this.object;
+    }
+
+    get(property: any): MultyxClientItem {
+        return this.object[property];
+    }
+    
+    set(property: any, value: any): boolean {
+        if(value === undefined) return this.delete(property);
+
+        // Only create new MultyxClientItem when needed
+        if(this.object[property] instanceof MultyxClientValue) return this.object[property].set(value);
+
+        // If value was deleted by the server
+        if(value instanceof EditWrapper && value.value === undefined) return this.delete(property, true);
+        
+        // Attempting to edit property not editable to client
+        if(!(value instanceof EditWrapper) && !this.editable) {
+            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));
+            });
+        }
+
+        // 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;
+    }
+
+    delete(property: any, native: boolean = false) {
+        // Attempting to edit property not editable by client
+        if(!this.editable && !native) {
+            if(this.multyx.options.verbose) {
+                console.error(`Attempting to delete property that is not editable. Deleting '${this.propertyPath.join('.') + '.' + property}'`);
+            }
+            return false;
+        }
+
+        delete this.object[property];
+
+        if(!native) {
+            this.multyx.ws.send(Message.Native({
+                instruction: 'edit',
+                path: [...this.propertyPath, property],
+                value: undefined
+            }));
+        }
+
+        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);
+    }
+
+    values(): any[] {
+        return Object.values(this.object);
+    }
+
+    entries(): [any, any][] {
+        const entryList: [any, any][] = [];
+        for(let prop in this.object) {
+            entryList.push([prop, this.get(prop)]);
+        }
+        return entryList;
+    }
+
+    /**
+     * 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]);
+        }
+    }
+}

package/src/items/router.ts

@@ -0,0 +1,5 @@
+export default function MultyxClientItemRouter(data: any) {
+    return Array.isArray(data) ? require('./list').default
+        : typeof data == 'object' ? require('./object').default
+        : require('./value').default;
+}

package/src/items/value.ts

@@ -0,0 +1,150 @@
+import type Multyx from '../';
+import { Message } from "../message";
+import { Constraint, RawObject, Value } from "../types";
+import { BuildConstraint, EditWrapper, Unpack } from '../utils';
+
+export default class MultyxClientValue {
+    private _value: Value;
+    private multyx: Multyx;
+    propertyPath: string[];
+    editable: boolean;
+    constraints: { [key: string]: Constraint };
+
+    private interpolator: undefined | {
+        get: () => Value,
+        set: () => void,
+        history: { time: number, value: Value }[]
+    };
+
+    get value() {
+        if(this.interpolator) return this.interpolator.get();
+        return this._value;
+    }
+
+    set value(v) {
+        this._value = v;
+        if(this.interpolator) this.interpolator.set();
+    }
+
+    constructor(multyx: Multyx, value: Value | EditWrapper<Value>, propertyPath: string[] = [], editable: boolean) {
+        this.propertyPath = propertyPath;
+        this.editable = editable;
+        this.multyx = multyx;
+        this.constraints = {};
+        this.set(value);
+    }
+
+    set(value: Value | EditWrapper<Value>) {
+        if(value instanceof EditWrapper) {
+            this.value = value.value;
+            return true;
+        }
+
+        // Attempting to edit property not editable to client
+        if(!this.editable) {
+            if(this.multyx.options.verbose) {
+                console.error(`Attempting to set property that is not editable. Setting '${this.propertyPath.join('.')}' to ${value}`);
+            }
+            return false;
+        }
+
+        let nv = value;
+        for(const constraint in this.constraints) {
+            const fn = this.constraints[constraint];
+            nv = fn(nv);
+            
+            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}'`);
+                }
+                return false;
+            }
+        }
+
+        if(this.value === nv) {
+            this.value = nv;
+            return true;
+        }
+
+        this.value = nv;
+
+        this.multyx.ws.send(Message.Native({
+            instruction: 'edit',
+            path: this.propertyPath,
+            value: nv
+        }));
+        return true;
+    }
+
+    /**
+     * Unpack constraints sent from server and store 
+     * @param constraints Packed constraints from server
+     */
+    [Unpack](constraints: RawObject) {
+        for(const [cname, args] of Object.entries(constraints)) {
+            const constraint = BuildConstraint(cname, args as Value[]);
+            if(!constraint) continue;
+            this.constraints[cname] = constraint;
+        }
+    }
+
+    /**
+     * 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;
+    [Symbol.toPrimitive] = () => this.value;
+}

package/src/message.ts

@@ -0,0 +1,41 @@
+import { Update } from "./types";
+
+export class Message {
+    name: string;
+    data: any;
+    time: number;
+    native: boolean;
+
+    private constructor(name: string, data: any, native: boolean = false) {
+        this.name = name;
+        this.data = data;
+        this.time = Date.now();
+        this.native = native;
+    }
+
+    static BundleOperations(deltaTime, operations) {
+        if(!Array.isArray(operations)) operations = [operations];
+        return JSON.stringify(new Message('_', { operations, deltaTime }));
+    }
+
+    static Native(update: Update) {
+        return JSON.stringify(new Message('_', update, true));
+    }
+
+    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 == '');
+    }
+
+    static Create(name: string, data: any) {
+        if(name.length == 0) throw new Error('Multyx message cannot have empty name');
+        if(name[0] == '_') name = '_' + name;
+        
+        if(typeof data === 'function') {
+            throw new Error('Multyx data must be JSON storable');
+        }
+        return JSON.stringify(new Message(name, data));
+    }
+}

package/src/options.ts

@@ -0,0 +1,15 @@
+export type Options = {
+    port?: number,
+    secure?: boolean,
+    uri?: string,
+    verbose?: boolean,
+    logUpdateFrame?: boolean,
+};
+
+export const DefaultOptions: Options = {
+    port: 443,
+    secure: false,
+    uri: 'localhost',
+    verbose: false,
+    logUpdateFrame: false,
+};

package/src/types.ts

@@ -0,0 +1,17 @@
+export type RawObject<V=any> = { [key: string | number | symbol]: V };
+export type Value = string | number | boolean;
+export type Constraint = (n: Value) => Value | null;
+
+export type EditUpdate = {
+    instruction: 'edit',
+    path: string[],
+    value: any
+};
+
+export type InputUpdate = {
+    instruction: 'input',
+    input: string,
+    data?: RawObject<Value>
+};
+
+export type Update = EditUpdate | InputUpdate;

package/src/utils.ts

@@ -0,0 +1,78 @@
+import { Constraint, RawObject, Value } from "./types";
+
+export const Unpack = Symbol("unpack");
+export const Done = Symbol("done");
+export const Add = Symbol("add");
+
+export class EditWrapper<T> {
+    value: T;
+
+    constructor(value: T) {
+        this.value = value;
+    }
+}
+
+/**
+ * Set a customized interpolation curve for values to follow 
+ * @param values Slices to interpolate through. Time must be between 0 and 1, while progress is the percentage between the old value and new value at the respective time, where 0 represents old value and 1 represents new value 
+ * @example
+ * ```js
+ * car.get('speed').interpolate([
+ *  { time: 0, progress: 0 },
+ *  { time: 0.2, progress: 0.6 },
+ *  { time: 0.4, progress: 1.2 },
+ *  { time: 0.6, progress: 1.4 },
+ *  { time: 0.8, progress: 1.2 },
+ *  { time: 1, progress: 1 }
+ * ]);
+ * ``` 
+ */
+export function Interpolate(
+    object: RawObject,
+    property: string,
+    interpolationCurve: {
+        time: number,
+        progress: number,
+    }[]
+) {
+    let start = { value: object[property], time: Date.now() };
+    let end = { value: object[property], time: Date.now() };
+    
+    Object.defineProperty(object, property, {
+        get: () => {
+            const time = end.time - start.time;
+            let lower = interpolationCurve[0];
+            let upper = interpolationCurve[0];
+
+            for(const slice of interpolationCurve) {
+                if(time > slice.time && slice.time > lower.time) lower = slice;
+                if(time < slice.time && slice.time < upper.time) upper = slice;
+            }
+
+            const sliceTime = (time - lower.time) / (upper.time - lower.time);
+            const ratio = lower.progress + sliceTime * (upper.progress - lower.progress);
+
+            if(Number.isNaN(ratio)) return start.value;
+            return end.value * ratio + start.value * (1 - ratio);
+        },
+        set: (value) => {
+            // Don't lerp between edit requests sent in same frame
+            if(Date.now() - end.time < 10) {
+                end.value = value;
+                return true;
+            }
+            start = { ...end };
+            end = { value, time: Date.now() }
+            return true;
+        }
+    });
+}
+
+export function BuildConstraint(name: string, args: Value[]): Constraint | void {
+    if(name == 'min') return n => n >= args[0] ? n : args[0];
+    if(name == 'max') return n => n <= args[0] ? n : args[0];
+    if(name == 'int') return n => Math.floor(n as number);
+    if(name == 'ban') return n => args.includes(n) ? null : n;
+    if(name == 'disabled') return n => args[0] ? null : n;
+    return I => I;
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "target": "es6",           // Specify the target ECMAScript version.
+        "lib": ["es2017", "dom"],
+        "module": "commonjs",          // Do not use any module system (for browser use).
+        "outDir": "./dist",
+        "rootDir": "./src",        // Specify the root directory of your TypeScript source files.
+    }
+}

package/webpack.config.js

@@ -0,0 +1,13 @@
+const path = require('path');
+
+module.exports = {
+    entry: './dist/index.js',
+    output: {
+        filename: 'multyx.js',
+        path: path.resolve(__dirname),
+        library: 'Multyx', // Specify the global variable name
+        libraryTarget: 'umd', // Attach to the global object in a universal module definition (UMD) fashion
+        libraryExport: 'default'
+    },
+    mode: 'production'
+};