From f23f2e05d8e649f31f5cf81d2b9db47df8ae4d72 Mon Sep 17 00:00:00 2001 From: username Date: Mon, 1 Feb 2021 21:27:10 +0100 Subject: [PATCH] First properly working implementation --- .eslintcache | 2 +- src/App.js | 3 +-- src/Test.js | 35 +++++++++++++++++++++++++++++++++++ src/components/List.css | 9 +++++++++ src/components/List.js | 21 +++++++++++++++++---- src/components/Workplace.js | 18 ++++++++++-------- 6 files changed, 73 insertions(+), 15 deletions(-) create mode 100644 src/Test.js create mode 100644 src/components/List.css diff --git a/.eslintcache b/.eslintcache index 77e0101..2993719 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"/Users/user/repos/sort-measurer/src/index.js":"1","/Users/user/repos/sort-measurer/src/App.js":"2","/Users/user/repos/sort-measurer/src/reportWebVitals.js":"3","/Users/user/repos/sort-measurer/src/components/Playground.js":"4","/Users/user/repos/sort-measurer/src/components/Logo.js":"5","/Users/user/repos/sort-measurer/src/components/Workplace.js":"6","/Users/user/repos/sort-measurer/src/components/List.js":"7"},{"size":500,"mtime":1612120197176,"results":"8","hashOfConfig":"9"},{"size":456,"mtime":1612133288528,"results":"10","hashOfConfig":"9"},{"size":362,"mtime":1611856800076,"results":"11","hashOfConfig":"9"},{"size":3727,"mtime":1612122157515,"results":"12","hashOfConfig":"9"},{"size":2938,"mtime":1612132213603,"results":"13","hashOfConfig":"9"},{"size":1047,"mtime":1612134613898,"results":"14","hashOfConfig":"9"},{"size":221,"mtime":1612134394816,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"ff9ndh",{"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,"usedDeprecatedRules":"22"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"25","usedDeprecatedRules":"22"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"28","usedDeprecatedRules":"22"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"/Users/user/repos/sort-measurer/src/index.js",[],"/Users/user/repos/sort-measurer/src/App.js",["33"],"/Users/user/repos/sort-measurer/src/reportWebVitals.js",[],["34","35"],"/Users/user/repos/sort-measurer/src/components/Playground.js",["36"],"import { useState } from \"react\";\nimport { useTheme } from \"css-vars-hook\";\n\nimport \"./Playground.css\";\n\nclass Rectangle {\n constructor(height, width) {\n this.height = height;\n this.width = width;\n }\n get area() {\n return this.calcArea();\n }\n calcArea() {\n return this.height * this.width;\n }\n}\n/*\nconst tab = [rect1.area, rect2.area, rect3.area];\nconst sortedtab = tab.sort(function (tab, temp) {\n return tab - temp;\n});\n*/\n/*\n\n\nThere are a few ways of doing this, so I'll just give an example of a simple to understand (if somewhat inefficient) method that should still give fairly decent results.\n\n Start by ordering your boxes from largest to smallest.\n Presume that your first box is going to be square (it won't end up that way, but it will end close). Take sqrt(area[1]) to get the length of its side. Take that width as the width you want for your first column.\n Given that width, fill as many more rows as you can in that column.\n Add up how much total area you have put in the column; resize its width to be match that (it will now be a little thinner).\n Repeat steps 1-3 for the rest of the available boxes. When you get to the point where the target width for your first box in the column is wider than the amount of space you have left, just use that width.\n The remaining boxes should cleanly fit into that remaining space in that column.\n\nThis will give you aligned columns, with varying height divisions. As an alternative, you can flip \"row\" and \"column\" to get constant row divisions with varying column splits.\n\n\n*/\n\nexport default function Playground(props) {\n const rectangleMeasures = { boxWidth: \"200px\", boxHeight: \"300px\" };\n const [sheetWidth, setSheetWidth] = useState(\"\");\n const [sheetHeight, setSheetHeight] = useState(\"\");\n const [rectangleWidth, setRectangleWidth] = useState(\n rectangleMeasures.boxWidth\n );\n const [rectangleHeight, setRectangleHeight] = useState(\n rectangleMeasures.boxHeight\n );\n\n const { setRef, setVariable } = useTheme(rectangleMeasures);\n\n const handleSheetDimensionsSubmit = (e) => {\n e.preventDefault();\n alert(`Sheet dimensons: ${sheetWidth} x ${sheetHeight}`);\n };\n const handleRectangleDimensionsSubmit = (e) => {\n e.preventDefault();\n setVariable(\"boxWidth\", rectangleWidth);\n setVariable(\"boxHeight\", rectangleHeight);\n };\n return (\n <>\n

{props.title}

\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n );\n}\n","/Users/user/repos/sort-measurer/src/components/Logo.js",["37"],"import { logRoles } from \"@testing-library/react\";\n\nexport default function Logo() {\n var randomColor = Math.floor(Math.random() * 16777215).toString(16);\n var current = \"#\" + randomColor;\n return (\n <>\n {\" \"}\n \n \n \n \n \n \n \n \n );\n}\n","/Users/user/repos/sort-measurer/src/components/Workplace.js",["38","39"],"/Users/user/repos/sort-measurer/src/components/List.js",[],{"ruleId":"40","severity":1,"message":"41","line":2,"column":8,"nodeType":"42","messageId":"43","endLine":2,"endColumn":18},{"ruleId":"44","replacedBy":"45"},{"ruleId":"46","replacedBy":"47"},{"ruleId":"40","severity":1,"message":"48","line":6,"column":7,"nodeType":"42","messageId":"43","endLine":6,"endColumn":16},{"ruleId":"40","severity":1,"message":"49","line":1,"column":10,"nodeType":"42","messageId":"43","endLine":1,"endColumn":18},{"ruleId":"40","severity":1,"message":"50","line":7,"column":10,"nodeType":"42","messageId":"43","endLine":7,"endColumn":24},{"ruleId":"40","severity":1,"message":"51","line":7,"column":26,"nodeType":"42","messageId":"43","endLine":7,"endColumn":43},"no-unused-vars","'Playground' is defined but never used.","Identifier","unusedVar","no-native-reassign",["52"],"no-negated-in-lhs",["53"],"'Rectangle' is defined but never used.","'logRoles' is defined but never used.","'rectangleArray' is assigned a value but never used.","'setRectangleArray' is assigned a value but never used.","no-global-assign","no-unsafe-negation"] \ No newline at end of file +[{"/Users/user/repos/sort-measurer/src/index.js":"1","/Users/user/repos/sort-measurer/src/App.js":"2","/Users/user/repos/sort-measurer/src/reportWebVitals.js":"3","/Users/user/repos/sort-measurer/src/components/Playground.js":"4","/Users/user/repos/sort-measurer/src/components/Logo.js":"5","/Users/user/repos/sort-measurer/src/components/Workplace.js":"6","/Users/user/repos/sort-measurer/src/components/List.js":"7","/Users/user/repos/sort-measurer/src/Test.js":"8"},{"size":500,"mtime":1612120197176,"results":"9","hashOfConfig":"10"},{"size":406,"mtime":1612207933629,"results":"11","hashOfConfig":"10"},{"size":362,"mtime":1611856800076,"results":"12","hashOfConfig":"10"},{"size":3727,"mtime":1612122157515,"results":"13","hashOfConfig":"10"},{"size":2938,"mtime":1612132213603,"results":"14","hashOfConfig":"10"},{"size":966,"mtime":1612210139453,"results":"15","hashOfConfig":"10"},{"size":477,"mtime":1612210626009,"results":"16","hashOfConfig":"10"},{"size":837,"mtime":1612207903507,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"ff9ndh",{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"27","usedDeprecatedRules":"24"},{"filePath":"28","messages":"29","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"30","usedDeprecatedRules":"24"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/user/repos/sort-measurer/src/index.js",[],"/Users/user/repos/sort-measurer/src/App.js",[],"/Users/user/repos/sort-measurer/src/reportWebVitals.js",[],["37","38"],"/Users/user/repos/sort-measurer/src/components/Playground.js",["39"],"import { useState } from \"react\";\nimport { useTheme } from \"css-vars-hook\";\n\nimport \"./Playground.css\";\n\nclass Rectangle {\n constructor(height, width) {\n this.height = height;\n this.width = width;\n }\n get area() {\n return this.calcArea();\n }\n calcArea() {\n return this.height * this.width;\n }\n}\n/*\nconst tab = [rect1.area, rect2.area, rect3.area];\nconst sortedtab = tab.sort(function (tab, temp) {\n return tab - temp;\n});\n*/\n/*\n\n\nThere are a few ways of doing this, so I'll just give an example of a simple to understand (if somewhat inefficient) method that should still give fairly decent results.\n\n Start by ordering your boxes from largest to smallest.\n Presume that your first box is going to be square (it won't end up that way, but it will end close). Take sqrt(area[1]) to get the length of its side. Take that width as the width you want for your first column.\n Given that width, fill as many more rows as you can in that column.\n Add up how much total area you have put in the column; resize its width to be match that (it will now be a little thinner).\n Repeat steps 1-3 for the rest of the available boxes. When you get to the point where the target width for your first box in the column is wider than the amount of space you have left, just use that width.\n The remaining boxes should cleanly fit into that remaining space in that column.\n\nThis will give you aligned columns, with varying height divisions. As an alternative, you can flip \"row\" and \"column\" to get constant row divisions with varying column splits.\n\n\n*/\n\nexport default function Playground(props) {\n const rectangleMeasures = { boxWidth: \"200px\", boxHeight: \"300px\" };\n const [sheetWidth, setSheetWidth] = useState(\"\");\n const [sheetHeight, setSheetHeight] = useState(\"\");\n const [rectangleWidth, setRectangleWidth] = useState(\n rectangleMeasures.boxWidth\n );\n const [rectangleHeight, setRectangleHeight] = useState(\n rectangleMeasures.boxHeight\n );\n\n const { setRef, setVariable } = useTheme(rectangleMeasures);\n\n const handleSheetDimensionsSubmit = (e) => {\n e.preventDefault();\n alert(`Sheet dimensons: ${sheetWidth} x ${sheetHeight}`);\n };\n const handleRectangleDimensionsSubmit = (e) => {\n e.preventDefault();\n setVariable(\"boxWidth\", rectangleWidth);\n setVariable(\"boxHeight\", rectangleHeight);\n };\n return (\n <>\n

{props.title}

\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n );\n}\n","/Users/user/repos/sort-measurer/src/components/Logo.js",["40"],"import { logRoles } from \"@testing-library/react\";\n\nexport default function Logo() {\n var randomColor = Math.floor(Math.random() * 16777215).toString(16);\n var current = \"#\" + randomColor;\n return (\n <>\n {\" \"}\n \n \n \n \n \n \n \n \n );\n}\n","/Users/user/repos/sort-measurer/src/components/Workplace.js",[],"/Users/user/repos/sort-measurer/src/components/List.js",[],"/Users/user/repos/sort-measurer/src/Test.js",[],{"ruleId":"41","replacedBy":"42"},{"ruleId":"43","replacedBy":"44"},{"ruleId":"45","severity":1,"message":"46","line":6,"column":7,"nodeType":"47","messageId":"48","endLine":6,"endColumn":16},{"ruleId":"45","severity":1,"message":"49","line":1,"column":10,"nodeType":"47","messageId":"48","endLine":1,"endColumn":18},"no-native-reassign",["50"],"no-negated-in-lhs",["51"],"no-unused-vars","'Rectangle' is defined but never used.","Identifier","unusedVar","'logRoles' is defined but never used.","no-global-assign","no-unsafe-negation"] \ No newline at end of file diff --git a/src/App.js b/src/App.js index 4220339..1fced69 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,8 @@ import "./App.css"; -import Playground from "./components/Playground"; import Logo from "./components/Logo"; import Workplace from "./components/Workplace"; // + function App() { return ( <> @@ -11,7 +11,6 @@ function App() {

Guillotine-cutter App

- diff --git a/src/Test.js b/src/Test.js new file mode 100644 index 0000000..98c6640 --- /dev/null +++ b/src/Test.js @@ -0,0 +1,35 @@ +import React from "react"; +class Test extends React.Component { + constructor(props) { + super(props); + this.state = { + value: "Please write an essay about your favorite DOM element.", + }; + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } + + handleChange(event) { + this.setState({ value: event.target.value }); + } + handleSubmit(event) { + alert("An essay was submitted: " + this.state.value); + event.preventDefault(); + } + + render() { + return ( +
+