var fighter = (function(CodeMirror){
    var socket = io.connect(window.location.origin);

    var code = document.getElementById('code');
    code.textContent = '/* move ship left */\nleft();'

    var editor = CodeMirror.fromTextArea(code, {
	mode: 'javascript',
	lineNumbers: true
    });
    editor.on('change', function(instance, change){
	socket.emit('change', {
	    timestamp: (new Date()).getTime(),
	    code: instance.getValue()
	});
    });

    var canvas = document.getElementById('top');
    context = canvas.getContext('2d');

    var Fighter = function(context, options) {
	options = options || {};
	this.context = context;
	this.x = options.x || 0;
	this.y = options.y || 0;
	this.vx = options.vx || 3;
	this.vy = options.vy || 3;
	this.width = options.width || 10;
	this.height = options.height || 20;
    }
    Fighter.prototype.draw = function() {
	var context = this.context;
	context.beginPath();
	context.moveTo(this.x, this.y);
	context.lineTo(this.x + this.width/2, this.y + this.height);
	context.lineTo(this.x + this.width, this.y);
	context.closePath();
	context.fill();
    }
    Fighter.prototype.wrap = function(){
	this.wrapX();
	this.wrapY();
    }
    Fighter.prototype.wrapX = function(){
	if (this.x > canvas.width) {
	    this.x -= canvas.width;
	}
	if (this.x < 0) {
	    this.x += canvas.width;
	}
    }
    Fighter.prototype.wrapY = function(){
	if (this.y > canvas.height) {
	    this.y -= canvas.height;
	}
	if (this.y < 0) {
	    this.y += canvas.height;
	}
    }
    Fighter.prototype.left = function(){
	this.x -= this.vx;
	this.wrap();
    }
    Fighter.prototype.right = function(){
	this.x += this.vx;
	this.wrap();
    }
    Fighter.prototype.down = function(){
	this.y -= this.vy;
	this.wrap();
    }
    Fighter.prototype.up = function(){
	this.y += this.vy;
	this.wrap();
    }

    var fighter = new Fighter(context, {
	x: 10,
	y: 10
    });

    var template = pico('with(this){ {{code}} }');
    var controller = function() {
	var controlCode = template({ code: editor.getValue() });
	return Function(controlCode);
    };

    (function renderLoop(){
	requestAnimationFrame(renderLoop);
	canvas.width = canvas.width;
	controller().call(fighter);
	fighter.draw();
    })();

    var triggered = false;
    socket.on('state', function(state){
	if (!triggered) {
	    console.log(state);
	    triggered = true;
	}
    });

    return fighter;
})(CodeMirror)

@@ -690,64 +690,8 @@
  0;%0A
-%09this.vx = options.vx %7C%7C 3;%0A%09this.vy = options.vy %7C%7C 3;%0A
 %09thi
@@ -1047,980 +1047,96 @@
   %7D%0A
-    Fighter.prototype.wrap = function()%7B%0A%09this.wrapX();%0A%09this.wrapY();%0A    %7D%0A    Fighter.prototype.wrapX = function()%7B%0A%09if (this.x %3E canvas.width) %7B%0A%09    this.x -= canvas.width;%0A%09%7D%0A%09if (this.x %3C 0) %7B%0A%09    this.x += canvas.width;%0A%09%7D%0A    %7D%0A    Fighter.prototype.wrapY = function()%7B%0A%09if (this.y %3E canvas.height) %7B%0A%09    this.y -= canvas.height;%0A%09%7D%0A%09if (this.y %3C 0) %7B%0A%09    this.y += canvas.height;%0A%09%7D%0A    %7D%0A    Fighter.prototype.left = function()%7B%0A%09this.x -= this.vx;%0A%09this.wrap();%0A    %7D%0A    Fighter.prototype.right = function()%7B%0A%09this.x += this.vx;%0A%09this.wrap();%0A    %7D%0A    Fighter.prototype.down = function()%7B%0A%09this.y -= this.vy;%0A%09this.wrap();%0A    %7D%0A    Fighter.prototype.up = function()%7B%0A%09this.y += this.vy;%0A%09this.wrap();%0A    %7D%0A%0A    var fighter = new Fighter(context, %7B%0A%09x: 10,%0A%09y: 10%0A    %7D);%0A%0A    var template = pico('with(this)%7B %7B%7Bcode%7D%7D %7D');%0A    var controller = function() %7B%0A%09var controlCode = template(%7B code: editor.getValue() %7D);%0A%09return Function(controlCode);%0A    %7D;%0A
+%0A    var fighter = new Fighter(context, %7B%0A%09x: 10,%0A%09y: 10%0A    %7D);%0A%0A    var fighters = %5B%5D;
 %0A   
@@ -1231,25 +1231,33 @@
 h;%0A%09
-controller().call
+fighters.forEach(function
 (fig
@@ -1261,19 +1261,23 @@
 fighter)
-;
+%7B
 %0A%09
+    
 fighter.
@@ -1280,24 +1280,28 @@
 ter.draw();%0A
+%09%7D)%0A
     %7D)();%0A%0A 
@@ -1303,35 +1303,8 @@
 );%0A%0A
-    var triggered = false;%0A
     
@@ -1344,76 +1344,92 @@
 )%7B%0A%09
-if (!triggered) %7B%0A%09    console.log(state);%0A%09    triggered = true;
+fighters = state.map(function(object)%7B%0A%09    return new Fighter(context, object)
 %0A%09%7D
+);
 %0A   

read game state from server