1import dragElement from "./players.js"; 2//import formationsDefault from "./formations.json"; 3 4const Player = { 5 Name: "John", 6 Number: "5", 7 Position: "DM", 8 XPosition: 33, 9 YPosition: 33, 10 Color: 50 11}; 12 13// X positions 14// left 30 15// left central 140 16// central 225 17// right central 320 18// right 420 19 20// Y positions 21// GK 650 22// Defender 550 23// holding mid 450 24// Central mid 345 25// attacking mid 240 26// striker 140 27 28var formationLocal = []; 29var numberOfPlayers = 0; 30var selectedFormation = 0; 31const loadFormationObject = { 32 loadFormation: loadFormation, 33 addFormation : addFormation, 34 getFormationLocal: getFormationLocal, 35 getSelectedFormation: getSelectedFormation, 36 setSelectedFormation: setSelectedFormation, 37 updateFormation: updateFormation, 38}; 39 40 41// 4v4 42let formation121 = [ 43 { 44 45 Name: "John", 46 Number: "1", 47 Position: "GK", 48 XPosition: 225, 49 YPosition: 550, 50 Color: 50 51 }, 52 { 53 Name: "John", 54 Number: "2/7", 55 Position: "RD", 56 XPosition: 420, 57 YPosition: 345, 58 Color: 50 59 }, 60 { 61 Name: "John", 62 Number: "3/11", 63 Position: "LD", 64 XPosition: 30, 65 YPosition: 345, 66 Color: 50 67 }, 68 { 69 Name: "John", 70 Number: "9", 71 Position: "ST", 72 XPosition: 225, 73 YPosition: 140, 74 Color: 50 75 }, 76 { 77 Name: "Ball", 78 XPosition: 24, 79 YPosition: 24, 80 }, 81] 82 83let formation22 = [ 84 { 85 86 Name: "John", 87 Number: "1", 88 Position: "GK", 89 XPosition: 140, 90 YPosition: 550, 91 Color: 50 92 }, 93 { 94 Name: "John", 95 Number: "2/7", 96 Position: "RD", 97 XPosition: 320, 98 YPosition: 550, 99 Color: 50 100 }, 101 { 102 Name: "John", 103 Number: "3/11", 104 Position: "LD", 105 XPosition: 30, 106 YPosition: 240, 107 Color: 50 108 }, 109 { 110 Name: "John", 111 Number: "9", 112 Position: "ST", 113 XPosition: 420, 114 YPosition: 240, 115 Color: 50 116 }, 117 { 118 Name: "Ball", 119 XPosition: 24, 120 YPosition: 24, 121 }, 122] 123 124// 7v7 125let formation231 = [ 126 { 127 128 Name: "John", 129 Number: "1", 130 Position: "GK", 131 XPosition: 225, 132 YPosition: 650, 133 Color: 50 134 }, 135 { 136 Name: "John", 137 Number: "2", 138 Position: "RD", 139 XPosition: 420, 140 YPosition: 345, 141 Color: 50 142 }, 143 { 144 Name: "John", 145 Number: "3", 146 Position: "LD", 147 XPosition: 30, 148 YPosition: 345, 149 Color: 50 150 }, 151 { 152 Name: "John", 153 Number: "4", 154 Position: "CB", 155 XPosition: 300, 156 YPosition: 550, 157 Color: 50 158 }, 159 { 160 Name: "John", 161 Number: "5", 162 Position: "CB", 163 XPosition: 160, 164 YPosition: 550, 165 Color: 50 166 }, 167 { 168 Name: "John", 169 Number: "6", 170 Position: "DM", 171 XPosition: 225, 172 YPosition: 345, 173 Color: 50 174 }, 175 { 176 Name: "John", 177 Number: "7", 178 Position: "ST", 179 XPosition: 225, 180 YPosition: 140, 181 Color: 50 182 }, 183 { 184 Name: "Ball", 185 XPosition: 24, 186 YPosition: 24, 187 }, 188] 189 190// 9v9 191let formation2321 = [ 192 { 193 194 Name: "John", 195 Number: "1", 196 Position: "GK", 197 XPosition: 225, 198 YPosition: 650, 199 Color: 50 200 }, 201 { 202 Name: "John", 203 Number: "2", 204 Position: "RD", 205 XPosition: 420, 206 YPosition: 450, 207 Color: 50 208 }, 209 { 210 Name: "John", 211 Number: "3", 212 Position: "LD", 213 XPosition: 30, 214 YPosition: 450, 215 Color: 50 216 }, 217 { 218 Name: "John", 219 Number: "4", 220 Position: "CB", 221 XPosition: 300, 222 YPosition: 550, 223 Color: 50 224 }, 225 { 226 Name: "John", 227 Number: "5", 228 Position: "CB", 229 XPosition: 160, 230 YPosition: 550, 231 Color: 50 232 }, 233 { 234 Name: "John", 235 Number: "6", 236 Position: "DM", 237 XPosition: 225, 238 YPosition: 450, 239 Color: 50 240 }, 241 { 242 Name: "John", 243 Number: "8", 244 Position: "CM", 245 XPosition: 320, 246 YPosition: 300, 247 Color: 50 248 }, 249 { 250 Name: "John", 251 Number: "9", 252 Position: "ST", 253 XPosition: 225, 254 YPosition: 140, 255 Color: 50 256 }, 257 { 258 Name: "John", 259 Number: "7", 260 Position: "CM", 261 XPosition: 140, 262 YPosition: 300, 263 Color: 50 264 }, 265 { 266 Name: "Ball", 267 XPosition: 24, 268 YPosition: 24, 269 }, 270] 271 272// 11v11 273let formation433 = [ 274 { 275 276 Name: "John", 277 Number: "1", 278 Position: "GK", 279 XPosition: 225, 280 YPosition: 650, 281 Color: 50 282 }, 283 { 284 Name: "John", 285 Number: "2", 286 Position: "RD", 287 XPosition: 420, 288 YPosition: 520, 289 Color: 50 290 }, 291 { 292 Name: "John", 293 Number: "3", 294 Position: "LD", 295 XPosition: 30, 296 YPosition: 520, 297 Color: 50 298 }, 299 { 300 Name: "John", 301 Number: "4", 302 Position: "CB", 303 XPosition: 300, 304 YPosition: 550, 305 Color: 50 306 }, 307 { 308 Name: "John", 309 Number: "5", 310 Position: "CB", 311 XPosition: 160, 312 YPosition: 550, 313 Color: 50 314 }, 315 { 316 Name: "John", 317 Number: "6", 318 Position: "DM", 319 XPosition: 225, 320 YPosition: 450, 321 Color: 50 322 }, 323 { 324 Name: "John", 325 Number: "7", 326 Position: "RW", 327 XPosition: 420, 328 YPosition: 240, 329 Color: 50 330 }, 331 { 332 Name: "John", 333 Number: "8", 334 Position: "CM", 335 XPosition: 320, 336 YPosition: 345, 337 Color: 50 338 }, 339 { 340 Name: "John", 341 Number: "9", 342 Position: "ST", 343 XPosition: 225, 344 YPosition: 140, 345 Color: 50 346 }, 347 { 348 Name: "John", 349 Number: "10", 350 Position: "CM", 351 XPosition: 140, 352 YPosition: 345, 353 Color: 50 354 }, 355 { 356 Name: "John", 357 Number: "11", 358 Position: "LW", 359 XPosition: 30, 360 YPosition: 240, 361 Color: 50 362 }, 363 { 364 Name: "Ball", 365 XPosition: 24, 366 YPosition: 24, 367 }, 368] 369 370function getFormationLocal() 371{ 372 return formationLocal; 373} 374 375function getSelectedFormation() 376{ 377 return selectedFormation; 378} 379 380function setSelectedFormation(selectedNumber) 381{ 382 383 for (var i = 1; i <= formationLocal.length; i++) 384 { 385 const buttonPrevious = document.getElementById('Button'+i); 386 buttonPrevious.style.fontWeight = "normal"; 387 buttonPrevious.style.borderRadius=""; 388 const buttonCurrent = document.getElementById('Button'+selectedNumber); 389 buttonCurrent.style.borderRadius = "10px"; 390 buttonCurrent.style.fontWeight = "bold"; 391 } 392 selectedFormation = selectedNumber; 393} 394 395function disablePlayer(elementID) 396{ 397 document.getElementById(elementID).style.visibility = 'hidden'; 398} 399 400function enablePlayer(elementID) 401{ 402 document.getElementById(elementID).style.visibility = 'visible'; 403 dragElement(document.getElementById(elementID)); 404} 405 406function togglePlayerVisibility(elementID) 407{ 408 var playerVisibility = document.getElementById(elementID).style.visibility; 409 if (playerVisibility === 'hidden') { 410 document.getElementById(elementID).style.visibility = 'visible'; 411 } else { 412 document.getElementById(elementID).style.visibility = 'hidden'; 413 } 414} 415 416function download() { 417 const blob = new Blob(recordedChunks, { 418 type: "video/webm", 419 }); 420 const url = URL.createObjectURL(blob); 421 const a = document.createElement("a"); 422 document.body.appendChild(a); 423 a.style = "display: none"; 424 a.href = url; 425 a.download = "test.webm"; 426 a.click(); 427 window.URL.revokeObjectURL(url); 428} 429 430function startTimer(duration, display) { 431 var timer = duration, minutes, seconds; 432 setInterval(function () { 433 minutes = parseInt(timer / 60, 10) 434 seconds = parseInt(timer % 60, 10); 435 436 minutes = minutes < 10 ? "0" + minutes : minutes; 437 seconds = seconds < 10 ? "0" + seconds : seconds; 438 439 display.textContent = minutes + ":" + seconds; 440 441 if (--timer < 0) { 442 timer = 0; 443 // timer = duration; // uncomment this line to reset timer automatically after reaching 0 444 } 445 }, 1000); 446} 447 448function move(element, direction, distance=20, duration=1000) { 449 var topOrLeft = (direction=="left" || direction=="right") ? "left" : "top"; 450 var isNegated = (direction=="up" || direction=="left"); 451 if (isNegated) { distance *= -1; } 452 var elStyle = window.getComputedStyle(element); 453 var value = elStyle.getPropertyValue(topOrLeft).replace("px", ""); 454 var destination = Number(value) + distance; 455 var frameDistance = distance / (duration / 10); 456 function moveAFrame() { 457 elStyle = window.getComputedStyle(element); 458 value = elStyle.getPropertyValue(topOrLeft).replace("px", ""); 459 var newLocation = Number(value) + frameDistance; 460 var beyondDestination = ( (!isNegated && newLocation>=destination) || (isNegated && newLocation<=destination) ); 461 if (beyondDestination) { 462 element.style[topOrLeft] = destination + "px"; 463 clearInterval(movingFrames); 464 } 465 else { 466 element.style[topOrLeft] = newLocation + "px"; 467 } 468 } 469 var movingFrames = setInterval(moveAFrame, 10); 470} 471 472function addElement(i) { 473 // create a new div element
474 const wrapperElement = document.createElement("div"); 475 const circle = document.createElement("div"); 476 const jerseyNumber = document.createElement("div"); 477 //const wrapperName = document.createElement("div"); 478 //const name = document.createElement("div"); 479 480 wrapperElement.draggable = "true"; 481 wrapperElement.id = "AttackingPlayer" + i; 482 wrapperElement.class = "wrapperElement"; 483 484 circle.class = "circlePlayer"; 485 jerseyNumber.class = "jerseyNumber"; 486 jerseyNumber.innerHTML = i 487 488 // add the text node to the newly created div 489 wrapperElement.appendChild(circle); 490 wrapperElement.appendChild(jerseyNumber); 491 492 // add the newly created element and its content into the DOM 493// const myCanvas = document.getElementById("myCanvas"); 494 495const canvasElt = document.querySelector("canvas"); 496canvasElt.appendChild(wrapperElement); 497console.log("adding player " + i); 498} 499 500function loadFormation(evt) { 501 502 var localFormationCount = 0; 503 if (evt && ((evt.currentTarget.myParam) > 0)) 504 { 505 localFormationCount = evt.currentTarget.myParam; 506 selectedFormation = localFormationCount; 507 console.log("localFormationCount " + localFormationCount); 508 } 509 510 if (localFormationCount == 0) 511 { 512 if (numberOfPlayers != document.getElementById('playerCount').value) 513 { 514 formationLocal = []; 515 numberOfPlayers = document.getElementById('playerCount').value; 516 selectedFormation = 0; 517 var formationContainer = document.getElementById("scrollFormations"); 518 let formationContainerChildren = formationContainer.children; 519 while(formationContainerChildren.length > 1) 520 { 521 formationContainer.removeChild(formationContainerChildren[1]); 522 } 523 } 524 switch(numberOfPlayers) 525 { 526 case "4": 527 console.log("number of players is 4"); 528 var formationPrefabLocal = formation121; 529 break; 530 case "7": 531 console.log("number of players is 7"); 532 var formationPrefabLocal = formation231; 533 break; 534 case "9": 535 console.log("number of players is 9"); 536 var formationPrefabLocal = formation2321; 537 break; 538 case "11": 539 console.log("number of players is 11"); 540 var formationPrefabLocal = formation433; 541 break; 542 default: 543 console.log("number of players is default " + numberOfPlayers); 544 var formationPrefabLocal = formation121; 545 } 546 } 547 else 548 { 549 console.log("stefan "); 550 var selForm = selectedFormation-1; 551 var formationPrefabLocal = formationLocal[(selForm)]; 552 console.log("loading number " + (selForm)); 553 console.log("formationLocal " + JSON.stringify(formationLocal)); 554 console.log("prefablocal " + JSON.stringify(formationPrefabLocal)); 555 //numberOfPlayers = formationPrefabLocal.length; 556 } 557 558 const formationPrefab = document.getElementById('formationPrefab'); 559 formationPrefab.style.visibility = 'hidden'; 560 561 const colorMenu = document.getElementById('colorMenu'); 562 var numberColor = 'white'; 563 if ((colorMenu.value == 'white') || (colorMenu.value == 'yellow')) 564 { 565 var numberColor = 'black'; 566 } 567 console.log("text color " + colorMenu.dataset.secondaryValue); 568 569 enablePlayer("SoccerBall"); 570 const ballLocal = document.getElementById('SoccerBall'); 571 ballLocal.style.left = formationPrefabLocal[numberOfPlayers].XPosition + "px"; 572 ballLocal.style.top = formationPrefabLocal[numberOfPlayers].YPosition + "px"; 573 for (var i = 1; i < 12; i++){ 574 if (i <= numberOfPlayers) 575 { 576 enablePlayer("AttackingPlayer"+i); 577 // console.log("Player " + i + " local"); 578 const playerLocal = document.getElementById('AttackingPlayer'+i); 579 playerLocal.style.left = formationPrefabLocal[i-1].XPosition + "px"; 580 playerLocal.style.top = formationPrefabLocal[i-1].YPosition + "px"; 581 playerLocal.children[0].style.background = colorMenu.value; 582 playerLocal.children[1].innerHTML = formation433[i-1].Number; 583 playerLocal.children[1].style.color = numberColor; 584 playerLocal.children[2].style.visibility = 'hidden'; 585 //addElement(i); 586 //console.log("Player " + i + " "+ formationPrefabLocal[i-1].XPosition + " " + formationPrefabLocal[i-1].YPosition); 587// console.log("Player " + i + " "+ document.getElementById("AttackingPlayer"+i).style.left + " " + document.getElementById("AttackingPlayer"+i).style.top); 588 } 589 else 590 { 591 disablePlayer("AttackingPlayer"+i); 592 } 593 } 594 595 if (localFormationCount == 0) 596 { 597 addFormation(); 598 localFormationCount = 1; 599 } 600 else 601 { 602 603 setSelectedFormation(localFormationCount); 604 } 605 } 606 607 function addFormation() { 608 var arr = new Array(numberOfPlayers+1); 609 for (var i = 1; i <= numberOfPlayers; i++) 610 { 611 const playerLocal = document.getElementById('AttackingPlayer'+i); 612 var valueX = playerLocal.style.getPropertyValue("left").replace("px", ""); 613 var valueY = playerLocal.style.getPropertyValue("top").replace("px", ""); 614 var localPlayer = { 615 Name: "John", 616 Number: playerLocal.Number, 617 Position: "DM", 618 XPosition: valueX, 619 YPosition: valueY, 620 Color: 50 621 }; 622 arr[i-1] = localPlayer; 623 } 624 const ballLocal = document.getElementById('SoccerBall'); 625 var valueX = ballLocal.style.getPropertyValue("left").replace("px", ""); 626 var valueY = ballLocal.style.getPropertyValue("top").replace("px", ""); 627 var soccerBall = { 628 XPosition: valueX, 629 YPosition: valueY, 630 Color: 50 631 }; 632 arr[numberOfPlayers] = soccerBall; 633 formationLocal.push(arr); 634 635 console.log("prefablocal " + JSON.stringify(formationLocal)); 636 637 const divLocalFormations = document.getElementById('scrollFormations'); 638 const buttonlocal = document.createElement('button'); 639 buttonlocal.id = "Button"+formationLocal.length; 640 buttonlocal.innerText = formationLocal.length; 641 buttonlocal.style.borderRadius = "10px"; 642 buttonlocal.style.fontWeight = "bold"; 643 divLocalFormations.appendChild(buttonlocal); 644 buttonlocal.addEventListener('click', loadFormationObject.loadFormation, false); 645 buttonlocal.myParam = formationLocal.length; 646 selectedFormation = formationLocal.length; 647 console.log("selectedFormation " + selectedFormation); 648 649 if (formationLocal.length != 1) 650 { 651 const buttonPrevious = document.getElementById('Button'+(formationLocal.length-1)); 652 buttonPrevious.style.fontWeight = "normal"; 653 buttonPrevious.style.borderRadius=""; 654 } 655 656 console.log("PlayFormation adding localplayer "); 657 } 658 659 function updateFormation() { 660 console.log("updateFormation selectedFormation" + selectedFormation); 661 var arr = formationLocal[selectedFormation-1]; 662 for (var i = 1; i <= numberOfPlayers; i++) 663 { 664 const playerLocal = document.getElementById('AttackingPlayer'+i); 665 var valueX = playerLocal.style.getPropertyValue("left").replace("px", ""); 666 var valueY = playerLocal.style.getPropertyValue("top").replace("px", ""); 667 arr[i-1].XPosition = valueX; 668 arr[i-1].YPosition = valueY; 669 } 670 671 const soccerLocal = document.getElementById('SoccerBall'); 672 var valueX = soccerLocal.style.getPropertyValue("left").replace("px", ""); 673 var valueY = soccerLocal.style.getPropertyValue("top").replace("px", ""); 674 arr[numberOfPlayers].XPosition = valueX; 675 arr[numberOfPlayers].YPosition = valueY; 676 } 677 678export default loadFormationObject
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.