refactor: 组件 默认导出 -> 具名导出

src/ui/Duel/Main.tsx

@@ -2,33 +2,37 @@ import React from "react";
 import { Engine, Scene } from "react-babylonjs";
 import { ReactReduxContext, Provider } from "react-redux";
 import * as BABYLON from "@babylonjs/core";
-import Hands from "./PlayMat/Hands";
-import Monsters from "./PlayMat/Monsters";
-import CardModal from "./Message/CardModal";
-import HintNotification from "./Message/HintNotification";
-import Magics from "./PlayMat/Magics";
-import Field from "./PlayMat/Field";
-import CommonDeck from "./PlayMat/Deck";
-import Exclusion from "./PlayMat/BanishedZone";
-import Graveyard from "./PlayMat/Graveyard";
-import CardListModal from "./Message/CardListModal";
-import CheckCardModal from "./Message/CheckCardModal";
-import YesNoModal from "./Message/YesNoModal";
-import PositionModal from "./Message/PositionModal";
-import OptionModal from "./Message/OptionModal";
-import Phase from "./Message/Phase";
-import CheckCardModalV2 from "./Message/CheckCardModalV2";
-import ExtraDeck from "./PlayMat/ExtraDeck";
+import {
+  Hands,
+  Monsters,
+  Magics,
+  Field,
+  Graveyard,
+  ExtraDeck,
+} from "./PlayMat";
+import {
+  CardModal,
+  HintNotification,
+  CardListModal,
+  CheckCardModal,
+  YesNoModal,
+  PositionModal,
+  OptionModal,
+  Phase,
+  CheckCardModalV2,
+  DuelTimeLine,
+  SendBox,
+  PlayerStatus,
+  Alert,
+  CheckCardModalV3,
+  CheckCounterModal,
+  SortCardModal,
+} from "./Message";
+import { CommonDeck } from "./PlayMat/Deck";
+import { BanishedZone } from "./PlayMat/BanishedZone";
 import NeosLayout from "./Layout";
 import NeosConfig from "../../../neos.config.json";
-import DuelTimeLine from "./Message/TimeLine";
 import { Row } from "antd";
-import SendBox from "./Message/SendBox";
-import PlayerStatus from "./Message/Status";
-import Alert from "./Message/Alert";
-import CheckCardModalV3 from "./Message/CheckCardModalV3";
-import CheckCounterModal from "./Message/CheckCounterModal";
-import SortCardModal from "./Message/SortCardModal";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => {
@@ -82,7 +86,7 @@ const NeosCanvas = () => (
             <CommonDeck />
             <ExtraDeck />
             <Graveyard />
-            <Exclusion />
+            <BanishedZone />
             <Field />
             <Ground />
           </Provider>

src/ui/Duel/Message/Alert.tsx

@@ -3,16 +3,16 @@ import { useNavigate } from "react-router-dom";
 import { sendSurrender } from "@/api/ocgcore/ocgHelper";
 import { useAppSelector } from "@/hook";
 import { selectUnimplemented } from "@/reducers/duel/mod";
-import { Alert } from "antd";
+import { Alert as AntdAlert } from "antd";
 
-const NeosAlert = () => {
+export const Alert = () => {
   const unimplemented = useAppSelector(selectUnimplemented);
   const navigate = useNavigate();
 
   return (
     <>
       {unimplemented ? (
-        <Alert
+        <AntdAlert
           message={`Unimplemented message with code=${unimplemented}`}
           description="It seems that there's something unimplemented by Neos. Sincerely apologize for that. Contact use to fix this issue: <ccc@neos.moe>"
           showIcon
@@ -31,5 +31,3 @@ const NeosAlert = () => {
     </>
   );
 };
-
-export default NeosAlert;

src/ui/Duel/Message/CardListModal.tsx

@@ -15,7 +15,7 @@ import NeosConfig from "../../../../neos.config.json";
 
 const CARD_WIDTH = 100;
 
-const CardListModal = () => {
+export const CardListModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectCardListModalIsOpen);
   const list = useAppSelector(selectCardListModalInfo);
@@ -62,5 +62,3 @@ const CardListModal = () => {
     </Drawer>
   );
 };
-
-export default CardListModal;

src/ui/Duel/Message/CardModal.tsx

@@ -28,7 +28,7 @@ import { fetchStrings } from "@/api/strings";
 const { Meta } = Card;
 const CARD_WIDTH = 240;
 
-const CardModal = () => {
+export const CardModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectCardModalIsOpen);
   const meta = useAppSelector(selectCardModalMeta);
@@ -160,5 +160,3 @@ const CounterLine = (props: { counters: { [type: number]: number } }) => {
     <></>
   );
 };
-
-export default CardModal;

src/ui/Duel/Message/CheckCardModal.tsx

@@ -21,10 +21,10 @@ import {
 } from "@/api/ocgcore/ocgHelper";
 import { ThunderboltOutlined } from "@ant-design/icons";
 import NeosConfig from "../../../../neos.config.json";
-import DragModal from "./DragModal";
+import { DragModal } from "./DragModal";
 import { selectHint } from "@/reducers/duel/hintSlice";
 
-const CheckCardModal = () => {
+export const CheckCardModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectCheckCardModalIsOpen);
   const { min, max } = useAppSelector(selectCheckCardModalMinMax);
@@ -165,5 +165,3 @@ const HoverCheckCard = (props: CheckCardProps & { hoverContent?: string }) => {
     </>
   );
 };
-
-export default CheckCardModal;

src/ui/Duel/Message/CheckCardModalV2.tsx

@@ -19,10 +19,10 @@ import {
   setCheckCardModalV2ResponseAble,
 } from "@/reducers/duel/mod";
 import NeosConfig from "../../../../neos.config.json";
-import DragModal from "./DragModal";
+import { DragModal } from "./DragModal";
 import { selectHint } from "@/reducers/duel/hintSlice";
 
-const CheckCardModalV2 = () => {
+export const CheckCardModalV2 = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectCheckCardModalV2IsOpen);
   const { min, max } = useAppSelector(selectCheckCardModalV2MinMax);
@@ -123,5 +123,3 @@ const CheckCardModalV2 = () => {
     </DragModal>
   );
 };
-
-export default CheckCardModalV2;

src/ui/Duel/Message/CheckCardModalV3.tsx

@@ -11,10 +11,10 @@ import {
 } from "@/reducers/duel/mod";
 import NeosConfig from "../../../../neos.config.json";
 import { selectCheckCardModalV3 } from "@/reducers/duel/modal/checkCardModalV3Slice";
-import DragModal from "./DragModal";
+import { DragModal } from "./DragModal";
 import { selectHint } from "@/reducers/duel/hintSlice";
 
-const CheckCardModalV3 = () => {
+export const CheckCardModalV3 = () => {
   const dispatch = store.dispatch;
   const state = useAppSelector(selectCheckCardModalV3);
   const isOpen = state.isOpen;
@@ -119,5 +119,3 @@ const CheckCardModalV3 = () => {
     </DragModal>
   );
 };
-
-export default CheckCardModalV3;

src/ui/Duel/Message/CheckCounterModal.tsx

@@ -6,10 +6,10 @@ import { useAppSelector } from "@/hook";
 import { clearCheckCounter } from "@/reducers/duel/mod";
 import { selectCheckCounterModal } from "@/reducers/duel/modal/checkCounterModalSlice";
 import { store } from "@/store";
-import DragModal from "./DragModal";
+import { DragModal } from "./DragModal";
 import NeosConfig from "../../../../neos.config.json";
 
-const CheckCounterModal = () => {
+export const CheckCounterModal = () => {
   const dispatch = store.dispatch;
   const state = useAppSelector(selectCheckCounterModal);
   const isOpen = state.isOpen;
@@ -69,5 +69,3 @@ const CheckCounterModal = () => {
     </DragModal>
   );
 };
-
-export default CheckCounterModal;

src/ui/Duel/Message/DragModal.tsx

@@ -6,7 +6,7 @@ import { Modal, ModalProps } from "antd";
 
 export interface DragModalProps extends ModalProps {}
 
-const DragModal = (props: DragModalProps) => {
+export const DragModal = (props: DragModalProps) => {
   const dragRef = useRef<HTMLDivElement>(null);
   const [bounds, setBounds] = useState({
     left: 0,
@@ -41,5 +41,3 @@ const DragModal = (props: DragModalProps) => {
     </Modal>
   );
 };
-
-export default DragModal;

src/ui/Duel/Message/HintNotification.tsx

@@ -9,7 +9,7 @@ import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import MsgWin = ygopro.StocGameMessage.MsgWin;
 import NeosConfig from "../../../../neos.config.json";
 
-const HintNotification = () => {
+export const HintNotification = () => {
   const hint = useAppSelector(selectHint);
   const currentPhase = useAppSelector(selectCurrentPhase);
   const waiting = useAppSelector(selectWaiting);
@@ -67,5 +67,3 @@ const HintNotification = () => {
 
   return <>{contextHolder}</>;
 };
-
-export default HintNotification;

src/ui/Duel/Message/OptionModal.tsx

@@ -9,9 +9,9 @@ import {
 } from "@/reducers/duel/modal/mod";
 import { sendSelectOptionResponse } from "@/api/ocgcore/ocgHelper";
 import { resetOptionModal, setOptionModalIsOpen } from "@/reducers/duel/mod";
-import DragModal from "./DragModal";
+import { DragModal } from "./DragModal";
 
-const OptionModal = () => {
+export const OptionModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectOptionModalIsOpen);
   const options = useAppSelector(selectOptionModalOptions);
@@ -52,5 +52,3 @@ const OptionModal = () => {
     </DragModal>
   );
 };
-
-export default OptionModal;

src/ui/Duel/Message/Phase.tsx

@@ -46,7 +46,7 @@ const PhaseButton = (props: {
   );
 };
 
-const Phase = () => {
+export const Phase = () => {
   const dispatch = store.dispatch;
   const enableBp = useAppSelector(selectEnableBp);
   const enableM2 = useAppSelector(selectEnableM2);
@@ -141,5 +141,3 @@ const Phase = () => {
     </Space>
   );
 };
-
-export default Phase;

src/ui/Duel/Message/PositionModal.tsx

@@ -13,9 +13,9 @@ import {
   setPositionModalIsOpen,
 } from "@/reducers/duel/mod";
 import { CheckCard } from "@ant-design/pro-components";
-import DragModal from "./DragModal";
+import { DragModal } from "./DragModal";
 
-const PositionModal = () => {
+export const PositionModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectPositionModalIsOpen);
   const positions = useAppSelector(selectPositionModalPositions);
@@ -82,5 +82,3 @@ function cardPositionToChinese(position: ygopro.CardPosition): string {
     }
   }
 }
-
-export default PositionModal;

src/ui/Duel/Message/SendBox.tsx

@@ -3,7 +3,7 @@ import { Input, Button, Row, Col } from "antd";
 import { SendOutlined } from "@ant-design/icons";
 import { sendChat } from "@/api/ocgcore/ocgHelper";
 
-const SendBox = () => {
+export const SendBox = () => {
   const [content, setContent] = useState("");
   return (
     <>
@@ -32,5 +32,3 @@ const SendBox = () => {
     </>
   );
 };
-
-export default SendBox;

src/ui/Duel/Message/SortCardModal.tsx

@@ -25,7 +25,7 @@ import { Modal, Button, Card } from "antd";
 import { CardMeta } from "@/api/cards";
 import NeosConfig from "../../../../neos.config.json";
 
-const SortCardModal = () => {
+export const SortCardModal = () => {
   const dispatch = store.dispatch;
   const state = useAppSelector(selectSortCardModal);
   const isOpen = state.isOpen;
@@ -111,5 +111,3 @@ const SortableItem = (props: { id: number; meta: CardMeta }) => {
     </div>
   );
 };
-
-export default SortCardModal;

src/ui/Duel/Message/Status.tsx

@@ -15,7 +15,7 @@ const avatarSize = 40;
 const ME_VALUE = "myself";
 const OP_VALUE = "opponent";
 
-const PlayerStatus = () => {
+export const PlayerStatus = () => {
   const meInfo = useAppSelector(selectMeInitInfo);
   const opInfo = useAppSelector(selectOpInitInfo);
   const waiting = useAppSelector(selectWaiting) || false;
@@ -61,5 +61,3 @@ const PlayerStatus = () => {
     </CheckCard.Group>
   );
 };
-
-export default PlayerStatus;

src/ui/Duel/Message/TimeLine.tsx

@@ -4,7 +4,7 @@ import { MessageOutlined } from "@ant-design/icons";
 import { useAppSelector } from "@/hook";
 import { selectChat } from "@/reducers/chatSlice";
 
-const DuelTimeLine = () => {
+export const DuelTimeLine = () => {
   const [items, setItems] = useState<TimelineItemProps[]>([]);
   const chat = useAppSelector(selectChat);
 
@@ -22,5 +22,3 @@ const DuelTimeLine = () => {
 
   return <Timeline items={items} />;
 };
-
-export default DuelTimeLine;

src/ui/Duel/Message/YesNoModal.tsx

@@ -8,10 +8,10 @@ import {
   selectYesNOModalMsg,
 } from "@/reducers/duel/modal/mod";
 import { setYesNoModalIsOpen } from "@/reducers/duel/mod";
-import DragModal from "./DragModal";
+import { DragModal } from "./DragModal";
 import { selectHint } from "@/reducers/duel/hintSlice";
 
-const YesNoModal = () => {
+export const YesNoModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectYesNoModalIsOpen);
   const msg = useAppSelector(selectYesNOModalMsg);
@@ -46,5 +46,3 @@ const YesNoModal = () => {
     />
   );
 };
-
-export default YesNoModal;

src/ui/Duel/Message/alert.tsx

@@ -3,16 +3,16 @@ import { useNavigate } from "react-router-dom";
 import { sendSurrender } from "@/api/ocgcore/ocgHelper";
 import { useAppSelector } from "@/hook";
 import { selectUnimplemented } from "@/reducers/duel/mod";
-import { Alert } from "antd";
+import { Alert as AntdAlert } from "antd";
 
-const NeosAlert = () => {
+export const Alert = () => {
   const unimplemented = useAppSelector(selectUnimplemented);
   const navigate = useNavigate();
 
   return (
     <>
       {unimplemented ? (
-        <Alert
+        <AntdAlert
           message={`Unimplemented message with code=${unimplemented}`}
           description="It seems that there's something unimplemented by Neos. Sincerely apologize for that. Contact use to fix this issue: <ccc@neos.moe>"
           showIcon
@@ -31,5 +31,3 @@ const NeosAlert = () => {
     </>
   );
 };
-
-export default NeosAlert;

src/ui/Duel/Message/cardListModal.tsx

@@ -15,7 +15,7 @@ import NeosConfig from "../../../../neos.config.json";
 
 const CARD_WIDTH = 100;
 
-const CardListModal = () => {
+export const CardListModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectCardListModalIsOpen);
   const list = useAppSelector(selectCardListModalInfo);
@@ -62,5 +62,3 @@ const CardListModal = () => {
     </Drawer>
   );
 };
-
-export default CardListModal;

src/ui/Duel/Message/cardModal.tsx

@@ -28,7 +28,7 @@ import { fetchStrings } from "@/api/strings";
 const { Meta } = Card;
 const CARD_WIDTH = 240;
 
-const CardModal = () => {
+export const CardModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectCardModalIsOpen);
   const meta = useAppSelector(selectCardModalMeta);
@@ -160,5 +160,3 @@ const CounterLine = (props: { counters: { [type: number]: number } }) => {
     <></>
   );
 };
-
-export default CardModal;

src/ui/Duel/Message/checkCardModal.tsx

@@ -21,10 +21,10 @@ import {
 } from "@/api/ocgcore/ocgHelper";
 import { ThunderboltOutlined } from "@ant-design/icons";
 import NeosConfig from "../../../../neos.config.json";
-import DragModal from "./DragModal";
+import { DragModal } from "./DragModal";
 import { selectHint } from "@/reducers/duel/hintSlice";
 
-const CheckCardModal = () => {
+export const CheckCardModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectCheckCardModalIsOpen);
   const { min, max } = useAppSelector(selectCheckCardModalMinMax);
@@ -165,5 +165,3 @@ const HoverCheckCard = (props: CheckCardProps & { hoverContent?: string }) => {
     </>
   );
 };
-
-export default CheckCardModal;

src/ui/Duel/Message/checkCardModalV2.tsx

@@ -19,10 +19,10 @@ import {
   setCheckCardModalV2ResponseAble,
 } from "@/reducers/duel/mod";
 import NeosConfig from "../../../../neos.config.json";
-import DragModal from "./DragModal";
+import { DragModal } from "./DragModal";
 import { selectHint } from "@/reducers/duel/hintSlice";
 
-const CheckCardModalV2 = () => {
+export const CheckCardModalV2 = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectCheckCardModalV2IsOpen);
   const { min, max } = useAppSelector(selectCheckCardModalV2MinMax);
@@ -123,5 +123,3 @@ const CheckCardModalV2 = () => {
     </DragModal>
   );
 };
-
-export default CheckCardModalV2;

src/ui/Duel/Message/checkCardModalV3.tsx

@@ -11,10 +11,10 @@ import {
 } from "@/reducers/duel/mod";
 import NeosConfig from "../../../../neos.config.json";
 import { selectCheckCardModalV3 } from "@/reducers/duel/modal/checkCardModalV3Slice";
-import DragModal from "./DragModal";
+import { DragModal } from "./DragModal";
 import { selectHint } from "@/reducers/duel/hintSlice";
 
-const CheckCardModalV3 = () => {
+export const CheckCardModalV3 = () => {
   const dispatch = store.dispatch;
   const state = useAppSelector(selectCheckCardModalV3);
   const isOpen = state.isOpen;
@@ -119,5 +119,3 @@ const CheckCardModalV3 = () => {
     </DragModal>
   );
 };
-
-export default CheckCardModalV3;

src/ui/Duel/Message/checkCounterModal.tsx

@@ -6,10 +6,10 @@ import { useAppSelector } from "@/hook";
 import { clearCheckCounter } from "@/reducers/duel/mod";
 import { selectCheckCounterModal } from "@/reducers/duel/modal/checkCounterModalSlice";
 import { store } from "@/store";
-import DragModal from "./DragModal";
+import { DragModal } from "./DragModal";
 import NeosConfig from "../../../../neos.config.json";
 
-const CheckCounterModal = () => {
+export const CheckCounterModal = () => {
   const dispatch = store.dispatch;
   const state = useAppSelector(selectCheckCounterModal);
   const isOpen = state.isOpen;
@@ -69,5 +69,3 @@ const CheckCounterModal = () => {
     </DragModal>
   );
 };
-
-export default CheckCounterModal;

src/ui/Duel/Message/dragModal.tsx

@@ -6,7 +6,7 @@ import { Modal, ModalProps } from "antd";
 
 export interface DragModalProps extends ModalProps {}
 
-const DragModal = (props: DragModalProps) => {
+export const DragModal = (props: DragModalProps) => {
   const dragRef = useRef<HTMLDivElement>(null);
   const [bounds, setBounds] = useState({
     left: 0,
@@ -41,5 +41,3 @@ const DragModal = (props: DragModalProps) => {
     </Modal>
   );
 };
-
-export default DragModal;

src/ui/Duel/Message/hintNotification.tsx

@@ -9,7 +9,7 @@ import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import MsgWin = ygopro.StocGameMessage.MsgWin;
 import NeosConfig from "../../../../neos.config.json";
 
-const HintNotification = () => {
+export const HintNotification = () => {
   const hint = useAppSelector(selectHint);
   const currentPhase = useAppSelector(selectCurrentPhase);
   const waiting = useAppSelector(selectWaiting);
@@ -67,5 +67,3 @@ const HintNotification = () => {
 
   return <>{contextHolder}</>;
 };
-
-export default HintNotification;

src/ui/Duel/Message/index.ts

+export * from "./Alert";
+export * from "./CardListModal";
+export * from "./CardModal";
+export * from "./CheckCardModal";
+export * from "./CheckCardModalV2";
+export * from "./CheckCardModalV3";
+export * from "./CheckCounterModal";
+export * from "./DragModal";
+export * from "./HintNotification";
+export * from "./OptionModal";
+export * from "./Phase";
+export * from "./PositionModal";
+export * from "./SendBox";
+export * from "./SortCardModal";
+export * from "./Status";
+export * from "./TimeLine";
+export * from "./YesNoModal";

src/ui/Duel/Message/optionModal.tsx

@@ -9,9 +9,9 @@ import {
 } from "@/reducers/duel/modal/mod";
 import { sendSelectOptionResponse } from "@/api/ocgcore/ocgHelper";
 import { resetOptionModal, setOptionModalIsOpen } from "@/reducers/duel/mod";
-import DragModal from "./DragModal";
+import { DragModal } from "./DragModal";
 
-const OptionModal = () => {
+export const OptionModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectOptionModalIsOpen);
   const options = useAppSelector(selectOptionModalOptions);
@@ -52,5 +52,3 @@ const OptionModal = () => {
     </DragModal>
   );
 };
-
-export default OptionModal;

src/ui/Duel/Message/phase.tsx

@@ -46,7 +46,7 @@ const PhaseButton = (props: {
   );
 };
 
-const Phase = () => {
+export const Phase = () => {
   const dispatch = store.dispatch;
   const enableBp = useAppSelector(selectEnableBp);
   const enableM2 = useAppSelector(selectEnableM2);
@@ -141,5 +141,3 @@ const Phase = () => {
     </Space>
   );
 };
-
-export default Phase;

src/ui/Duel/Message/positionModal.tsx

@@ -13,9 +13,9 @@ import {
   setPositionModalIsOpen,
 } from "@/reducers/duel/mod";
 import { CheckCard } from "@ant-design/pro-components";
-import DragModal from "./DragModal";
+import { DragModal } from "./DragModal";
 
-const PositionModal = () => {
+export const PositionModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectPositionModalIsOpen);
   const positions = useAppSelector(selectPositionModalPositions);
@@ -82,5 +82,3 @@ function cardPositionToChinese(position: ygopro.CardPosition): string {
     }
   }
 }
-
-export default PositionModal;

src/ui/Duel/Message/sendBox.tsx

@@ -3,7 +3,7 @@ import { Input, Button, Row, Col } from "antd";
 import { SendOutlined } from "@ant-design/icons";
 import { sendChat } from "@/api/ocgcore/ocgHelper";
 
-const SendBox = () => {
+export const SendBox = () => {
   const [content, setContent] = useState("");
   return (
     <>
@@ -32,5 +32,3 @@ const SendBox = () => {
     </>
   );
 };
-
-export default SendBox;

src/ui/Duel/Message/sortCardModal.tsx

@@ -25,7 +25,7 @@ import { Modal, Button, Card } from "antd";
 import { CardMeta } from "@/api/cards";
 import NeosConfig from "../../../../neos.config.json";
 
-const SortCardModal = () => {
+export const SortCardModal = () => {
   const dispatch = store.dispatch;
   const state = useAppSelector(selectSortCardModal);
   const isOpen = state.isOpen;
@@ -111,5 +111,3 @@ const SortableItem = (props: { id: number; meta: CardMeta }) => {
     </div>
   );
 };
-
-export default SortCardModal;

src/ui/Duel/Message/status.tsx

@@ -15,7 +15,7 @@ const avatarSize = 40;
 const ME_VALUE = "myself";
 const OP_VALUE = "opponent";
 
-const PlayerStatus = () => {
+export const PlayerStatus = () => {
   const meInfo = useAppSelector(selectMeInitInfo);
   const opInfo = useAppSelector(selectOpInitInfo);
   const waiting = useAppSelector(selectWaiting) || false;
@@ -61,5 +61,3 @@ const PlayerStatus = () => {
     </CheckCard.Group>
   );
 };
-
-export default PlayerStatus;

src/ui/Duel/Message/timeLine.tsx

@@ -4,7 +4,7 @@ import { MessageOutlined } from "@ant-design/icons";
 import { useAppSelector } from "@/hook";
 import { selectChat } from "@/reducers/chatSlice";
 
-const DuelTimeLine = () => {
+export const DuelTimeLine = () => {
   const [items, setItems] = useState<TimelineItemProps[]>([]);
   const chat = useAppSelector(selectChat);
 
@@ -22,5 +22,3 @@ const DuelTimeLine = () => {
 
   return <Timeline items={items} />;
 };
-
-export default DuelTimeLine;

src/ui/Duel/Message/yesNoModal.tsx

@@ -8,10 +8,10 @@ import {
   selectYesNOModalMsg,
 } from "@/reducers/duel/modal/mod";
 import { setYesNoModalIsOpen } from "@/reducers/duel/mod";
-import DragModal from "./DragModal";
+import { DragModal } from "./DragModal";
 import { selectHint } from "@/reducers/duel/hintSlice";
 
-const YesNoModal = () => {
+export const YesNoModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectYesNoModalIsOpen);
   const msg = useAppSelector(selectYesNOModalMsg);
@@ -46,5 +46,3 @@ const YesNoModal = () => {
     />
   );
 };
-
-export default YesNoModal;

src/ui/Duel/PlayMat/BanishedZone.tsx

@@ -4,11 +4,11 @@ import {
   selectMeExclusion,
   selectopExclusion,
 } from "@/reducers/duel/exclusionSlice";
-import SingleSlot, { Depth } from "./SingleSlot";
+import { SingleSlot, Depth } from "./SingleSlot";
 import NeosConfig from "../../../../neos.config.json";
 import { cardSlotRotation } from "../utils";
 
-const Exclusion = () => {
+export const BanishedZone = () => {
   const meExclusion = useAppSelector(selectMeExclusion).inner;
   const opExclusion = useAppSelector(selectopExclusion).inner;
 
@@ -16,24 +16,22 @@ const Exclusion = () => {
     <>
       <SingleSlot
         state={meExclusion}
-        position={exclusionPosition(0, meExclusion.length)}
+        position={banishedZonePosition(0, meExclusion.length)}
         rotation={cardSlotRotation(false)}
       />
       <SingleSlot
         state={opExclusion}
-        position={exclusionPosition(1, opExclusion.length)}
+        position={banishedZonePosition(1, opExclusion.length)}
         rotation={cardSlotRotation(true)}
       />
     </>
   );
 };
 
-const exclusionPosition = (player: number, exclusionLength: number) => {
+const banishedZonePosition = (player: number, exclusionLength: number) => {
   const x = player == 0 ? 3.2 : -3.2;
   const y = (Depth * exclusionLength) / 2 + NeosConfig.ui.card.floating;
   const z = player == 0 ? -0.7 : 0.7;
 
   return new BABYLON.Vector3(x, y, z);
 };
-
-export default Exclusion;

src/ui/Duel/PlayMat/Deck.tsx

 import * as BABYLON from "@babylonjs/core";
 import { useAppSelector } from "@/hook";
 import { selectMeDeck, selectOpDeck } from "@/reducers/duel/deckSlice";
-import SingleSlot, { Depth } from "./SingleSlot";
+import { SingleSlot, Depth } from "./SingleSlot";
 import { cardSlotRotation } from "../utils";
 import NeosConfig from "../../../../neos.config.json";
 
-const CommonDeck = () => {
+export const CommonDeck = () => {
   const meDeck = useAppSelector(selectMeDeck).inner;
   const opDeck = useAppSelector(selectOpDeck).inner;
 
@@ -32,5 +32,3 @@ const deckPosition = (player: number, deckLength: number) => {
 
   return new BABYLON.Vector3(x, y, z);
 };
-
-export default CommonDeck;

src/ui/Duel/PlayMat/ExtraDeck.tsx

-import SingleSlot, { Depth } from "./SingleSlot";
+import { SingleSlot, Depth } from "./SingleSlot";
 import * as BABYLON from "@babylonjs/core";
 import { useAppSelector } from "@/hook";
 import {
@@ -8,7 +8,7 @@ import {
 import NeosConfig from "../../../../neos.config.json";
 import { cardSlotRotation } from "../utils";
 
-const ExtraDeck = () => {
+export const ExtraDeck = () => {
   const meExtraDeck = useAppSelector(selectMeExtraDeck).inner;
   const opExtraDeck = useAppSelector(selectOpExtraDeck).inner;
 
@@ -35,5 +35,3 @@ const extraDeckPosition = (player: number, deckLength: number) => {
 
   return new BABYLON.Vector3(x, y, z);
 };
-
-export default ExtraDeck;

src/ui/Duel/PlayMat/Field.tsx

@@ -2,12 +2,12 @@ import * as BABYLON from "@babylonjs/core";
 import { useAppSelector } from "@/hook";
 import { selectMeMagics, selectOpMagics } from "@/reducers/duel/magicSlice";
 import { clearMagicPlaceInteractivities } from "@/reducers/duel/mod";
-import FixedSlot from "./FixedSlot";
+import { FixedSlot } from "./FixedSlot";
 import { Depth } from "./SingleSlot";
 import NeosConfig from "../../../../neos.config.json";
 import { cardSlotRotation } from "../utils";
 
-const Field = () => {
+export const Field = () => {
   const meField = useAppSelector(selectMeMagics).inner.find(
     (_, sequence) => sequence == 5
   );
@@ -50,5 +50,3 @@ const fieldPosition = (player: number) => {
 
   return new BABYLON.Vector3(x, y, z);
 };
-
-export default Field;

src/ui/Duel/PlayMat/FixedSlot.tsx

@@ -25,7 +25,7 @@ const cardDefenceRotation = new BABYLON.Vector3(
   defenceRotation.z
 );
 
-const FixedSlot = (props: {
+export const FixedSlot = (props: {
   state: CardState;
   sequence: number;
   position: BABYLON.Vector3;
@@ -128,5 +128,3 @@ const FixedSlot = (props: {
     </plane>
   );
 };
-
-export default FixedSlot;

src/ui/Duel/PlayMat/Graveyard.tsx

@@ -4,11 +4,11 @@ import {
   selectOpCemetery,
 } from "@/reducers/duel/cemeretySlice";
 import { useAppSelector } from "@/hook";
-import SingleSlot, { Depth } from "./SingleSlot";
+import { SingleSlot, Depth } from "./SingleSlot";
 import { cardSlotRotation } from "../utils";
 import NeosConfig from "../../../../neos.config.json";
 
-const Graveyard = () => {
+export const Graveyard = () => {
   const meCemetery = useAppSelector(selectMeCemetery).inner;
   const opCemetery = useAppSelector(selectOpCemetery).inner;
 
@@ -35,5 +35,3 @@ const cemeteryPosition = (player: number, cemeteryLength: number) => {
 
   return new BABYLON.Vector3(x, y, z);
 };
-
-export default Graveyard;

src/ui/Duel/PlayMat/Hands.tsx

@@ -21,7 +21,7 @@ const rotation = NeosConfig.ui.card.handRotation;
 const handRotation = new BABYLON.Vector3(rotation.x, rotation.y, rotation.z);
 const hoverScaling = NeosConfig.ui.card.handHoverScaling;
 
-const Hands = () => {
+export const Hands = () => {
   const meHands = useAppSelector(selectMeHands).inner;
   const meHandPositions = handPositons(0, meHands);
   const opHands = useAppSelector(selectOpHands).inner;
@@ -168,5 +168,3 @@ const handPositons = (player: number, hands: CardState[]) => {
 
   return hands.map((_, idx) => new BABYLON.Vector3(x(idx), y, z));
 };
-
-export default Hands;

src/ui/Duel/PlayMat/Magics.tsx

@@ -3,7 +3,7 @@ import { selectMeMagics, selectOpMagics } from "@/reducers/duel/magicSlice";
 import { CardState } from "@/reducers/duel/generic";
 import { useAppSelector } from "@/hook";
 import { zip, cardSlotRotation } from "../utils";
-import FixedSlot from "./FixedSlot";
+import { FixedSlot } from "./FixedSlot";
 import { clearMagicPlaceInteractivities } from "@/reducers/duel/mod";
 import NeosConfig from "../../../../neos.config.json";
 
@@ -12,7 +12,7 @@ const left = -2.15;
 const gap = 1.05;
 const transform = NeosConfig.ui.card.transform;
 
-const Magics = () => {
+export const Magics = () => {
   const meMagics = useAppSelector(selectMeMagics).inner;
   const meMagicPositions = magicPositions(0, meMagics);
   const opMagics = useAppSelector(selectOpMagics).inner;
@@ -60,5 +60,3 @@ const magicPositions = (player: number, magics: CardState[]) => {
 
   return magics.map((_, sequence) => new BABYLON.Vector3(x(sequence), y, z));
 };
-
-export default Magics;

src/ui/Duel/PlayMat/Monsters.tsx

@@ -7,7 +7,7 @@ import {
   selectOpMonsters,
 } from "@/reducers/duel/monstersSlice";
 import { zip, cardSlotRotation, cardSlotDefenceRotation } from "../utils";
-import FixedSlot from "./FixedSlot";
+import { FixedSlot } from "./FixedSlot";
 import { clearMonsterPlaceInteractivities } from "@/reducers/duel/mod";
 import NeosConfig from "../../../../neos.config.json";
 
@@ -16,7 +16,7 @@ const floating = NeosConfig.ui.card.floating;
 const left = -2.15; // TODO: config
 const gap = 1.05;
 
-const Monsters = () => {
+export const Monsters = () => {
   const meMonsters = useAppSelector(selectMeMonsters).inner;
   const meMonsterPositions = monsterPositions(0, meMonsters);
   const opMonsters = useAppSelector(selectOpMonsters).inner;
@@ -133,5 +133,3 @@ const monsterPositions = (player: number, monsters: CardState[]) => {
 
   return monsters.map((_, sequence) => new BABYLON.Vector3(x(sequence), y, z));
 };
-
-export default Monsters;

src/ui/Duel/PlayMat/SingleSlot.tsx

@@ -13,7 +13,7 @@ import NeosConfig from "../../../../neos.config.json";
 const transform = NeosConfig.ui.card.transform;
 export const Depth = 0.005;
 
-const SingleSlot = (props: {
+export const SingleSlot = (props: {
   state: CardState[];
   position: BABYLON.Vector3;
   rotation: BABYLON.Vector3;
@@ -83,5 +83,3 @@ const SingleSlot = (props: {
     </box>
   );
 };
-
-export default SingleSlot;

src/ui/Duel/PlayMat/deck.tsx

 import * as BABYLON from "@babylonjs/core";
 import { useAppSelector } from "@/hook";
 import { selectMeDeck, selectOpDeck } from "@/reducers/duel/deckSlice";
-import SingleSlot, { Depth } from "./SingleSlot";
+import { SingleSlot, Depth } from "./SingleSlot";
 import { cardSlotRotation } from "../utils";
 import NeosConfig from "../../../../neos.config.json";
 
-const CommonDeck = () => {
+export const CommonDeck = () => {
   const meDeck = useAppSelector(selectMeDeck).inner;
   const opDeck = useAppSelector(selectOpDeck).inner;
 
@@ -32,5 +32,3 @@ const deckPosition = (player: number, deckLength: number) => {
 
   return new BABYLON.Vector3(x, y, z);
 };
-
-export default CommonDeck;

src/ui/Duel/PlayMat/extraDeck.tsx

-import SingleSlot, { Depth } from "./SingleSlot";
+import { SingleSlot, Depth } from "./SingleSlot";
 import * as BABYLON from "@babylonjs/core";
 import { useAppSelector } from "@/hook";
 import {
@@ -8,7 +8,7 @@ import {
 import NeosConfig from "../../../../neos.config.json";
 import { cardSlotRotation } from "../utils";
 
-const ExtraDeck = () => {
+export const ExtraDeck = () => {
   const meExtraDeck = useAppSelector(selectMeExtraDeck).inner;
   const opExtraDeck = useAppSelector(selectOpExtraDeck).inner;
 
@@ -35,5 +35,3 @@ const extraDeckPosition = (player: number, deckLength: number) => {
 
   return new BABYLON.Vector3(x, y, z);
 };
-
-export default ExtraDeck;

src/ui/Duel/PlayMat/field.tsx

@@ -2,12 +2,12 @@ import * as BABYLON from "@babylonjs/core";
 import { useAppSelector } from "@/hook";
 import { selectMeMagics, selectOpMagics } from "@/reducers/duel/magicSlice";
 import { clearMagicPlaceInteractivities } from "@/reducers/duel/mod";
-import FixedSlot from "./FixedSlot";
+import { FixedSlot } from "./FixedSlot";
 import { Depth } from "./SingleSlot";
 import NeosConfig from "../../../../neos.config.json";
 import { cardSlotRotation } from "../utils";
 
-const Field = () => {
+export const Field = () => {
   const meField = useAppSelector(selectMeMagics).inner.find(
     (_, sequence) => sequence == 5
   );
@@ -50,5 +50,3 @@ const fieldPosition = (player: number) => {
 
   return new BABYLON.Vector3(x, y, z);
 };
-
-export default Field;

src/ui/Duel/PlayMat/fixedSlot.tsx

@@ -25,7 +25,7 @@ const cardDefenceRotation = new BABYLON.Vector3(
   defenceRotation.z
 );
 
-const FixedSlot = (props: {
+export const FixedSlot = (props: {
   state: CardState;
   sequence: number;
   position: BABYLON.Vector3;
@@ -128,5 +128,3 @@ const FixedSlot = (props: {
     </plane>
   );
 };
-
-export default FixedSlot;

src/ui/Duel/PlayMat/hands.tsx

@@ -21,7 +21,7 @@ const rotation = NeosConfig.ui.card.handRotation;
 const handRotation = new BABYLON.Vector3(rotation.x, rotation.y, rotation.z);
 const hoverScaling = NeosConfig.ui.card.handHoverScaling;
 
-const Hands = () => {
+export const Hands = () => {
   const meHands = useAppSelector(selectMeHands).inner;
   const meHandPositions = handPositons(0, meHands);
   const opHands = useAppSelector(selectOpHands).inner;
@@ -168,5 +168,3 @@ const handPositons = (player: number, hands: CardState[]) => {
 
   return hands.map((_, idx) => new BABYLON.Vector3(x(idx), y, z));
 };
-
-export default Hands;

src/ui/Duel/PlayMat/index.ts

+export * from "./FixedSlot";
+export * from "./SingleSlot";
+export * from "./BanishedZone";
+export * from "./Deck";
+export * from "./ExtraDeck";
+export * from "./Field";
+export * from "./Graveyard";
+export * from "./Hands";
+export * from "./Magics";
+export * from "./Monsters";

src/ui/Duel/PlayMat/magics.tsx

@@ -3,7 +3,7 @@ import { selectMeMagics, selectOpMagics } from "@/reducers/duel/magicSlice";
 import { CardState } from "@/reducers/duel/generic";
 import { useAppSelector } from "@/hook";
 import { zip, cardSlotRotation } from "../utils";
-import FixedSlot from "./FixedSlot";
+import { FixedSlot } from "./FixedSlot";
 import { clearMagicPlaceInteractivities } from "@/reducers/duel/mod";
 import NeosConfig from "../../../../neos.config.json";
 
@@ -12,7 +12,7 @@ const left = -2.15;
 const gap = 1.05;
 const transform = NeosConfig.ui.card.transform;
 
-const Magics = () => {
+export const Magics = () => {
   const meMagics = useAppSelector(selectMeMagics).inner;
   const meMagicPositions = magicPositions(0, meMagics);
   const opMagics = useAppSelector(selectOpMagics).inner;
@@ -60,5 +60,3 @@ const magicPositions = (player: number, magics: CardState[]) => {
 
   return magics.map((_, sequence) => new BABYLON.Vector3(x(sequence), y, z));
 };
-
-export default Magics;

src/ui/Duel/PlayMat/monsters.tsx

@@ -7,7 +7,7 @@ import {
   selectOpMonsters,
 } from "@/reducers/duel/monstersSlice";
 import { zip, cardSlotRotation, cardSlotDefenceRotation } from "../utils";
-import FixedSlot from "./FixedSlot";
+import { FixedSlot } from "./FixedSlot";
 import { clearMonsterPlaceInteractivities } from "@/reducers/duel/mod";
 import NeosConfig from "../../../../neos.config.json";
 
@@ -16,7 +16,7 @@ const floating = NeosConfig.ui.card.floating;
 const left = -2.15; // TODO: config
 const gap = 1.05;
 
-const Monsters = () => {
+export const Monsters = () => {
   const meMonsters = useAppSelector(selectMeMonsters).inner;
   const meMonsterPositions = monsterPositions(0, meMonsters);
   const opMonsters = useAppSelector(selectOpMonsters).inner;
@@ -133,5 +133,3 @@ const monsterPositions = (player: number, monsters: CardState[]) => {
 
   return monsters.map((_, sequence) => new BABYLON.Vector3(x(sequence), y, z));
 };
-
-export default Monsters;

src/ui/Duel/PlayMat/singleSlot.tsx

@@ -13,7 +13,7 @@ import NeosConfig from "../../../../neos.config.json";
 const transform = NeosConfig.ui.card.transform;
 export const Depth = 0.005;
 
-const SingleSlot = (props: {
+export const SingleSlot = (props: {
   state: CardState[];
   position: BABYLON.Vector3;
   rotation: BABYLON.Vector3;
@@ -83,5 +83,3 @@ const SingleSlot = (props: {
     </box>
   );
 };
-
-export default SingleSlot;

src/ui/Duel/main.tsx

@@ -2,33 +2,37 @@ import React from "react";
 import { Engine, Scene } from "react-babylonjs";
 import { ReactReduxContext, Provider } from "react-redux";
 import * as BABYLON from "@babylonjs/core";
-import Hands from "./PlayMat/Hands";
-import Monsters from "./PlayMat/Monsters";
-import CardModal from "./Message/CardModal";
-import HintNotification from "./Message/HintNotification";
-import Magics from "./PlayMat/Magics";
-import Field from "./PlayMat/Field";
-import CommonDeck from "./PlayMat/Deck";
-import Exclusion from "./PlayMat/BanishedZone";
-import Graveyard from "./PlayMat/Graveyard";
-import CardListModal from "./Message/CardListModal";
-import CheckCardModal from "./Message/CheckCardModal";
-import YesNoModal from "./Message/YesNoModal";
-import PositionModal from "./Message/PositionModal";
-import OptionModal from "./Message/OptionModal";
-import Phase from "./Message/Phase";
-import CheckCardModalV2 from "./Message/CheckCardModalV2";
-import ExtraDeck from "./PlayMat/ExtraDeck";
+import {
+  Hands,
+  Monsters,
+  Magics,
+  Field,
+  Graveyard,
+  ExtraDeck,
+} from "./PlayMat";
+import {
+  CardModal,
+  HintNotification,
+  CardListModal,
+  CheckCardModal,
+  YesNoModal,
+  PositionModal,
+  OptionModal,
+  Phase,
+  CheckCardModalV2,
+  DuelTimeLine,
+  SendBox,
+  PlayerStatus,
+  Alert,
+  CheckCardModalV3,
+  CheckCounterModal,
+  SortCardModal,
+} from "./Message";
+import { CommonDeck } from "./PlayMat/Deck";
+import { BanishedZone } from "./PlayMat/BanishedZone";
 import NeosLayout from "./Layout";
 import NeosConfig from "../../../neos.config.json";
-import DuelTimeLine from "./Message/TimeLine";
 import { Row } from "antd";
-import SendBox from "./Message/SendBox";
-import PlayerStatus from "./Message/Status";
-import Alert from "./Message/Alert";
-import CheckCardModalV3 from "./Message/CheckCardModalV3";
-import CheckCounterModal from "./Message/CheckCounterModal";
-import SortCardModal from "./Message/SortCardModal";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => {
@@ -82,7 +86,7 @@ const NeosCanvas = () => (
             <CommonDeck />
             <ExtraDeck />
             <Graveyard />
-            <Exclusion />
+            <BanishedZone />
             <Field />
             <Ground />
           </Provider>