diff --git a/sm_react/.eslintcache b/sm_react/.eslintcache index 25502a0..9c487ff 100644 --- a/sm_react/.eslintcache +++ b/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"] \ No newline at end of file +[{"/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"] \ No newline at end of file diff --git a/sm_react/package-lock.json b/sm_react/package-lock.json index 86e8d85..cae5728 100644 --- a/sm_react/package-lock.json +++ b/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", diff --git a/sm_react/package.json b/sm_react/package.json index 8701924..c6f3281 100644 --- a/sm_react/package.json +++ b/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", diff --git a/sm_react/src/App.js b/sm_react/src/App.js index dc75251..b74bb79 100644 --- a/sm_react/src/App.js +++ b/sm_react/src/App.js @@ -1,7 +1,8 @@ import React from "react"; -import Navbar from "./Navbar.js"; -import MainSection from "./MainSection.js"; +import Navbar from "./components/Navbar.js"; +import MainSection from "./components/MainSection.js"; import "./App.css"; +import "bootstrap/dist/css/bootstrap.min.css"; export default function App() { return ( diff --git a/sm_react/src/MainSection.js b/sm_react/src/MainSection.js deleted file mode 100644 index e920222..0000000 --- a/sm_react/src/MainSection.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react"; -import "./MainSection.css"; -import MainSheet from "./MainSheet.js"; - -export default function MainSection() { - return ( -
-

MainSection

- -
- ); -} diff --git a/sm_react/src/Navbar.css b/sm_react/src/Navbar.css deleted file mode 100644 index c1d8a37..0000000 --- a/sm_react/src/Navbar.css +++ /dev/null @@ -1,5 +0,0 @@ -.Navbar { - background: #191e36; - text-align: center; - flex: 0 0 7vw; -} diff --git a/sm_react/src/algorithms/bubbleSort.js b/sm_react/src/algorithms/bubbleSort.js new file mode 100644 index 0000000..fd96a6b --- /dev/null +++ b/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; diff --git a/sm_react/src/algorithms/mergeSort.js b/sm_react/src/algorithms/mergeSort.js new file mode 100644 index 0000000..6fa9b4f --- /dev/null +++ b/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; diff --git a/sm_react/src/algorithms/quickSort.js b/sm_react/src/algorithms/quickSort.js new file mode 100644 index 0000000..4aa0d16 --- /dev/null +++ b/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; diff --git a/sm_react/src/MainSection.css b/sm_react/src/components/MainSection.css similarity index 53% rename from sm_react/src/MainSection.css rename to sm_react/src/components/MainSection.css index 9dd230a..f29f4a2 100644 --- a/sm_react/src/MainSection.css +++ b/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; +} diff --git a/sm_react/src/components/MainSection.js b/sm_react/src/components/MainSection.js new file mode 100644 index 0000000..65e4d23 --- /dev/null +++ b/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 ( +
+

MainSection

+ + + setRangeval(e.target.value)} + /> +
+ ); +} diff --git a/sm_react/src/MainSheet.css b/sm_react/src/components/MainSheet.css similarity index 100% rename from sm_react/src/MainSheet.css rename to sm_react/src/components/MainSheet.css diff --git a/sm_react/src/MainSheet.js b/sm_react/src/components/MainSheet.js similarity index 100% rename from sm_react/src/MainSheet.js rename to sm_react/src/components/MainSheet.js diff --git a/sm_react/src/components/Navbar.css b/sm_react/src/components/Navbar.css new file mode 100644 index 0000000..688309e --- /dev/null +++ b/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; +} diff --git a/sm_react/src/Navbar.js b/sm_react/src/components/Navbar.js similarity index 100% rename from sm_react/src/Navbar.js rename to sm_react/src/components/Navbar.js diff --git a/sm_react/src/helpers/helpers.js b/sm_react/src/helpers/helpers.js new file mode 100644 index 0000000..f1f77c0 --- /dev/null +++ b/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); +} diff --git a/sm_react/src/index.css b/sm_react/src/index.css index 35ace8d..a5657a8 100644 --- a/sm_react/src/index.css +++ b/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",