Untitled


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />

<style id="webmakerstyle">

</style>
</head>
<body>
<!doctype html>
<html>
  <head>
  <center><header>Life is beautiful</header>
    <title>Sweet</title>
  </center>
    <style>
    </style>
  </head>
  <body>
    <canvas id="dots" style="background:blue"></canvas>
  </body>
</html>

<script>
var data = {
  canvas: null,
  ctx: null,
  clickedDot: null,
  dots:[{x: 50, y: 50},{x: 50, y: 100}, {x: 50, y: 150}, {x: 50, y: 200},{x: 100, y: 50},{x: 100, y: 100}, {x: 100, y: 150}, {x: 100, y: 200},{x: 150, y: 50},{x: 150, y: 100}, {x: 150, y: 150}, {x: 150, y: 200},{x: 200, y: 50},{x: 200, y: 100}, {x: 200, y: 150}, {x: 200, y: 200}],
  selected:[],
  beginning:[],
  end:[],
  newGame: true
};


function circleCollision (c1, c2){
  var a = c1.r * c2.r,
      x = c1.x - c2.x,
      xinv = c1.x + c2.x,
      y = c1.y - c2.y,
      yinv = c1.y + c2.y;
  if ((x <3)&&(x> -15)&&(y< -15)&&(y> -36)) return true;

  else return false;
}

function prepCanvas(){
  var res = window.devicePixelRatio || 1,
      scale = 1 / res;

  data.canvas = document.getElementById("dots");

  data.ctx = data.canvas.getContext("2d");

  data.canvas.width = window.innerWidth * res;

  data.canvas.height = window.innerHeight * res;

  data.canvas.style.width = window.innerWidth + "px";

  data.canvas.style.height = window.innerHeight + "px";

  data.ctx.scale(res, res);

  data.canvas.addEventListener("mousedown", function(e) {
    checkForDot(e);

  })
}

function drawDots(){
  var i = 0;
  for(;i<data.dots.length; i++){
    var d = data.dots[i];
    data.ctx.beginPath();
    data.ctx.arc(d.x, d.y, 10, 0, 2*Math.PI);
    data.ctx.fillStyle = "#777";
    data.ctx.fill();
    data.ctx.closePath();
  }
}

function drawLine (toDot){
  data.ctx.beginPath();
  data.ctx.moveTo(data.clickedDot.x, data.clickedDot.y);
  data.ctx.lineTo(toDot.x, toDot.y);
  data.ctx.lineWidth = 5;
  data.ctx.strokeStyle = "#777";
  data.ctx.stroke();
  data.ctx.closePath();
}

function checkForDot(e){
  var i = 0, col = null;
  for(;i<data.dots.length; i++){
    var d = data.dots[i],
        c1 = {x: d.x, y: d.y, r: 10},
        c2 = {x: e.pageX, y: e.pageY, r: 10};
    if (circleCollision(c1, c2)) {
      col = d;

    }
  }
  if (col !== null){

    if((data.clickedDot !== null)&&(data.clickedDot.x-col.x > -51)&&(col.x - data.clickedDot.x > - 51)&&(data.clickedDot.y-col.y > -51)&&(col.y - data.clickedDot.y > -51)) {

      if(data.newGame == false){

        if((data.clickedDot.x != data.beginning.x)||(data.clickedDot.y != data.beginning.y)&&(data.clickedDot.x != data.end.x)||(data.clickedDot.y != data.end.y)){

          alert(data.beginning.y == data.clickedDot.y);
          alert(data.clickedDot.x + " " + data.clickedDot.y);
        }

        else if((data.clickedDot.x == data.beginning.x)||(data.clickedDot.y == data.beginning.y)){
          data.beginning = col
          alert("You've got this." + col.x + " " + col.y);
        }
        else if((data.clickedDot.x == data.end.x)||(data.clickedDot.y == data.end.y)){
          data.end = col
          alert(String("ok") + col.x);
        }
      }

      if(data.newGame == true){

        data.newGame = false;

        data.beginning = col;

        data.end = data.clickedDot;

      }

      for(i=0;i<data.selected.length;i++){

        if((data.selected[i].y == col.y)&&(data.selected[i].x == col.x))
          alert("ahah");

      }
      data.selected[data.selected.length] = col;
      data.selected[data.selected.length] = data.clickedDot;

      drawLine(col);
      col = null;
      data.clickedDot = null;

    }
    else{
      if(data.clickedDot != null){
        alert("Too far away.");
        col = null;
        data.clickedDot = null;
      }


    }
    data.clickedDot = col;
  }
  else {
    col = null;
  }
}

prepCanvas();
drawDots();
//# sourceURL=userscript.js
</script>
</body>
</html>