SHARE
TWEET

Untitled

a guest May 19th, 2019 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <style>
  2.     body,
  3.     html {
  4.         margin: 0;
  5.     }
  6.  
  7.     #can,
  8.     #can2 {
  9.         display: block;
  10.     }
  11.  
  12.     .canvas-container {
  13.         width: 100%;
  14.         height: 80%;
  15.     }
  16.  
  17.     .buttons-container {
  18.         width: 100%;
  19.         height: 20%;
  20.         background-color: rgb(29, 28, 28);
  21.         padding: 5px 10px 10px 10px;
  22.         box-sizing: border-box;
  23.     }
  24.  
  25.     .bad-packet {
  26.         width: 100%;
  27.         background-color: #A63232;
  28.     }
  29.  
  30.     .good-packet {
  31.         width: 100%;
  32.         background-color: #4bb543;
  33.     }
  34.  
  35.     .fixed-packet {
  36.         width: 100%;
  37.         background-color: #0074d9;
  38.     }
  39.  
  40.     #console {
  41.         width: 100%;
  42.         height: 80%;
  43.         overflow: auto;
  44.         padding-top: 5px;
  45.         box-sizing: border-box;
  46.     }
  47.  
  48.     button {
  49.         cursor: pointer;
  50.         border: 1px solid #d7dada;
  51.         -moz-border-radius: 3px;
  52.         -webkit-border-radius: 3px;
  53.         border-radius: 3px;
  54.         font-size: 12px;
  55.         font-family: courier new, courier, monospace;
  56.         padding: 6px;
  57.         text-decoration: none;
  58.         display: inline-block;
  59.         text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3);
  60.         font-weight: bold;
  61.         color: #000000;
  62.         background-color: #f4f5f5;
  63.         background-image: -webkit-gradient(linear,
  64.             left top,
  65.             left bottom,
  66.             from(#f4f5f5),
  67.             to(#dfdddd));
  68.         background-image: -webkit-linear-gradient(top, #f4f5f5, #dfdddd);
  69.         background-image: -moz-linear-gradient(top, #f4f5f5, #dfdddd);
  70.         background-image: -ms-linear-gradient(top, #f4f5f5, #dfdddd);
  71.         background-image: -o-linear-gradient(top, #f4f5f5, #dfdddd);
  72.         background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
  73.         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f4f5f5, endColorstr=#dfdddd);
  74.     }
  75.  
  76.     button:hover {
  77.         border: 1px solid #bfc4c4;
  78.         background-color: #d9dddd;
  79.         background-image: -webkit-gradient(linear,
  80.             left top,
  81.             left bottom,
  82.             from(#d9dddd),
  83.             to(#c6c3c3));
  84.         background-image: -webkit-linear-gradient(top, #d9dddd, #c6c3c3);
  85.         background-image: -moz-linear-gradient(top, #d9dddd, #c6c3c3);
  86.         background-image: -ms-linear-gradient(top, #d9dddd, #c6c3c3);
  87.         background-image: -o-linear-gradient(top, #d9dddd, #c6c3c3);
  88.         background-image: linear-gradient(to bottom, #d9dddd, #c6c3c3);
  89.         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#d9dddd, endColorstr=#c6c3c3);
  90.     }
  91. </style>
  92. <html>
  93.  
  94. <head>
  95.     <title>Bittorent</title>
  96. </head>
  97.  
  98. <body>
  99.     <div class="canvas-container">
  100.         <canvas id="can"> </canvas>
  101.         <canvas id="can2"> </canvas>
  102.     </div>
  103.     <div class="buttons-container">
  104.         <button type="button" onclick="computerPlace()" id="placePc">
  105.             Postaw komputer
  106.         </button>
  107.         <button type="button" onclick="turnOn()">Włacz komputer</button>
  108.         <button type="button" onclick="turnOff()">Wyłacz komputer</button>
  109.         <button type="button" onclick="corruptPacket()">
  110.             Zepsuj losowy pakiet
  111.         </button>
  112.         <button type="button" onclick="fixPackets()">Napraw pakiety</button>
  113.         <div id="console"></div>
  114.     </div>
  115. </body>
  116.  
  117. </html>
  118.  
  119. <script>
  120.     /** VARIABLES **/
  121.  
  122.     const canvasElem = document.getElementById("can");
  123.     const ctx = canvasElem.getContext("2d");
  124.  
  125.     const canvasElem2 = document.getElementById("can2");
  126.     const ctx2 = canvasElem2.getContext("2d");
  127.  
  128.     let placingPc = false;
  129.  
  130.     let selectedPc = 0;
  131.     let pcs = [
  132.         {
  133.             name: "Komputer Główny",
  134.             x: 25,
  135.             y: 25,
  136.             file: [],
  137.             active: true,
  138.             finished: true,
  139.             history: ""
  140.         }
  141.     ];
  142.  
  143.     /** BUTTONS **/
  144.  
  145.     function corruptPacket() {
  146.         pcs[selectedPc].file[Math.floor(Math.random() * 100)] = -1;
  147.         redraw();
  148.     }
  149.  
  150.     function fixPackets() {
  151.         for (i = 0; i < 100; i++) {
  152.             if (pcs[selectedPc].file[i] == -1) pcs[selectedPc].file[i] = 1;
  153.         }
  154.         redraw();
  155.     }
  156.  
  157.     function turnOn() {
  158.         pcs[selectedPc].active = true;
  159.         redraw();
  160.     }
  161.  
  162.     function turnOff() {
  163.         pcs[selectedPc].active = false;
  164.         redraw();
  165.     }
  166.  
  167.     function computerPlace() {
  168.         placingPc = true;
  169.         document.getElementById("placePc").innerHTML = "Kładziesz komputer...";
  170.     }
  171.  
  172.     /** MOUSE CLICK **/
  173.  
  174.     document.addEventListener("click", onMouseClick, false);
  175.  
  176.     function onMouseClick(e) {
  177.         if (placingPc) {
  178.             if (
  179.                 e.clientX > 0 &&
  180.                 e.clientX <= canvasElem.width &&
  181.                 e.clientY > 0 &&
  182.                 e.clientY <= canvasElem.height
  183.             ) {
  184.                 placingPc = false;
  185.                 pcs.push({
  186.                     name: "PC " + pcs.length,
  187.                     x: e.clientX,
  188.                     y: e.clientY,
  189.                     file: [],
  190.                     active: false,
  191.                     finished: false,
  192.                     history: ""
  193.                 });
  194.  
  195.                 for (i = 0; i < 100; i++) {
  196.                     pcs[pcs.length - 1].file[i] = 0;
  197.                 }
  198.                 document.getElementById("placePc").innerHTML = "Postaw komputer";
  199.                 redraw();
  200.             }
  201.         } else {
  202.             pcs.forEach((element, index) => {
  203.                 if (
  204.                     e.clientX > element.x &&
  205.                     e.clientX < element.x + 25 &&
  206.                     e.clientY > element.y &&
  207.                     e.clientY < element.y + 25
  208.                 ) {
  209.                     selectedPc = index;
  210.                     redraw();
  211.                 }
  212.             });
  213.         }
  214.     }
  215.  
  216.     /** SOME INIT **/
  217.     //First PC must have 100% of the file + be active
  218.     for (i = 0; i < 100; i++) {
  219.         pcs[0].file[i] = 1;
  220.     }
  221.  
  222.     var myVar = setInterval(myTimer, 500);
  223.     redraw();
  224.  
  225.     /** DRAWING EVERYTHING **/
  226.     function redraw() {
  227.         ctx.clearRect(0, 0, canvasElem.width, canvasElem.height);
  228.         pcs.forEach((element, index) => {
  229.             pcs.forEach((element2, index2) => {
  230.                 if (element != element2 && index2 > index) {
  231.                     if (!element.active || !element2.active) ctx.strokeStyle = "#A63232";
  232.                     else ctx.strokeStyle = "#4bb543";
  233.  
  234.                     ctx.beginPath();
  235.                     ctx.moveTo(element.x + 12, element.y + 12);
  236.                     ctx.lineTo(element2.x + 12, element2.y + 12);
  237.                     ctx.stroke();
  238.                 }
  239.             });
  240.  
  241.             ctx.beginPath();
  242.             ctx.lineWidth = "2";
  243.             ctx.strokeStyle = "#000000";
  244.             ctx.rect(element.x, element.y, 30, 30);
  245.             ctx.stroke();
  246.             ctx.fillStyle = "#FFFFFF";
  247.             ctx.fillRect(element.x, element.y, 30, 30);
  248.  
  249.             if (element.active) ctx.fillStyle = "#4bb543";
  250.             else ctx.fillStyle = "#A63232";
  251.  
  252.             ctx.fillRect(element.x + 2.5, element.y + 2.5, 25, 25);
  253.             if (element.finished) ctx.strokeStyle = "#4bb543";
  254.             else ctx.strokeStyle = "#000000";
  255.             ctx.lineWidth = "1";
  256.             ctx.strokeText(element.name, element.x, element.y - 10);
  257.         });
  258.  
  259.         ctx2.clearRect(0, 0, canvasElem2.width, canvasElem2.height);
  260.         ctx2.strokeStyle = "#000000";
  261.         ctx2.strokeText("Wybrany pc: " + selectedPc, 0, 15);
  262.         var tempY = 0;
  263.         var tempX = 0;
  264.         pcs[selectedPc].file.forEach((element, index) => {
  265.             if (element == -1) ctx2.fillStyle = "#A63232";
  266.             else if (element == 0) ctx2.fillStyle = "#AAAAAA";
  267.             else if (element == 1) ctx2.fillStyle = "#4bb543";
  268.  
  269.             ctx2.fillRect(25 * tempX, 25 * tempY + 20, 20, 20);
  270.             tempX++;
  271.             if (25 * tempX + 20 > window.innerWidth) {
  272.                 tempY++;
  273.                 tempX = 0;
  274.             }
  275.         });
  276.  
  277.         document.getElementById("console").innerHTML = pcs[selectedPc].history;
  278.     }
  279.  
  280.     /** LOGIC TIMER **/
  281.     function myTimer() {
  282.         pcs.forEach((element, index) => {
  283.             if (element.active && !element.finished) {
  284.                 pcs.forEach(element2 => {
  285.                     if (element2.active && element != element2) {
  286.                         search(element, index, element2)
  287.                     }
  288.                 });
  289.             }
  290.         });
  291.  
  292.         redraw();
  293.     }
  294.  
  295.     /** RESIZING **/
  296.     window.addEventListener("resize", resizeCanvas, false);
  297.  
  298.     function resizeCanvas() {
  299.         canvasElem.width = window.innerWidth;
  300.         canvasElem.height =
  301.             window.innerHeight -
  302.             0.2 * window.innerHeight -
  303.             (30 + (100 / (window.innerWidth / 25)) * 25);
  304.         canvasElem2.width = window.innerWidth;
  305.         canvasElem2.height = 30 + (100 / (window.innerWidth / 25)) * 25;
  306.         redraw();
  307.     }
  308.     resizeCanvas();
  309.  
  310.     function search(element, index, element2) {
  311.         var fixed = false;
  312.         var foundFile = false;
  313.         for (i = 0; i < 100; i++) {
  314.             if (element.file[i] == -1 && element2.file[i] == 1 && !foundFile) {
  315.                 element.file[i] = 1;
  316.                 fixed = true;
  317.                 if (element.file[i] == 1) {
  318.                     element.history =
  319.                         "<div class='fixed-packet'>" +
  320.                         "Naprawiłem pakiet: " +
  321.                         i +
  322.                         " od komputer: " +
  323.                         element2.name +
  324.                         ". Wartość pakietu: " +
  325.                         element.file[i] +
  326.                         "<span/></br>" +
  327.                         element.history;
  328.                 }
  329.                 foundFile = true;
  330.                 const sum = element.file.reduce(
  331.                     (partial_sum, a) => partial_sum + a, 0);
  332.                 if (sum == 100) element.finished = true;
  333.             }
  334.         }
  335.         if (!fixed) {
  336.             var foundFile = false;
  337.             for (i = 0; i < 100; i++) {
  338.                 if (element.file[i] == 0 && element2.file[i] != 0 && !foundFile) {
  339.                     element.file[i] = element2.file[i];
  340.                     if (element.file[i] == 1) {
  341.                         element.history =
  342.                             "<div class='good-packet'>" +
  343.                             "Odebrałem pakiet: " +
  344.                             i +
  345.                             " od komputer: " +
  346.                             element2.name +
  347.                             ". Wartość pakietu: " +
  348.                             element.file[i] +
  349.                             "<span/></br>" +
  350.                             element.history;
  351.                     } else {
  352.                         element.history =
  353.                             "<div class='bad-packet'>" +
  354.                             " Odebrałem pakiet: " +
  355.                             i +
  356.                             " od komputer: " +
  357.                             element2.name +
  358.                             ". Wartość pakietu: " +
  359.                             element.file[i] +
  360.                             "<span/></br>" +
  361.                             element.history;
  362.                     }
  363.                     foundFile = true;
  364.                     const sum = element.file.reduce(
  365.                         (partial_sum, a) => partial_sum + a, 0);
  366.                     if (sum == 100) element.finished = true;
  367.                 }
  368.             }
  369.         }
  370.     }
  371. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top