From c6ff9094ed2dc8ff460a910da37c6e5ab3cd0e15 Mon Sep 17 00:00:00 2001
From: MayaTheShy <MayaTheShy@gmail.com>
Date: Fri, 20 Feb 2026 03:41:21 -0500
Subject: [PATCH] style: Refactor TurtleDetails to use direct command functions
 and remove legacy command handling

---
 client/src/components/ControlPanel.jsx | 107 ++++++-------------------
 1 file changed, 25 insertions(+), 82 deletions(-)

diff --git a/client/src/components/ControlPanel.jsx b/client/src/components/ControlPanel.jsx
index 16019a2..d09f00c 100644
--- a/client/src/components/ControlPanel.jsx
+++ b/client/src/components/ControlPanel.jsx
@@ -77,7 +77,6 @@ function TurtleCard({ turtle, isSelected, onSelect }) {
 }
 
 function TurtleDetails({ turtle }) {
-  const sendCommand = useTurtleStore((state) => state.sendCommand);
   const setTurtleState = useTurtleStore((state) => state.setTurtleState);
   const renameTurtle = useTurtleStore((state) => state.renameTurtle);
   const equipLeft = useTurtleStore((state) => state.equipLeft);
@@ -90,6 +89,16 @@ function TurtleDetails({ turtle }) {
   const updateTurtleConfig = useTurtleStore((state) => state.updateTurtleConfig);
   const exploreTurtle = useTurtleStore((state) => state.exploreTurtle);
   const gpsLocateTurtle = useTurtleStore((state) => state.gpsLocateTurtle);
+  const moveForward = useTurtleStore((state) => state.moveForward);
+  const moveBack = useTurtleStore((state) => state.moveBack);
+  const moveUp = useTurtleStore((state) => state.moveUp);
+  const moveDown = useTurtleStore((state) => state.moveDown);
+  const turnLeft = useTurtleStore((state) => state.turnLeft);
+  const turnRight = useTurtleStore((state) => state.turnRight);
+  const digBlock = useTurtleStore((state) => state.digBlock);
+  const digBlockUp = useTurtleStore((state) => state.digBlockUp);
+  const digBlockDown = useTurtleStore((state) => state.digBlockDown);
+  const placeBlock = useTurtleStore((state) => state.placeBlock);
 
   const [renameValue, setRenameValue] = useState('');
   const [showConfig, setShowConfig] = useState(false);
@@ -103,10 +112,6 @@ function TurtleDetails({ turtle }) {
     );
   }
 
-  const handleCommand = (command, param = null) => {
-    sendCommand(turtle.turtleID, command, param);
-  };
-
   const handleStateChange = (stateName, data = {}) => {
     setTurtleState(turtle.turtleID, stateName, data);
   };
@@ -244,7 +249,7 @@ function TurtleDetails({ turtle }) {
         <div className="command-grid">
           <button
             className={`command-btn ${activeState === 'idle' ? 'active' : ''}`}
-            onClick={() => { handleStateChange('idle'); handleCommand('stop'); }}
+            onClick={() => handleStateChange('idle')}
             title="Stop and go idle"
             style={activeState === 'idle' ? { outline: '2px solid #fff' } : {}}
           >
@@ -252,7 +257,7 @@ function TurtleDetails({ turtle }) {
           </button>
           <button
             className={`command-btn explore ${activeState === 'exploring' ? 'active' : ''}`}
-            onClick={() => { handleStateChange('exploring'); handleCommand('explore'); }}
+            onClick={() => handleStateChange('exploring')}
             title="Autonomous exploration"
             style={activeState === 'exploring' ? { outline: '2px solid #fff' } : {}}
           >
@@ -260,7 +265,7 @@ function TurtleDetails({ turtle }) {
           </button>
           <button
             className={`command-btn mine ${activeState === 'mining' ? 'active' : ''}`}
-            onClick={() => { handleStateChange('mining'); handleCommand('explore'); }}
+            onClick={() => handleStateChange('mining')}
             title="Mining with ore priority"
             style={activeState === 'mining' ? { outline: '2px solid #fff' } : {}}
           >
@@ -276,7 +281,7 @@ function TurtleDetails({ turtle }) {
           </button>
           <button
             className={`command-btn return ${activeState === 'goHome' || activeState === 'returning' ? 'active' : ''}`}
-            onClick={() => { handleStateChange('goHome'); handleCommand('returnHome'); }}
+            onClick={() => handleStateChange('goHome')}
             title="Navigate home"
             style={activeState === 'goHome' || activeState === 'returning' ? { outline: '2px solid #fff' } : {}}
           >
@@ -284,7 +289,7 @@ function TurtleDetails({ turtle }) {
           </button>
           <button
             className={`command-btn refuel ${activeState === 'refueling' ? 'active' : ''}`}
-            onClick={() => { handleStateChange('refueling'); handleCommand('refuel'); }}
+            onClick={() => handleStateChange('refueling')}
             title="Auto-refuel from inventory"
             style={activeState === 'refueling' ? { outline: '2px solid #fff' } : {}}
           >
@@ -373,82 +378,20 @@ function TurtleDetails({ turtle }) {
         </div>
       </div>
 
-      <div className="detail-section">
-        <h3>Legacy Commands</h3>
-        <div className="command-grid">
-          <button 
-            className="command-btn explore"
-            onClick={() => handleCommand('explore')}
-            title="Start autonomous exploration and mining"
-          >
-            🔍 Explore
-          </button>
-          <button 
-            className="command-btn mine"
-            onClick={() => handleCommand('mine')}
-            title="Start mining mode"
-          >
-            ⛏️ Mine
-          </button>
-          <button 
-            className="command-btn return"
-            onClick={() => handleCommand('returnHome')}
-            title="Navigate back to home position"
-          >
-            🏠 Return Home
-          </button>
-          <button 
-            className="command-btn stop"
-            onClick={() => handleCommand('stop')}
-            title="Stop all autonomous actions"
-          >
-            ⏹️ Stop
-          </button>
-          <button 
-            className="command-btn manual"
-            onClick={() => handleCommand('manual')}
-            title="Switch to manual control mode"
-          >
-            🎮 Manual Mode
-          </button>
-          <button 
-            className="command-btn setHome"
-            onClick={() => handleCommand('setHome')}
-            title="Set current position as home"
-          >
-            📍 Set Home
-          </button>
-          <button 
-            className="command-btn refuel"
-            onClick={() => handleCommand('refuel')}
-            title="Consume fuel from inventory"
-          >
-            ⛽ Refuel
-          </button>
-          <button 
-            className="command-btn status"
-            onClick={() => handleCommand('status')}
-            title="Request status update"
-          >
-            📊 Status
-          </button>
-        </div>
-      </div>
-
       <div className="detail-section">
         <h3>Movement</h3>
         <div className="movement-controls">
           <div className="movement-row">
-            <button onClick={() => handleCommand('forward')} title="Move forward">↑</button>
+            <button onClick={() => moveForward(turtle.turtleID)} title="Move forward">↑</button>
           </div>
           <div className="movement-row">
-            <button onClick={() => handleCommand('turnLeft')} title="Turn left">←</button>
-            <button onClick={() => handleCommand('back')} title="Move backward">↓</button>
-            <button onClick={() => handleCommand('turnRight')} title="Turn right">→</button>
+            <button onClick={() => turnLeft(turtle.turtleID)} title="Turn left">←</button>
+            <button onClick={() => moveBack(turtle.turtleID)} title="Move backward">↓</button>
+            <button onClick={() => turnRight(turtle.turtleID)} title="Turn right">→</button>
           </div>
           <div className="movement-row vertical">
-            <button onClick={() => handleCommand('up')} title="Move up">⬆ Up</button>
-            <button onClick={() => handleCommand('down')} title="Move down">⬇ Down</button>
+            <button onClick={() => moveUp(turtle.turtleID)} title="Move up">⬆ Up</button>
+            <button onClick={() => moveDown(turtle.turtleID)} title="Move down">⬇ Down</button>
           </div>
         </div>
       </div>
@@ -458,28 +401,28 @@ function TurtleDetails({ turtle }) {
         <div className="action-grid">
           <button 
             className="action-btn dig"
-            onClick={() => handleCommand('dig')}
+            onClick={() => digBlock(turtle.turtleID)}
             title="Dig block in front"
           >
             ⛏️ Dig
           </button>
           <button 
             className="action-btn digup"
-            onClick={() => handleCommand('digUp')}
+            onClick={() => digBlockUp(turtle.turtleID)}
             title="Dig block above"
           >
             ⬆️ Dig Up
           </button>
           <button 
             className="action-btn digdown"
-            onClick={() => handleCommand('digDown')}
+            onClick={() => digBlockDown(turtle.turtleID)}
             title="Dig block below"
           >
             ⬇️ Dig Down
           </button>
           <button 
             className="action-btn place"
-            onClick={() => handleCommand('place')}
+            onClick={() => placeBlock(turtle.turtleID)}
             title="Place block from inventory"
           >
             🧱 Place