refactor: sort components in ui/Duel

src/hook/index.ts

 export * from "./useApp";
 export * from "./useEnv";
+export * from "./useMeshClick";

src/ui/Duel/cardListModal.tsx → src/ui/Duel/Message/cardListModal.tsx

@@ -11,7 +11,7 @@ import {
 } from "@/reducers/duel/mod";
 import { Drawer, List, Button } from "antd";
 import { sendSelectIdleCmdResponse } from "@/api/ocgcore/ocgHelper";
-import NeosConfig from "../../../neos.config.json";
+import NeosConfig from "../../../../neos.config.json";
 
 const CARD_WIDTH = 100;
 

src/ui/Duel/cardModal.tsx → src/ui/Duel/Message/cardModal.tsx

@@ -14,15 +14,15 @@ import {
 import { Modal, Card, Button, Row, Col } from "antd";
 import { sendSelectIdleCmdResponse } from "@/api/ocgcore/ocgHelper";
 import Icon, { StarOutlined } from "@ant-design/icons";
-import NeosConfig from "../../../neos.config.json";
-import { ReactComponent as BattleSvg } from "../../../neos-assets/battle-axe.svg";
-import { ReactComponent as DefenceSvg } from "../../../neos-assets/checked-shield.svg";
+import NeosConfig from "../../../../neos.config.json";
+import { ReactComponent as BattleSvg } from "../../../../neos-assets/battle-axe.svg";
+import { ReactComponent as DefenceSvg } from "../../../../neos-assets/checked-shield.svg";
 import {
   extraCardTypes,
   Type2StringCodeMap,
   Attribute2StringCodeMap,
   Race2StringCodeMap,
-} from "../../common";
+} from "../../../common";
 import { fetchStrings } from "@/api/strings";
 
 const { Meta } = Card;

src/ui/Duel/checkCardModal.tsx → src/ui/Duel/Message/checkCardModal.tsx

@@ -20,7 +20,7 @@ import {
   sendSelectChainResponse,
 } from "@/api/ocgcore/ocgHelper";
 import { ThunderboltOutlined } from "@ant-design/icons";
-import NeosConfig from "../../../neos.config.json";
+import NeosConfig from "../../../../neos.config.json";
 import DragModal from "./dragModal";
 import { selectHint } from "@/reducers/duel/hintSlice";
 

src/ui/Duel/checkCardModalV2.tsx → src/ui/Duel/Message/checkCardModalV2.tsx

@@ -18,7 +18,7 @@ import {
   setCheckCardModalV2IsOpen,
   setCheckCardModalV2ResponseAble,
 } from "@/reducers/duel/mod";
-import NeosConfig from "../../../neos.config.json";
+import NeosConfig from "../../../../neos.config.json";
 import DragModal from "./dragModal";
 import { selectHint } from "@/reducers/duel/hintSlice";
 

src/ui/Duel/checkCardModalV3.tsx → src/ui/Duel/Message/checkCardModalV3.tsx

@@ -9,7 +9,7 @@ import {
   setCheckCardModalV3IsOpen,
   setCheckCardModalV3ResponseAble,
 } from "@/reducers/duel/mod";
-import NeosConfig from "../../../neos.config.json";
+import NeosConfig from "../../../../neos.config.json";
 import { selectCheckCardModalV3 } from "@/reducers/duel/modal/checkCardModalV3Slice";
 import DragModal from "./dragModal";
 import { selectHint } from "@/reducers/duel/hintSlice";

src/ui/Duel/checkCounterModal.tsx → src/ui/Duel/Message/checkCounterModal.tsx

@@ -7,7 +7,7 @@ import { clearCheckCounter } from "@/reducers/duel/mod";
 import { selectCheckCounterModal } from "@/reducers/duel/modal/checkCounterModalSlice";
 import { store } from "@/store";
 import DragModal from "./dragModal";
-import NeosConfig from "../../../neos.config.json";
+import NeosConfig from "../../../../neos.config.json";
 
 const CheckCounterModal = () => {
   const dispatch = store.dispatch;

src/ui/Duel/hintNotification.tsx → src/ui/Duel/Message/hintNotification.tsx

@@ -7,7 +7,7 @@ import { selectDuelResult, selectWaiting } from "@/reducers/duel/mod";
 import { useNavigate } from "react-router-dom";
 import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import MsgWin = ygopro.StocGameMessage.MsgWin;
-import NeosConfig from "../../../neos.config.json";
+import NeosConfig from "../../../../neos.config.json";
 
 const HintNotification = () => {
   const hint = useAppSelector(selectHint);

src/ui/Duel/phase.tsx → src/ui/Duel/Message/phase.tsx

@@ -20,10 +20,10 @@ import {
 } from "@/reducers/duel/mod";
 import { Button, Modal, Space } from "antd";
 import Icon from "@ant-design/icons";
-import { ReactComponent as BattleSvg } from "../../../neos-assets/crossed-swords.svg";
-import { ReactComponent as Main2Svg } from "../../../neos-assets/sword-in-stone.svg";
-import { ReactComponent as EpSvg } from "../../../neos-assets/power-button.svg";
-import { ReactComponent as SurrenderSvg } from "../../../neos-assets/truce.svg";
+import { ReactComponent as BattleSvg } from "../../../../neos-assets/crossed-swords.svg";
+import { ReactComponent as Main2Svg } from "../../../../neos-assets/sword-in-stone.svg";
+import { ReactComponent as EpSvg } from "../../../../neos-assets/power-button.svg";
+import { ReactComponent as SurrenderSvg } from "../../../../neos-assets/truce.svg";
 
 const IconSize = "150%";
 const SpaceSize = 16;

src/ui/Duel/sortCardModal.tsx → src/ui/Duel/Message/sortCardModal.tsx

@@ -23,7 +23,7 @@ import { store } from "@/store";
 import { resetSortCardModal } from "@/reducers/duel/mod";
 import { Modal, Button, Card } from "antd";
 import { CardMeta } from "@/api/cards";
-import NeosConfig from "../../../neos.config.json";
+import NeosConfig from "../../../../neos.config.json";
 
 const SortCardModal = () => {
   const dispatch = store.dispatch;

src/ui/Duel/status.tsx → src/ui/Duel/Message/status.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { UserOutlined } from "@ant-design/icons";
 import { Avatar } from "antd";
 import { CheckCard } from "@ant-design/pro-components";
-import NeosConfig from "../../../neos.config.json";
+import NeosConfig from "../../../../neos.config.json";
 import { useAppSelector } from "@/hook";
 import {
   selectMeInitInfo,

src/ui/Duel/cemetery.tsx → src/ui/Duel/PlayMat/cemetery.tsx

@@ -5,8 +5,8 @@ import {
 } from "@/reducers/duel/cemeretySlice";
 import { useAppSelector } from "@/hook";
 import SingleSlot, { Depth } from "./singleSlot";
-import { cardSlotRotation } from "./util";
-import NeosConfig from "../../../neos.config.json";
+import { cardSlotRotation } from "../utils";
+import NeosConfig from "../../../../neos.config.json";
 
 const Cemeteries = () => {
   const meCemetery = useAppSelector(selectMeCemetery).inner;

src/ui/Duel/deck.tsx → src/ui/Duel/PlayMat/deck.tsx

@@ -2,8 +2,8 @@ import * as BABYLON from "@babylonjs/core";
 import { useAppSelector } from "@/hook";
 import { selectMeDeck, selectOpDeck } from "@/reducers/duel/deckSlice";
 import SingleSlot, { Depth } from "./singleSlot";
-import { cardSlotRotation } from "./util";
-import NeosConfig from "../../../neos.config.json";
+import { cardSlotRotation } from "../utils";
+import NeosConfig from "../../../../neos.config.json";
 
 const CommonDeck = () => {
   const meDeck = useAppSelector(selectMeDeck).inner;

src/ui/Duel/exclusion.tsx → src/ui/Duel/PlayMat/exclusion.tsx

@@ -5,8 +5,8 @@ import {
   selectopExclusion,
 } from "@/reducers/duel/exclusionSlice";
 import SingleSlot, { Depth } from "./singleSlot";
-import NeosConfig from "../../../neos.config.json";
-import { cardSlotRotation } from "./util";
+import NeosConfig from "../../../../neos.config.json";
+import { cardSlotRotation } from "../utils";
 
 const Exclusion = () => {
   const meExclusion = useAppSelector(selectMeExclusion).inner;

src/ui/Duel/extraDeck.tsx → src/ui/Duel/PlayMat/extraDeck.tsx

@@ -5,8 +5,8 @@ import {
   selectMeExtraDeck,
   selectOpExtraDeck,
 } from "@/reducers/duel/extraDeckSlice";
-import NeosConfig from "../../../neos.config.json";
-import { cardSlotRotation } from "./util";
+import NeosConfig from "../../../../neos.config.json";
+import { cardSlotRotation } from "../utils";
 
 const ExtraDeck = () => {
   const meExtraDeck = useAppSelector(selectMeExtraDeck).inner;

src/ui/Duel/field.tsx → src/ui/Duel/PlayMat/field.tsx

@@ -4,8 +4,8 @@ import { selectMeMagics, selectOpMagics } from "@/reducers/duel/magicSlice";
 import { clearMagicPlaceInteractivities } from "@/reducers/duel/mod";
 import FixedSlot from "./fixedSlot";
 import { Depth } from "./singleSlot";
-import NeosConfig from "../../../neos.config.json";
-import { cardSlotRotation } from "./util";
+import NeosConfig from "../../../../neos.config.json";
+import { cardSlotRotation } from "../utils";
 
 const Field = () => {
   const meField = useAppSelector(selectMeMagics).inner.find(

src/ui/Duel/fixedSlot.tsx → src/ui/Duel/PlayMat/fixedSlot.tsx

@@ -2,7 +2,7 @@ import * as BABYLON from "@babylonjs/core";
 import { store } from "@/store";
 import { CardState } from "@/reducers/duel/generic";
 import { useRef } from "react";
-import { useClick } from "./hook";
+import { useClick } from "@/hook";
 import { sendSelectPlaceResponse } from "@/api/ocgcore/ocgHelper";
 import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import {
@@ -14,8 +14,8 @@ import {
   setCardModalMeta,
 } from "@/reducers/duel/mod";
 import { ActionCreatorWithPayload } from "@reduxjs/toolkit";
-import { interactTypeToString } from "./util";
-import NeosConfig from "../../../neos.config.json";
+import { interactTypeToString } from "../utils";
+import NeosConfig from "../../../../neos.config.json";
 
 const transform = NeosConfig.ui.card.transform;
 const defenceRotation = NeosConfig.ui.card.defenceRotation;

src/ui/Duel/hands.tsx → src/ui/Duel/PlayMat/hands.tsx

 import * as BABYLON from "@babylonjs/core";
-import { useAppSelector } from "@/hook";
+import { useAppSelector, useClick } from "@/hook";
 import { selectMeHands, selectOpHands } from "@/reducers/duel/handsSlice";
 import { CardState } from "@/reducers/duel/generic";
 import {
@@ -9,11 +9,10 @@ import {
 } from "@/reducers/duel/mod";
 import { store } from "@/store";
 import { useHover } from "react-babylonjs";
-import { useClick } from "./hook";
 import { useState, useRef, useEffect } from "react";
-import { useSpring, animated } from "./spring";
-import { zip, interactTypeToString } from "./util";
-import NeosConfig from "../../../neos.config.json";
+import { useSpring, animated } from "../spring";
+import { zip, interactTypeToString } from "../utils";
+import NeosConfig from "../../../../neos.config.json";
 
 const groundShape = NeosConfig.ui.ground;
 const left = -(groundShape.width / 2);

src/ui/Duel/magics.tsx → src/ui/Duel/PlayMat/magics.tsx

@@ -2,10 +2,10 @@ import * as BABYLON from "@babylonjs/core";
 import { selectMeMagics, selectOpMagics } from "@/reducers/duel/magicSlice";
 import { CardState } from "@/reducers/duel/generic";
 import { useAppSelector } from "@/hook";
-import { zip, cardSlotRotation } from "./util";
+import { zip, cardSlotRotation } from "../utils";
 import FixedSlot from "./fixedSlot";
 import { clearMagicPlaceInteractivities } from "@/reducers/duel/mod";
-import NeosConfig from "../../../neos.config.json";
+import NeosConfig from "../../../../neos.config.json";
 
 // TODO: use config
 const left = -2.15;

src/ui/Duel/monsters.tsx → src/ui/Duel/PlayMat/monsters.tsx

@@ -6,10 +6,10 @@ import {
   selectMeMonsters,
   selectOpMonsters,
 } from "@/reducers/duel/monstersSlice";
-import { zip, cardSlotRotation, cardSlotDefenceRotation } from "./util";
+import { zip, cardSlotRotation, cardSlotDefenceRotation } from "../utils";
 import FixedSlot from "./fixedSlot";
 import { clearMonsterPlaceInteractivities } from "@/reducers/duel/mod";
-import NeosConfig from "../../../neos.config.json";
+import NeosConfig from "../../../../neos.config.json";
 
 const transform = NeosConfig.ui.card.transform;
 const floating = NeosConfig.ui.card.floating;

src/ui/Duel/singleSlot.tsx → src/ui/Duel/PlayMat/singleSlot.tsx

 import * as BABYLON from "@babylonjs/core";
 import { CardState } from "@/reducers/duel/generic";
 import { store } from "@/store";
-import { useClick } from "./hook";
+import { useClick } from "@/hook";
 import { useRef } from "react";
 import {
   setCardListModalInfo,
   setCardListModalIsOpen,
 } from "@/reducers/duel/mod";
-import { interactTypeToString } from "./util";
-import NeosConfig from "../../../neos.config.json";
+import { interactTypeToString } from "../utils";
+import NeosConfig from "../../../../neos.config.json";
 
 const transform = NeosConfig.ui.card.transform;
 export const Depth = 0.005;

src/ui/Duel/main.tsx

@@ -2,33 +2,33 @@ 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 "./hands";
-import Monsters from "./monsters";
-import CardModal from "./cardModal";
-import HintNotification from "./hintNotification";
-import Magics from "./magics";
-import Field from "./field";
-import CommonDeck from "./deck";
-import Exclusion from "./exclusion";
-import Cemeteries from "./cemetery";
-import CardListModal from "./cardListModal";
-import CheckCardModal from "./checkCardModal";
-import YesNoModal from "./yesNoModal";
-import PositionModal from "./positionModal";
-import OptionModal from "./optionModal";
-import Phase from "./phase";
-import CheckCardModalV2 from "./checkCardModalV2";
-import ExtraDeck from "./extraDeck";
+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/exclusion";
+import Cemeteries from "./PlayMat/cemetery";
+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 NeosLayout from "./layout";
 import NeosConfig from "../../../neos.config.json";
-import DuelTimeLine from "./timeLine";
+import DuelTimeLine from "./Message/timeLine";
 import { Row } from "antd";
-import SendBox from "./sendBox";
-import PlayerStatus from "./status";
-import Alert from "./alert";
-import CheckCardModalV3 from "./checkCardModalV3";
-import CheckCounterModal from "./checkCounterModal";
-import SortCardModal from "./sortCardModal";
+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 = () => {

src/ui/Duel/utils/cardSlot.ts

+import NeosConfig from "../../../../neos.config.json";
+import { Vector3 } from "@babylonjs/core";
+
+const cardRotation = NeosConfig.ui.card.rotation;
+const cardReverseRotation = NeosConfig.ui.card.reverseRotation;
+const cardDefenceRotation = NeosConfig.ui.card.defenceRotation;
+
+export function cardSlotRotation(reverse?: boolean) {
+  if (reverse) {
+    return new Vector3(
+      cardReverseRotation.x,
+      cardReverseRotation.y,
+      cardReverseRotation.z
+    );
+  } else {
+    return new Vector3(cardRotation.x, cardRotation.y, cardRotation.z);
+  }
+}
+
+export function cardSlotDefenceRotation() {
+  return new Vector3(
+    cardDefenceRotation.x,
+    cardDefenceRotation.y,
+    cardDefenceRotation.z
+  );
+}

src/ui/Duel/utils/index.ts

+export * from "./zip";
+export * from "./interactTypeToString";
+export * from "./cardSlot";

src/ui/Duel/util.ts → src/ui/Duel/utils/interactTypeToString.ts

 import { InteractType } from "@/reducers/duel/generic";
-import NeosConfig from "../../../neos.config.json";
-import { Vector3 } from "@babylonjs/core";
-
-export function zip<S1, S2>(
-  firstCollection: Array<S1>,
-  lastCollection: Array<S2>
-): Array<[S1, S2]> {
-  const length = Math.min(firstCollection.length, lastCollection.length);
-  const zipped: Array<[S1, S2]> = [];
-
-  for (let index = 0; index < length; index++) {
-    zipped.push([firstCollection[index], lastCollection[index]]);
-  }
-
-  return zipped;
-}
 
 export function interactTypeToString(t: InteractType): string {
   switch (t) {
@@ -44,27 +28,3 @@ export function interactTypeToString(t: InteractType): string {
     }
   }
 }
-
-const cardRotation = NeosConfig.ui.card.rotation;
-const cardReverseRotation = NeosConfig.ui.card.reverseRotation;
-const cardDefenceRotation = NeosConfig.ui.card.defenceRotation;
-
-export function cardSlotRotation(reverse?: boolean) {
-  if (reverse) {
-    return new Vector3(
-      cardReverseRotation.x,
-      cardReverseRotation.y,
-      cardReverseRotation.z
-    );
-  } else {
-    return new Vector3(cardRotation.x, cardRotation.y, cardRotation.z);
-  }
-}
-
-export function cardSlotDefenceRotation() {
-  return new Vector3(
-    cardDefenceRotation.x,
-    cardDefenceRotation.y,
-    cardDefenceRotation.z
-  );
-}

src/ui/Duel/utils/zip.ts

+export function zip<S1, S2>(
+  firstCollection: Array<S1>,
+  lastCollection: Array<S2>
+): Array<[S1, S2]> {
+  const length = Math.min(firstCollection.length, lastCollection.length);
+  const zipped: Array<[S1, S2]> = [];
+
+  for (let index = 0; index < length; index++) {
+    zipped.push([firstCollection[index], lastCollection[index]]);
+  }
+
+  return zipped;
+}