fix: resolve circular dependencies

src/pages/playRoom/component/cardsTypeCompareGuide/index.tsx

@@ -1,11 +1,11 @@
-import { translateStringToCard } from '@/utils/tanslate.js';
 import { css } from '@emotion/react';
 import { Tabs } from 'antd';
 import { useState } from 'react';
 import { CardType } from '../../type.js';
 import DemoCards from '../demoCards/index.js';
 import styled from '@emotion/styled';
 import { customScrollBar } from '@/styles/scrollbar.js';
+import { translateStringToCard } from '@/utils/const.js';
 
 const getCards = (isShortCards = false): [string, CardType[]][] => {
     const diffCardsStr: [string, string[]][] = [

src/pages/playRoom/component/customFloatButton/index.tsx

@@ -1,20 +1,14 @@
 import { Button, Popconfirm } from 'antd';
 import { LeftOutlined, QuestionOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
-import { css } from '@emotion/react';
 import CardsTypeCompareGuide from '../cardsTypeCompareGuide/index.js';
 import introJs from 'intro.js';
 import 'intro.js/introjs.css';
+import { getFloatCss } from '../../styles/playRoom.js';
+// import AudioButton from '../audioButton/index.js';
 
 const Introduct = introJs as unknown as () => { start: () => void };
 
-const getFloatCss = (isRight = false) => css`
-  position: absolute;
-  top: 2vh;
-  ${isRight ? 'right' : 'left'}: 4vw;
-  z-index: 999;
-`;
-
 export function CustomFloatButton () {
     const navigate = useNavigate();
 
@@ -46,6 +40,6 @@ export function CustomFloatButton () {
                 shape='circle'
             />
         </Popconfirm>
-
+        {/* <AudioButton /> */}
     </>;
 }

src/pages/playRoom/styles/playRoom.ts

@@ -39,4 +39,13 @@ export const CardsFlexBoxDiv = styled.div`
   margin-bottom: 20px;
   padding-right: calc(100px - 80%/5);
   color: black;
+`;
+
+// ========================= float buttons ===============
+
+export const getFloatCss = (isRight = false, top = 2) => css`
+  position: absolute;
+  top: ${top}vh;
+  ${isRight ? 'right' : 'left'}: 4vw;
+  z-index: 999;
 `;

src/utils/const.ts

@@ -0,0 +1,25 @@
+/* eslint-disable id-length */
+import { privateKey } from '@/const.js';
+import { CardColor, CardType } from '@/pages/playRoom/type.js';
+import { AES } from 'crypto-js';
+
+
+const suitMap: { [key: string]: CardColor} = {
+    h:'hearts', 
+    d:'diamonds', 
+    c:'clubs', 
+    s:'spades',
+};
+
+export function translateStringToCard (str: string): CardType {
+    const rank = str.slice(0, str.length - 1);
+    const suit = suitMap[str[str.length - 1]];
+
+    return {
+        key: AES.encrypt(suit + rank, privateKey).toString(),
+        color: suit,
+        number: rank,
+        showFace: 'front',
+        statu: 'undistributed',
+    };
+}

src/utils/tanslate.ts

@@ -1,8 +1,3 @@
-/* eslint-disable id-length */
-import { privateKey } from '@/const.js';
-import { CardColor, CardType } from '@/pages/playRoom/type.js';
-import { AES } from 'crypto-js';
-
 export const cardTypeTranslateMap = {
     'Straight Flush': '同花顺', 
     'Four of a Kind': '四条（金刚）', 
@@ -13,24 +8,4 @@ export const cardTypeTranslateMap = {
     'Two Pair': '两对', 
     Pair: '一对', 
     'High Card': '高牌',
-};
-
-const suitMap: { [key: string]: CardColor} = {
-    h:'hearts', 
-    d:'diamonds', 
-    c:'clubs', 
-    s:'spades',
-};
-
-export function translateStringToCard (str: string): CardType {
-    const rank = str.slice(0, str.length - 1);
-    const suit = suitMap[str[str.length - 1]];
-
-    return {
-        key: AES.encrypt(suit + rank, privateKey).toString(),
-        color: suit,
-        number: rank,
-        showFace: 'front',
-        statu: 'undistributed',
-    };
-}
+};