NaiveGeeek/flip.html

## flip.html
<!DOCTYPE html>
<html>
  <head></head>
  <style>
    .square {
      height: 100px;
      width: 100px;
      margin: 10px;
    }
  </style>
  <body>
    <button onclick="shuffleboxes()">shuffle boxes</button>
    <div id="container">
      <div class="square" style="background-color: aqua"></div>
      <div class="square" style="background-color: black"></div>
      <div class="square" style="background-color: blue"></div>
      <div class="square" style="background-color: blueviolet"></div>
      <div class="square" style="background-color: brown"></div>
      <div class="square" style="background-color: burlywood"></div>
      <div class="square" style="background-color: chartreuse"></div>
      <div class="square" style="background-color: chocolate"></div>
      <div class="square" style="background-color: cornflowerblue"></div>
      <div class="square" style="background-color: darkgreen"></div>
      <div class="square" style="background-color: deeppink"></div>
      <div class="square" style="background-color: indianred"></div>
    </div>
  </body>
  <script>
    let list = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

    function shuffle(array) {
      for (let i = array.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i

        // swap elements array[i] and array[j]
        // we use "destructuring assignment" syntax to achieve that
        // you'll find more details about that syntax in later chapters
        // same can be written as:
        // let t = array[i]; array[i] = array[j]; array[j] = t
        [array[i], array[j]] = [array[j], array[i]];
      }
    }

    const allElements = document.getElementsByClassName("square");
    function shuffleboxes() {
      const prevSize = [];
      const newSize = [];
      for (let i = 0; i < allElements.length; i++) {
        prevSize.push(allElements[i].getBoundingClientRect());
      }
      shuffle(list);
      for (let i = 0; i < list.length; i++) {
        newSize.push(allElements[list[i]].getBoundingClientRect());
      }
      for (let i = 0; i < newSize.length; i++) {
        const deltaX = prevSize[i].left - newSize[i].left;
        const deltaY = prevSize[i].top - newSize[i].top;
        console.log(newSize[i].top, prevSize[i].top, deltaY, list[i]);

        requestAnimationFrame(() => {
          allElements[
            i
          ].style.transform = `translate(${deltaX}px, -${deltaY}px)`;
          allElements[i].style.transition = "transform 0s";
          requestAnimationFrame(() => {
            // allElements[i].style.transform = "";
            allElements[i].style.transition = "transform 5000ms";
          });
        });
      }
    }
  </script>
</html>
	<!DOCTYPE html>
	<html>
	<head></head>
	<style>
	.square {
	height: 100px;
	width: 100px;
	margin: 10px;
	}
	</style>
	<body>
	<button onclick="shuffleboxes()">shuffle boxes</button>
	<div id="container">
	<div class="square" style="background-color: aqua"></div>
	<div class="square" style="background-color: black"></div>
	<div class="square" style="background-color: blue"></div>
	<div class="square" style="background-color: blueviolet"></div>
	<div class="square" style="background-color: brown"></div>
	<div class="square" style="background-color: burlywood"></div>
	<div class="square" style="background-color: chartreuse"></div>
	<div class="square" style="background-color: chocolate"></div>
	<div class="square" style="background-color: cornflowerblue"></div>
	<div class="square" style="background-color: darkgreen"></div>
	<div class="square" style="background-color: deeppink"></div>
	<div class="square" style="background-color: indianred"></div>
	</div>
	</body>
	<script>
	let list = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

	function shuffle(array) {
	for (let i = array.length - 1; i > 0; i--) {
	let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i

	// swap elements array[i] and array[j]
	// we use "destructuring assignment" syntax to achieve that
	// you'll find more details about that syntax in later chapters
	// same can be written as:
	// let t = array[i]; array[i] = array[j]; array[j] = t
	[array[i], array[j]] = [array[j], array[i]];
	}
	}

	const allElements = document.getElementsByClassName("square");
	function shuffleboxes() {
	const prevSize = [];
	const newSize = [];
	for (let i = 0; i < allElements.length; i++) {
	prevSize.push(allElements[i].getBoundingClientRect());
	}
	shuffle(list);
	for (let i = 0; i < list.length; i++) {
	newSize.push(allElements[list[i]].getBoundingClientRect());
	}
	for (let i = 0; i < newSize.length; i++) {
	const deltaX = prevSize[i].left - newSize[i].left;
	const deltaY = prevSize[i].top - newSize[i].top;
	console.log(newSize[i].top, prevSize[i].top, deltaY, list[i]);

	requestAnimationFrame(() => {
	allElements[
	i
	].style.transform = `translate(${deltaX}px, -${deltaY}px)`;
	allElements[i].style.transition = "transform 0s";
	requestAnimationFrame(() => {
	// allElements[i].style.transform = "";
	allElements[i].style.transition = "transform 5000ms";
	});
	});
	}
	}
	</script>
	</html>