Untitled

<style>
    body,
    html {
        margin: 0;
    }

    #can,
    #can2 {
        display: block;
    }

    .canvas-container {
        width: 100%;
        height: 80%;
    }

    .buttons-container {
        width: 100%;
        height: 20%;
        background-color: rgb(29, 28, 28);
        padding: 5px 10px 10px 10px;
        box-sizing: border-box;
    }

    .bad-packet {
        width: 100%;
        background-color: #ff9494;
    }

    .good-packet {
        width: 100%;
        background-color: #4bb543;
    }

    .fixed-packet {
        width: 100%;
        background-color: #0074d9;
    }

    #console {
        width: 100%;
        height: 80%;
        overflow: auto;
        padding-top: 5px;
        box-sizing: border-box;
    }

    button {
        cursor: pointer;
        border: 1px solid #d7dada;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        font-size: 12px;
        font-family: courier new, courier, monospace;
        padding: 6px;
        text-decoration: none;
        display: inline-block;
        text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3);
        font-weight: bold;
        color: #000000;
        background-color: #f4f5f5;
        background-image: -webkit-gradient(linear,
            left top,
            left bottom,
            from(#f4f5f5),
            to(#dfdddd));
        background-image: -webkit-linear-gradient(top, #f4f5f5, #dfdddd);
        background-image: -moz-linear-gradient(top, #f4f5f5, #dfdddd);
        background-image: -ms-linear-gradient(top, #f4f5f5, #dfdddd);
        background-image: -o-linear-gradient(top, #f4f5f5, #dfdddd);
        background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f4f5f5, endColorstr=#dfdddd);
    }

    button:hover {
        border: 1px solid #bfc4c4;
        background-color: #d9dddd;
        background-image: -webkit-gradient(linear,
            left top,
            left bottom,
            from(#d9dddd),
            to(#c6c3c3));
        background-image: -webkit-linear-gradient(top, #d9dddd, #c6c3c3);
        background-image: -moz-linear-gradient(top, #d9dddd, #c6c3c3);
        background-image: -ms-linear-gradient(top, #d9dddd, #c6c3c3);
        background-image: -o-linear-gradient(top, #d9dddd, #c6c3c3);
        background-image: linear-gradient(to bottom, #d9dddd, #c6c3c3);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#d9dddd, endColorstr=#c6c3c3);
    }
</style>
<html>

<head>
    <title>Bittorent</title>
</head>

<body>
    <div class="canvas-container">
        <canvas id="can"> </canvas>
        <canvas id="can2"> </canvas>
    </div>
    <div class="buttons-container">
        <button type="button" onclick="computerPlace()" id="placePc">
            Postaw komputer
        </button>
        <button type="button" onclick="turnOn()">Włacz komputer</button>
        <button type="button" onclick="turnOff()">Wyłacz komputer</button>
        <button type="button" onclick="corruptPacket()">
            Zepsuj losowy pakiet
        </button>
        <button type="button" onclick="fixPackets()">Napraw pakiety</button>
        <div id="console"></div>
    </div>
</body>

</html>

<script>
    /** VARIABLES **/

    const canvasElem = document.getElementById("can");
    const ctx = canvasElem.getContext("2d");

    const canvasElem2 = document.getElementById("can2");
    const ctx2 = canvasElem2.getContext("2d");

    let placingPc = false;

    let selectedPc = 0;
    let pcs = [
        {
            name: "Komputer Główny",
            x: 25,
            y: 25,
            file: [],
            active: true,
            finished: true,
            history: ""
        }
    ];

    /** BUTTONS **/

    function corruptPacket() {
        pcs[selectedPc].file[Math.floor(Math.random() * 100)] = -1;
        redraw();
    }

    function fixPackets() {
        for (i = 0; i < 100; i++) {
            if (pcs[selectedPc].file[i] == -1) pcs[selectedPc].file[i] = 1;
        }
        redraw();
    }

    function turnOn() {
        pcs[selectedPc].active = true;
        redraw();
    }

    function turnOff() {
        pcs[selectedPc].active = false;
        redraw();
    }

    function computerPlace() {
        placingPc = true;
        document.getElementById("placePc").innerHTML = "Kładziesz komputer...";
    }

    /** MOUSE CLICK **/

    document.addEventListener("click", onMouseClick, false);

    function onMouseClick(e) {
        if (placingPc) {
            if (
                e.clientX > 0 &&
                e.clientX <= canvasElem.width &&
                e.clientY > 0 &&
                e.clientY <= canvasElem.height
            ) {
                placingPc = false;
                pcs.push({
                    name: "PC " + pcs.length,
                    x: e.clientX,
                    y: e.clientY,
                    file: [],
                    active: false,
                    finished: false,
                    history: ""
                });

                for (i = 0; i < 100; i++) {
                    pcs[pcs.length - 1].file[i] = 0;
                }
                document.getElementById("placePc").innerHTML = "Postaw komputer";
                redraw();
            }
        } else {
            pcs.forEach((element, index) => {
                if (
                    e.clientX > element.x &&
                    e.clientX < element.x + 25 &&
                    e.clientY > element.y &&
                    e.clientY < element.y + 25
                ) {
                    selectedPc = index;
                    redraw();
                }
            });
        }
    }

    /** SOME INIT **/
    //First PC must have 100% of the file + be active
    for (i = 0; i < 100; i++) {
        pcs[0].file[i] = 1;
    }

    var myVar = setInterval(myTimer, 500);
    redraw();

    /** DRAWING EVERYTHING **/
    function redraw() {
        ctx.clearRect(0, 0, canvasElem.width, canvasElem.height);
        pcs.forEach((element, index) => {
            pcs.forEach((element2, index2) => {
                if (element != element2 && index2 > index) {
                    if (!element.active || !element2.active) ctx.strokeStyle = "#FF0000";
                    else ctx.strokeStyle = "#00FF00";

                    ctx.beginPath();
                    ctx.moveTo(element.x + 12, element.y + 12);
                    ctx.lineTo(element2.x + 12, element2.y + 12);
                    ctx.stroke();
                }
            });

            ctx.beginPath();
            ctx.lineWidth = "2";
            ctx.strokeStyle = "#000000";
            ctx.rect(element.x, element.y, 30, 30);
            ctx.stroke();
            ctx.fillStyle = "#FFFFFF";
            ctx.fillRect(element.x, element.y, 30, 30);

            if (element.active) ctx.fillStyle = "#00FF00";
            else ctx.fillStyle = "#FF0000";

            ctx.fillRect(element.x + 2.5, element.y + 2.5, 25, 25);
            if (element.finished) ctx.strokeStyle = "#00FF00";
            else ctx.strokeStyle = "#000000";
            ctx.lineWidth = "1";
            ctx.strokeText(element.name, element.x, element.y - 10);
        });

        ctx2.clearRect(0, 0, canvasElem2.width, canvasElem2.height);
        ctx2.strokeStyle = "#000000";
        ctx2.strokeText("Wybrany pc: " + selectedPc, 0, 15);
        var tempY = 0;
        var tempX = 0;
        pcs[selectedPc].file.forEach((element, index) => {
            if (element == -1) ctx2.fillStyle = "#FF0000";
            else if (element == 0) ctx2.fillStyle = "#AAAAAA";
            else if (element == 1) ctx2.fillStyle = "#00FF00";

            ctx2.fillRect(25 * tempX, 25 * tempY + 20, 20, 20);
            tempX++;
            if (25 * tempX + 20 > window.innerWidth) {
                tempY++;
                tempX = 0;
            }
        });

        document.getElementById("console").innerHTML = pcs[selectedPc].history;
    }

    /** LOGIC TIMER **/
    function myTimer() {
        pcs.forEach((element, index) => {
            if (element.active && !element.finished) {
                pcs.forEach(element2 => {
                    if (element2.active && element != element2) {
                        search(element, index, element2)
                    }
                });
            }
        });

        redraw();
    }

    /** RESIZING **/
    window.addEventListener("resize", resizeCanvas, false);

    function resizeCanvas() {
        canvasElem.width = window.innerWidth;
        canvasElem.height =
            window.innerHeight -
            0.2 * window.innerHeight -
            (30 + (100 / (window.innerWidth / 25)) * 25);
        canvasElem2.width = window.innerWidth;
        canvasElem2.height = 30 + (100 / (window.innerWidth / 25)) * 25;
        redraw();
    }
    resizeCanvas();

    function search(element, index, element2) {
        var fixed = false;
        var foundFile = false;
        for (i = 0; i < 100; i++) {
            if (element.file[i] == -1 && element2.file[i] == 1 && !foundFile) {
                element.file[i] = 1;
                fixed = true;
                if (element.file[i] == 1) {
                    element.history =
                        "<div class='fixed-packet'>" +
                        "Naprawiłem pakiet: " +
                        i +
                        " od komputer: " +
                        element2.name +
                        ". Wartość pakietu: " +
                        element.file[i] +
                        "<span/></br>" +
                        element.history;
                }
                foundFile = true;
                const sum = element.file.reduce(
                    (partial_sum, a) => partial_sum + a, 0);
                if (sum == 100) element.finished = true;
            }
        }
        if (!fixed) {
            var foundFile = false;
            for (i = 0; i < 100; i++) {
                if (element.file[i] == 0 && element2.file[i] != 0 && !foundFile) {
                    element.file[i] = element2.file[i];
                    if (element.file[i] == 1) {
                        element.history =
                            "<div class='good-packet'>" +
                            "Odebrałem pakiet: " +
                            i +
                            " od komputer: " +
                            element2.name +
                            ". Wartość pakietu: " +
                            element.file[i] +
                            "<span/></br>" +
                            element.history;
                    } else {
                        element.history =
                            "<div class='bad-packet'>" +
                            " Odebrałem pakiet: " +
                            i +
                            " od komputer: " +
                            element2.name +
                            ". Wartość pakietu: " +
                            element.file[i] +
                            "<span/></br>" +
                            element.history;
                    }
                    foundFile = true;
                    const sum = element.file.reduce(
                        (partial_sum, a) => partial_sum + a, 0);
                    if (sum == 100) element.finished = true;
                }
            }
        }
    }
</script>