Guest User

Untitled

a guest
May 19th, 2019
69
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