I need to rotate the rotateTan to rotate when shift key is pressed. Eveything else in the JS works just not the rotating of the shapes when shift and click are pressed.
img"); 32 33 34 // for loop for(let items of tans) { 35 36 37 items.addEventListener("pointerdown", grabTan); } 38 39 // if else function grabTan(e) { if (e.shiftKey) { e.target.parentElement.removeChild(e.target); rotateTan(); } else eventX = e.clientX; 40 41 42 43 44 45 46 47 eventY = e.clientY; 48 e.target.style.touchAction = "none"; 49 zCounter++; 50 e.target.style.zIndex = zCounter; 51 52 tanX = e.target.offsetLeft; 53 tanY = e.target.offsetTop; 54 55 56 e.target.addEventListener("pointermove", moveTan); e.target.addEventListener("pointerup", dropTan); 57 58 59 60 } 61 62 function moveTan (e) { 63 let diffX = e.clientX - eventX; 64 let diffy = e.clientY - eventY; 65 e.target.style.left = tanX + diffX + "px"; e. target.style.top = tanY + diffY + "px"; 66 67 68 69 } 70 function dropTan(e) { e.target.removeEventListener("pointermove", moveTan); e. target.removeEventListener("pointerup", dropTan); 71 72 73 74 75 } "/>
Extracted text: "use strict"; 2 3 // Reference to the tangram puzzle board let puzzleBoard = document.getElementById ("puzzle"); // Counter for the zIndex style of each puzzle piece let zCounter = 1; 7 8. let eventX, eventY, tanX, tanY; 10 // Function to rotate a tan by a specified number of degrees function rotateTan(elem, deg) { 11 12 const obj = window.getComputedStyle(elem, null); const matrix = obj.getPropertyValue("transform"); let angle = 0; if (matrix !== "none") { const values = matrix.split('(') [1].split(')') [0].split(','); const a = values [0]; const b = values [1]; ang le = Math.round (Math.atan2(b, a) * (180/Math.PI)); 13 14 15 16 17 18 19 20 21 22 23 if (angle < 0)="" {="" |ang="" le="" +="360;" 24="" 25="" 26="" let="" newangle="angle" +="" deg;="" 27="" 28="" 29="" elem.style.transform="rotate(" +="" newangle="" +="" "deg)";="" 30="" 31="" node="" list="" representing="" the="" tangram="" pieces="" let="" tans="document.querySelectorAll("div#puzzle"> img"); 32 33 34 // for loop for(let items of tans) { 35 36 37 items.addEventListener("pointerdown", grabTan); } 38 39 // if else function grabTan(e) { if (e.shiftKey) { e.target.parentElement.removeChild(e.target); rotateTan(); } else eventX = e.clientX; 40 41 42 43 44 45 46 47 eventY = e.clientY; 48 e.target.style.touchAction = "none"; 49 zCounter++; 50 e.target.style.zIndex = zCounter; 51 52 tanX = e.target.offsetLeft; 53 tanY = e.target.offsetTop; 54 55 56 e.target.addEventListener("pointermove", moveTan); e.target.addEventListener("pointerup", dropTan); 57 58 59 60 } 61 62 function moveTan (e) { 63 let diffX = e.clientX - eventX; 64 let diffy = e.clientY - eventY; 65 e.target.style.left = tanX + diffX + "px"; e. target.style.top = tanY + diffY + "px"; 66 67 68 69 } 70 function dropTan(e) { e.target.removeEventListener("pointermove", moveTan); e. target.removeEventListener("pointerup", dropTan); 71 72 73 74 75 }
Extracted text: // if else function grabTan(e) { if (e.shiftKey) { e.target.parentElement.removeChild(e.target); rotateTan(); } else { eventX = e.clientX; eventY = e.clientY; e.target.style.touchAction = "none"; zCounter++; e.target.style.zIndex = zCounter; tanX = e.target.offsetLeft; tanY = e.target.offsetTop; e.target.addEventListener("pointermove", moveTan); e. target.addEventListener("pointerup", dropTan); }