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: 10px;
    box-sizing: border-box;
  }
  .bad-packet {
    width: 100%;
    background-color: #ff9494;
  }
  .good-packet {
    width: 100%;
    background-color: #4bb543;
  }
  #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 => {
      if (element.active && !element.finished) {
        pcs.forEach(element2 => {
          if (element2.active && element != element2) {
            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;
                if (i == 99) element.finished = true;
              }
            }
          }
        });
      }
    });

    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();
</script>