Merge pull request #79 from Front-znad-zatoki/feature/#72-win-modal

UI Component/#72 - WinModal

src/app/components/ModalBasic.ts

@@ -69,24 +69,26 @@ export class ModalBasic {
   createAndAppendButtonsRow(
     leftButtonText: string,
     leftButtonAction: () => void,
-    rightButtonText: string,
-    rightButtonAction: () => void,
+    rightButtonText?: string,
+    rightButtonAction?: () => void,
   ): ModalBasic {
     const leftButton: HTMLElement = new Button().create(
       leftButtonText,
     );
-    const rightButton: HTMLElement = new Button().create(
-      rightButtonText,
-    );
+    const rightButton: HTMLElement | null = rightButtonText
+      ? new Button().create(rightButtonText)
+      : null;
+    if (rightButton && rightButtonAction) {
+      rightButton.addEventListener('click', rightButtonAction);
+    }
     leftButton.addEventListener('click', leftButtonAction);
-    rightButton.addEventListener('click', rightButtonAction);
     const buttonsRow = Render.elementFactory(
       'div',
       {
         className: 'modal__buttons',
       },
       leftButton,
-      rightButton,
+      rightButton ? rightButton : '',
     );
     Render.childrenInjector(this.modalContainer, buttonsRow);
     return this;

src/app/components/WinModal.ts

@@ -0,0 +1,28 @@
+import { Player } from '~src/Player';
+import { Render } from '../utils/Render';
+import { ModalBasic } from './ModalBasic';
+
+export class WinModal extends ModalBasic {
+  create(player: Player): void {
+    this.renderBasicModal(
+      'CONGRATULATIONS!',
+      `${player.theName} has won!`,
+      this.createImage(player),
+    ) as WinModal;
+  }
+
+  addButton(): void {
+    const handleEnd = () => Render.removeElement('.modal');
+    this.createAndAppendButtonsRow(
+      'End game - back to menu',
+      handleEnd,
+    );
+  }
+
+  private createImage({ theName, theAvatar }: Player): HTMLElement {
+    return Render.elementFactory('img', {
+      src: theAvatar,
+      alt: `${theName}-avatar`,
+    });
+  }
+}

src/app/manuals/WinModalDemo.ts

@@ -0,0 +1,16 @@
+import { Player } from '../../Player';
+import { WinModal } from '../components/WinModal';
+import { Render } from '../utils/Render';
+
+export class WinModalDemo {
+  static playDemo(): void {
+    const modal = new WinModal();
+    const player = new Player(
+      'player',
+      './static/images/avatars/dog.png',
+    );
+    modal.create(player);
+    modal.addButton();
+    Render.render('#sf-app', modal.modal);
+  }
+}