From f102e9fdd9a97ed52d18248a1d547cf0e34dc040 Mon Sep 17 00:00:00 2001 From: Justin Tieu Date: Thu, 7 Sep 2023 23:01:12 +1000 Subject: [PATCH 1/7] feat(parameterpane): base impl of new components --- .../ParameterComponents/ParameterButton.tsx | 23 ++++ .../ParameterComponents/ParameterLabel.tsx | 14 ++- src/components/ParametersBar.tsx | 114 ++++++++++++++---- 3 files changed, 123 insertions(+), 28 deletions(-) create mode 100644 src/components/ParameterComponents/ParameterButton.tsx diff --git a/src/components/ParameterComponents/ParameterButton.tsx b/src/components/ParameterComponents/ParameterButton.tsx new file mode 100644 index 0000000..cdb0ebc --- /dev/null +++ b/src/components/ParameterComponents/ParameterButton.tsx @@ -0,0 +1,23 @@ +import styled from 'styled-components'; + +const ParamButton = styled.button` + border-radius: 20px; + height: 35px; + width: 100%; + padding: 10px 20px 7px 20px; + background-color: #D9D9D9; + color: #464646; + font-size: 14px; + border: none; + cursor: pointer; +` + +export default function ParameterButton(props : { + label: string +}){ + return ( + + {props.label} + + ) +} diff --git a/src/components/ParameterComponents/ParameterLabel.tsx b/src/components/ParameterComponents/ParameterLabel.tsx index 2af06a3..6e1c42f 100644 --- a/src/components/ParameterComponents/ParameterLabel.tsx +++ b/src/components/ParameterComponents/ParameterLabel.tsx @@ -1,6 +1,12 @@ import { QuestionCircleOutlined } from "@ant-design/icons"; import { Tooltip } from "antd" +import styled from 'styled-components'; +const Lab = styled.div` + align-items:center; + height: 100%; + display:flex; +`; export default function ParameterLabel(props: { title: string, @@ -10,6 +16,10 @@ export default function ParameterLabel(props: { if (props.tooltip) { tooltip.push() } - const label = (
{props.title}  {tooltip}
) - return label; + + return ( + + {props.title}  {tooltip} + + ) } diff --git a/src/components/ParametersBar.tsx b/src/components/ParametersBar.tsx index a1d0ccc..f80568a 100644 --- a/src/components/ParametersBar.tsx +++ b/src/components/ParametersBar.tsx @@ -1,35 +1,77 @@ import styled from 'styled-components'; -import { ColorPicker, Divider, Col, Space, Row } from 'antd'; +import { ColorPicker, Col, Space, Row, Card } from 'antd'; import { useEffect, useMemo, useState } from 'react'; import type { Color } from 'antd/es/color-picker'; import { Color as ThreeColor } from 'three'; import { type SimulationParams } from './Simulation'; import { type SpaceSize } from 'antd/es/space'; +import ParameterButton from './ParameterComponents/ParameterButton'; +import ParameterLabel from './ParameterComponents/ParameterLabel'; + const Container = styled(Space)` - background-color: #d3d3d3; - color: #000000; + background-color: #797979; + color: #FFF; + width: 20rem; - height: calc(100% - 5rem); - border-right: 2px solid #808080; + height: calc(100% - 6.0rem); + font-size: 2rem; - min-height: 90%; position: absolute; display: flex; + text-align:left; + + // set curves + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; + + padding:12px; + @media (max-width: 760px) { display: none; } `; + const Title = styled.span` font-family: 'Roboto', sans-serif; - font-size: 1.4rem; + font-size: 2.0rem; @media (max-width: 760px) { display: none; } `; +const Category = styled(Card) ` + font-family: 'Roboto', sans-serif; + background-color: #797979; + text-align: "left"; + font-size: 1.0rem; + color: #FFFFFF; +`; + +const BackButton = styled.button` + width: 40px; + height: 40px; + border-radius: 50%; + background-color: #D9D9D9; + color: #464646; + font-size: 16px; + border: none; + cursor: pointer; +` + +function ShowHideButton(props: { + toggleVisible: ()=>void +}) { + const toggleVis = props.toggleVisible + return( + + {"<<"} + + ) +} + export default function ParametersBar(props: { params: SimulationParams; setParams: React.Dispatch>; @@ -48,6 +90,8 @@ export default function ParametersBar(props: { [colorHigh], ); + const toggleBar = () => console.log("e"); + useEffect(() => { setParams((prev) => { return { @@ -60,29 +104,47 @@ export default function ParametersBar(props: { const space: [SpaceSize, SpaceSize] = ['large', 'small']; return ( - - - - Parameters - - Simulator Color - - - Low - - - - + + { /* Show/hide button */ } + + - - - High + + { /* Pane header */ } + Parameters + + + - - + + - + + + + + { /* Simulation colour */ } + + + + + + + + + + + + + + + + + + + + ); } From 376f9fe751a0e319c74b10d29daa748ecab0a6f8 Mon Sep 17 00:00:00 2001 From: Justin Tieu Date: Fri, 8 Sep 2023 01:15:15 +1000 Subject: [PATCH 2/7] feat(parameterpane): added easy expert modes --- .../ParameterComponents/ParameterButton.tsx | 5 +- src/components/ParametersBar.tsx | 127 +++++++++++++----- 2 files changed, 97 insertions(+), 35 deletions(-) diff --git a/src/components/ParameterComponents/ParameterButton.tsx b/src/components/ParameterComponents/ParameterButton.tsx index cdb0ebc..81a4ae7 100644 --- a/src/components/ParameterComponents/ParameterButton.tsx +++ b/src/components/ParameterComponents/ParameterButton.tsx @@ -13,10 +13,11 @@ const ParamButton = styled.button` ` export default function ParameterButton(props : { - label: string + label: string; + onClick?: () => void; }){ return ( - + {props.label} ) diff --git a/src/components/ParametersBar.tsx b/src/components/ParametersBar.tsx index f80568a..6bc724c 100644 --- a/src/components/ParametersBar.tsx +++ b/src/components/ParametersBar.tsx @@ -1,3 +1,4 @@ +import { DoubleRightOutlined, DoubleLeftOutlined } from "@ant-design/icons"; import styled from 'styled-components'; import { ColorPicker, Col, Space, Row, Card } from 'antd'; import { useEffect, useMemo, useState } from 'react'; @@ -22,7 +23,6 @@ const Container = styled(Space)` text-align:left; - // set curves border-top-right-radius: 20px; border-bottom-right-radius: 20px; @@ -33,6 +33,11 @@ const Container = styled(Space)` } `; +const ButtonDiv = styled.span` + position:absolute; + left:10px; +`; + const Title = styled.span` font-family: 'Roboto', sans-serif; font-size: 2.0rem; @@ -62,24 +67,106 @@ const BackButton = styled.button` ` function ShowHideButton(props: { - toggleVisible: ()=>void + isVisible: boolean, + setVisible: (inp:boolean)=>void, }) { - const toggleVis = props.toggleVisible + const isVisible = props.isVisible + const setVisible = props.setVisible + return( - - {"<<"} + setVisible(!isVisible)}> + {isVisible ? () : ()} ) } +// whether the pane is in expert or easy mode +enum ControlDifficulty { + Easy = 1 << 0, + Expert = 1 << 1, +} + export default function ParametersBar(props: { params: SimulationParams; setParams: React.Dispatch>; }): React.ReactElement { + const [isPaneVisible, setPaneVisible] = useState(true); + const space: [SpaceSize, SpaceSize] = ['large', 'small']; + + // for ease of development, we'll default to expert mode for now + const [controlDifficulty, setControlDifficulty] = useState(ControlDifficulty.Expert); + + // filter a list of components based on which difficulty flags it holds + const filterOnDifficulty = (cd: ControlDifficulty) => + getAllCategories(props) + .map(([dif, category]) => (dif & cd) && category) + .filter((x) => x!=0) // the && operator returns 0 when the condition is false, + // which react renders as actual 0s. we'll filter these to prevent this + + // to prevent a "rendered fewer hooks than expected" error, we preload both configurations + // and switch between them + const easy = filterOnDifficulty(ControlDifficulty.Easy); + const exp = filterOnDifficulty(ControlDifficulty.Expert); + + if (isPaneVisible) + { + return ( + + { /* hide button */ } + + + + + { /* header */ } + Parameters + + + setControlDifficulty(ControlDifficulty.Easy)}/> + + + setControlDifficulty(ControlDifficulty.Expert)}/> + + + + + + + { /* render the correct pane based on current control difficulty */ } + { controlDifficulty == ControlDifficulty.Easy && easy } + { controlDifficulty == ControlDifficulty.Expert && exp } + + + ); + } else { + return( + + + + ); + } +} + +// CATEGORIES + +// returns a list of categories for the parameter pane +function getAllCategories(props:{ + setParams: React.Dispatch>; +}): [ControlDifficulty, React.ReactElement][] { + // -- Add all the categories here -- + return [ + [ControlDifficulty.Easy | ControlDifficulty.Expert, SimulationColour(props)], + ] +} + +// allows the user to change the colour of the simulation +function SimulationColour(props:{ + setParams: React.Dispatch>; +}): React.ReactElement { + const setParams = props.setParams; + const [colorLow, setColorLow] = useState('#0000FF'); const [colorHigh, setColorHigh] = useState('#FF0000'); - const setParams = props.setParams; const colorLowString = useMemo( () => (typeof colorLow === 'string' ? colorLow : colorLow.toHexString()), @@ -90,8 +177,6 @@ export default function ParametersBar(props: { [colorHigh], ); - const toggleBar = () => console.log("e"); - useEffect(() => { setParams((prev) => { return { @@ -101,30 +186,8 @@ export default function ParametersBar(props: { }; }); }, [colorLowString, colorHighString, setParams]); - const space: [SpaceSize, SpaceSize] = ['large', 'small']; - return ( - - { /* Show/hide button */ } - - - - - { /* Pane header */ } - Parameters - - - - - - - - - - - - - { /* Simulation colour */ } + return( @@ -144,7 +207,5 @@ export default function ParametersBar(props: { - - ); } From 0152d414ff47319d3fefa30dd26d5eed4e5921d9 Mon Sep 17 00:00:00 2001 From: Justin Tieu Date: Mon, 11 Sep 2023 05:38:00 +1000 Subject: [PATCH 3/7] fix(parameter): simplify category filter logic --- src/components/ParametersBar.tsx | 47 +++++++++++++++----------------- 1 file changed, 22 insertions(+), 25 deletions(-) diff --git a/src/components/ParametersBar.tsx b/src/components/ParametersBar.tsx index 6bc724c..a69e4cf 100644 --- a/src/components/ParametersBar.tsx +++ b/src/components/ParametersBar.tsx @@ -82,8 +82,8 @@ function ShowHideButton(props: { // whether the pane is in expert or easy mode enum ControlDifficulty { - Easy = 1 << 0, - Expert = 1 << 1, + Easy, + Expert } export default function ParametersBar(props: { @@ -96,18 +96,6 @@ export default function ParametersBar(props: { // for ease of development, we'll default to expert mode for now const [controlDifficulty, setControlDifficulty] = useState(ControlDifficulty.Expert); - // filter a list of components based on which difficulty flags it holds - const filterOnDifficulty = (cd: ControlDifficulty) => - getAllCategories(props) - .map(([dif, category]) => (dif & cd) && category) - .filter((x) => x!=0) // the && operator returns 0 when the condition is false, - // which react renders as actual 0s. we'll filter these to prevent this - - // to prevent a "rendered fewer hooks than expected" error, we preload both configurations - // and switch between them - const easy = filterOnDifficulty(ControlDifficulty.Easy); - const exp = filterOnDifficulty(ControlDifficulty.Expert); - if (isPaneVisible) { return ( @@ -132,8 +120,25 @@ export default function ParametersBar(props: { { /* render the correct pane based on current control difficulty */ } - { controlDifficulty == ControlDifficulty.Easy && easy } - { controlDifficulty == ControlDifficulty.Expert && exp } + { + // add all easy controls here + controlDifficulty == ControlDifficulty.Easy && + <> + + } + + { + + // add all expert controls here + controlDifficulty == ControlDifficulty.Expert && + <> + + } + + { /* add controls to be shown to both here */ } + + + ); @@ -148,15 +153,6 @@ export default function ParametersBar(props: { // CATEGORIES -// returns a list of categories for the parameter pane -function getAllCategories(props:{ - setParams: React.Dispatch>; -}): [ControlDifficulty, React.ReactElement][] { - // -- Add all the categories here -- - return [ - [ControlDifficulty.Easy | ControlDifficulty.Expert, SimulationColour(props)], - ] -} // allows the user to change the colour of the simulation function SimulationColour(props:{ @@ -209,3 +205,4 @@ function SimulationColour(props:{ ); } + From b4796bb84a62f183d3ef798777d0a39396027be3 Mon Sep 17 00:00:00 2001 From: Justin Tieu Date: Mon, 11 Sep 2023 05:45:17 +1000 Subject: [PATCH 4/7] fix(parameter): level height of `ShowHide` button --- src/components/ParametersBar.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/ParametersBar.tsx b/src/components/ParametersBar.tsx index a69e4cf..4e53ea1 100644 --- a/src/components/ParametersBar.tsx +++ b/src/components/ParametersBar.tsx @@ -34,6 +34,7 @@ const Container = styled(Space)` `; const ButtonDiv = styled.span` + top: calc(6.0rem - 5px); position:absolute; left:10px; `; @@ -138,8 +139,6 @@ export default function ParametersBar(props: { { /* add controls to be shown to both here */ } - - ); } else { From 4eaa80f5f4e4edda37f3e7714990c6d3e9bd04b6 Mon Sep 17 00:00:00 2001 From: Justin Tieu Date: Sat, 16 Sep 2023 08:14:09 +1000 Subject: [PATCH 5/7] fix(ParameterPane): ran formatting command --- src/App.tsx | 3 +- .../ParameterComponents/ChoiceParameter.tsx | 58 ++++--- .../ParameterComponents/DropdownParameter.tsx | 34 ++-- .../ParameterComponents/ParameterButton.tsx | 18 +-- .../ParameterComponents/ParameterLabel.tsx | 22 +-- .../ParameterComponents/SliderParameter.tsx | 64 ++++---- src/components/ParametersBar.tsx | 149 +++++++++--------- src/pages/about.tsx | 4 +- src/workers/modelWorker.ts | 5 +- 9 files changed, 196 insertions(+), 161 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index aa38b74..6af820c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -88,8 +88,7 @@ function App() {
- + {mainPageComponent}
diff --git a/src/components/ParameterComponents/ChoiceParameter.tsx b/src/components/ParameterComponents/ChoiceParameter.tsx index cf317f6..ef35cba 100644 --- a/src/components/ParameterComponents/ChoiceParameter.tsx +++ b/src/components/ParameterComponents/ChoiceParameter.tsx @@ -1,49 +1,61 @@ - import styled from 'styled-components'; -import { useState } from "react"; +import { useState } from 'react'; const Container = styled.div` margin: 5px 0; -` -const Row = styled.div`` -const Col = styled.span`` +`; +const Row = styled.div``; +const Col = styled.span``; const Button = styled.button` -webkit-appearance: none; appearance: none; - border:none; + border: none; padding: 5px 15px; border-radius: calc(1rem + 5px); color: black; - background: rgb(217,217,217); + background: rgb(217, 217, 217); margin-right: 15px; &.primary { - background: rgb(42,40,161); + background: rgb(42, 40, 161); color: white; } -` +`; export default function ChoiceParameter(props: { - onChange: (value: string)=> void, - values: string[], - initValue?: string, + onChange: (value: string) => void; + values: string[]; + initValue?: string; }): React.ReactElement { - - const [value, setValue] = useState(props.values[0]) + const [value, setValue] = useState(props.values[0]); if (props.initValue) { - setValue(props.initValue) + setValue(props.initValue); } // split values into rows of 3 - const rows: string[][] = [] - for (let i=0; i - {rows.map((row, i) => ({row.map((val, i) => ( - - ))}))} - + + {rows.map((row, i) => ( + + {row.map((val, i) => ( + + + + ))} + + ))} + ); } diff --git a/src/components/ParameterComponents/DropdownParameter.tsx b/src/components/ParameterComponents/DropdownParameter.tsx index 1b8fcdb..febc9c9 100644 --- a/src/components/ParameterComponents/DropdownParameter.tsx +++ b/src/components/ParameterComponents/DropdownParameter.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { useState } from "react"; +import { useState } from 'react'; const Select = styled.select` -webkit-appearance: none; @@ -7,27 +7,33 @@ const Select = styled.select` width: 15rem; display: block; border: black 1px solid; - background: rgb(217,217,217); + background: rgb(217, 217, 217); margin: 5px 0; padding: 0 5px; height: 24px; -` +`; export default function DropdownParameter(props: { - onChange: (value: string)=> void, - values: string[], - initValue?: string, + onChange: (value: string) => void; + values: string[]; + initValue?: string; }): React.ReactElement { - - const [value, setValue] = useState(props.values[0]) + const [value, setValue] = useState(props.values[0]); if (props.initValue) { - setValue(props.initValue) + setValue(props.initValue); } return ( - + ); } diff --git a/src/components/ParameterComponents/ParameterButton.tsx b/src/components/ParameterComponents/ParameterButton.tsx index 81a4ae7..cac33bc 100644 --- a/src/components/ParameterComponents/ParameterButton.tsx +++ b/src/components/ParameterComponents/ParameterButton.tsx @@ -5,20 +5,16 @@ const ParamButton = styled.button` height: 35px; width: 100%; padding: 10px 20px 7px 20px; - background-color: #D9D9D9; + background-color: #d9d9d9; color: #464646; font-size: 14px; border: none; cursor: pointer; -` +`; -export default function ParameterButton(props : { - label: string; - onClick?: () => void; -}){ - return ( - - {props.label} - - ) +export default function ParameterButton(props: { + label: string; + onClick?: () => void; +}) { + return {props.label}; } diff --git a/src/components/ParameterComponents/ParameterLabel.tsx b/src/components/ParameterComponents/ParameterLabel.tsx index 6e1c42f..ccaae44 100644 --- a/src/components/ParameterComponents/ParameterLabel.tsx +++ b/src/components/ParameterComponents/ParameterLabel.tsx @@ -1,25 +1,29 @@ -import { QuestionCircleOutlined } from "@ant-design/icons"; -import { Tooltip } from "antd" +import { QuestionCircleOutlined } from '@ant-design/icons'; +import { Tooltip } from 'antd'; import styled from 'styled-components'; const Lab = styled.div` - align-items:center; + align-items: center; height: 100%; - display:flex; + display: flex; `; export default function ParameterLabel(props: { - title: string, - tooltip?: string, + title: string; + tooltip?: string; }): React.ReactElement { - const tooltip: React.ReactElement[] = [] + const tooltip: React.ReactElement[] = []; if (props.tooltip) { - tooltip.push() + tooltip.push( + + + , + ); } return ( {props.title}  {tooltip} - ) + ); } diff --git a/src/components/ParameterComponents/SliderParameter.tsx b/src/components/ParameterComponents/SliderParameter.tsx index a1f964d..1e59189 100644 --- a/src/components/ParameterComponents/SliderParameter.tsx +++ b/src/components/ParameterComponents/SliderParameter.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { useState } from "react"; +import { useState } from 'react'; const Slider = styled.input` -webkit-appearance: none; @@ -11,49 +11,57 @@ const Slider = styled.input` display: block; margin: 5px 0; - &::-webkit-slider-runnable-track{ + &::-webkit-slider-runnable-track { -webkit-appearance: none; - background: rgb(217,217,217); - height:100%; + background: rgb(217, 217, 217); + height: 100%; } &::-moz-range-track { -webkit-appearance: none; - background: rgb(217,217,217); - height:100%; + background: rgb(217, 217, 217); + height: 100%; } - &::-webkit-slider-thumb{ + &::-webkit-slider-thumb { -webkit-appearance: none; - background: rgb(32,32,32); - height:100%; - width:10px; - border:none; - border-radius:0; + background: rgb(32, 32, 32); + height: 100%; + width: 10px; + border: none; + border-radius: 0; } &::-moz-range-thumb { -webkit-appearance: none; - background: rgb(32,32,32); - height:100%; - width:10px; - border:none; - border-radius:0; + background: rgb(32, 32, 32); + height: 100%; + width: 10px; + border: none; + border-radius: 0; } -` +`; export default function SliderParameter(props: { - onChange: (value: number)=> void, - lowerBound: number, - upperBound: number, - initValue?: number, + onChange: (value: number) => void; + lowerBound: number; + upperBound: number; + initValue?: number; }): React.ReactElement { - - const [value, setValue] = useState(props.lowerBound) + const [value, setValue] = useState(props.lowerBound); if (props.initValue) { - setValue(props.initValue) + setValue(props.initValue); } return ( - <> - {const val = parseFloat(e.target.value); setValue(val), props.onChange(val)}} /> - + <> + { + const val = parseFloat(e.target.value); + setValue(val), props.onChange(val); + }} + /> + ); } diff --git a/src/components/ParametersBar.tsx b/src/components/ParametersBar.tsx index 4e53ea1..c584d26 100644 --- a/src/components/ParametersBar.tsx +++ b/src/components/ParametersBar.tsx @@ -1,4 +1,4 @@ -import { DoubleRightOutlined, DoubleLeftOutlined } from "@ant-design/icons"; +import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons'; import styled from 'styled-components'; import { ColorPicker, Col, Space, Row, Card } from 'antd'; import { useEffect, useMemo, useState } from 'react'; @@ -12,21 +12,21 @@ import ParameterLabel from './ParameterComponents/ParameterLabel'; const Container = styled(Space)` background-color: #797979; - color: #FFF; + color: #fff; width: 20rem; - height: calc(100% - 6.0rem); + height: calc(100% - 6rem); font-size: 2rem; position: absolute; display: flex; - text-align:left; + text-align: left; border-top-right-radius: 20px; border-bottom-right-radius: 20px; - padding:12px; + padding: 12px; @media (max-width: 760px) { display: none; @@ -34,57 +34,57 @@ const Container = styled(Space)` `; const ButtonDiv = styled.span` - top: calc(6.0rem - 5px); - position:absolute; - left:10px; + top: calc(6rem - 5px); + position: absolute; + left: 10px; `; const Title = styled.span` font-family: 'Roboto', sans-serif; - font-size: 2.0rem; + font-size: 2rem; @media (max-width: 760px) { display: none; } `; -const Category = styled(Card) ` +const Category = styled(Card)` font-family: 'Roboto', sans-serif; background-color: #797979; - text-align: "left"; - font-size: 1.0rem; - color: #FFFFFF; + text-align: 'left'; + font-size: 1rem; + color: #ffffff; `; const BackButton = styled.button` width: 40px; height: 40px; border-radius: 50%; - background-color: #D9D9D9; + background-color: #d9d9d9; color: #464646; font-size: 16px; border: none; cursor: pointer; -` +`; function ShowHideButton(props: { - isVisible: boolean, - setVisible: (inp:boolean)=>void, + isVisible: boolean; + setVisible: (inp: boolean) => void; }) { - const isVisible = props.isVisible - const setVisible = props.setVisible + const isVisible = props.isVisible; + const setVisible = props.setVisible; - return( + return ( setVisible(!isVisible)}> - {isVisible ? () : ()} - - ) + {isVisible ? : } + + ); } // whether the pane is in expert or easy mode enum ControlDifficulty { Easy, - Expert + Expert, } export default function ParametersBar(props: { @@ -95,54 +95,58 @@ export default function ParametersBar(props: { const space: [SpaceSize, SpaceSize] = ['large', 'small']; // for ease of development, we'll default to expert mode for now - const [controlDifficulty, setControlDifficulty] = useState(ControlDifficulty.Expert); + const [controlDifficulty, setControlDifficulty] = useState( + ControlDifficulty.Expert, + ); - if (isPaneVisible) - { + if (isPaneVisible) { return ( - - { /* hide button */ } + + {/* hide button */} - + - { /* header */ } + {/* header */} Parameters - setControlDifficulty(ControlDifficulty.Easy)}/> + setControlDifficulty(ControlDifficulty.Easy)} + /> - setControlDifficulty(ControlDifficulty.Expert)}/> + setControlDifficulty(ControlDifficulty.Expert)} + /> - - + + - { /* render the correct pane based on current control difficulty */ } + {/* render the correct pane based on current control difficulty */} { // add all easy controls here - controlDifficulty == ControlDifficulty.Easy && - <> - + controlDifficulty == ControlDifficulty.Easy && <> } { - // add all expert controls here - controlDifficulty == ControlDifficulty.Expert && - <> - + controlDifficulty == ControlDifficulty.Expert && <> } - { /* add controls to be shown to both here */ } + {/* add controls to be shown to both here */} - - + ); } else { - return( + return ( @@ -152,9 +156,8 @@ export default function ParametersBar(props: { // CATEGORIES - // allows the user to change the colour of the simulation -function SimulationColour(props:{ +function SimulationColour(props: { setParams: React.Dispatch>; }): React.ReactElement { const setParams = props.setParams; @@ -162,7 +165,6 @@ function SimulationColour(props:{ const [colorLow, setColorLow] = useState('#0000FF'); const [colorHigh, setColorHigh] = useState('#FF0000'); - const colorLowString = useMemo( () => (typeof colorLow === 'string' ? colorLow : colorLow.toHexString()), [colorLow], @@ -182,26 +184,31 @@ function SimulationColour(props:{ }); }, [colorLowString, colorHighString, setParams]); - return( - - - - - - - - - - - - - - - - - - - + return ( + + + + + + + + + + + + + + + + + + + ); } - diff --git a/src/pages/about.tsx b/src/pages/about.tsx index c3fbbca..e3e52cc 100644 --- a/src/pages/about.tsx +++ b/src/pages/about.tsx @@ -2,13 +2,13 @@ import aboutContent from '../../README.md'; import styled from 'styled-components'; const Content = styled.div` - text-align:justify; + text-align: justify; margin-left: 25%; margin-right: 25%; margin-top: 4%; margin-bottom: 8%; font-family: 'Roboto', sans-serif; - color: ${(props) => (props.theme.light ? '#333333' : '#c9c9c9' )}; + color: ${(props) => (props.theme.light ? '#333333' : '#c9c9c9')}; a:link { text-decoration: none; } diff --git a/src/workers/modelWorker.ts b/src/workers/modelWorker.ts index 07ac1f4..b9089ca 100644 --- a/src/workers/modelWorker.ts +++ b/src/workers/modelWorker.ts @@ -86,7 +86,10 @@ async function initModelService( event: DedicatedWorkerGlobalScope, ): Promise { const modelPath = '/model/bno_small_001.onnx'; - const dataPath = new URL('/initData/pvf_incomp_44_nonneg/pvf_incomp_44_nonneg_0.json', import.meta.url); + const dataPath = new URL( + '/initData/pvf_incomp_44_nonneg/pvf_incomp_44_nonneg_0.json', + import.meta.url, + ); const outputCallback = (output: Float32Array): void => { const density = new Float32Array(output.length / 3); for (let i = 0; i < density.length; i++) { From f94c443102905bab96c35278fd47d4947c1ff904 Mon Sep 17 00:00:00 2001 From: Justin Tieu Date: Sat, 16 Sep 2023 08:26:44 +1000 Subject: [PATCH 6/7] fix(ParameterPane): tooltip is never bold --- .../ParameterComponents/ParameterLabel.tsx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/ParameterComponents/ParameterLabel.tsx b/src/components/ParameterComponents/ParameterLabel.tsx index ccaae44..caf2aa6 100644 --- a/src/components/ParameterComponents/ParameterLabel.tsx +++ b/src/components/ParameterComponents/ParameterLabel.tsx @@ -8,6 +8,13 @@ const Lab = styled.div` display: flex; `; +const Styled = styled(Tooltip)` + .ant-tooltip-inner { + font-weight: normal; + color: #cfcfcf; + } +`; + export default function ParameterLabel(props: { title: string; tooltip?: string; @@ -15,9 +22,15 @@ export default function ParameterLabel(props: { const tooltip: React.ReactElement[] = []; if (props.tooltip) { tooltip.push( - - - , + + tn} + > + + + , ); } From f545c450fdf614fd396a0ec52a32d461c2522d5c Mon Sep 17 00:00:00 2001 From: Justin Tieu Date: Sat, 16 Sep 2023 10:16:17 +1000 Subject: [PATCH 7/7] fix(parameterpane): bolded label text --- src/components/ParameterComponents/ParameterLabel.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ParameterComponents/ParameterLabel.tsx b/src/components/ParameterComponents/ParameterLabel.tsx index caf2aa6..ef8c2c0 100644 --- a/src/components/ParameterComponents/ParameterLabel.tsx +++ b/src/components/ParameterComponents/ParameterLabel.tsx @@ -6,6 +6,7 @@ const Lab = styled.div` align-items: center; height: 100%; display: flex; + font-weight: bold; `; const Styled = styled(Tooltip)`