added flipmove animation

Author: TamimEhsan

README.md

@@ -41,4 +41,17 @@ I have implemented a total of `14 algorithms` so far. And will try to add more l
 
 I am not sure if anyone would like to contribute to this project or not. But any kind of contributions are welcomes. Also if you like this please star this repo. It keeps me motivated.
 
-Note to self:
+### Special Features addition timeline
+
+- Commit 16: Added Flip Move animation to inplace sorting components
+
+
+### Note to self:
+
+To deploy recent changes to page
+
+```
+npm run build
+npm run deploy
+```
+

package-lock.json

@@ -13,6 +13,7 @@
     "fontsource-roboto": "^3.0.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-flip-move": "^3.0.4",
     "react-github-btn": "^1.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",

package.json

@@ -8,7 +8,9 @@ class Rect extends Component {
                 className='rect'
                 style={{height:this.props.rect.width,
                     background:this.checkColor(),
-                    margin:this.props.marg
+                    margin:this.props.marg,
+                    // float:'left',
+                    'vertical-align': 'middle'
                 }}
             >
 

src/sortComponents/rect.jsx

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import Rect from "./rect";
+import FlipMove from 'react-flip-move';
 
 class Rects extends Component {
     render() {
@@ -8,16 +9,22 @@ class Rects extends Component {
             margin=1;
         }
         return (
-            <div className="d-flex justify-content-center align-items-end">
+            <div>
+                <FlipMove
+                    className="d-flex justify-content-center align-items-end"
+                    duration={this.props.speed}
+                    // easing="cubic-bezier(.12,.36,.14,1.2)"
+                >
                 {this.props.rects.map( (rect,rectidx)=>{
                     return (
                         <Rect
                             marg={margin}
-                            key={rectidx}
+                            key={rect.kk}
                             rect={rect}
                         />
                     );
                 } )}
+                </FlipMove>
             </div>
         );
     }

src/sortComponents/rects.jsx

@@ -45,6 +45,7 @@ class Sort extends Component {
             <div className=' justify-content-center'>
 
                 <Rects
+                    speed={this.state.speed*10}
                     rects={this.state.rects}
                 />
                 { this.state.doubles && <hr style={{width:"90%"}}/>}
@@ -223,20 +224,21 @@ class Sort extends Component {
 
 }
 function sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
+    return new Promise(resolve => setTimeout(resolve, ms*10));
 }
 const getInitialRects = (tot) => {
     const rects = [];
     for(let i = 0;i<tot;i++){
-        rects.push(getRect());
+        rects.push(getRect(i));
     }
     return rects;
 }
-const getRect = () => {
+const getRect = (kk) => {
   return {
       width: Math.floor(Math.random() * 200)+50,
       isSorted:false,
-      isSorting:false
+      isSorting:false,
+      kk:kk
   }
 }
 export default Sort;