Merge pull request #184 from boostcampwm-2021/feature/game

게임방 키 입력 버그 수정
boostcampwm-2021 · Nov 25, 2021 · e4f3de7 · e4f3de7
2 parents 224424e + 9149b91
commit e4f3de7
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 13 deletions.
diff --git a/front-end/src/components/Modal/index.tsx b/front-end/src/components/Modal/index.tsx
@@ -48,7 +48,16 @@ const Modal = forwardRef(
                 </button>
               </div>
             )}
-            {type === 'rank' && <div className="modal__title">[{title}]</div>}
+            {type === 'rank' && (
+              <div className="modal__title">
+                <div>
+                  [{title}]
+                  <button className="close__btn" onClick={close}>
+                      X
+                  </button>
+                </div>
+              </div>
+            )}
             {children}
           </div>
         </div>

diff --git 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
@@ -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
@@ -46,7 +46,6 @@ function GamePage() {
   const chatInputRef = useRef<any>();
   const containerRef = useRef<any>();
 
-  const [isGameStarted, setIsGameStarted] = useState(false);
   const [gameStart, setgameStart] = useState(false);
   const [gameOver, setGameOver] = useState(true);
   const [holdBlock, setHoldBlock] = useState<blockInterface | null>(null);
@@ -56,8 +55,6 @@ function GamePage() {
   const modalRef = useRef<any>();
   const [rank, setRankState] = useState<RankInterface[]>();
 
-  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}
+            />
             <div className={'myNickName'}>{profile.nickname}</div>
           </div>
           <div>

diff --git 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;
+    }
   }
 }