/*

1 1
1 1         NOTHING

1 0
1 1         \

1 1
0 1         \

0 0
1 1         _

1 1         --
0 0

1 0
1 0         |

0 1             |
0 1

0 0
0 1         NOTHING

0 1
0 0         NOTHING

1 0
0 0         NOTHING

0 0
1 0         NOTHING

*/

class Point2D
{
    constructor(x, y, isActive)
    {
        this.x = x;
        this.y = y;
        this.IsActive = isActive;
    }
}

window.addEventListener("load", () => {
    const canvas = document.getElementById("gridCanvas");
    const ctx = canvas.getContext("2d");
  
    // Canvas-Größe anpassen
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  
    // Punktabstand für das Grid
    const spacing = 32;
    let array = [];
    array.push([0, 0, 0, 0, 0, 0, 0]);
    array.push([0, 0, 0, 1, 0, 0, 0]);
    array.push([0, 0, 0, 1, 0, 0, 0]);
    array.push([0, 1, 0, 1, 0, 0, 0]);

    function drawPoint(ctx, x, y, color = "#000", size = 1) {
        ctx.fillStyle = color;
        ctx.fillRect(x, y, size, size);
    }
    
    function drawAlgo(ctx, tl, tr, bl, br, color = "#000", size = 1)
    {
        ctx.fillStyle = color;
        if(tl !== undefined && br !== undefined)
        {
            if(tl.IsActive && br.IsActive)
            {
                ctx.moveTo(tl.X, tl.Y);
                ctx.lineTo(br.X, br.Y);
                return;
            } 
        }
        if(tl !== undefined && tr !== undefined)
        {
            if(tl.IsActive && tr.IsActive)
            {
                ctx.moveTo(tl.X, tl.Y);
                ctx.lineTo(tr.X, tr.Y);
                return;
            } 
        }
        if(bl !== undefined && br !== undefined)
        {
            if(bl.IsActive && br.IsActive)
            {
                ctx.moveTo(bl.X, bl.Y);
                ctx.lineTo(br.X, br.Y);
                return;
            }
        }
    }


    function drawGrid(grid) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
  
      ctx.strokeStyle = "#888";
      ctx.lineWidth = 1;
  
      // Vertikale Linien zeichnen
      //for (let x = spacing; x < canvas.width; x += spacing) {
      //  ctx.beginPath();
      //  ctx.moveTo(x, 0);
      //  ctx.lineTo(x, canvas.height);
      //  ctx.stroke();
      //}
  
      // Horizontale Linien zeichnen
      //for (let y = spacing; y < canvas.height; y += spacing) {
      //  ctx.beginPath();
      //  ctx.moveTo(0, y);
      //  ctx.lineTo(canvas.width, y);
      //  ctx.stroke();
      //}
  
      // Punkte zeichnen
        //for (let x = spacing; x < canvas.width; x += spacing) {
        //    for (let y = spacing; y < canvas.height; y += spacing) {
        //        drawPoint(ctx, x, y, "#000", 2);
        //    }
        //}


        for (let y2 = 0; y2 < array.length; y2 += 1)
        {
            for (let x2 = 0; x2 < array[y2].length; x2 += 1)
            {
                drawPoint(ctx, x2 * spacing, y2 * spacing, "#000", 2);
            }
        }

        for (let y2 = 0; y2 < array.length; y2 += 1)
        {
            for (let x2 = 0; x2 < array[y2].length; x2 += 1)
            {
                var tl = new Point2D(x2 * spacing, y2 * spacing, array[y2][x2]);
                var tr = new Point2D(x2 * spacing + spacing, y2 * spacing, array[y2][x2+1]);
                var bl = new Point2D(x2 * spacing, y2 * spacing + spacing, array[y2+1][x2]);
                var br = new Point2D(x2 * spacing + spacing, y2 * spacing + spacing, array[y2 + 1][x2+1]);
                drawAlgo(ctx, tl, tr, bl, br,"#000", 2);
            }
        }
    }
  
    // Bei Größenänderungen des Fensters das Grid neu zeichnen
    window.addEventListener("resize", () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      drawGrid();
    });
  
    // Grid beim Laden der Seite zeichnen
    drawGrid(array);
  });