Merge branch 'feature/#116-mode-view' into feature/#115-AddPlayerPane…

…l-styling

src/Interfaces/CallbackInterface.ts

@@ -0,0 +1,11 @@
+export interface CallbackNoParam<T = void> {
+  (): T;
+}
+
+export interface CallbackOneParam<T1, T2 = void> {
+  (param1: T1): T2;
+}
+
+export interface CallbackTwoParam<T1, T2, T3 = void> {
+  (param1: T1, param2: T2): T3;
+}

src/Interfaces/PlayerDTOInterface.ts

@@ -2,4 +2,5 @@ export interface PlayerDTO {
   name: string;
   path: string;
   color: string;
+  isAI: boolean;
 }

src/app/EmptyView.ts

@@ -0,0 +1,25 @@
+import { Render } from './utils/Render';
+
+export abstract class EmptyView {
+  protected view: HTMLElement;
+  protected viewContainer: HTMLElement;
+
+  constructor(isHidden = true) {
+    this.viewContainer = Render.elementFactory('div', {
+      className: 'view__container',
+    });
+    this.view = Render.elementFactory(
+      'div',
+      { className: `view${isHidden ? ' hidden' : ''}` },
+      this.viewContainer,
+    );
+  }
+
+  hide(): void {
+    this.view.classList.add('hidden');
+  }
+
+  show(): void {
+    this.view.classList.remove('hidden');
+  }
+}

src/app/MenuView.ts

@@ -1,24 +1,30 @@
-import { ModeModal } from './components/ModeModal';
+import { PlayerDTO } from '~src/Interfaces/PlayerDTOInterface';
+import { EmptyView } from './EmptyView';
+import { ModeView } from './ModeView';
 import { Render } from './utils/Render';
 import { ViewController } from './ViewController';
 
-export class MenuView {
-  private modeModal: ModeModal;
-  constructor(private view: ViewController) {
-    this.modeModal = new ModeModal((players) =>
-      this.view.launchGame(players),
-    );
-    this.modeModal.hideModal();
-    Render.render('body', this.modeModal.createModeModal());
+export class MenuView extends EmptyView {
+  private modeModal: ModeView;
+  constructor(private viewController: ViewController) {
+    super(false);
+    const backCallback = () => this.show();
+    const submitCallback = (
+      isDynamic: boolean,
+      players: PlayerDTO[],
+    ) => this.viewController.launchGame(players);
+    this.modeModal = new ModeView(backCallback, submitCallback);
+    Render.render('body', this.modeModal.theModeView);
   }
 
   displayMenu(): void {
     Render.removeAllChildren('#sf-app');
-    Render.render(
-      '#sf-app',
+    Render.childrenInjector(
+      this.viewContainer,
       this.createLandingPage(),
       this.createFooter(),
     );
+    Render.render('#sf-app', this.view);
   }
 
   private createLandingPage(): HTMLElement {
@@ -81,7 +87,8 @@ export class MenuView {
       'NEW GAME',
     );
     startGameButton.addEventListener('click', () => {
-      this.modeModal.showModal();
+      this.hide();
+      this.modeModal.show();
     });
     const settingsButton = Render.elementFactory(
       'button',