improvements

src/components/DOM/BGM/index.jsx

@@ -22,35 +22,45 @@ const BGM = () => {
     return `${minutes}:${seconds}`;
   };
 
+  const safeDuration = trackDuration || 0;
+
   return (
-    <>
-      {bgmLoaded && (
-        <div className={styles.bgmMenu}>
-          <span className={styles.bgmButtons}>
-            <input
-              className={bgmPlaying ? "" : styles.paused}
-              type="image"
-              src={bgmPlaying ? pause : play}
-              onClick={togglePlayback}
-            />
-            <input type="image" src={next} onClick={nextTrack} />
-          </span>
-          <input
-            className={styles.trackProgress}
-            type="range"
-            min={0}
-            max={trackDuration}
-            step={0.1}
-            value={playbackPosition}
-            onChange={(e) => playFromPosition(parseFloat(e.target.value))}
-          />
-          <span className={styles.trackDuration}>
-            {convertTime(playbackPosition)} / {convertTime(trackDuration)}
-          </span>
-        </div>
-      )}
-    </>
+    <div className={styles.bgmMenu}>
+      <span className={styles.bgmButtons}>
+        <input
+          className={bgmPlaying ? "" : styles.paused}
+          type="image"
+          src={bgmPlaying ? pause : play}
+          onClick={togglePlayback}
+          disabled={!bgmLoaded}
+        />
+        <input
+          type="image"
+          src={next}
+          onClick={nextTrack}
+          disabled={!bgmLoaded}
+        />
+      </span>
+
+      <input
+        className={styles.trackProgress}
+        type="range"
+        min={0}
+        max={safeDuration || 1}
+        step={0.1}
+        value={bgmLoaded ? playbackPosition : 0}
+        onChange={(e) => playFromPosition(parseFloat(e.target.value))}
+        disabled={!bgmLoaded}
+      />
+
+      <span className={styles.trackDuration}>
+        {bgmLoaded
+          ? `${convertTime(playbackPosition)} / ${convertTime(trackDuration)}`
+          : "Loading..."}
+      </span>
+    </div>
   );
 };
 
+
 export default BGM;

src/components/DOM/DMenu/Options.jsx

@@ -2,15 +2,15 @@ import { CompactPicker } from "react-color";
 import { useState } from "react";
 
 import Slider from "./Slider";
-import { useAudio, useDice } from "../../../contexts";
+import { useDice, useSFX } from "../../../contexts";
 
 import styles from "./Options.module.scss";
 import { validDice } from "../../../utils";
 import Credits from "./Credits";
 
 const Options = ({}) => {
-  const { volumes, updateVolume } = useAudio();
-  const { diceAttributes, diceOptions, updateAttributes, updateOptions } =
+  const { volumes, updateVolume } = useSFX();
+  const { diceAttributes, diceOptions, updateAttributes, updateOptions, gravity, setGravity } =
     useDice();
   const [selectedForColor, setSelectedForColor] = useState("D4");
   const [selectedForSize, setSelectedForSize] = useState("D4");
@@ -103,6 +103,15 @@ const Options = ({}) => {
               : diceAttributes.sizes[selectedForSize] ?? 0
           }
         />
+        <Slider
+          className={styles.slider}
+          label="Gravity"
+          min={1}
+          max={12}
+          step={0.1}
+          update={(value) => setGravity([0, -value, 0])}
+          value={gravity ? -gravity[1] : 9.81}
+        />
         {!diceOptions.globalSize && (
           <div className={styles.sizeButtons}>
             {validDice.map((d) => (

src/components/R3F/Dx/D10.jsx

@@ -66,11 +66,7 @@ const D10 = (props) => {
     return retVal;
   }, [geometryArgs]);
 
-  return (
-    <Dx {...props} geometry={geometry}>
-      <polyhedronGeometry args={[...geometryArgs, props.radius, 0]} />
-    </Dx>
-  );
+  return <Dx {...props} geometry={geometry} />;
 };
 
 export default D10;

src/components/R3F/Dx/D12.jsx

@@ -14,11 +14,7 @@ const D12 = (props) => {
     return retVal;
   }, []);
 
-  return (
-    <Dx {...props} geometry={geometry}>
-      <dodecahedronGeometry args={[props.radius]} />
-    </Dx>
-  );
+  return <Dx {...props} geometry={geometry} />;
 };
 
 export default D12;

src/components/R3F/Dx/D20.jsx

@@ -14,11 +14,7 @@ const D20 = (props) => {
     return retVal;
   }, []);
 
-  return (
-    <Dx {...props} geometry={geometry}>
-      <icosahedronGeometry args={[props.radius, 0]} />
-    </Dx>
-  );
+  return <Dx {...props} geometry={geometry} />;
 };
 
 export default D20;

src/components/R3F/Dx/D4.jsx

@@ -14,11 +14,7 @@ const D4 = (props) => {
     return retVal;
   }, []);
 
-  return (
-    <Dx {...props} geometry={geometry} inertiaMod={D4_CONST.INERTIA_MOD}>
-      <tetrahedronGeometry args={[props.radius, 0]} />
-    </Dx>
-  );
+  return <Dx {...props} geometry={geometry} inertiaMod={D4_CONST.INERTIA_MOD} />;
 };
 
 export default D4;

src/components/R3F/Dx/D6.jsx

@@ -56,11 +56,7 @@ const D6 = (props) => {
     return retVal;
   }, [geometryArgs]);
 
-  return (
-    <Dx {...props} geometry={geometry}>
-      <polyhedronGeometry args={[...geometryArgs, props.radius, 0]} />
-    </Dx>
-  );
+  return <Dx {...props} geometry={geometry} />;
 };
 
 export default D6;

src/components/R3F/Dx/D8.jsx

@@ -14,11 +14,7 @@ const D8 = (props) => {
     return retVal;
   }, []);
 
-  return (
-    <Dx geometry={geometry} {...props}>
-      <octahedronGeometry args={[props.radius]} />
-    </Dx>
-  );
+  return <Dx {...props} geometry={geometry} />;
 };
 
 export default D8;