Merge pull request #48 from HandTris/#47

#47
HandTris · Jul 1, 2024 · 3d2e850 · 3d2e850
2 parents a38c71f + 10400cf
commit 3d2e850
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 25 deletions.
diff --git a/handtris/src/app/globals.css b/handtris/src/app/globals.css
@@ -121,7 +121,7 @@ button {
     margin-left: 20px;
 }
 
-#play-container{
+.play-container{
     position: relative;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 10px;
@@ -198,3 +198,32 @@ canvas {
         top: -50px;
     }
 }
+
+
+@keyframes shake {
+  0% { transform: translate(1px, 1px) rotate(0deg); }
+  10% { transform: translate(-1px, -2px) rotate(-1deg); }
+  20% { transform: translate(-3px, 0px) rotate(1deg); }
+  30% { transform: translate(3px, 2px) rotate(0deg); }
+  40% { transform: translate(1px, -1px) rotate(1deg); }
+  50% { transform: translate(-1px, 2px) rotate(-1deg); }
+  60% { transform: translate(-3px, 1px) rotate(0deg); }
+  70% { transform: translate(3px, 1px) rotate(-1deg); }
+  80% { transform: translate(-1px, -1px) rotate(1deg); }
+  90% { transform: translate(1px, 2px) rotate(0deg); }
+  100% { transform: translate(1px, -2px) rotate(-1deg); }
+}
+
+.shake {
+  animation: shake 0.2s; 
+}
+
+
+@keyframes fall {
+  0% { transform: translateY(0); }
+  100% { transform: translateY(100vh); }
+}
+
+.fall {
+  animation: fall 1s forwards;
+}
diff --git a/handtris/src/app/play/tetris/page.tsx b/handtris/src/app/play/tetris/page.tsx
@@ -250,6 +250,17 @@ const Home: React.FC = () => {
         lastMoveTime.current.rotate = now;
         tetrisGameRef.current?.p.rotate();
         triggerGestureFeedback("Rotate");
+
+        // 캔버스에 흔들림 애니메이션 추가
+        const playTetrisElement = document.getElementById("play-tetris");
+        if (playTetrisElement) {
+          playTetrisElement.classList.add("shake");
+
+          // 애니메이션 종료 후 클래스 제거
+          setTimeout(() => {
+            playTetrisElement.classList.remove("shake");
+          }, 200);
+        }
       }
     }
   };
@@ -424,8 +435,8 @@ const Home: React.FC = () => {
             </div>
           )}
         </div>
-        <div id="play-container">
-          <div id="tetris-container" className="overflow-hidden">
+        <div id="play-tetris">
+          <div id="tetris-container" className="overflow-hidden play-container">
             <NameLabel name={"USER1"} />
             <canvas
               ref={canvasTetrisRef}
@@ -436,7 +447,7 @@ const Home: React.FC = () => {
             <div ref={borderRef} id="tetris-border" />
           </div>
         </div>
-        <div id="play-container">
+        <div className="play-container">
           <NameLabel name={"USER2"} />
           <canvas
             ref={canvasTetris2Ref}

diff --git a/handtris/src/components/TetrisGame.ts b/handtris/src/components/TetrisGame.ts
@@ -81,7 +81,6 @@ export class TetrisGame {
         const colorSet = COLORS[color as keyof typeof COLORS] || { light: color, main: color, dark: color, ghost: color };
 
         ctx.clearRect(x * this.SQ, y * this.SQ, this.SQ, this.SQ);
-
         if (isGhost) {
             ctx.strokeStyle = colorSet.ghost;
             ctx.lineWidth = 2;
@@ -190,6 +189,7 @@ export class TetrisGame {
     showGameResult(result: string) {
         this.setGameResult(result);
     }
+
     flashRowEffect(row: number) {
         let flashCount = 6;
         let flashInterval = 100;
@@ -234,6 +234,11 @@ class Piece {
         for (let r = 0; r < this.activeTetromino.length; r++) {
             for (let c = 0; c < this.activeTetromino[r].length; c++) {
                 if (this.activeTetromino[r][c]) {
+                    if (!isGhost) {
+                        if (this.y + r >= 0 && this.x + c >= 0) {
+                            this.game.board_forsend[this.y + r][this.x + c] = color;
+                        }
+                    }
                     this.game.drawSquare(this.game.ctx, this.x + c, this.y + r, color, isGhost);
                 }
             }
@@ -249,40 +254,26 @@ class Piece {
     }
 
     drawGhost() {
-        this.unDrawGhost(); // Ensure previous ghost is cleared
+        this.unDrawGhost();
         this.ghostY = this.calculateGhostY();
-        const ghostColor = COLORS[this.color as keyof typeof COLORS].ghost;
-        this.fillGhost(this.ghostY, ghostColor);
+        this.fillGhost(this.ghostY, this.color);
     }
 
     unDrawGhost() {
         this.fillGhost(this.ghostY, this.game.VACANT);
+        this.game.drawBoard();  // 기존 보드를 다시 그려서 얼룩을 지우기
     }
 
     fillGhost(ghostY: number, color: string) {
-        const ghostPositions: { x: number; y: number }[] = [];
         for (let r = 0; r < this.activeTetromino.length; r++) {
             for (let c = 0; c < this.activeTetromino[r].length; c++) {
                 if (this.activeTetromino[r][c]) {
                     if (ghostY + r >= 0 && this.x + c >= 0) {
-                        ghostPositions.push({ x: this.x + c, y: ghostY + r });
+                        this.game.drawSquare(this.game.ctx, this.x + c, ghostY + r, color, true);
                     }
                 }
             }
         }
-
-        this.game.ctx.clearRect(0, 0, this.game.COL * this.game.SQ, this.game.ROW * this.game.SQ); // 현재 블록과 고스트 블록이 그려진 영역 전체 지우기
-        this.game.drawBoard();
-
-        ghostPositions.forEach(pos => {
-            if (color === this.game.VACANT) {
-                this.game.drawSquare(this.game.ctx, pos.x, pos.y, this.game.board[pos.y][pos.x], false);
-            } else {
-                this.game.drawSquare(this.game.ctx, pos.x, pos.y, color, true);
-            }
-        });
-
-        this.draw(); // 현재 블록 다시 그리기
     }
 
     calculateGhostY(): number {
@@ -299,12 +290,12 @@ class Piece {
             this.unDrawGhost();
             this.y++;
             this.ghostY = this.calculateGhostY();
-            this.drawGhost(); // 고스트 블록 그리기
+            this.drawGhost();
             this.draw();
         } else {
             this.lock();
             this.game.p = this.game.randomPiece();
-            this.game.p.drawGhost(); // 새로운 블록의 고스트 블록 그리기
+            this.game.p.drawGhost();
         }
     }