import Segment from '../../lib/segment';
import Slider from '../../lib/slider';

window.onload = () => {
  const canvas = document.getElementById('canvas') as HTMLCanvasElement,
        context = canvas.getContext('2d')!,
        segment0 = new Segment(100, 20),
        segment1 = new Segment(100, 20),
        slider0 = new Slider(-90, 90, 0),
        slider1 = new Slider(-160, 0, 0);

  segment0.x = segment0.y = 100;

  slider0.x = 320;
  slider0.y = 20;
  slider0.captureMouse(canvas);
  slider0.onchange = drawFrame;

  slider1.x = 340;
  slider1.y = 20;
  slider1.captureMouse(canvas);
  slider1.onchange = drawFrame;

  function 
 () {
    context.clearRect(0, 0, canvas.width, canvas.height);

    segment0.rotation = slider0.value * Math.PI / 180;
    segment1.rotation = segment0.rotation + slider1.value * Math.PI / 180;
    segment1.x = segment0.getPin().x;
    segment1.y = segment0.getPin().y;

    segment0.draw(context);
    segment1.draw(context);
  
    slider0.draw(context);
    slider1.draw(context);
  }

  drawFrame();
};
drawFrame