1import dragElement from "./players.js"; 2import loadFormationObject from "./loadFormation.js"; 3import domtoimage from './dom-to-image-more.js'; 4//import GIFEncoder from "./GIFEncoder.js" 5 6const Player = { 7 Name: "John", 8 Number: "5", 9 Position: "DM", 10 XPosition: 33, 11 YPosition: 33, 12 Color: 50 13}; 14 15const playFormationsObject = { 16 playFormations : playFormations, 17}; 18/* 19var imageUrls = []; 20 21 // Function to add images to the canvas 22 function addImageToCanvas(imageUrl) { 23 return new Promise((resolve, reject) => { 24 imageUrl.onload = () => { 25 const canvas = document.createElement('canvas'); 26 const ctx = canvas.getContext('2d'); 27 ctx.drawImage(imageUrl, 0, 0); 28 resolve(); 29 }; 30 console.log("addImageToCanvas reject"); 31 imageUrl.onerror = reject; 32 }); 33 } 34 35 // Function to create the GIF 36 async function createGif() { 37 const gifFrames = []; 38 39 40 console.log("imageurls lenght " + imageUrls.length); 41 try { 42 43 const canvas = document.createElement('canvas'); 44 const ctx = canvas.getContext('2d'); 45 for (const imageUrl of imageUrls) { 46 console.log("addImageToCanvas 1"); 47 //await addImageToCanvas(imageUrl); 48 ctx.drawImage(imageUrl, 0, 0); 49 //resolve(); 50 gifFrames.push(ctx.getImageData(0, 0, canvas.width, canvas.height)); 51 console.log("addImageToCanvas "); 52 } 53 54 // Create a GIF from the canvas frames 55 const gif = new GIFEncoder(); 56 gif.setRepeat(0); 57 gif.setDelay(200); 58 //gif.start(); 59 60 for (const frame of gifFrames) { 61 gif.addFrame(frame.data, canvas.width, canvas.height); 62 console.log("add frame "); 63 } 64 65 console.log("before gif finish "); 66 //gif.finish(); 67 68 // Convert the GIF data to a blob 69 const gifBlob = new Blob([new Uint8Array(gif.stream().bin)], { type: 'image/gif' }); 70 71 72 // Create a download link for the GIF 73 console.log("stefan "); 74 const url = URL.createObjectURL(gifBlob); 75 console.log("gifblob " + JSON.stringify(gifBlob)); 76 console.log("url " + JSON.stringify(url)); 77 const a = document.createElement('a'); 78 a.href = url; 79 a.download = 'animated.gif'; 80 a.click(); 81 const downloadURI = (uri, name) => { 82 const link = document.createElement("a");
83 link.download = name; 84 link.href = uri; 85 document.body.appendChild(link); 86 link.click(); 87 document.body.removeChild(link); 88 } 89 downloadURI(url, 'animated.gif') 90 91 URL.revokeObjectURL(url); 92 93 console.log("end of gif finish "); 94 } catch (error) { 95 console.error('Error creating GIF:', error); 96 } 97 } 98 99function downloadGif() 100{ 101 console.log("downloadGif"); 102 // Create a canvas element 103 const canvas = document.createElement('canvas'); 104 const ctx = canvas.getContext('2d'); 105 106 console.log("second"); 107 // Set the canvas dimensions based on the first image\ 108 109 const firstImage = new Image(); 110 111 createGif(); 112 113 console.log("third"); 114 115 console.log("fourth"); 116 117} 118*/ 119 // const waitForMovingFrame = async () => { 120// await delay(1000); 121// }; 122function waitForMovingFrame1() { 123 setTimeout(function () { 124 //if (newState == -1) { 125 // alert('VIDEO HAS STOPPED'); 126 //} 127 }, 10000); 128} 129 130function waitForMovingFrame(ms){ 131 var start = new Date().getTime(); 132 var end = start; 133 while(end < start + 1000) { 134 end = new Date().getTime(); 135 } 136} 137/* 138function moveFormation(element, targetDestinationX, targetDestinationY, duration=1000) { 139 140 function playFormationsHelper(numberOfPlayers, formationLocal, indexEnd) 141 { 142 143 // create loop for movement 144 for (var i = 1; i < 12; i++){ 145 if (i <= numberOfPlayers) 146 { 147 const playerLocalEndingX = formationLocal[indexEnd][i-1].XPosition; 148 const playerLocalEndingY = formationLocal[indexEnd][i-1].YPosition; 149 const playerLocal = document.getElementById('AttackingPlayer'+i); 150 move(playerLocal, playerLocalEndingX, playerLocalEndingY); 151 } 152 } 153 } 154 155 var elStyle = window.getComputedStyle(element); 156 var valueX = elStyle.getPropertyValue("left").replace("px", ""); 157 var valueY = elStyle.getPropertyValue("top").replace("px", ""); 158 var startingPositionX = Number(valueX) 159 var startingPositionY = Number(valueY); 160 161 var frameDistanceX = (targetDestinationX - startingPositionX) / (duration / 10); 162 var frameDistanceY = (targetDestinationY - startingPositionY) / (duration / 10); 163 164 var skipCount = 0; 165 var done = 0; 166 167 function moveAFrame() { 168 elStyle = window.getComputedStyle(element); 169 valueX = elStyle.getPropertyValue("left").replace("px", ""); 170 valueY = elStyle.getPropertyValue("top").replace("px", ""); 171 var newLocationX = Number(valueX) + frameDistanceX; 172 var newLocationY = Number(valueY) + frameDistanceY; 173 174 var beyondDestination = ( (frameDistanceX>0 && newLocationX>=targetDestinationX) 175 || (frameDistanceX<0 && newLocationX<=targetDestinationX) 176 || (frameDistanceY>0 && newLocationY>=targetDestinationY) 177 || (frameDistanceY<0 && newLocationY<=targetDestinationY) ); 178 if (beyondDestination) { 179 element.style["left"] = newLocationX + "px"; 180 element.style["top"] = newLocationY + "px"; 181 console.log('clearinterval'); 182 done = 1; 183 clearInterval(movingFrames); 184 movingFrames=0; 185 cancelIdleCallback() 186 } 187 else { 188 element.style["left"] = newLocationX + "px"; 189 element.style["top"] = newLocationY + "px"; 190 if (done == 0) 191 { 192 skipCount++; 193 } 194 } 195 } 196 var movingFrames = setInterval(moveAFrame, 10); 197} 198*/ 199async function move(element, targetDestinationX, targetDestinationY, duration=1000) { 200 201 var elStyle = window.getComputedStyle(element); 202 var valueX = elStyle.getPropertyValue("left").replace("px", ""); 203 var valueY = elStyle.getPropertyValue("top").replace("px", ""); 204 var startingPositionX = Number(valueX) 205 var startingPositionY = Number(valueY); 206 207 var frameDistanceX = (targetDestinationX - startingPositionX) / (duration / 10); 208 var frameDistanceY = (targetDestinationY - startingPositionY) / (duration / 10); 209 210 var skipCount = 0; 211 var done = 0; 212 213 function moveAFrame() { 214 elStyle = window.getComputedStyle(element); 215 valueX = elStyle.getPropertyValue("left").replace("px", ""); 216 valueY = elStyle.getPropertyValue("top").replace("px", ""); 217 var newLocationX = Number(valueX) + frameDistanceX; 218 var newLocationY = Number(valueY) + frameDistanceY; 219 220 var beyondDestination = ( (frameDistanceX>0 && newLocationX>=targetDestinationX) 221 || (frameDistanceX<0 && newLocationX<=targetDestinationX) 222 || (frameDistanceY>0 && newLocationY>=targetDestinationY) 223 || (frameDistanceY<0 && newLocationY<=targetDestinationY) ); 224 if (beyondDestination) { 225 element.style["left"] = newLocationX + "px"; 226 element.style["top"] = newLocationY + "px"; 227 console.log('clearinterval'); 228 done = 1; 229 clearInterval(movingFrames); 230 movingFrames=0; 231 } 232 else { 233 element.style["left"] = newLocationX + "px"; 234 element.style["top"] = newLocationY + "px"; 235 if (done == 0) 236 { 237 skipCount++; 238 } 239 } 240 241 //console.log('skipCount ' + skipCount); 242 /*if (((skipCount % 10) == 0) && (skipCount <= 100)) 243 { 244 var node = document.getElementById('Field'); 245 domtoimage 246 .toJpeg(node) 247 .then(function (dataUrl) { 248 var img = new Image(); 249 img.src = dataUrl; 250 imageUrls.push(img); 251 console.log('capturing image ' + skipCount); 252 }) 253 .catch(function (error) { 254 console.error('oops, something went wrong!', error); 255 }); 256 } 257 */ 258 } 259 var movingFrames = setInterval(moveAFrame, 10); 260 261} 262 263function playFormationsHelper(numberOfPlayers, formationLocal, indexEnd) 264{ 265 266 // create loop for movement 267 268 var arr = new Array(numberOfPlayers+1); 269 for (var i = 1; i < 12; i++){ 270 if (i <= numberOfPlayers) 271 { 272 const playerLocalEndingX = formationLocal[indexEnd][i-1].XPosition; 273 const playerLocalEndingY = formationLocal[indexEnd][i-1].YPosition; 274 const playerLocal = document.getElementById('AttackingPlayer'+i); 275 arr.push(move(playerLocal, playerLocalEndingX, playerLocalEndingY)); 276 console.log("AttackingPlayer"+1+" X " + playerLocalEndingX + " Y "+ playerLocalEndingY + " indexEnd "+ indexEnd ); 277 } 278 } 279 280 const ballLocalEndingX = formationLocal[indexEnd][numberOfPlayers-1].XPosition; 281 const ballLocalEndingY = formationLocal[indexEnd][numberOfPlayers-1].YPosition; 282 const ballLocal = document.getElementById('SoccerBall'); 283 arr.push(move(ballLocal, ballLocalEndingX, ballLocalEndingY)); 284} 285 286function playFormations() { 287 288 var formationLocal = loadFormationObject.getFormationLocal(); 289 var numberOfPlayers = formationLocal[0].length; 290 291 // set starting position 292 var formationSelectionNumber = loadFormationObject.getSelectedFormation(); 293 if (formationSelectionNumber < formationLocal.length) 294 { 295 for (var i = 1; i <= numberOfPlayers; i++){ 296 const playerLocal = document.getElementById('AttackingPlayer'+i); 297 playerLocal.style.left = formationLocal[formationSelectionNumber-1][i-1].XPosition + "px"; 298 playerLocal.style.top = formationLocal[formationSelectionNumber-1][i-1].YPosition + "px"; 299 } 300 301 const soccerBallLocal = document.getElementById('SoccerBall'); 302 console.log("soccerBallLocal" + soccerBallLocal + " " + formationLocal[formationSelectionNumber-1][numberOfPlayers-1]); 303 soccerBallLocal.style.left = formationLocal[formationSelectionNumber-1][numberOfPlayers-1].XPosition + "px"; 304 soccerBallLocal.style.top = formationLocal[formationSelectionNumber-1][numberOfPlayers-1].YPosition + "px"; 305 306 console.log("numberOfPlayers "); 307 playFormationsHelper(numberOfPlayers, formationLocal, formationSelectionNumber); 308
309 loadFormationObject.setSelectedFormation(formationSelectionNumber+1); 310 } 311 console.log("playFormations "); 312} 313 314export default playFormationsObject;
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.