const context = document.getElementById("canvas");
const ctx = context.getContext("2d");

const recountCoordinates = data => {
  if (data < 0) {
    return 400 - ((400 - data) % 400);
  }

  if (data > 400) {
    return 0 + ((data - 400) % 400);
  }

  return data;
};

function drawVerticalLine(x, yStart, yEnd) {
  if (yStart > yEnd) {
    ctx.moveTo(x, 0);
    ctx.lineTo(x, yEnd);

    ctx.moveTo(x, yStart);
    ctx.lineTo(x, 400);
  } else {
    ctx.moveTo(x, yStart);
    ctx.lineTo(x, yEnd);
  }
}

function draw(dx = 0, dy = 0) {
  ctx.clearRect(0, 0, 400, 400);
  ctx.beginPath();

  const leftX = recountCoordinates(120 + dx, true);
  const leftYStart = recountCoordinates(150 + dy);
  const leftYEnd = recountCoordinates(300 + dy);
  drawVerticalLine(leftX, leftYStart, leftYEnd);

  const rightX = recountCoordinates(280 + dx, true);
  drawVerticalLine(rightX, leftYStart, leftYEnd);

  const middleY = recountCoordinates(120 + dy);
  const middleXStart = recountCoordinates(150 + dx, true);
  const middleXEnd = recountCoordinates(250 + dx, true);

  if (middleXStart > middleXEnd) {
    ctx.moveTo(0, middleY);
    ctx.lineTo(middleXEnd, middleY);

    ctx.moveTo(middleXStart, middleY);
    ctx.lineTo(400, middleY);
  } else {
    ctx.moveTo(middleXStart, middleY);
    ctx.lineTo(middleXEnd, middleY);
  }

  ctx.strokeStyle = "white";
  ctx.lineWidth = 16;
  ctx.stroke();
  ctx.closePath();
}

draw();

let dx = 0;
let dy = 0;
const speed = 25;

function handle(e) {
  switch (e.code) {
    case "ArrowUp":
      dy -= speed;
      break;
    case "ArrowDown":
      dy += speed;
      break;
    case "ArrowLeft":
      dx -= speed;
      break;
    case "ArrowRight":
      dx += speed;
      break;
    default:
      return;
  }

  draw(dx, dy);
}

document.body.addEventListener("keydown", handle);