Auto rotate camera

tijszwinkels · Nov 24, 2024 · ee1cd53 · ee1cd53
1 parent 792f2e5
commit ee1cd53
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 3 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -44,6 +44,10 @@ function App() {
     const params = new URLSearchParams(window.location.search);
     return params.get('fade') !== 'false';
   });
+  const [autoRotate, setAutoRotate] = useState(() => {
+    const params = new URLSearchParams(window.location.search);
+    return params.get('rotate') !== 'false';
+  });
   const [onlySelectedWords, setOnlySelectedWords] = useState(() => {
     const params = new URLSearchParams(window.location.search);
     return params.get('onlySelected') === 'true';
@@ -231,6 +235,11 @@ function App() {
     updateURL({ fade: enabled ? null : 'false' });
   };
 
+  const handleAutoRotateChange = (enabled) => {
+    setAutoRotate(enabled);
+    updateURL({ rotate: enabled ? null : 'false' });
+  };
+
   const handleOnlySelectedWordsChange = (enabled) => {
     setOnlySelectedWords(enabled);
     updateURL({ onlySelected: enabled ? 'true' : null });
@@ -254,6 +263,7 @@ function App() {
               marbleSize={marbleSize}
               fadeEnabled={fadeEnabled}
               selectedWords={selectedWords}
+              autoRotate={autoRotate}
             />
           </div>
         </div>
@@ -268,6 +278,8 @@ function App() {
         onFractionChange={handleFractionChange}
         fadeEnabled={fadeEnabled}
         onFadeChange={handleFadeChange}
+        autoRotate={autoRotate}
+        onAutoRotateChange={handleAutoRotateChange}
         onlySelectedWords={onlySelectedWords}
         onOnlySelectedWordsChange={handleOnlySelectedWordsChange}
         selectedWords={selectedWords}

diff --git a/src/components/Config.css b/src/components/Config.css
@@ -21,13 +21,17 @@
   gap: 8px;
   cursor: pointer;
   user-select: none;
+  flex: 1;
+  min-width: 120px;
+  font-size: 0.9em;
 }
 
 .config-checkbox {
   width: 16px;
   height: 16px;
   margin: 0;
   cursor: pointer;
+  flex-shrink: 0;
 }
 
 .config-controls {
@@ -73,5 +77,7 @@
 
 .checkbox-group {
   display: flex;
+  flex-wrap: wrap;
   gap: 12px;
+  padding: 4px 0;
 }
diff --git a/src/components/Config.jsx b/src/components/Config.jsx
@@ -11,7 +11,9 @@ function Config({
   fraction,
   onFractionChange,
   onlySelectedWords,
-  onOnlySelectedWordsChange
+  onOnlySelectedWordsChange,
+  autoRotate,
+  onAutoRotateChange
 }) {
   const handleTimeoutSliderChange = (e) => {
     const value = parseInt(e.target.value, 10);
@@ -57,6 +59,10 @@ function Config({
     onOnlySelectedWordsChange(e.target.checked);
   };
 
+  const handleAutoRotateChange = (e) => {
+    onAutoRotateChange(e.target.checked);
+  };
+
   return (
     <div className="config-container">
       <h3>Configuration</h3>
@@ -138,6 +144,15 @@ function Config({
             />
             Enable Fade Effect
           </label>
+          <label className="checkbox-label">
+            <input
+              type="checkbox"
+              checked={autoRotate}
+              onChange={handleAutoRotateChange}
+              className="config-checkbox"
+            />
+            Auto-Rotate Camera
+          </label>
           <label className="checkbox-label">
             <input
               type="checkbox"

diff --git a/src/components/MarblesDisplay.jsx b/src/components/MarblesDisplay.jsx
@@ -168,7 +168,7 @@ function Vase() {
   );
 }
 
-function MarblesDisplay({ messages, timeout = 60, marbleSize = 0.5, fadeEnabled = true, selectedWords }) {
+function MarblesDisplay({ messages, timeout = 60, marbleSize = 0.5, fadeEnabled = true, selectedWords, autoRotate = true }) {
   const [marbles, setMarbles] = useState([]);
   const marbleCountRef = useRef(0);
 
@@ -260,7 +260,12 @@ function MarblesDisplay({ messages, timeout = 60, marbleSize = 0.5, fadeEnabled
             />
           ))}
         </Physics>
-        <OrbitControls enablePan={true} target={[0, 4, 0]} />
+        <OrbitControls 
+          enablePan={true} 
+          target={[0, 4, 0]} 
+          autoRotate={autoRotate}
+          autoRotateSpeed={1}
+        />
       </Canvas>
     </div>
   );

diff --git a/src/components/RightPanel.jsx b/src/components/RightPanel.jsx
@@ -20,6 +20,8 @@ function RightPanel({
   hiddenWords,
   onlySelectedWords,
   onOnlySelectedWordsChange,
+  autoRotate,
+  onAutoRotateChange,
   onAddCustomWord,
   isCollapsed,
   onCollapsedChange
@@ -58,6 +60,8 @@ function RightPanel({
             onFractionChange={onFractionChange}
             onlySelectedWords={onlySelectedWords}
             onOnlySelectedWordsChange={onOnlySelectedWordsChange}
+            autoRotate={autoRotate}
+            onAutoRotateChange={onAutoRotateChange}
           />
         </div>
       </div>