refactor: optimize structure of useInfos

bbb169 · Oct 19, 2023 · e2861a8 · e2861a8
1 parent 36356b8
commit e2861a8
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/src/pages/playRoom/hooks/usePlayers.ts → ...ages/playRoom/hooks/useInfosFromSocket.ts b/src/pages/playRoom/hooks/usePlayers.ts → ...ages/playRoom/hooks/useInfosFromSocket.ts
@@ -1,4 +1,4 @@
-import { apiHost, emitSocket, initSocket } from '@/utils/api.js';
+import { apiHost, apiPort, emitSocket, initSocket } from '@/utils/api.js';
 import { message } from 'antd';
 import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -7,7 +7,7 @@ import { GptPredicateRes, PlayerInfoType, RoomInfo, VictoryInfo } from '../type.
 import usePlayersInfo from './usePlayersInfo.js';
 import useRoom from './useRoom.js';
 
-export default function useInfosFromSocket (): [PlayerInfoType[], PlayerInfoType | undefined, RoomInfo | undefined, [PlayerInfoType, VictoryInfo][]] {
+export default function useInfosFromSocket (): [PlayerInfoType[], PlayerInfoType | undefined, RoomInfo | undefined, [PlayerInfoType, VictoryInfo][], Socket | undefined] {
     const [socket, setSocket] = useState<Socket>();
     const [room] = useRoom(socket);
     const [otherPlayers, myPlayer, victoryPlayers] = usePlayersInfo(socket);
@@ -16,7 +16,7 @@ export default function useInfosFromSocket (): [PlayerInfoType[], PlayerInfoType
 
     useEffect(() => {
         if (!socket) {
-            setSocket(io(`${apiHost}:5000`));
+            setSocket(io(`${apiHost}:${apiPort}`));
         } else {
             // client-side
             socket.on('connect', () => {
@@ -66,5 +66,5 @@ export default function useInfosFromSocket (): [PlayerInfoType[], PlayerInfoType
         };
     }, [socket]);
 
-    return [otherPlayers, myPlayer, room, victoryPlayers];
+    return [otherPlayers, myPlayer, room, victoryPlayers, socket];
 }
diff --git a/src/pages/playRoom/styles/playRoom.ts b/src/pages/playRoom/styles/playRoom.ts
@@ -43,9 +43,9 @@ export const CardsFlexBoxDiv = styled.div`
 
 // ========================= float buttons ===============
 
-export const getFloatCss = (isRight = false, top = 2) => css`
+export const getFloatCss = (isRight = false, level = 0) => css`
   position: absolute;
-  top: ${top}vh;
+  top: calc(${level * 32}px + ${level}vh + 2vh);
   ${isRight ? 'right' : 'left'}: 4vw;
   z-index: 999;
 `;
diff --git a/src/utils/api.ts b/src/utils/api.ts
@@ -1,5 +1,7 @@
 import { Socket } from 'socket.io-client';
 export const apiHost = process.env.NODE_ENV === 'production' ? 'http://152.136.254.142' : 'http://localhost';
+export const apiPort = '5000';
+
 let socket: Socket;
 
 export function initSocket (newSocket: Socket) {