Added algorithms, changed folders structure and experiments

sm_react/.eslintcache

@@ -1 +1 @@
-[{"/Users/user/repos/sort-measurer/sm_django/sm_react/src/index.js":"1","/Users/user/repos/sort-measurer/sm_django/sm_react/src/App.js":"2","/Users/user/repos/sort-measurer/sm_django/sm_react/src/MainSection.js":"3","/Users/user/repos/sort-measurer/sm_django/sm_react/src/Navbar.js":"4","/Users/user/repos/sort-measurer/sm_django/sm_react/src/MainSheet.js":"5"},{"size":222,"mtime":1607967045945,"results":"6","hashOfConfig":"7"},{"size":318,"mtime":1607965957763,"results":"8","hashOfConfig":"7"},{"size":246,"mtime":1607968424050,"results":"9","hashOfConfig":"7"},{"size":290,"mtime":1610490068978,"results":"10","hashOfConfig":"7"},{"size":214,"mtime":1609099097125,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"jqi4ba",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/user/repos/sort-measurer/sm_django/sm_react/src/index.js",[],"/Users/user/repos/sort-measurer/sm_django/sm_react/src/App.js",[],"/Users/user/repos/sort-measurer/sm_django/sm_react/src/MainSection.js",[],"/Users/user/repos/sort-measurer/sm_django/sm_react/src/Navbar.js",["22"],"/Users/user/repos/sort-measurer/sm_django/sm_react/src/MainSheet.js",[],{"ruleId":"23","severity":1,"message":"24","line":3,"column":8,"nodeType":"25","messageId":"26","endLine":3,"endColumn":14},"no-unused-vars","'styled' is defined but never used.","Identifier","unusedVar"]
+[{"/Users/user/repos/sort-measurer/sm_react/src/index.js":"1","/Users/user/repos/sort-measurer/sm_react/src/App.js":"2","/Users/user/repos/sort-measurer/sm_react/src/components/Navbar.js":"3","/Users/user/repos/sort-measurer/sm_react/src/components/MainSection.js":"4","/Users/user/repos/sort-measurer/sm_react/src/components/MainSheet.js":"5"},{"size":222,"mtime":1607967045945,"results":"6","hashOfConfig":"7"},{"size":387,"mtime":1611411149184,"results":"8","hashOfConfig":"7"},{"size":290,"mtime":1611411123558,"results":"9","hashOfConfig":"7"},{"size":607,"mtime":1611411120019,"results":"10","hashOfConfig":"7"},{"size":214,"mtime":1611411118776,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"1dczzww",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/user/repos/sort-measurer/sm_react/src/index.js",[],["23","24"],"/Users/user/repos/sort-measurer/sm_react/src/App.js",[],"/Users/user/repos/sort-measurer/sm_react/src/components/Navbar.js",["25"],"/Users/user/repos/sort-measurer/sm_react/src/components/MainSection.js",[],"/Users/user/repos/sort-measurer/sm_react/src/components/MainSheet.js",[],{"ruleId":"26","replacedBy":"27"},{"ruleId":"28","replacedBy":"29"},{"ruleId":"30","severity":1,"message":"31","line":3,"column":8,"nodeType":"32","messageId":"33","endLine":3,"endColumn":14},"no-native-reassign",["34"],"no-negated-in-lhs",["35"],"no-unused-vars","'styled' is defined but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]

sm_react/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "guillotine-cut",
+  "name": "sort-measurer",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -1841,6 +1841,25 @@
         }
       }
     },
+    "@popperjs/core": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.6.0.tgz",
+      "integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw=="
+    },
+    "@restart/context": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+    },
+    "@restart/hooks": {
+      "version": "0.3.26",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.26.tgz",
+      "integrity": "sha512-7Hwk2ZMYm+JLWcb7R9qIXk1OoUg1Z+saKWqZXlrvFwT3w6UArVNWgxYOzf+PJoK9zZejp8okPAKTctthhXLt5g==",
+      "requires": {
+        "lodash": "^4.17.20",
+        "lodash-es": "^4.17.20"
+      }
+    },
     "@rollup/plugin-node-resolve": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
@@ -2221,6 +2240,11 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/classnames": {
+      "version": "2.2.11",
+      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.11.tgz",
+      "integrity": "sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw=="
+    },
     "@types/eslint": {
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.6.tgz",
@@ -2257,6 +2281,11 @@
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
       "integrity": "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA=="
     },
+    "@types/invariant": {
+      "version": "2.2.34",
+      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.34.tgz",
+      "integrity": "sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg=="
+    },
     "@types/istanbul-lib-coverage": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
@@ -2322,11 +2351,33 @@
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.1.5.tgz",
       "integrity": "sha512-UEyp8LwZ4Dg30kVU2Q3amHHyTn1jEdhCIE59ANed76GaT1Vp76DD3ZWSAxgCrw6wJ0TqeoBpqmfUHiUDPs//HQ=="
     },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
+    },
     "@types/q": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
       "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
     },
+    "@types/react": {
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.0.tgz",
+      "integrity": "sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
+      "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -2373,6 +2424,11 @@
         }
       }
     },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+    },
     "@types/webpack": {
       "version": "4.41.25",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.25.tgz",
@@ -3628,6 +3684,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.3.tgz",
+      "integrity": "sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4030,6 +4091,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -4796,6 +4862,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
+      "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw=="
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -5125,6 +5196,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -7614,6 +7694,14 @@
         }
       }
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -9724,6 +9812,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
       "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
     },
+    "lodash-es": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.20.tgz",
+      "integrity": "sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA=="
+    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -12115,6 +12208,15 @@
         "react-is": "^16.8.1"
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -12293,6 +12395,31 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+    "react-bootstrap": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.4.3.tgz",
+      "integrity": "sha512-4tYhk26KRnK0myMEp2wvNjOvnHMwWfa6pWFIiCtj9wewYaTxP7TrCf7MwcIMBgUzyX0SJXx6UbbDG0+hObiXNg==",
+      "requires": {
+        "@babel/runtime": "^7.4.2",
+        "@restart/context": "^2.1.4",
+        "@restart/hooks": "^0.3.21",
+        "@types/classnames": "^2.2.10",
+        "@types/invariant": "^2.2.33",
+        "@types/prop-types": "^15.7.3",
+        "@types/react": ">=16.9.35",
+        "@types/react-transition-group": "^4.4.0",
+        "@types/warning": "^3.0.0",
+        "classnames": "^2.2.6",
+        "dom-helpers": "^5.1.2",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "prop-types-extra": "^1.1.0",
+        "react-overlays": "^4.1.0",
+        "react-transition-group": "^4.4.1",
+        "uncontrollable": "^7.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.1.tgz",
@@ -12398,6 +12525,26 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-overlays": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.1.tgz",
+      "integrity": "sha512-WtJifh081e6M24KnvTQoNjQEpz7HoLxqt8TwZM7LOYIkYJ8i/Ly1Xi7RVte87ZVnmqQ4PFaFiNHZhSINPSpdBQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "@popperjs/core": "^2.5.3",
+        "@restart/hooks": "^0.3.25",
+        "@types/warning": "^3.0.0",
+        "dom-helpers": "^5.2.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -12469,6 +12616,17 @@
         "workbox-webpack-plugin": "5.1.4"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -14730,6 +14888,28 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "uncontrollable": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.1.1.tgz",
+      "integrity": "sha512-EcPYhot3uWTS3w00R32R2+vS8Vr53tttrvMj/yA1uYRhf8hbTG2GyugGqWDY0qIskxn0uTTojVd6wPYW9ZEf8Q==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": "^16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "dependencies": {
+        "@types/react": {
+          "version": "16.14.2",
+          "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.2.tgz",
+          "integrity": "sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ==",
+          "requires": {
+            "@types/prop-types": "*",
+            "csstype": "^3.0.2"
+          }
+        }
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -15067,6 +15247,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

sm_react/package.json

@@ -6,7 +6,9 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.6.0",
+    "bootstrap": "^4.5.3",
     "react": "^17.0.1",
+    "react-bootstrap": "^1.4.3",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",
     "styled-components": "^5.2.1",

sm_react/src/App.js

@@ -1,7 +1,8 @@
 import React from "react";
-import Navbar from "./Navbar.js";
+import Navbar from "./components/Navbar.js";
-import MainSection from "./MainSection.js";
+import MainSection from "./components/MainSection.js";
 import "./App.css";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 export default function App() {
   return (

sm_react/src/MainSection.js

@@ -1,12 +0,0 @@
-import React from "react";
-import "./MainSection.css";
-import MainSheet from "./MainSheet.js";
-
-export default function MainSection() {
-  return (
-    <div className="MainSection">
-      <h1>MainSection</h1>
-      <MainSheet />
-    </div>
-  );
-}

sm_react/src/Navbar.css

@@ -1,5 +0,0 @@
-.Navbar {
-  background: #191e36;
-  text-align: center;
-  flex: 0 0 7vw;
-}

sm_react/src/algorithms/bubbleSort.js

@@ -0,0 +1,27 @@
+import { swap } from "../helpers/helpers.js";
+
+const bubbleSort = (array, position, arraySteps, colorSteps) => {
+  let colorKey = colorSteps[colorSteps.length - 1].slice();
+
+  for (let i = 0; i < array.length - 1; i++) {
+    for (let j = 0; j < array.length - i - 1; j++) {
+      if (array[j] > array[j + 1]) {
+        array = swap(array, j, j + 1);
+      }
+      arraySteps.push(array.slice());
+      colorKey[j] = 1;
+      colorKey[j + 1] = 1;
+      colorSteps.push(colorKey.slice());
+      colorKey[j] = 0;
+      colorKey[j + 1] = 0;
+    }
+    colorKey[array.length - 1 - i] = 2;
+    arraySteps.push(array.slice());
+    colorSteps.push(colorKey.slice());
+  }
+
+  colorSteps[colorSteps.length - 1] = new Array(array.length).fill(2);
+  return;
+};
+
+export default bubbleSort;

sm_react/src/algorithms/mergeSort.js

@@ -0,0 +1,67 @@
+import { insertStep } from "../helpers/helpers.js";
+
+function mergeSort(array, position, arraySteps, colorSteps) {
+  if (array.length === 1) return array;
+  let mid = Math.floor(array.length / 2);
+
+  // Split and work recursively
+  let arrayA = mergeSort(array.slice(0, mid), position, arraySteps, colorSteps);
+  let arrayB = mergeSort(
+    array.slice(mid),
+    position + mid,
+    arraySteps,
+    colorSteps
+  );
+
+  let arrayNew = merge(arrayA, arrayB, position, arraySteps, colorSteps);
+  arraySteps.push(arraySteps[arraySteps.length - 1].slice());
+  colorSteps.push(
+    colorSteps[colorSteps.length - 1].fill(
+      arrayNew.length === arraySteps[0].length ? 2 : 0
+    )
+  );
+  return arrayNew;
+}
+
+const merge = (arrayA, arrayB, position, arraySteps, colorSteps) => {
+  let arrayNew = [];
+  let A = 0;
+  let B = 0;
+
+  while (arrayA.length > 0 && arrayB.length > 0) {
+    if (arrayA[A] < arrayB[B]) {
+      arrayNew.push(arrayA.shift());
+      insertStep(arrayNew, position, arraySteps);
+    } else {
+      arrayNew.push(arrayB.shift());
+      insertStep(arrayNew, position, arraySteps);
+    }
+    updateColor(position, colorSteps, arrayNew.length - 1, [], []);
+  }
+
+  // concatenate remaining values
+
+  if (arrayA.length !== 0 || arrayB.length !== 0) {
+    updateColor(position, colorSteps, arrayNew.length, arrayA, arrayB);
+    arrayNew = arrayNew.concat(arrayA);
+    arrayNew = arrayNew.concat(arrayB);
+    insertStep(arrayNew, position, arraySteps);
+  }
+
+  return arrayNew;
+};
+
+function updateColor(position, colorSteps, start, arrayA, arrayB) {
+  let colorKey = colorSteps[colorSteps.length - 1].slice();
+  let end = position + start + arrayA.length + arrayB.length;
+  start = start + position;
+
+  if (end === start) {
+    colorKey.fill(1, start, end + 1);
+  } else {
+    colorKey.fill(1, start, end);
+  }
+  colorSteps.push(colorKey);
+}
+
+export default mergeSort;

sm_react/src/algorithms/quickSort.js

@@ -0,0 +1,80 @@
+import { swap, insertStep } from "../helpers/helpers.js";
+
+const quickSort = (array, position, arraySteps, colorSteps) => {
+  if (array.length < 2) {
+    insertStep(array, position, arraySteps);
+
+    let colorKey = colorSteps[colorSteps.length - 1].slice();
+    colorKey[position] = 2;
+    colorSteps.push(colorKey);
+    return;
+  }
+
+  // pick median of three numbers as pivot and sent it to back
+  swap(array, pickPivot(array), array.length - 1);
+  insertStep(array, position, arraySteps);
+  colorSteps.push(colorSteps[colorSteps.length - 1].slice());
+
+  let pivot = array[array.length - 1];
+  let A = 0;
+  let B = array.length - 1;
+
+  // swap small value from right with big value from left
+  while (A < B) {
+    while (array[A] < pivot) {
+      insertStep(array, position, arraySteps);
+      let colorKey = colorSteps[colorSteps.length - 1].slice();
+      colorKey = colorKey.map((key) => (key === 2 ? 2 : 0));
+      colorKey[position + A] = 1;
+      colorKey[position + B] = 1;
+      colorSteps.push(colorKey);
+      A++;
+    }
+    while (array[B] >= pivot) {
+      insertStep(array, position, arraySteps);
+      let colorKey = colorSteps[colorSteps.length - 1].slice();
+      colorKey = colorKey.map((key) => (key === 2 ? 2 : 0));
+      colorKey[position + A] = 1;
+      colorKey[position + B] = 1;
+      colorSteps.push(colorKey);
+      B--;
+    }
+    if (A < B) {
+      swap(array, A, B);
+      insertStep(array, position, arraySteps);
+      let colorKey = colorSteps[colorSteps.length - 1].slice();
+      colorKey = colorKey.map((key) => (key === 2 ? 2 : 0));
+      colorKey[position + A] = 1;
+      colorKey[position + B] = 1;
+      colorSteps.push(colorKey);
+    }
+  }
+
+  // swap big value with pivot
+  let bigIndex = Math.max(A, B);
+
+  swap(array, bigIndex, array.length - 1);
+  insertStep(array, position, arraySteps);
+  let colorKey = colorSteps[colorSteps.length - 1].slice();
+  colorKey[position + bigIndex] = 2;
+  colorSteps.push(colorKey);
+
+  // recurse on two halves
+  quickSort(array.slice(0, A), position, arraySteps, colorSteps);
+  quickSort(array.slice(A + 1), position + A + 1, arraySteps, colorSteps);
+
+  return;
+};
+
+function pickPivot(array) {
+  let A = array[0];
+  let B = array[Math.floor(array.length / 2)];
+  let C = array[array.length - 1];
+
+  let middleValue = [A, B, C].sort()[1];
+  let middleIndex = array.indexOf(middleValue);
+
+  return middleIndex;
+}
+
+export default quickSort;

sm_react/src/components/MainSection.css

@@ -2,11 +2,21 @@
   background: #363c58;
   text-align: center;
   flex: 1;
+  padding: 1vw;
   /* height of the whole site (both columns) */
-  min-height: 100vw;
+  min-height: 75vw;
   /* === */
 }
 
 .MainSection > p {
   padding: 5vw;
 }
+
+.MainSection > .ProgressBar {
+  margin: 2vw auto;
+  width: 30vw;
+}
+
+.MainSection > input {
+  padding: 2vw;
+}

sm_react/src/components/MainSection.js

@@ -0,0 +1,25 @@
+import { React, useState } from "react";
+import "./MainSection.css";
+import MainSheet from "./MainSheet.js";
+import ProgressBar from "react-bootstrap/ProgressBar";
+
+export default function MainSection() {
+  const [rangeval, setRangeval] = useState(50);
+  return (
+    <div className="MainSection">
+      <h1>MainSection</h1>
+      <MainSheet />
+      <ProgressBar
+        className="ProgressBar"
+        now={rangeval}
+        label={`${rangeval}`}
+      />
+      <input
+        type="range"
+        min="0"
+        max="100"
+        onChange={(e) => setRangeval(e.target.value)}
+      />
+    </div>
+  );
+}

sm_react/src/components/Navbar.css

@@ -0,0 +1,17 @@
+.Navbar {
+  background: #191e36;
+  text-align: center;
+  flex: 0 0 12vw;
+  padding: 1vw;
+}
+
+.Navbar > p {
+  color: white;
+  transition: 0.3s;
+  -webkit-transition: 0.3s;
+}
+
+.Navbar > p:hover {
+  color: #191e36;
+  background: #9b1cfc;
+}

sm_react/src/helpers/helpers.js

@@ -0,0 +1,12 @@
+export function swap(array, indexA, indexB) {
+  let temp = array[indexA];
+  array[indexA] = array[indexB];
+  array[indexB] = temp;
+  return array;
+}
+
+export function insertStep(arrayNew, position, arraySteps) {
+  let currentStep = arraySteps[arraySteps.length - 1].slice();
+  currentStep.splice(position, arrayNew.length, ...arrayNew);
+  arraySteps.push(currentStep);
+}

sm_react/src/index.css

@@ -1,4 +1,8 @@
 @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap");
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",