Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kreski</title>
    <style>
      p {font-size : 12pt;}
      svg {
        margin: 0px auto;
        display: block;
      }
    </style>
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>

<center>
    Wybierz kierunek:<br>
    <button onclick="createLine(2);">Góra</button><br>
    <button onclick="createLine(0);">Lewo</button>
    <button onclick="createLine(1);">Prawo</button><br>
    <button onclick="createLine(3);">Dół</button><br>
    <span id="symetric"></span>
</center>

 <script>

    var linePos = [];
    var previous_click = -1;
    var x_pos = 300;
    var y_pos = 300;

    var svgContainer = d3.select("body").append("svg")
        .attr("width", 600)
        .attr("height", 600);


    function kit() {
        var x_min = 300;
        var x_max = 300;
        for(var i = 0; i < linePos.length; i++) {
            if(linePos[i].x1 > x_max) x_max = linePos[i].x1;
            if(linePos[i].x2 > x_max) x_max = linePos[i].x2;
            if(linePos[i].x1 < x_min) x_min = linePos[i].x1;
            if(linePos[i].x2 < x_min) x_min = linePos[i].x2;
        }

        var isSymetric = true;
        for(var i = 0; i < linePos.length; i++){

            console.log("linePos[" + i + "] - x1: " + linePos[i].x1 + " x2: " + linePos[i].x2 + " y1: " + linePos[i].y1 + " y2:" + linePos[i].y2);

            var center = ((x_min+x_max)/2);

            var d1 = linePos[i].x1 - center;
            var d2 = linePos[i].x2 - center;

            var temp = {
                x1:center - d2,
                x2:center - d1,
                y1:linePos[i].y2,
                y2:linePos[i].y1};

            var isTheSame = false;
            for(var j = 0; j < linePos.length; j++)
            {
                console.log("temp - x1: " + temp.x1 + " x2: " + temp.x2 + " y1: " + temp.y1 + " y2:" + temp.y2);
                console.log("linePos[" + j + "] - x1: " + linePos[j].x1 + " x2: " + linePos[j].x2 + " y1: " + linePos[j].y1 + " y2:" + linePos[j].y2);

                if(temp.x1 == linePos[j].x1 && temp.x2 == linePos[j].x2 && temp.y1 == linePos[j].y1 && temp.y2 == linePos[j].y2)
                {
                    isTheSame = true;
                    break;
                }
            }
            if(!isTheSame){
                document.getElementById("symetric").innerHTML = "NIESYMETRYCZNY";
                isSymetric = false;
                break;
            }
        }

        if(isSymetric)
        {
            document.getElementById("symetric").innerHTML = "SYMETRYCZNY";
        }
    }

        // 0-lewo; 1-prawo; 2-góra; 3-dół;
        // 4-góra/góra; 5-góra/prawo; 6-prawo/prawo; 7-prawo/dół; 8-dół/dół; 9-dół/lewo; 10-lewo/lewo; 11-lewo/góra; 12-nic
    function createLine(direction){
        switch(direction) {
            case 0:
                switch(previous_click){
                    case -1:
                        previous_click = 0;
                        break;
                    case 0:
                        createLine(10);
                        break;
                    case 1:
                        createLine(12);
                        break;
                    case 2:
                        createLine(11);
                        break;
                    case 3:
                        createLine(9);
                        break;
                }
                break;

            case 1:
                switch(previous_click){
                    case -1:
                        previous_click = 1;
                        break;
                    case 0:
                        createLine(12);
                        break;
                    case 1:
                        createLine(6);
                        break;
                    case 2:
                        createLine(5);
                        break;
                    case 3:
                        createLine(7);
                        break;
                }
                break;

            case 2:
                switch(previous_click){
                    case -1:
                        previous_click = 2;
                        break;
                    case 0:
                        createLine(11);
                        break;
                    case 1:
                        createLine(5);
                        break;
                    case 2:
                        createLine(4);
                        break;
                    case 3:
                        previous_click = -1;
                        break;
                }
                break;

            case 3:
                switch(previous_click){
                    case -1:
                        previous_click = 3;
                        break;
                    case 0:
                        createLine(9);
                        break;
                    case 1:
                        createLine(7);
                        break;
                    case 2:
                        previous_click = -1;
                        break;
                    case 3:
                        createLine(8);
                        break;
                }
                break;

            case 4:
                var temp = {x1:x_pos, x2:x_pos, y1:y_pos, y2:y_pos-20};
                linePos.push(temp);
                previous_click = -1;
                update();
                y_pos -= 20;
                break;

            case 5:
                var temp = {x1:x_pos, x2:x_pos+20, y1:y_pos, y2:y_pos-20};
                linePos.push(temp);
                previous_click = -1;
                update();
                y_pos -= 20;
                x_pos += 20;
                break;

            case 6:
                var temp = {x1:x_pos, x2:x_pos+20, y1:y_pos, y2:y_pos};
                linePos.push(temp);
                previous_click = -1;
                update();
                x_pos += 20;
                break;

            case 7:
                var temp = {x1:x_pos, x2:x_pos+20, y1:y_pos, y2:y_pos+20};
                linePos.push(temp);
                previous_click = -1;
                update();
                y_pos += 20;
                x_pos += 20;
                break;

            case 8:
                var temp = {x1:x_pos, x2:x_pos, y1:y_pos, y2:y_pos+20};
                linePos.push(temp);
                previous_click = -1;
                update();
                y_pos += 20;
                break;

            case 9:
                var temp = {x1:x_pos, x2:x_pos-20, y1:y_pos, y2:y_pos+20};
                linePos.push(temp);
                previous_click = -1;
                update();
                y_pos += 20;
                x_pos -= 20;
                break;

            case 10:
                var temp = {x1:x_pos, x2:x_pos-20, y1:y_pos, y2:y_pos};
                linePos.push(temp);
                previous_click = -1;
                update();
                x_pos -= 20;
                break;

            case 11:
                var temp = {x1:x_pos, x2:x_pos-20, y1:y_pos, y2:y_pos-20};
                linePos.push(temp);
                previous_click = -1;
                update();
                y_pos -= 20;
                x_pos -= 20;
                break;
        }
    }

    function update() {
        var lines = svgContainer.selectAll("line")
            .data(linePos)
            .enter()
            .append("line");

        var lineAttributes = lines
            .attr("x1", function(d) {return d.x1})
            .attr("y1", function(d) {return d.y1})
            .attr("x2", function(d) {return d.x2})
            .attr("y2", function(d) {return d.y2})
            .attr("stroke", "black")
            .attr("stroke-width", 2);

        kit();
    }

  </script>
  </body>
</html>