refactor: import config from config module

src/api/strings.ts

 import axios from "axios";
 
-import NeosConfig from "../../neos.config.json";
+import { useConfig } from "@/config";
+
 import { fetchCard, getCardStr } from "./cards";
 
+const NeosConfig = useConfig();
 export const DESCRIPTION_LIMIT = 10000;
 
 export async function initStrings() {

src/middleware/sqlite.ts

@@ -8,8 +8,9 @@
 import initSqlJs, { Database } from "sql.js";
 
 import { CardData, CardMeta, CardText } from "@/api/cards";
+import { useConfig } from "@/config";
 
-import NeosConfig from "../../neos.config.json";
+const NeosConfig = useConfig();
 
 export enum sqliteCmd {
   // 初始化

src/service/duel/unimplemented.ts

 import { ygopro } from "@/api/ocgcore/idl/ocgcore";
+import { useConfig } from "@/config";
 import { setUnimplemented } from "@/reducers/duel/mod";
 import { AppDispatch } from "@/store";
 
-import NeosConfig from "../../../neos.config.json";
+const NeosConfig = useConfig();
 
 export default (
   unimplemented: ygopro.StocGameMessage.MsgUnimplemented,

src/service/onSocketOpen.ts

@@ -3,9 +3,9 @@
  *
  * */
 import { sendJoinGame, sendPlayerInfo } from "@/api/ocgcore/ocgHelper";
+import { useConfig } from "@/config";
 
-import NeosConfig from "../../neos.config.json";
-
+const NeosConfig = useConfig();
 /*
  * 长连接建立后，需要马上发送PlayerInfo和JoinGame两个数据包，
  * 否则ygopro服务端超过2s后会自动断连。

src/ui/Duel/Layout.tsx

 import { Layout } from "antd";
 import React from "react";
 
-import NeosConfig from "../../../neos.config.json";
+import { useConfig } from "@/config";
+
+const NeosConfig = useConfig();
 
 const layoutConfig = NeosConfig.ui.layout;
 const { Header, Footer, Sider, Content } = Layout;

src/ui/Duel/Main.tsx

@@ -4,7 +4,8 @@ import React from "react";
 import { Engine, Scene } from "react-babylonjs";
 import { Provider, ReactReduxContext } from "react-redux";
 
-import NeosConfig from "../../../neos.config.json";
+import { useConfig } from "@/config";
+
 import NeosLayout from "./Layout";
 import {
   Alert,
@@ -35,6 +36,7 @@ import {
 import { BanishedZone } from "./PlayMat/BanishedZone";
 import { CommonDeck } from "./PlayMat/Deck";
 
+const NeosConfig = useConfig();
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => {
   return (

src/ui/Duel/Message/CardListModal.tsx

@@ -2,6 +2,7 @@ import { Button, Drawer, List } from "antd";
 import React from "react";
 
 import { sendSelectIdleCmdResponse } from "@/api/ocgcore/ocgHelper";
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import {
   clearAllIdleInteractivities,
@@ -13,7 +14,7 @@ import {
 } from "@/reducers/duel/modal/mod";
 import { store } from "@/store";
 
-import NeosConfig from "../../../../neos.config.json";
+const NeosConfig = useConfig();
 
 const CARD_WIDTH = 100;
 

src/ui/Duel/Message/CardModal.tsx

@@ -4,6 +4,7 @@ import React from "react";
 
 import { sendSelectIdleCmdResponse } from "@/api/ocgcore/ocgHelper";
 import { fetchStrings } from "@/api/strings";
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import {
   clearAllIdleInteractivities,
@@ -17,7 +18,6 @@ import {
 } from "@/reducers/duel/modal/mod";
 import { store } from "@/store";
 
-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 {
@@ -27,6 +27,7 @@ import {
   Type2StringCodeMap,
 } from "../../../common";
 
+const NeosConfig = useConfig();
 const { Meta } = Card;
 const CARD_WIDTH = 240;
 

src/ui/Duel/Message/CheckCardModal.tsx

@@ -7,6 +7,7 @@ import {
   sendSelectCardResponse,
   sendSelectChainResponse,
 } from "@/api/ocgcore/ocgHelper";
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import { selectHint } from "@/reducers/duel/hintSlice";
 import {
@@ -23,9 +24,9 @@ import {
 } from "@/reducers/duel/modal/mod";
 import { store } from "@/store";
 
-import NeosConfig from "../../../../neos.config.json";
 import { DragModal } from "./DragModal";
 
+const NeosConfig = useConfig();
 export const CheckCardModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectCheckCardModalIsOpen);

src/ui/Duel/Message/CheckCardModalV2.tsx

@@ -3,6 +3,7 @@ import { Button, Card, Col, Row } from "antd";
 import React from "react";
 
 import { sendSelectUnselectCardResponse } from "@/api/ocgcore/ocgHelper";
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import { selectHint } from "@/reducers/duel/hintSlice";
 import {
@@ -21,9 +22,9 @@ import {
 } from "@/reducers/duel/modal/checkCardModalV2Slice";
 import { store } from "@/store";
 
-import NeosConfig from "../../../../neos.config.json";
 import { DragModal } from "./DragModal";
 
+const NeosConfig = useConfig();
 export const CheckCardModalV2 = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectCheckCardModalV2IsOpen);

src/ui/Duel/Message/CheckCardModalV3.tsx

@@ -3,6 +3,7 @@ import { Button, Card, Col, Row } from "antd";
 import React, { useState } from "react";
 
 import { sendSelectCardResponse } from "@/api/ocgcore/ocgHelper";
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import { selectHint } from "@/reducers/duel/hintSlice";
 import {
@@ -13,9 +14,10 @@ import {
 import { selectCheckCardModalV3 } from "@/reducers/duel/modal/checkCardModalV3Slice";
 import { store } from "@/store";
 
-import NeosConfig from "../../../../neos.config.json";
 import { DragModal } from "./DragModal";
 
+const NeosConfig = useConfig();
+
 export const CheckCardModalV3 = () => {
   const dispatch = store.dispatch;
   const state = useAppSelector(selectCheckCardModalV3);

src/ui/Duel/Message/CheckCounterModal.tsx

@@ -3,14 +3,15 @@ import React, { useState } from "react";
 
 import { sendSelectCounterResponse } from "@/api/ocgcore/ocgHelper";
 import { fetchStrings } from "@/api/strings";
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import { clearCheckCounter } from "@/reducers/duel/mod";
 import { selectCheckCounterModal } from "@/reducers/duel/modal/checkCounterModalSlice";
 import { store } from "@/store";
 
-import NeosConfig from "../../../../neos.config.json";
 import { DragModal } from "./DragModal";
 
+const NeosConfig = useConfig();
 export const CheckCounterModal = () => {
   const dispatch = store.dispatch;
   const state = useAppSelector(selectCheckCounterModal);

src/ui/Duel/Message/HintNotification.tsx

@@ -8,8 +8,9 @@ import { selectHint } from "@/reducers/duel/hintSlice";
 import { selectDuelResult, selectWaiting } from "@/reducers/duel/mod";
 import { selectCurrentPhase } from "@/reducers/duel/phaseSlice";
 import MsgWin = ygopro.StocGameMessage.MsgWin;
-import NeosConfig from "../../../../neos.config.json";
+import { useConfig } from "@/config";
 
+const NeosConfig = useConfig();
 export const HintNotification = () => {
   const hint = useAppSelector(selectHint);
   const currentPhase = useAppSelector(selectCurrentPhase);

src/ui/Duel/Message/SortCardModal.tsx

@@ -20,12 +20,13 @@ import React, { useEffect, useState } from "react";
 
 import { CardMeta } from "@/api/cards";
 import { sendSortCardResponse } from "@/api/ocgcore/ocgHelper";
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import { resetSortCardModal } from "@/reducers/duel/mod";
 import { selectSortCardModal } from "@/reducers/duel/modal/sortCardModalSlice";
 import { store } from "@/store";
 
-import NeosConfig from "../../../../neos.config.json";
+const NeosConfig = useConfig();
 
 export const SortCardModal = () => {
   const dispatch = store.dispatch;

src/ui/Duel/Message/Status.tsx

@@ -3,6 +3,7 @@ import { CheckCard } from "@ant-design/pro-components";
 import { Avatar } from "antd";
 import React from "react";
 
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import {
   selectMeInitInfo,
@@ -10,7 +11,7 @@ import {
 } from "@/reducers/duel/initInfoSlice";
 import { selectWaiting } from "@/reducers/duel/mod";
 
-import NeosConfig from "../../../../neos.config.json";
+const NeosConfig = useConfig();
 
 const Config = NeosConfig.ui.status;
 const avatarSize = 40;

src/ui/Duel/Message/cardListModal.tsx

@@ -2,6 +2,7 @@ import { Button, Drawer, List } from "antd";
 import React from "react";
 
 import { sendSelectIdleCmdResponse } from "@/api/ocgcore/ocgHelper";
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import {
   clearAllIdleInteractivities,
@@ -13,7 +14,7 @@ import {
 } from "@/reducers/duel/modal/mod";
 import { store } from "@/store";
 
-import NeosConfig from "../../../../neos.config.json";
+const NeosConfig = useConfig();
 
 const CARD_WIDTH = 100;
 

src/ui/Duel/Message/cardModal.tsx

@@ -4,6 +4,7 @@ import React from "react";
 
 import { sendSelectIdleCmdResponse } from "@/api/ocgcore/ocgHelper";
 import { fetchStrings } from "@/api/strings";
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import {
   clearAllIdleInteractivities,
@@ -17,7 +18,6 @@ import {
 } from "@/reducers/duel/modal/mod";
 import { store } from "@/store";
 
-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 {
@@ -27,6 +27,7 @@ import {
   Type2StringCodeMap,
 } from "../../../common";
 
+const NeosConfig = useConfig();
 const { Meta } = Card;
 const CARD_WIDTH = 240;
 

src/ui/Duel/Message/checkCardModal.tsx

@@ -7,6 +7,7 @@ import {
   sendSelectCardResponse,
   sendSelectChainResponse,
 } from "@/api/ocgcore/ocgHelper";
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import { selectHint } from "@/reducers/duel/hintSlice";
 import {
@@ -23,9 +24,9 @@ import {
 } from "@/reducers/duel/modal/mod";
 import { store } from "@/store";
 
-import NeosConfig from "../../../../neos.config.json";
 import { DragModal } from "./DragModal";
 
+const NeosConfig = useConfig();
 export const CheckCardModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectCheckCardModalIsOpen);

src/ui/Duel/Message/checkCardModalV2.tsx

@@ -3,6 +3,7 @@ import { Button, Card, Col, Row } from "antd";
 import React from "react";
 
 import { sendSelectUnselectCardResponse } from "@/api/ocgcore/ocgHelper";
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import { selectHint } from "@/reducers/duel/hintSlice";
 import {
@@ -21,9 +22,9 @@ import {
 } from "@/reducers/duel/modal/checkCardModalV2Slice";
 import { store } from "@/store";
 
-import NeosConfig from "../../../../neos.config.json";
 import { DragModal } from "./DragModal";
 
+const NeosConfig = useConfig();
 export const CheckCardModalV2 = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectCheckCardModalV2IsOpen);

src/ui/Duel/Message/checkCardModalV3.tsx

@@ -3,6 +3,7 @@ import { Button, Card, Col, Row } from "antd";
 import React, { useState } from "react";
 
 import { sendSelectCardResponse } from "@/api/ocgcore/ocgHelper";
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import { selectHint } from "@/reducers/duel/hintSlice";
 import {
@@ -13,9 +14,10 @@ import {
 import { selectCheckCardModalV3 } from "@/reducers/duel/modal/checkCardModalV3Slice";
 import { store } from "@/store";
 
-import NeosConfig from "../../../../neos.config.json";
 import { DragModal } from "./DragModal";
 
+const NeosConfig = useConfig();
+
 export const CheckCardModalV3 = () => {
   const dispatch = store.dispatch;
   const state = useAppSelector(selectCheckCardModalV3);

src/ui/Duel/Message/checkCounterModal.tsx

@@ -3,14 +3,15 @@ import React, { useState } from "react";
 
 import { sendSelectCounterResponse } from "@/api/ocgcore/ocgHelper";
 import { fetchStrings } from "@/api/strings";
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import { clearCheckCounter } from "@/reducers/duel/mod";
 import { selectCheckCounterModal } from "@/reducers/duel/modal/checkCounterModalSlice";
 import { store } from "@/store";
 
-import NeosConfig from "../../../../neos.config.json";
 import { DragModal } from "./DragModal";
 
+const NeosConfig = useConfig();
 export const CheckCounterModal = () => {
   const dispatch = store.dispatch;
   const state = useAppSelector(selectCheckCounterModal);

src/ui/Duel/Message/hintNotification.tsx

@@ -8,8 +8,9 @@ import { selectHint } from "@/reducers/duel/hintSlice";
 import { selectDuelResult, selectWaiting } from "@/reducers/duel/mod";
 import { selectCurrentPhase } from "@/reducers/duel/phaseSlice";
 import MsgWin = ygopro.StocGameMessage.MsgWin;
-import NeosConfig from "../../../../neos.config.json";
+import { useConfig } from "@/config";
 
+const NeosConfig = useConfig();
 export const HintNotification = () => {
   const hint = useAppSelector(selectHint);
   const currentPhase = useAppSelector(selectCurrentPhase);

src/ui/Duel/Message/sortCardModal.tsx

@@ -20,12 +20,13 @@ import React, { useEffect, useState } from "react";
 
 import { CardMeta } from "@/api/cards";
 import { sendSortCardResponse } from "@/api/ocgcore/ocgHelper";
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import { resetSortCardModal } from "@/reducers/duel/mod";
 import { selectSortCardModal } from "@/reducers/duel/modal/sortCardModalSlice";
 import { store } from "@/store";
 
-import NeosConfig from "../../../../neos.config.json";
+const NeosConfig = useConfig();
 
 export const SortCardModal = () => {
   const dispatch = store.dispatch;

src/ui/Duel/Message/status.tsx

@@ -3,6 +3,7 @@ import { CheckCard } from "@ant-design/pro-components";
 import { Avatar } from "antd";
 import React from "react";
 
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import {
   selectMeInitInfo,
@@ -10,7 +11,7 @@ import {
 } from "@/reducers/duel/initInfoSlice";
 import { selectWaiting } from "@/reducers/duel/mod";
 
-import NeosConfig from "../../../../neos.config.json";
+const NeosConfig = useConfig();
 
 const Config = NeosConfig.ui.status;
 const avatarSize = 40;

src/ui/Duel/PlayMat/BanishedZone.tsx

 import * as BABYLON from "@babylonjs/core";
 
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import {
   selectMeExclusion,
   selectopExclusion,
 } from "@/reducers/duel/exclusionSlice";
 
-import NeosConfig from "../../../../neos.config.json";
 import { cardSlotRotation } from "../utils";
 import { Depth, SingleSlot } from "./SingleSlot";
 
+const NeosConfig = useConfig();
 export const BanishedZone = () => {
   const meExclusion = useAppSelector(selectMeExclusion).inner;
   const opExclusion = useAppSelector(selectopExclusion).inner;

src/ui/Duel/PlayMat/Deck.tsx

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

src/ui/Duel/PlayMat/ExtraDeck.tsx

 import * as BABYLON from "@babylonjs/core";
 
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import {
   selectMeExtraDeck,
   selectOpExtraDeck,
 } from "@/reducers/duel/extraDeckSlice";
 
-import NeosConfig from "../../../../neos.config.json";
 import { cardSlotRotation } from "../utils";
 import { Depth, SingleSlot } from "./SingleSlot";
 
+const NeosConfig = useConfig();
+
 export const ExtraDeck = () => {
   const meExtraDeck = useAppSelector(selectMeExtraDeck).inner;
   const opExtraDeck = useAppSelector(selectOpExtraDeck).inner;

src/ui/Duel/PlayMat/Field.tsx

 import * as BABYLON from "@babylonjs/core";
 
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import { selectMeMagics, selectOpMagics } from "@/reducers/duel/magicSlice";
 import { clearMagicPlaceInteractivities } from "@/reducers/duel/mod";
 
-import NeosConfig from "../../../../neos.config.json";
 import { cardSlotRotation } from "../utils";
 import { FixedSlot } from "./FixedSlot";
 import { Depth } from "./SingleSlot";
 
+const NeosConfig = useConfig();
 export const Field = () => {
   const meField = useAppSelector(selectMeMagics).inner.find(
     (_, sequence) => sequence == 5

src/ui/Duel/PlayMat/FixedSlot.tsx

@@ -4,6 +4,7 @@ import { useRef } from "react";
 
 import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import { sendSelectPlaceResponse } from "@/api/ocgcore/ocgHelper";
+import { useConfig } from "@/config";
 import { useClick } from "@/hook";
 import { CardState } from "@/reducers/duel/generic";
 import {
@@ -16,9 +17,10 @@ import {
 } from "@/reducers/duel/mod";
 import { store } from "@/store";
 
-import NeosConfig from "../../../../neos.config.json";
 import { interactTypeToString } from "../utils";
 
+const NeosConfig = useConfig();
+
 const transform = NeosConfig.ui.card.transform;
 const defenceRotation = NeosConfig.ui.card.defenceRotation;
 const cardDefenceRotation = new BABYLON.Vector3(

src/ui/Duel/PlayMat/Graveyard.tsx

 import * as BABYLON from "@babylonjs/core";
 
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import {
   selectMeCemetery,
   selectOpCemetery,
 } from "@/reducers/duel/cemeretySlice";
 
-import NeosConfig from "../../../../neos.config.json";
 import { cardSlotRotation } from "../utils";
 import { Depth, SingleSlot } from "./SingleSlot";
 
+const NeosConfig = useConfig();
 export const Graveyard = () => {
   const meCemetery = useAppSelector(selectMeCemetery).inner;
   const opCemetery = useAppSelector(selectOpCemetery).inner;

src/ui/Duel/PlayMat/Hands.tsx

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

src/ui/Duel/PlayMat/Magics.tsx

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

src/ui/Duel/PlayMat/Monsters.tsx

@@ -2,6 +2,7 @@ import "react-babylonjs";
 
 import * as BABYLON from "@babylonjs/core";
 
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import { CardState } from "@/reducers/duel/generic";
 import { clearMonsterPlaceInteractivities } from "@/reducers/duel/mod";
@@ -10,10 +11,10 @@ import {
   selectOpMonsters,
 } from "@/reducers/duel/monstersSlice";
 
-import NeosConfig from "../../../../neos.config.json";
 import { cardSlotDefenceRotation, cardSlotRotation, zip } from "../utils";
 import { FixedSlot } from "./FixedSlot";
 
+const NeosConfig = useConfig();
 const transform = NeosConfig.ui.card.transform;
 const floating = NeosConfig.ui.card.floating;
 const left = -2.15; // TODO: config

src/ui/Duel/PlayMat/SingleSlot.tsx

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

src/ui/Duel/PlayMat/deck.tsx

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

src/ui/Duel/PlayMat/extraDeck.tsx

 import * as BABYLON from "@babylonjs/core";
 
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import {
   selectMeExtraDeck,
   selectOpExtraDeck,
 } from "@/reducers/duel/extraDeckSlice";
 
-import NeosConfig from "../../../../neos.config.json";
 import { cardSlotRotation } from "../utils";
 import { Depth, SingleSlot } from "./SingleSlot";
 
+const NeosConfig = useConfig();
+
 export const ExtraDeck = () => {
   const meExtraDeck = useAppSelector(selectMeExtraDeck).inner;
   const opExtraDeck = useAppSelector(selectOpExtraDeck).inner;

src/ui/Duel/PlayMat/field.tsx

 import * as BABYLON from "@babylonjs/core";
 
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import { selectMeMagics, selectOpMagics } from "@/reducers/duel/magicSlice";
 import { clearMagicPlaceInteractivities } from "@/reducers/duel/mod";
 
-import NeosConfig from "../../../../neos.config.json";
 import { cardSlotRotation } from "../utils";
 import { FixedSlot } from "./FixedSlot";
 import { Depth } from "./SingleSlot";
 
+const NeosConfig = useConfig();
 export const Field = () => {
   const meField = useAppSelector(selectMeMagics).inner.find(
     (_, sequence) => sequence == 5

src/ui/Duel/PlayMat/fixedSlot.tsx

@@ -4,6 +4,7 @@ import { useRef } from "react";
 
 import { ygopro } from "@/api/ocgcore/idl/ocgcore";
 import { sendSelectPlaceResponse } from "@/api/ocgcore/ocgHelper";
+import { useConfig } from "@/config";
 import { useClick } from "@/hook";
 import { CardState } from "@/reducers/duel/generic";
 import {
@@ -16,9 +17,10 @@ import {
 } from "@/reducers/duel/mod";
 import { store } from "@/store";
 
-import NeosConfig from "../../../../neos.config.json";
 import { interactTypeToString } from "../utils";
 
+const NeosConfig = useConfig();
+
 const transform = NeosConfig.ui.card.transform;
 const defenceRotation = NeosConfig.ui.card.defenceRotation;
 const cardDefenceRotation = new BABYLON.Vector3(

src/ui/Duel/PlayMat/hands.tsx

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

src/ui/Duel/PlayMat/magics.tsx

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

src/ui/Duel/PlayMat/monsters.tsx

@@ -2,6 +2,7 @@ import "react-babylonjs";
 
 import * as BABYLON from "@babylonjs/core";
 
+import { useConfig } from "@/config";
 import { useAppSelector } from "@/hook";
 import { CardState } from "@/reducers/duel/generic";
 import { clearMonsterPlaceInteractivities } from "@/reducers/duel/mod";
@@ -10,10 +11,10 @@ import {
   selectOpMonsters,
 } from "@/reducers/duel/monstersSlice";
 
-import NeosConfig from "../../../../neos.config.json";
 import { cardSlotDefenceRotation, cardSlotRotation, zip } from "../utils";
 import { FixedSlot } from "./FixedSlot";
 
+const NeosConfig = useConfig();
 const transform = NeosConfig.ui.card.transform;
 const floating = NeosConfig.ui.card.floating;
 const left = -2.15; // TODO: config

src/ui/Duel/PlayMat/singleSlot.tsx

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

src/ui/Duel/layout.tsx

 import { Layout } from "antd";
 import React from "react";
 
-import NeosConfig from "../../../neos.config.json";
+import { useConfig } from "@/config";
+
+const NeosConfig = useConfig();
 
 const layoutConfig = NeosConfig.ui.layout;
 const { Header, Footer, Sider, Content } = Layout;

src/ui/Duel/main.tsx

@@ -4,7 +4,8 @@ import React from "react";
 import { Engine, Scene } from "react-babylonjs";
 import { Provider, ReactReduxContext } from "react-redux";
 
-import NeosConfig from "../../../neos.config.json";
+import { useConfig } from "@/config";
+
 import NeosLayout from "./Layout";
 import {
   Alert,
@@ -35,6 +36,7 @@ import {
 import { BanishedZone } from "./PlayMat/BanishedZone";
 import { CommonDeck } from "./PlayMat/Deck";
 
+const NeosConfig = useConfig();
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => {
   return (

src/ui/Duel/utils/cardSlot.ts

 import { Vector3 } from "@babylonjs/core";
 
-import NeosConfig from "../../../../neos.config.json";
+import { useConfig } from "@/config";
+
+const NeosConfig = useConfig();
 
 const cardRotation = NeosConfig.ui.card.rotation;
 const cardReverseRotation = NeosConfig.ui.card.reverseRotation;

src/ui/Login.tsx

@@ -14,7 +14,7 @@ import { useNavigate } from "react-router-dom";
 
 import { useConfig } from "@/config";
 
-import NeosConfig from "../../neos.config.json";
+const NeosConfig = useConfig();
 
 const serverConfig = NeosConfig.servers;
 const {

src/ui/WaitRoom.tsx

@@ -46,7 +46,7 @@ import {
 } from "@/reducers/playerSlice";
 import { store } from "@/store";
 
-import NeosConfig from "../../neos.config.json";
+const NeosConfig = useConfig();
 
 const READY_STATE = "ready";