Merge pull request #114 from BeyondPong/dev-refactor#105

Refactor: 토너먼트 로직 추가
BeyondPong · Jun 28, 2024 · a8a608b · a8a608b
2 parents a974a5c + 6d43883
commit a8a608b
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 32 deletions.
diff --git a/frontend/static/css/play.css b/frontend/static/css/play.css
@@ -442,28 +442,63 @@
   }
 }
 
-/* CSS */
 #finalRoundContainer {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
   display: flex;
-  align-items: center;
+  flex-direction: column;
   justify-content: center;
+  align-items: center;
   font-size: 3em;
-  animation: slideDown 1s forwards, fadeOut 1s 2s forwards;
+  color: white;
+  z-index: 1000;
+}
+
+#finalRoundTop,
+#finalRoundBottom {
+  position: absolute;
+  width: 100%;
+  height: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 5rem;
+  overflow: hidden;
+}
+
+#finalRoundTop {
+  top: 0;
+  background: rgba(0, 0, 0, 0.8);
+  clip-path: inset(0 0 50% 0);
+  animation: slideTop 1s forwards, fadeOut 1s 2s forwards;
+}
+
+#finalRoundBottom {
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  clip-path: inset(50% 0 0 0);
+  animation: slideBottom 1s forwards, fadeOut 1s 2s forwards;
+}
+
+@keyframes slideTop {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(50%);
+  }
 }
 
-@keyframes slideDown {
+@keyframes slideBottom {
   0% {
-    clip-path: inset(0 0 50% 0);
+    transform: translateY(100%);
   }
   100% {
-    clip-path: inset(50% 0 0 0);
+    transform: translateY(-50%);
   }
 }
 

diff --git a/frontend/static/js/game/remoteGame.js b/frontend/static/js/game/remoteGame.js
@@ -147,6 +147,13 @@ export const remoteGame = {
       socket.send(JSON.stringify(responseMessage));
     }
 
+    function sendIsFinal() {
+      let responseMessage = {
+        type: 'final_game',
+      };
+      socket.send(JSON.stringify(responseMessage));
+    }
+
     async function settingGame(data) {
       root = document.getElementById('app');
       while (root.childNodes.length > 0) {
@@ -265,6 +272,9 @@ export const remoteGame = {
           case 'paddle_position':
             handlePaddlePosition(data.data);
             break;
+          case 'final_round':
+            renderFinal();
+            break;
         }
       };
     }
@@ -287,13 +297,23 @@ export const remoteGame = {
     }
 
     function renderFinal() {
-      const $finalRound = document.createElement('div');
-      $finalRound.id = 'finalRoundContainer';
-      $finalRound.innerText = 'Final Round';
-      root.appendChild($finalRound);
+      const $finalRoundContainer = document.createElement('div');
+      $finalRoundContainer.id = 'finalRoundContainer';
+
+      const $finalRoundTop = document.createElement('div');
+      $finalRoundTop.id = 'finalRoundTop';
+      $finalRoundTop.innerText = 'Final Round';
+
+      const $finalRoundBottom = document.createElement('div');
+      $finalRoundBottom.id = 'finalRoundBottom';
+      $finalRoundBottom.innerText = 'Final Round';
+
+      $finalRoundContainer.appendChild($finalRoundTop);
+      $finalRoundContainer.appendChild($finalRoundBottom);
+      root.appendChild($finalRoundContainer);
+
       setTimeout(() => {
-        clearScreen();
-        root.removeChild($finalRound);
+        root.removeChild($finalRoundContainer);
         clearScreen();
         gameStart();
         running = true;
@@ -302,16 +322,12 @@ export const remoteGame = {
     }
 
     async function handleNextRound() {
-      if (gameNumber === 2) {
-        renderFinal();
-      } else {
-        setTimeout(() => {
-          clearScreen();
-          gameStart();
-          running = true;
-          animate();
-        }, 3000);
-      }
+      setTimeout(() => {
+        clearScreen();
+        gameStart();
+        running = true;
+        animate();
+      }, 3000);
     }
 
     function handleGameRestart(data) {
@@ -327,6 +343,7 @@ export const remoteGame = {
     function handleEndGame(data) {
       updateScore(data);
       gameEnd(data);
+      sendIsFinal();
     }
 
     function handlePaddlePosition(data) {

diff --git a/frontend/static/js/view/Play.js b/frontend/static/js/view/Play.js
@@ -25,10 +25,12 @@ export default class extends AbstractView {
       </div>
       <nav class="play_nav">
         <a tabindex="0" class="nav__link" id="local_link">${words[registry.lang].local}</a>
-        <a tabindex="0" class="nav__link" id="remote_link" style="${isLogin ? '' : 'pointer-events: none; color: grey; text-decoration: none;'
-      }">${words[registry.lang].remote}</a>
-        <a tabindex="0" class="nav__link" id="tournament_link" style="${isLogin ? '' : 'pointer-events: none; color: grey; text-decoration: none;'
-      }">${words[registry.lang].tournament}</a>
+        <a tabindex="0" class="nav__link" id="remote_link" style="${
+          isLogin ? '' : 'pointer-events: none; color: grey; text-decoration: none;'
+        }">${words[registry.lang].remote}</a>
+        <a tabindex="0" class="nav__link" id="tournament_link" style="${
+          isLogin ? '' : 'pointer-events: none; color: grey; text-decoration: none;'
+        }">${words[registry.lang].tournament}</a>
       </nav>
     `;
   }
@@ -185,8 +187,9 @@ export default class extends AbstractView {
     const modalHtml = `
       <div class="tournament_container_flex">
         <div>
-          <input tabindex="0" type="text" class="input_box" placeholder="${words[registry.lang].tournament_nickname_placeholder
-      }" maxlength="10"/>
+          <input tabindex="0" type="text" class="input_box" placeholder="${
+            words[registry.lang].tournament_nickname_placeholder
+          }" maxlength="10"/>
         </div>
         <div class="div_check_button" tabindex="0"><button class="close_button check_button">CHECK</button></div>
       </div>
@@ -299,7 +302,7 @@ export default class extends AbstractView {
         </div>
       `;
 
-const self = this;
+    const self = this;
 
     const checkNickName = (nickname, realname, room_name, socket) => {
       const message = {
@@ -331,7 +334,8 @@ const self = this;
             nicknameDiv.textContent = players[index].nickname;
             nicknameDiv.setAttribute(
               'tooltip-title',
-              `${players[index].win_cnt} ${words[registry.lang].win} ${players[index].lose_cnt} ${words[registry.lang].lose
+              `${players[index].win_cnt} ${words[registry.lang].win} ${players[index].lose_cnt} ${
+                words[registry.lang].lose
               }`,
             );
             nicknameDiv.addEventListener('keydown', (e) => {
@@ -441,6 +445,11 @@ const self = this;
         };
       }
     });
+    inputBox.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        checkButton.click();
+      }
+    });
   }
   tournamentModal() {
     const modalHtml = `