desk2/client/index.js

// NEXT: fire events for brush changes

document.addEventListener('DOMContentLoaded', main);

const config = {
    ws_url: 'ws://192.168.100.2/ws/', 
    ping_url: 'http://192.168.100.2/api/ping',
    image_url: 'http://192.168.100.2/images/',
    sync_timeout: 1000,
    ws_reconnect_timeout: 2000,
    brush_preview_timeout: 1000,
    second_finger_timeout: 500,
    buffer_first_touchmoves: 5,
    debug_print: true,
    min_zoom: 0.01,
    max_zoom: 100.0,
    initial_offline_timeout: 1000,
    default_color: 0x00,
    default_width: 8,
};

const EVENT = Object.freeze({
    PREDRAW: 10,
    SET_COLOR: 11,
    SET_WIDTH: 12,

    STROKE: 20,
    RULER: 21, /* gets re-written with EVENT.STROKE before sending to server */

    UNDO: 30,
    REDO: 31,

    IMAGE: 40,
    IMAGE_MOVE: 41,

    ERASER: 50,
});

const MESSAGE = Object.freeze({
    INIT: 100,
    SYN: 101,
    ACK: 102,
    FULL: 103,
    FIRE: 104,
    JOIN: 105,
});

function main() {
    const state = {
        'online': false,
        'me': null,

        'canvas': {
            'offset': { 'x': 0, 'y': 0 },
            'zoom': 1.0,
        },

        'cursor': {
            'x': 0,
            'y': 0,
        },

        'sn': 0,
        'lsn': 0,
        'server_lsn': 0,

        'touch': {
            'moves': 0,
            'drawing': false,
            'moving': false,
            'waiting_for_second_finger': false,
            'first_finger_position': null,
            'second_finger_position': null,
            'buffered': [],
            'ids': [],
        },

        'moving': false,
        'drawing': false,
        'spacedown': false,

        'moving_image': null,

        'current_strokes': {},

        'queue': [],
        'events': [],

        'tools': {
            'active': null,
            'active_element': null,
        },

        'colors': {
            'active_element': null,
        },

        'timers': {
            'hide_preview': null,
            'offline_toast': null,
            'raf': false,
        },

        'players': {},
    };

    const context = {
        'canvas': null,
        'gl': null,
        'programs': {},
        'buffers': {},
        'locations': {},
        'textures': {},
        
        'dynamic_positions': {},
        'dynamic_colors': {},

        'quad_positions': [],
        'quad_texcoords': [],
        'static_positions': [],
        'static_colors': [],
        'static_positions_f32': new Float32Array(0),
        'dynamic_positions_f32': new Float32Array(0),
        'static_colors_u8': new Uint8Array(0),
        'dynamic_colors_u8': new Uint8Array(0),
        'quad_positions_f32': new Float32Array(0),
        'quad_texcoords_f32': new Float32Array(0),
        'bgcolor': {'r': 1.0, 'g': 1.0, 'b': 1.0},

        'active_image': null,
    };

    const url = new URL(window.location.href);
    const parts = url.pathname.split('/');
    
    state.desk_id = parts.length > 0 ? parts[parts.length - 1] : 0;

    init_webgl(state, context);
    init_listeners(state, context);
    init_tools(state);
    
    ws_connect(state, context, true);

    schedule_draw(state, context);

    state.timers.offline_toast = setTimeout(() => ui_offline(), config.initial_offline_timeout);
}