update duel/main.tsx

src/ui/Duel/main.tsx

@@ -19,6 +19,7 @@ import OptionModal from "./optionModal";
 import Phase from "./phase";
 import CheckCardModalV2 from "./checkCardModalV2";
 import ExtraDeck from "./extraDeck";
+import NeosLayout from "./layout";
 import { initStrings } from "../../api/strings";
 import NeosConfig from "../../../neos.config.json";
 
@@ -41,6 +42,25 @@ const NeosDuel = () => {
 
   return (
     <>
+      <NeosLayout
+        sider={<div>sider</div>}
+        header={<div>header</div>}
+        content={<NeosCanvas />}
+        footer={<div>footer</div>}
+      />
+      <CardModal />
+      <CardListModal />
+      <HintNotification />
+      <CheckCardModal />
+      <YesNoModal />
+      <PositionModal />
+      <OptionModal />
+      <CheckCardModalV2 />
+    </>
+  );
+};
+
+const NeosCanvas = () => (
   <ReactReduxContext.Consumer>
     {({ store }) => (
       <Engine antialias adaptToDeviceRatio canvasId="babylonJS">
@@ -64,17 +84,7 @@ const NeosDuel = () => {
       </Engine>
     )}
   </ReactReduxContext.Consumer>
-      <CardModal />
-      <CardListModal />
-      <HintNotification />
-      <CheckCardModal />
-      <YesNoModal />
-      <PositionModal />
-      <OptionModal />
-      <CheckCardModalV2 />
-    </>
-  );
-};
+);
 
 const Camera = () => (
   <freeCamera