diff --git a/front-end/src/components/Modal/index.tsx b/front-end/src/components/Modal/index.tsx index c1778de..498e744 100644 --- a/front-end/src/components/Modal/index.tsx +++ b/front-end/src/components/Modal/index.tsx @@ -48,7 +48,16 @@ const Modal = forwardRef( )} - {type === 'rank' &&
[{title}]
} + {type === 'rank' && ( +
+
+ [{title}] + +
+
+ )} {children} diff --git a/front-end/src/components/Tetris/Board/index.tsx b/front-end/src/components/Tetris/Board/index.tsx index a9e5c4f..c24da72 100644 --- a/front-end/src/components/Tetris/Board/index.tsx +++ b/front-end/src/components/Tetris/Board/index.tsx @@ -328,8 +328,10 @@ const moves = { posY: prev.posY + 1, }), [TETRIS.KEY.TURN_RIGHT]: (prev: TetrisBlock) => rotate(JSON.parse(JSON.stringify(prev)), true), - [TETRIS.KEY.TURN_LEFT]: (prev: TetrisBlock) => rotate(JSON.parse(JSON.stringify(prev)), false), - [TETRIS.KEY.HOLD]: (prev: TetrisBlock) => prev, + [TETRIS.KEY.TURN_LEFT_ENG]: (prev: TetrisBlock) => rotate(JSON.parse(JSON.stringify(prev)), false), + [TETRIS.KEY.TURN_LEFT_KR]: (prev: TetrisBlock) => rotate(JSON.parse(JSON.stringify(prev)), false), + [TETRIS.KEY.HOLD_ENG]: (prev: TetrisBlock) => prev, + [TETRIS.KEY.HOLD_KR]: (prev: TetrisBlock) => prev, [TETRIS.KEY.HARD_DROP]: (prev: TetrisBlock) => prev, }; @@ -599,13 +601,16 @@ const Board = ({ let downInterval: NodeJS.Timeout; const keyDownEventHandler = (event: KeyboardEvent) => { - event.preventDefault(); + const focus = document.activeElement; + if(focus === document.querySelector('.chat__input')) return; + if (!moves[event.key]) return; BLOCK.NEXT = moves[event.key](BLOCK.NOW); switch (event.key) { // 방향 키 이벤트(왼쪽, 오른쪽, 아래) case TETRIS.KEY.LEFT: + event.preventDefault(); if (!STATE.KEYDOWN_LEFT) { if (STATE.KEYDOWN_RIGHT) { // 오른쪽이 계속 눌리고 있다면 @@ -627,6 +632,7 @@ const Board = ({ moveBlock(BOARD, BLOCK, BACKGROUND, socket); break; case TETRIS.KEY.RIGHT: + event.preventDefault(); if (!STATE.KEYDOWN_RIGHT) { if (STATE.KEYDOWN_LEFT) { // 왼쪽이 계속 눌리고 있다면 @@ -647,6 +653,7 @@ const Board = ({ moveBlock(BOARD, BLOCK, BACKGROUND, socket); break; case TETRIS.KEY.DOWN: + event.preventDefault(); if (!STATE.KEYDOWN_DOWN) { STATE.KEYDOWN_DOWN = true; downInterval = setInterval(() => { @@ -657,19 +664,22 @@ const Board = ({ break; // 회전 키 이벤트(위, z) case TETRIS.KEY.TURN_RIGHT: + event.preventDefault(); if (STATE.KEYDOWN_TURN_RIGHT) return; STATE.KEYDOWN_TURN_RIGHT = true; BLOCK.NEXT = SRSAlgorithm(BOARD, BLOCK, event.key); moveBlock(BOARD, BLOCK, BACKGROUND, socket); break; - case TETRIS.KEY.TURN_LEFT: + case TETRIS.KEY.TURN_LEFT_ENG: + case TETRIS.KEY.TURN_LEFT_KR: if (STATE.KEYDOWN_TURN_LEFT) return; STATE.KEYDOWN_TURN_LEFT = true; BLOCK.NEXT = SRSAlgorithm(BOARD, BLOCK, event.key); moveBlock(BOARD, BLOCK, BACKGROUND, socket); break; // 홀드 키(c) - case TETRIS.KEY.HOLD: + case TETRIS.KEY.HOLD_ENG: + case TETRIS.KEY.HOLD_KR: if (STATE.CAN_HOLD) { STATE.CAN_HOLD = false; holdBlock(BOARD, BLOCK, STATE, PROPS_FUNC, BACKGROUND, socket); @@ -738,7 +748,7 @@ const Board = ({ case TETRIS.KEY.TURN_RIGHT: STATE.KEYDOWN_TURN_RIGHT = false; break; - case TETRIS.KEY.TURN_LEFT: + case TETRIS.KEY.TURN_LEFT_ENG: STATE.KEYDOWN_TURN_LEFT = false; break; case TETRIS.KEY.HARD_DROP: diff --git a/front-end/src/constants/tetris.ts b/front-end/src/constants/tetris.ts index b25c352..208ffbc 100644 --- a/front-end/src/constants/tetris.ts +++ b/front-end/src/constants/tetris.ts @@ -71,8 +71,10 @@ export const KEY = { RIGHT: 'ArrowRight', DOWN: 'ArrowDown', TURN_RIGHT: 'ArrowUp', - TURN_LEFT: 'z', - HOLD: 'c', + TURN_LEFT_ENG: 'z', + TURN_LEFT_KR: 'ㅋ', + HOLD_ENG: 'c', + HOLD_KR: 'ㅊ', HARD_DROP: ' ', }; diff --git a/front-end/src/pages/GamePage/index.tsx b/front-end/src/pages/GamePage/index.tsx index fb9517f..ccd0ffb 100644 --- a/front-end/src/pages/GamePage/index.tsx +++ b/front-end/src/pages/GamePage/index.tsx @@ -46,7 +46,6 @@ function GamePage() { const chatInputRef = useRef(); const containerRef = useRef(); - const [isGameStarted, setIsGameStarted] = useState(false); const [gameStart, setgameStart] = useState(false); const [gameOver, setGameOver] = useState(true); const [holdBlock, setHoldBlock] = useState(null); @@ -56,8 +55,6 @@ function GamePage() { const modalRef = useRef(); const [rank, setRankState] = useState(); - let rankIdx = 1; - const handleRankModal = () => { modalRef.current.open(); }; @@ -91,6 +88,7 @@ function GamePage() { sendMessage(); } }; + const sendMessage = () => { if (chatInputRef.current.value.length) { socketClient.current.emit('send message', { @@ -212,7 +210,8 @@ function GamePage() { gameOver={gameOver} endGame={() => endGame(socketClient.current)} getHoldBlockState={getHoldBlock} - getPreviewBlocksList={getPreviewBlocks} /> + getPreviewBlocksList={getPreviewBlocks} + />
{profile.nickname}
diff --git a/front-end/src/pages/GamePage/style.scss b/front-end/src/pages/GamePage/style.scss index e17f213..367acc2 100644 --- a/front-end/src/pages/GamePage/style.scss +++ b/front-end/src/pages/GamePage/style.scss @@ -96,5 +96,12 @@ color: #1C2137; } } + + & .close__btn { + cursor: pointer; + left: 140px; + top: -13px; + position: relative; + } } } \ No newline at end of file