feat: update hold piece naming and styling

Author: trungvose

src/app/containers/angular-tetris/angular-tetris.component.scss

@@ -28,18 +28,18 @@ $black: #000;
 
 .screen {
   width: 390px;
-  height: 495px;
+  height: 478px;
   border: solid 5px;
   border-color: #987f0f #fae36c #fae36c #987f0f;
   margin: 0 auto;
   position: relative;
 
   .panel {
     width: 380px;
-    height: 485px;
+    height: 468px;
     margin: 0 auto;
     background: #9ead86;
-    padding: 18px 8px;
+    padding: 8px;
     border: 2px solid #494536;
   }
 }

src/app/interface/tile/tile.ts

@@ -6,6 +6,7 @@ export class Tile {
   constructor(val: TileValue) {
     this._value = val;
   }
+
   get isFilled(): boolean {
     return this._value === 1;
   }

src/app/state/tetris/tetris.service.ts

@@ -186,9 +186,9 @@ export class TetrisService {
       return;
     }
     this._clearPiece();
-    const isHoldPieceNone = this._hold.isNone();
-    const newCurrent = isHoldPieceNone ? this._next : this._hold;
-    if (isHoldPieceNone) {
+    const isHoldNonePiece = this._hold.isNone();
+    const newCurrent = isHoldNonePiece ? this._next : this._hold;
+    if (isHoldNonePiece) {
       this._setNext();
     }
     this._setHolded(this._current.reset());

src/app/styles/_reset.scss

@@ -29,8 +29,8 @@ body {
   right: 15px;
 
   p {
-    line-height: 47px;
-    height: 57px;
+    line-height: 43px;
+    height: 50px;
     padding: 10px 0 0;
     white-space: nowrap;
     clear: both;
@@ -39,7 +39,7 @@ body {
   .last-row {
     position: absolute;
     width: 114px;
-    top: 456px;
+    top: 430px;
     left: 0;
   }
 }