style: Remove view controls for improved layout consistency and simplify app structure
This commit is contained in:
@@ -12,7 +12,6 @@ import './App.css';
|
|||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const connect = useTurtleStore((state) => state.connect);
|
const connect = useTurtleStore((state) => state.connect);
|
||||||
const [view, setView] = useState('split'); // 'split', 'map', 'panel'
|
|
||||||
const [panelTab, setPanelTab] = useState('control'); // 'control', 'voice', 'stats', 'groups', 'tasks', 'paths', 'areas'
|
const [panelTab, setPanelTab] = useState('control'); // 'control', 'voice', 'stats', 'groups', 'tasks', 'paths', 'areas'
|
||||||
const turtles = useTurtleStore((state) => state.getTurtleArray());
|
const turtles = useTurtleStore((state) => state.getTurtleArray());
|
||||||
const selectedTurtle = useTurtleStore((state) => state.getSelectedTurtle());
|
const selectedTurtle = useTurtleStore((state) => state.getSelectedTurtle());
|
||||||
@@ -47,35 +46,11 @@ function App() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="app">
|
<div className="app">
|
||||||
<div className="view-controls">
|
<div className="app-content split">
|
||||||
<button
|
<div className="map-container">
|
||||||
className={view === 'split' ? 'active' : ''}
|
<Map3D />
|
||||||
onClick={() => setView('split')}
|
</div>
|
||||||
>
|
<div className="panel-container">
|
||||||
📊 Split View
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={view === 'map' ? 'active' : ''}
|
|
||||||
onClick={() => setView('map')}
|
|
||||||
>
|
|
||||||
🗺️ Map Only
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={view === 'panel' ? 'active' : ''}
|
|
||||||
onClick={() => setView('panel')}
|
|
||||||
>
|
|
||||||
🎮 Control Only
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={`app-content ${view}`}>
|
|
||||||
{(view === 'split' || view === 'map') && (
|
|
||||||
<div className="map-container">
|
|
||||||
<Map3D />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{(view === 'split' || view === 'panel') && (
|
|
||||||
<div className="panel-container">
|
|
||||||
<div className="panel-tabs">
|
<div className="panel-tabs">
|
||||||
<button
|
<button
|
||||||
className={panelTab === 'control' ? 'active' : ''}
|
className={panelTab === 'control' ? 'active' : ''}
|
||||||
@@ -131,7 +106,6 @@ function App() {
|
|||||||
{renderPanelContent()}
|
{renderPanelContent()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user