object type panel

src/App.tsx

@@ -5,6 +5,7 @@ import { ThreeView } from './components/ThreeView';
 import { state } from './state';
 import './App.scss';
 import { LeftPanel } from './components/LeftPanel';
+import { Panels } from './components/Panels';
 
 function StateToUrlSync() {
     const navigate = useNavigate();
@@ -14,7 +15,7 @@ function StateToUrlSync() {
             selectedObjectId: state.worldEditor.selection?.type === 'object' && state.worldEditor.selection.id,
             selectedObjectTypeId: state.worldEditor.selection?.type === 'objectType' && state.worldEditor.selection.id,
         }),
-        ({ isGame, selectedObjectId, selectedObjectTypeId}) => {
+        ({ isGame, selectedObjectId, selectedObjectTypeId }) => {
             if (isGame) navigate('/game');
             else if (selectedObjectId) navigate(`/editor/object/${selectedObjectId}`);
             else if (selectedObjectTypeId) navigate(`/editor/objectType/${selectedObjectTypeId}`);
@@ -74,7 +75,7 @@ function EditorLayout() {
         <>
             <Outlet />
             <ThreeView />
-            <LeftPanel />
+            <Panels />
         </>
     );
 }

src/components/LeftPanel.tsx

@@ -1,5 +1,4 @@
 import { observer } from "mobx-react-lite";
-import './Panel.scss';
 import { RenderInfoView } from "./RenderInfoView";
 import { MenuView } from "./MenuView";
 import { state } from "../state";

src/components/MainPanel.tsx

@@ -0,0 +1,19 @@
+import { observer } from "mobx-react-lite";
+import { state } from "../state";
+import { Panel } from "./Panel";
+
+export const MainPanel = observer(function () {
+    const isGame = state.game && !state.game.isPaused;
+    const selectedObjectTypeId = state.worldEditor.selection?.type === 'objectType'
+        ? state.worldEditor.selection.id
+        : undefined;
+
+    if (isGame || !selectedObjectTypeId)
+        return null;
+
+    return <Panel side='main'>
+        <header>
+            <div>{selectedObjectTypeId}</div>
+        </header>
+    </Panel>
+});

src/components/Panel.tsx

@@ -1,16 +1,13 @@
 import { observer } from "mobx-react-lite";
-import './Panel.scss';
 import type { ReactNode } from "react";
 
 export type PanelProps = {
-    side?: 'left' | 'right';
+    side?: 'left' | 'right' | 'main';
     children?: ReactNode;
 }
 
 export const Panel = observer(function ({ children, side = 'left' }: PanelProps) {
     return <div className={`panel ${side}`}>
-        <div className="container">
-            {children}
-        </div>
+        {children}
     </div >
 });

src/components/Panels.scss

@@ -1,26 +1,23 @@
-.panel {
+.overlay-panels {
+    z-index: 15000;
     position: fixed;
     top: 0;
-    width: 30%;
+    left: 0;
+    width: 100vw;
     height: 100vh;
-    padding: 10px;
-    z-index: 10;
-    box-sizing: border-box;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    gap: 10px;
 
     pointer-events: none;
 
-    &.left {
-        left: 0;
-    }
+    &>.panel {
+        box-sizing: border-box;
+        margin: 10px;
 
-    &.right {
-        right: 0;
-    }
+        display: flex;
+        flex-direction: column;
 
-    &>.container {
-        flex: 1;
         background: rgba(0, 0, 0, 0.3);
         backdrop-filter: blur(4px);
         padding: 4px;
@@ -30,7 +27,24 @@
         flex-direction: column;
         gap: 0.25em;
 
-        &>*:not(.debug):not(.gap) {
+        &.left,
+        &.right {
+            min-width: 30%;
+            flex: 0;
+        }
+
+        &.main {
+            flex: 1;
+        }
+
+        &>header {
+            background: #00000040;
+            margin: -4px;
+            padding: 12px;
+            text-transform: capitalize;
+        }
+
+        &>*:not(.debug):not(.header):not(.gap) {
             pointer-events: all;
         }
 

src/components/Panels.tsx

@@ -0,0 +1,12 @@
+import { observer } from "mobx-react-lite";
+import { LeftPanel } from "./LeftPanel";
+import { MainPanel } from "./MainPanel";
+import './Panels.scss';
+
+export const Panels = observer(function () {
+
+    return <div className="overlay-panels">
+        <LeftPanel />
+        <MainPanel />
+    </div>
+});