visualizer_canvas.js

var config = {
  planet_font: 'bold 15px Arial,Helvetica ',
  planet_pixels: [10,13,18,21,23,29],
  display_size: 640,
  display_margin: 50,
  framerate: 5
}


// Setup Context
var example = document.getElementById('display');
var ctx = example.getContext('2d');
ctx.textAlign = 'center'
ctx.font = config.planet_font


// Calucated configs
config.unit_to_pixel = (config.display_size - config.display_margin - config.display_margin ) / 24 ;


function drawFrame(data){ 
  var size = 0, x = 0, y = 0, side = 0, ships = 0, disp_x = 0, disp_y = 0;
  
  if(data.length < 200){
    return 
  }
  
  
  ctx.fillStyle = "#000";
  ctx.fillRect(0,0,config.display_size,config.display_size);
  
  
  var lines = data.split('|')
  for(var i=0; i < lines.length; i++){
    var pieces = lines[i].split(' ')
    if(pieces[0]=='P'){
      x = parseFloat(pieces[1])
      y = parseFloat(pieces[2])
      size = pieces[5]
      side = pieces[3]
      ships = pieces[4]
      
      if(side == '1'){
        ctx.fillStyle = "rgb(120,168,192)"; 
      }else if (side == '2'){
        ctx.fillStyle = "rgb(192,0,0)"; 
      }else{
        ctx.fillStyle = "rgb(72,84,84)"; 
      }
      
      disp_x = x * config.unit_to_pixel + config.display_margin
      disp_y = y * config.unit_to_pixel + config.display_margin
      ctx.beginPath();
      ctx.arc(disp_x, disp_y, config.planet_pixels[size], 0, Math.PI*2, true); 
      ctx.closePath();
      ctx.fill();
      
      ctx.fillStyle = "#fff";
      ctx.fillText(ships, (disp_x), disp_y+5)
    }else if(pieces[0]=='F'){

    }
  }
  
  
}