var fc = require('fc');
var hsv = require('hsv2rgb');
var TAU = Math.PI*2;

var planets = [{
  center: [0, 0],
  color: 'rgba(255, 0, 0, .2)',
  stroke: 'rgba(255, 0, 0, 1)',
  radius: 100,
  rings: 5
}];

var player = window.player = {
  center: [0, 0],
  planet: 0,
  ring: 3,
  angle: 0,
  velocity: .05
};


var ctx = fc(function() {
  ctx.clear();

  var w = ctx.canvas.width;
  var h = ctx.canvas.height;
  var hw = (w/2)|0;
  var hh = (h/2)|0;
  ctx.translate(hw, hh)

  ctx.scale(2, 2);
  var planet = planets[player.planet];
  var x = Math.cos(player.angle) * planet.radius + player.ring * 10;
  var y = Math.sin(player.angle) * planet.radius + player.ring * 10;
console.log(x, y)
  ctx.translate(x, y);

  planets.forEach(function(planet) {
    ctx.translate(planet.center[0], planet.center[1]);
    ctx.beginPath();
      ctx.fillStyle = planet.color;
      ctx.strokeStyle = planet.stroke;
      ctx.arc(0, 0, planet.radius, 0, TAU, false);
      ctx.fill();
      ctx.stroke();

    for (var i=0; i<planet.rings; i++) {
      ctx.beginPath()
        var r = planet.radius + (i + 1) * 10;
        ctx.moveTo(r, 0);
        ctx.arc(0, 0, r, 0, TAU, false)
        ctx.strokeStyle = "grey";
        ctx.stroke();
    }
  });

  player.angle +=  player.velocity / player.ring;
  ctx.save()
    ctx.rotate(player.angle + Math.PI / 2);
    ctx.translate(0, planet.radius + player.ring * 10, planet.radius + player.ring * 10);

    ctx.beginPath()
      ctx.arc(0, 0, 5, 0, TAU, false);
      ctx.fillStyle = 'orange';
      ctx.fill();
  ctx.restore();


}, true)