View checkmate

sass/components/_endGame.scss

@@ -0,0 +1,19 @@
+.endGame {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  width: 500px;
+  background-image: url('../static/img/papirus-background.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  position: absolute;
+  top: calc(50vh - 100px);
+  left: calc(50vw - 250px);
+  &__text {
+    text-align: center;
+    font-size: 3rem;
+    font-family: $font-family--primary;
+  }
+}

sass/style.scss

@@ -10,5 +10,6 @@
 @import 'components/chessboard';
 @import 'components/button';
 @import 'components/piece';
+@import 'components/endGame';
 
 // * LAYOUTS

src/app/presenter/ChessBoardPresenter.ts

@@ -57,6 +57,11 @@ export class ChessBoardPresenter {
       case 'PieceWasMoved':
         this.view.movePiece(this.translateSquareToAlgebraicNotation(event.from), this.translateSquareToAlgebraicNotation(event.to));
         break;
+      case 'CheckmateHasOccurred':
+        this.view.showEndGameWindow(event.king.side.toString(), this.translateSquareToAlgebraicNotation(event.onSquare as Square));
+        break;
+      case 'StalemateHasOccurred':
+        this.view.showEndGameWindow();
     }
   }
 

src/app/view/ChessBoardView.ts

@@ -15,4 +15,6 @@ export interface ChessBoardView extends ViewEventSource {
 
   movePiece(squareFrom: string, squareTo: string): void;
   capturePiece(onSquare: string): void;
+
+  showEndGameWindow(side?: string, position?: string): void;
 }

src/app/view/web/WebChessView.ts

@@ -86,4 +86,20 @@ export class WebChessView implements ChessBoardView {
     newPieceElement.src = pieceImage;
     return newPieceElement;
   }
+
+  showEndGameWindow(side: string, position: string): void {
+    //TODO zbudować ładne okno z wyświetleniem wyniku
+    const endGameModal = document.createElement('div');
+    endGameModal.classList.add('endGame');
+
+    const endGameText = document.createElement('div');
+    endGameText.classList.add('endGame__text');
+    if (side && position) {
+      endGameText.innerText = `${side} player lost! Checkmate on ${position}.`;
+    } else {
+      endGameText.innerText = `Draw!`;
+    }
+    endGameModal.appendChild(endGameText);
+    this.parent.appendChild(endGameModal);
+  }
 }

test/app/presenter/ChessBoardPresenter.spec.ts

@@ -106,6 +106,7 @@ function chessBoardViewMock(viewEventBus: ViewEventBus): ChessBoardView {
     hideAllAvailableMoves: jest.fn(),
     movePiece: jest.fn(),
     capturePiece: jest.fn(),
+    showEndGameWindow: jest.fn(),
   };
 }