add stars and velocity

1 files changed, 33 insertions, 2 deletions

diff --git a/src/ui/Controls.jsx b/src/ui/Controls.jsx
index e8dca45..8666378 100644
--- a/src/ui/Controls.jsx
+++ b/src/ui/Controls.jsx
@@ -4,7 +4,7 @@
  */
 
 import * as React from "react";
-import { useCallback, useRef } from "react";
+import { useState, useCallback, useRef } from "react";
 
 import Slider from "rc-slider";
 import TooltipSlider, { handleRender } from "./TooltipSlider.tsx";
@@ -20,6 +20,8 @@ const WAVE_SHAPE_NAMES = [
 ];
 
 export default function Controls({ relabi }) {
+  const [paused, setPaused] = useState(false);
+
   /**
    * Handle updating a slider
    */
@@ -32,7 +34,7 @@ export default function Controls({ relabi }) {
         relabi.waves[index].shape = WAVE_SHAPE_NAMES[value];
       }
       if (type === "frequency") {
-        relabi.waves[index].frequency = Math.exp(value);
+        relabi.waves[index].frequency = Math.round(Math.exp(value) * 10) / 10;
       }
       if (type === "weight") {
         relabi.waves[index].weight = value;
@@ -44,6 +46,14 @@ export default function Controls({ relabi }) {
     [relabi]
   );
 
+  /**
+   * Handle pause/unpause
+   */
+  const onPause = useCallback(() => {
+    relabi.paused = !paused;
+    setPaused(!paused);
+  }, [relabi, paused]);
+
   if (!relabi) {
     return null;
   }
@@ -162,6 +172,9 @@ export default function Controls({ relabi }) {
           />
         </SliderRow>
       </ControlBox>
+      <ControlBox>
+        <Button onClick={onPause}>{paused ? "Play" : "Pause"}</Button>
+      </ControlBox>
     </ControlRow>
   );
 }
@@ -208,6 +221,24 @@ const Label = ({ children }) => (
   <div style={{ fontSize: "0.75rem" }}>{children}</div>
 );
 
+const Button = ({ color, onClick, children }) => (
+  <button
+    onClick={onClick}
+    style={{
+      fontSize: "0.75rem",
+      color: color || "#ddd",
+      backgroundColor: "black",
+      border: "1px solid",
+      borderRadius: "8px",
+      padding: "0.25rem 0.5rem",
+      margin: "0.25rem",
+      cursor: "pointer",
+    }}
+  >
+    {children}
+  </button>
+);
+
 const ControlSlider = ({
   type,
   index,