From e98b645ac4f317787c4aceb50fb700ea86db52c5 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Thu, 22 Jul 2021 15:55:42 +0200
Subject: finished basis for physics tweaks

---
 pages/index.tsx | 384 +++++++++++++++++++++-----------------------------------
 1 file changed, 140 insertions(+), 244 deletions(-)

(limited to 'pages/index.tsx')

diff --git a/pages/index.tsx b/pages/index.tsx
index dcdb225..d39a153 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -189,94 +189,104 @@ export function GraphPage() {
   )
 }
 
-export interface TweakProps {
-  physics: typeof initialPhysics
-  setPhysics: any
-  threeDim: boolean
-  local: boolean
+export interface InfoTooltipProps {
+  infoText?: string | boolean
 }
-
-export const Tweaks = function (props: TweakProps) {
-  const { physics, setPhysics, threeDim, local } = props
-
-  interface InfoTooltipProps {
-    infoText: string
-  }
-  const InfoTooltip = (props: InfoTooltipProps) => {
-    const { infoText } = props
-    return (
-      <Box paddingLeft="1">
-        <Tooltip label={infoText} placement="top" color="gray.100" bg="gray.800" hasArrow>
-          <InfoOutlineIcon />
-        </Tooltip>
+export const InfoTooltip = (props: InfoTooltipProps) => {
+  const { infoText } = props
+  return (
+    <Box paddingLeft="1">
+      <Tooltip label={infoText} placement="top" color="gray.100" bg="gray.800" hasArrow>
+        <InfoOutlineIcon />
+      </Tooltip>
+    </Box>
+  )
+}
+export interface SliderWithInfoProps {
+  min?: number
+  max?: number
+  step?: number
+  value: number
+  onChange: (arg0: number) => void
+  label: string
+  infoText?: string
+}
+export const SliderWithInfo = ({
+  min = 0,
+  max = 10,
+  step = 0.1,
+  value = 1,
+  ...rest
+}: SliderWithInfoProps) => {
+  const { onChange, label, infoText } = rest
+  return (
+    <Box>
+      <Box display="flex" alignItems="flex-end">
+        <Text>{label}</Text>
+        {infoText && <InfoTooltip infoText={infoText} />}
       </Box>
-    )
-  }
+      <Slider value={value} onChange={onChange} min={min} max={max} step={step}>
+        <SliderTrack>
+          <SliderFilledTrack />
+        </SliderTrack>
+        <Tooltip label={value.toFixed(1)}>
+          <SliderThumb />
+        </Tooltip>
+      </Slider>
+    </Box>
+  )
+}
 
-  interface SliderWithInfo {
-    min: number
-    max: number
-    step: number
-    value: number
-    onChange: (arg0: number) => void
-    label: string
-    infoText: string
-  }
+export interface EnableSliderProps extends SliderWithInfoProps {
+  enableValue: boolean
+  onEnableValueChange: () => void
+  enableLabel: string
+  enableInfoText?: string | boolean
+}
 
-  const SliderWithInfo = (props: SliderWithLabel) => {
-    const { min, max, step, value, onChange, label, infoText } = props
-    return (
-      <Box>
+export const EnableSlider = ({ min = 0, max = 10, step = 0.1, ...rest }: EnableSliderProps) => {
+  const {
+    value,
+    onChange,
+    label,
+    infoText,
+    enableValue,
+    onEnableValueChange,
+    enableInfoText,
+    enableLabel,
+  } = rest
+  return (
+    <Box>
+      <Box display="flex" justifyContent="space-between">
         <Box display="flex" alignItems="center">
-          <Text>{label}</Text>
-          <InfoTooltip infoText={infoText} />
+          <Text>{enableLabel}</Text>
+          {enableInfoText && <InfoTooltip infoText={enableInfoText} />}
         </Box>
-        <Slider value={value} onChange={onChange} min={min} max={max} step={step}>
-          <SliderTrack>
-            <SliderFilledTrack />
-          </SliderTrack>
-          <Tooltip label={value} color="gray.100" bg="gray.800">
-            <SliderThumb />
-          </Tooltip>
-        </Slider>
+        <Switch isChecked={enableValue} onChange={onEnableValueChange} />
       </Box>
-    )
-  }
-
-  interface SliderWithoutInfo {
-    min: number
-    max: number
-    step: number
-    val: number
-    change: (arg0: number) => void
-    label: string
-    physics: typeof initialPhysics
-    setPhysics: any
-  }
-
-  const SliderWithoutInfo = (props: SliderWithoutInfo) => {
-    const { min, max, step, physics, setPhysics, label } = props
-    return (
-      <Box>
-        <Box display="flex">
-          <Text>{label}</Text>
-        </Box>
-        <Slider
-          value={physics.gravity}
-          onChange={(value) => setPhysics({ ...physics, gravity: value })}
+      {enableValue && (
+        <SliderWithInfo
+          value={value}
+          onChange={onChange}
           min={min}
           max={max}
           step={step}
-          focusThumbOnChange={false}
-        >
-          <SliderTrack>
-            <SliderFilledTrack />
-          </SliderTrack>
-          <SliderThumb />
-        </Slider>
-      </Box>
-    )
-  }
+          label={label}
+          infoText={infoText}
+        />
+      )}
+    </Box>
+  )
+}
+
+export interface TweakProps {
+  physics: typeof initialPhysics
+  setPhysics: any
+  threeDim: boolean
+  local: boolean
+}
+export const Tweaks = function (props: TweakProps) {
+  const { physics, setPhysics, threeDim, local } = props
 
   return (
     <Container zIndex="overlay" position="absolute" bg="white" w="xs">
@@ -310,59 +320,21 @@ export const Tweaks = function (props: TweakProps) {
               divider={<StackDivider borderColor="gray.200" />}
               align="stretch"
             >
-              <Box>
-                <Box display="flex" justifyContent="space-between">
-                  <Text>Gravity</Text>
-                  <Switch
-                    id="physicsOn"
-                    onChange={() => setPhysics({ ...physics, gravityOn: !physics.gravityOn })}
-                    isChecked={physics.gravityOn}
-                  />
-                </Box>
-                {physics.gravityOn && (
-                  <Box>
-                    <Text>Strength</Text>
-                    <Slider
-                      value={physics.gravity}
-                      onChange={(value) => setPhysics({ ...physics, gravity: value })}
-                      min={0}
-                      max={1}
-                      step={0.01}
-                    >
-                      <SliderTrack>
-                        <SliderFilledTrack />
-                      </SliderTrack>
-                      <Tooltip label={physics.gravity}>
-                        <SliderThumb />
-                      </Tooltip>
-                    </Slider>
-                  </Box>
-                )}
-              </Box>
-              <SliderWithoutInfo
-                label="Test"
-                min={0}
-                max={1}
-                step={0.01}
-                physics={physics}
-                setPhysics={setPhysics}
+              <EnableSlider
+                enableLabel="Gravity"
+                enableValue={physics.gravityOn}
+                onEnableValueChange={() =>
+                  setPhysics({ ...physics, gravityOn: !physics.gravityOn })
+                }
+                label="Strength"
+                value={physics.gravity * 10}
+                onChange={(v) => setPhysics({ ...physics, gravity: v / 10 })}
+              />
+              <SliderWithInfo
+                value={-physics.charge / 100}
+                onChange={(value) => setPhysics({ ...physics, charge: -100 * value })}
+                label="Repulsive Force"
               />
-              <Box>
-                <Text>Repulsive Force</Text>
-                <Slider
-                  value={-physics.charge}
-                  onChange={(value) => setPhysics({ ...physics, charge: -value })}
-                  min={0}
-                  max={1000}
-                >
-                  <SliderTrack>
-                    <SliderFilledTrack />
-                  </SliderTrack>
-                  <Tooltip label={physics.charge}>
-                    <SliderThumb />
-                  </Tooltip>
-                </Slider>
-              </Box>
               <Box>
                 <Box display="flex" justifyContent="space-between">
                   <Box display="flex" alignItems="center">
@@ -376,79 +348,32 @@ export const Tweaks = function (props: TweakProps) {
                   />
                 </Box>
                 {physics.collision && (
-                  <Box>
-                    <Text>Strength</Text>
-                    <Slider
-                      value={physics.collisionStrength}
-                      onChange={(value) => setPhysics({ ...physics, collisionStrength: value })}
-                      min={0}
-                      max={2}
-                    >
-                      <SliderTrack>
-                        <SliderFilledTrack />
-                      </SliderTrack>
-                      <Tooltip label={physics.collisionStrength}>
-                        <SliderThumb />
-                      </Tooltip>
-                    </Slider>
-                  </Box>
+                  <SliderWithInfo
+                    value={physics.collisionStrength * 10}
+                    onChange={(value) => setPhysics({ ...physics, collisionStrength: value / 10 })}
+                    label="Strength"
+                  />
                 )}
               </Box>
-              <Box>
-                <Text>Link Strength</Text>
-                <Slider
-                  value={physics.linkStrength}
-                  onChange={(value) => setPhysics({ ...physics, linkStrength: value })}
-                  min={0}
-                  max={2}
-                  step={0.01}
-                >
-                  <SliderTrack>
-                    <SliderFilledTrack />
-                  </SliderTrack>
-                  <Tooltip label={physics.linkStrength}>
-                    <SliderThumb />
-                  </Tooltip>
-                </Slider>
-              </Box>
-              <StackDivider bg="grey.200" />
-              <Box>
-                <Box display="flex" alignItems="center">
-                  <Text>Link Iterations</Text>
-                  <InfoTooltip infoText="How many links down the line the physics of a single node effects (Slow)" />
-                </Box>
-                <Slider
-                  value={physics.linkIts}
-                  onChange={(value) => setPhysics({ ...physics, linkIts: value })}
-                  min={0}
-                  max={6}
-                  step={1}
-                >
-                  <SliderTrack>
-                    <SliderFilledTrack />
-                  </SliderTrack>
-                  <Tooltip label={physics.linkIts}>
-                    <SliderThumb />
-                  </Tooltip>
-                </Slider>
-              </Box>
-              <Box>
-                <Text>Viscosity</Text>
-                <Slider
-                  value={physics.velocityDecay}
-                  onChange={(value) => setPhysics({ ...physics, velocityDecay: value })}
-                  min={0}
-                  max={1}
-                  step={0.01}
-                >
-                  <SliderTrack>
-                    <SliderFilledTrack />
-                  </SliderTrack>
-                  <Tooltip label={physics.velocityDecay}>
-                    <SliderThumb />
-                  </Tooltip>
-                </Slider>
-              </Box>
+              <SliderWithInfo
+                value={physics.linkStrength * 5}
+                onChange={(value) => setPhysics({ ...physics, linkStrength: value / 5 })}
+                label="Link Force"
+              />
+              <SliderWithInfo
+                label="Link Iterations"
+                value={physics.linkIts}
+                onChange={(value) => setPhysics({ ...physics, linkIts: value })}
+                min={0}
+                max={6}
+                step={1}
+                infoText="How many links down the line the physics of a single node affects (Slow)"
+              />
+              <SliderWithInfo
+                label="Viscosity"
+                value={physics.velocityDecay * 10}
+                onChange={(value) => setPhysics({ ...physics, velocityDecay: value / 10 })}
+              />
             </VStack>
             <Box>
               <Accordion allowToggle>
@@ -464,49 +389,20 @@ export const Tweaks = function (props: TweakProps) {
                       divider={<StackDivider borderColor="gray.200" />}
                       align="stretch"
                     >
-                      <Box>
-                        <Text>Simulation Ticks</Text>
-                        <Slider value={0} min={0} max={1} step={0.01}>
-                          <SliderTrack>
-                            <SliderFilledTrack />
-                          </SliderTrack>
-                          <Tooltip label={physics.ticks}>
-                            <SliderThumb />
-                          </Tooltip>
-                        </Slider>
-                      </Box>
-                      <Box>
-                        <Text>Alpha Decay</Text>
-                        <Slider
-                          value={physics.alphaDecay}
-                          onChange={(value) => setPhysics({ ...physics, alphaDecay: value })}
-                          min={0}
-                          max={1}
-                          step={0.01}
-                        >
-                          <SliderTrack>
-                            <SliderFilledTrack />
-                          </SliderTrack>
-                          <Tooltip label={physics.alphaDecay}>
-                            <SliderThumb />
-                          </Tooltip>
-                        </Slider>
-                      </Box>
-                      <Text>Alpha Minimum</Text>
-                      <Slider
-                        value={physics.alphaMin}
-                        onChange={(value) => setPhysics({ ...physics, alphaMin: value })}
-                        min={0.01}
-                        max={1}
-                        step={0.01}
-                      >
-                        <SliderTrack>
-                          <SliderFilledTrack />
-                        </SliderTrack>
-                        <Tooltip label={physics.alphaMin}>
-                          <SliderThumb />
-                        </Tooltip>
-                      </Slider>
+                      <SliderWithInfo
+                        label="Iterations per tick"
+                        min={1}
+                        max={10}
+                        step={1}
+                        value={physics.iterations}
+                        onChange={(v) => setPhysics({ ...physics, iterations: v })}
+                        infoText="Number of times the physics simulation iterates per simulation step"
+                      />
+                      <SliderWithInfo
+                        label="Stabilization rate"
+                        value={physics.alphaDecay * 50}
+                        onChange={(value) => setPhysics({ ...physics, alphaDecay: value / 50 })}
+                      />
                     </VStack>
                   </AccordionPanel>
                 </AccordionItem>
-- 
cgit v1.2.3