guest_worker/www/assignment.js

let url = window.location.origin.replace('http', 'ws') +'/ws?' + window.location.search.substring(1);
let svgEl = document.getElementById("canvas");
let strokeEl = document.getElementById('stroke');
let submitEl = document.getElementById('submit');
let resetEl = document.getElementById('reset');
let messageEl = document.getElementById('message');
let innerFaceEl = document.getElementById('innerface'); // wrapper within the interface


let strokes = [];
let isDrawing = false;
let hasMouseDown = false;
let currentPoint = null;

let getCoordinates = function(e) {
	// convert event coordinates into relative positions on x & y axis
	let box = innerFaceEl.getBoundingClientRect();
	let x = (e.x - box['left']) / box['width'];
	let y = (e.y - box['top']) / box['height'];
	return {'x': x, 'y': y};
}

let isInsideBounds = function(pos) {
	return !(pos['x'] < 0 || pos['y'] < 0 || pos['x'] > 1 || pos['y'] > 1);
}
let isInsideDrawingBounds = function(pos) {
	if(pos['x'] > xPadding && pos['x'] < (xPadding+drawWidthFactor) && pos['y'] > yPadding && pos['y'] < yPadding+drawHeightFactor) {
		return true;
	}
	return false;
}

let draw = function(e) {
    let pos = getCoordinates(e);
    
    if(!isInsideBounds(pos)) {
    	// outside of bounds
    	return;
    }
    
    if(isDrawing && !isInsideDrawingBounds(pos)){
    	stopDrawing(pos);
    }
    if(!isDrawing && hasMouseDown && isInsideDrawingBounds(pos)){
    	isDrawing = true;
    }
    
    if(isDrawing) {
        strokes.push([pos['x'], pos['y'], 0]);
        let d = strokes2D(strokes);
        strokeEl.setAttribute('d', d);
    }

    //console.log([pos['x'], pos['y']], isDrawing);
    socket.send(JSON.stringify({
        'action': 'move',
        'direction': [pos['x'], pos['y']],
        'mouse': isDrawing,
    }));
};

let stopDrawing = function(pos) {
	if(!isDrawing) {
    	return;
    }
    isDrawing = false;
    //document.body.removeEventListener('mousemove', draw);
    

    if(strokes.length > 0){
        // mark point as last of stroke
        strokes[strokes.length - 1][2] = 1;
    }
    socket.send(JSON.stringify({
        'action': 'up',
        'direction': [pos['x'], pos['y']]
    }));
}

let penup = function(e) {
    if(!hasMouseDown) {
        return;
    }
    hasMouseDown = false;
    
    let pos = getCoordinates(e);
	stopDrawing(pos);
};
let strokes2D = function(strokes) {
    // strokes to a d attribute for a path
    let d = "";
    let last_stroke = undefined;
    let cmd = "";
    for (let stroke of strokes) {
        if(!last_stroke) {
            d += `M${stroke[0]*svgWidth*10},${stroke[1]*svgHeight*10} `;
            cmd = 'M';
        } else {
            if (last_stroke[2] == 1)  {
                d += " m";
                cmd = 'm';
            } else if (cmd != 'l') {
                d+=' l ';
                cmd = 'l';
            }
            let rel_stroke = [stroke[0] - last_stroke[0], stroke[1] - last_stroke[1]];
            d += `${rel_stroke[0]*svgWidth*10},${rel_stroke[1]*svgHeight*10} `;
        }
        last_stroke = stroke;

    }
    return d;
}

let startDrawing = function(e){
    hasMouseDown = true;
};

/*let reset = function() {
	strokes = [];
    strokeEl.setAttribute('d', "");
    socket.send(JSON.stringify({
        'action': 'reset',
    }));
}*/


let socket = new WebSocket(url);
document.body.addEventListener('mousemove', draw);
document.body.addEventListener('mouseup', penup);
document.body.addEventListener('mousedown', startDrawing);

socket.addEventListener('message', function(e){
	let msg = JSON.parse(e.data);
	console.log('receive', msg);
	if(msg['action'] == 'submitted') {
		document.body.classList.add('submitted');
		messageEl.innerHTML = msg['msg'];
		svgEl.removeEventListener('mousedown', startDrawing);
	}
	
	// submit the completion form only after the shape has been sent to the server
	let u = new URL(location);
	let url = u.searchParams.get('turkSubmitTo');
	let formEl = document.getElementById('finishedForm');
	document.getElementById('surveycode').value = msg['code'];
	formEl.action = url + '/mturk/externalSubmit';
	formEl.submit();
	
//	let assignmentId = u.searchParams.get('assignmentId');
//	var formData = new FormData();
//	formData.append('assigmentId', assignmentId);
//	let r = new Request(url + '/mturk/externalSubmit', {method: 'POST', body: formData});
//	fetch(r).then(function(response) {
//		  console.log(response);
//	});
});

//resetEl.addEventListener('click', reset);
submitEl.addEventListener('click', function(e){
	if(!strokes.length){
		alert('please draw before submitting');
		return;
	}
	
	socket.send(JSON.stringify({
        'action': 'submit',
        'd': strokeEl.getAttribute('d')
    }));
	
	document.body.removeEventListener('mousemove', draw);
    document.body.removeEventListener('mouseup', penup);
    document.body.removeEventListener('mousedown', startDrawing);
});