add CardModal and HintNotification in BabylonCanvas

src/ui/Duel/babylon.tsx

@@ -4,22 +4,28 @@ import { ReactReduxContext, Provider } from "react-redux";
 import * as BABYLON from "@babylonjs/core";
 import * as CONFIG from "../../config/ui";
 import DuelHands from "./hands_";
+import CardModal from "./cardModal";
+import HintNotification from "./hintNotification";
 
 const BabylonCanvas = () => (
-  <ReactReduxContext.Consumer>
-    {({ store }) => (
-      <Engine antialias adaptToDeviceRatio canvasId="babylonJS">
-        <Scene>
-          <Provider store={store}>
-            <DuelCamera />
-            <DuelLight />
-            <DuelHands />
-            <DuelGround />
-          </Provider>
-        </Scene>
-      </Engine>
-    )}
-  </ReactReduxContext.Consumer>
+  <>
+    <ReactReduxContext.Consumer>
+      {({ store }) => (
+        <Engine antialias adaptToDeviceRatio canvasId="babylonJS">
+          <Scene>
+            <Provider store={store}>
+              <DuelCamera />
+              <DuelLight />
+              <DuelHands />
+              <DuelGround />
+            </Provider>
+          </Scene>
+        </Engine>
+      )}
+    </ReactReduxContext.Consumer>
+    <CardModal />
+    <HintNotification />
+  </>
 );
 
 const DuelCamera = () => (

src/ui/Neos.tsx

@@ -13,7 +13,7 @@ export default function () {
       <Route path="/" element={<JoinRoom />} />
       <Route path="/:player/:passWd/:ip" element={<WaitRoom />} />
       <Route path="/mora" element={<Mora />} />
-      <Route path="/duel" element={<Duel />} />
+      <Route path="/duel" element={<BabylonCanvas />} />
       <Route path="/react-babylon" element={<BabylonCanvas />} />
     </Routes>
   );