function init()
{
    websocket = new WebSocket('ws://192.168.1.246:8000');
    websocket.onopen = function(evt) { onOpen(evt) };
    websocket.onclose = function(evt) { onClose(evt) };
    websocket.onmessage = function(evt) { handle_message(evt.data) };
    websocket.onerror = function(evt) { onError(evt) };
    canvas = document.getElementById('game');
    R = canvas.width;
    document.onkeyup = function(evt) {
    var key = evt.key;
    if (
        ['a','d','w'].includes(key)
    ) {
        if (keydown == key) {
        websocket.send(key + ' ' + (Date.now()/1000.-keystart).toString());
        }
    }
    }
    document.onkeydown = function(evt) {
    var key = evt.key;
    if (['a','d','w'].includes(key)) {
        keydown = key;
        keystart = Date.now()/1000.;
    }
    }
    context = canvas.getContext('2d');
    setTimeout(update_game,0);
}

function update_game() {
    setTimeout(update_game,0);
    context.clearRect(0,0,500,500);
    if (!playing) {return;}
    var time = Date.now()/1000.0;
    var dt = time-start_time-ref_time;
    var coords = coordinates(dt);
    var x = coords[0];
    var y = coords[1];
    context.beginPath();
    context.arc(x,y,r,0,2*Math.PI);
    context.stroke();
    var adt = time-start_time-a_ref_time;
    var a_coords = a_coordinates(adt);
    var ax = a_coords[0];
    var ay = a_coords[1];
    context.beginPath();
    context.arc(ax,ay,ar,0,2*Math.PI);
    context.stroke();
    if (detector==player) {
    var vels = velocities(dt);
    var vx = vels[0];
    var vy = vels[1];
    var a_vels = a_velocities(adt);
    var avx = a_vels[0];
    var avy = a_vels[1];
    if (x < r && vx < 0) {
        websocket.send('j');
    }
    else if (x > R-r && vx > 0) {
        websocket.send('l');
    }
    else if (y < r && vy < 0) {
        websocket.send('o');
    }
    else if (y > R-r && vy > 0) {
        websocket.send('i');
    }
    else if (ay > R-ar && avy > 0) {
        websocket.send('k');
    }
    else {
        var dx = x - ax;
        var dy = y - ay;
        if (dx**2 +dy**2 < (r+ar)**2) {
        var a_vels = a_velocities(adt);
        var avx = a_vels[0];
        var avy = a_vels[1];
        var dvx = vx - avx;
        var dvy = vy - avy;
        var v_proj = dvx * dx + dvy * dy;
        if (v_proj < 0) {
            websocket.send('x');
        }
        }
    }
    }
}

function onOpen(evt)
{
    console.log('connected');
}

function onClose(evt)
{
    console.log('disconnected');
}

function handle_message(message)
{
    var fragments = message.split(' ');
    var command = fragments.shift();
    var data = fragments.pop();
    if (fragments.length) {
    var payload = fragments.pop()
    }
    if (command=='s') {
    start_time = Date.now()/1000.0;
    ref_time = 0;
    a_ref_time = 0;
    playing = true;
    player = data;
    xo = R/2;
    yo = 0;
    vxo = 0;
    vyo = 0;
    axo = R/2;
    ayo = R-ar;
    avxo = 0;
    avyo = 0;
    a_stuck = true;
    var color = {
        'a':'red','b':'blue'
    }[player];
    var player_font_div = document.querySelector('#player font');
    player_font_div.setAttribute('color',color);
    player_font_div.innerText=player;
    canvas.focus();
    }
    else if (['a','d','w','k'].includes(command)) {
    new_time = parseFloat(data);
    var dt = new_time - a_ref_time;
    a_ref_time = new_time;
    var a_coords = a_coordinates(dt);
    var ax = a_coords[0];
    var ay = a_coords[1];
    axo = ax;
    ayo = ay;
    if (command == 'k') {
        avx = 0;
        avy = 0;
        a_stuck = true;
    }
    else {
        var a_vels = a_velocities(dt);
        var avx = a_vels[0];
        var avy = a_vels[1];
        var impulse_map = {
        'a':[-leap_fraction,-leap_fraction],
        'd':[+leap_fraction,-leap_fraction],
        'w':[0,-1]
        }[command];
        var impulse = a_impulse_coeff * parseFloat(payload);
        var davx = impulse * impulse_map[0];
        var davy = impulse * impulse_map[1];
        avxo = avx + davx;
        avyo = avy + davy;
        a_stuck = false;
    }
    }
    else if (['j','l','i','o','x'].includes(command)) {
    var new_time = parseFloat(data)
    var dt = new_time-ref_time;
    ref_time = new_time;
    var coords = coordinates(dt);
    var x = coords[0];
    var y = coords[1];
    xo = x;
    yo = y;
    var vels = velocities(dt);
    var vx = vels[0];
    var vy = vels[1];
    if (['j','l','i','o'].includes(command)) {
        var vel_map = {
        'j':[-1,1],
        'l':[-1,1],
        'i':[1,-1],
        'o':[1,-1]
        }[command];
        vxo = vels[0]*vel_map[0];
        vyo = vels[1]*vel_map[1];
    }
    else if (command == 'x') {
        var adt = new_time - a_ref_time;
        var a_coords = a_coordinates(adt);
        var ax = a_coords[0];
        var ay = a_coords[1];
        var dx = x - ax;
        var dy = y - ay;
        var d2 = dx**2+dy**2;
        var a_vels = a_velocities(adt);
        var avx = a_vels[0];
        var avy = a_vels[1];
        var dvx = vx - avx;
        var dvy = vy - avy;
        var v_proj = dvx*dx + dvy*dy;
        var sat_factor = 1+1/(1+(v_proj/v_sat)**2/d2);
        console.log(sat_factor);
        var dvx = dvx - sat_factor * v_proj * dx / d2;
        var dvy = dvy - sat_factor * v_proj * dy / d2;
        vxo = avx + dvx;
        vyo = avy + dvy;
    }
    }
}

function coordinates(dt) {
    var exp_factor = Math.exp(-dt/tau)-1;
    var x = xo - tau * vxo * exp_factor
    var y = yo + v_term*dt + tau * (v_term-vyo) * exp_factor;
    return [x,y];
}

function velocities(dt) {
    var exp_term = Math.exp(-dt/tau);
    var vx = vxo * exp_term;
    var vy = vyo + (v_term-vyo)*(1-exp_term);
    return [vx,vy];
}

function a_coordinates(dt) {
    if (a_stuck) {
    var ax = axo;
    var ay = ayo;
    }
    else {
    var ax = axo + avxo * dt;
    var ay = ayo + avyo * dt + .5 * g * dt**2;
    }
    return [ax,ay];
}

function a_velocities(dt) {
    if (a_stuck) {
    var avx = 0;
    var avy = 0;
    }
    else {
    var avx = avxo;
    var avy = avyo + g*dt;
    }
    return [avx,avy];
}

function onError(evt)
{
    websocket.close();
}

var start_time;
var ref_time;
var a_ref_time;
var playing = false;
var player;
var axo;
var ayo;
var avxo;
var avyo;
var a_stuck;
var xo;
var yo;
var vxo;
var vyo;
var R;
var r = 20;
var ar = 50;
var g = 500;
var v_term = 2000;
var tau = 4.;
var impulse = 100;
var canvas;
var context;
var websocket;
var detector='a';
var keydown;
var keystart;
var leap_fraction = .3;
var a_impulse_coeff = 2000;
var v_sat = 1000;
window.onload = init;