Merge pull request #88 from Front-znad-zatoki/feature/#56-banks-board

Feature/#56 banks board

src/app/components/BankBoard.ts

@@ -0,0 +1,35 @@
+import { Render } from '../utils/Render';
+import { Bank } from '../logic/Bank';
+import { flatten } from 'lodash';
+export class BankBoard {
+  /* returns Bank board with animals and counts */
+  renderBankBoard(bank: Bank): HTMLElement {
+    const bankView: HTMLElement = Render.elementFactory('div', {
+      className: 'bank__board',
+    });
+    const bankHerd = bank.theHerd.theAnimals.map(
+      ([animal, count]) => [animal.theImagePath, count],
+    );
+    const bankImagesAndCounts: HTMLElement[][] = bankHerd.map(
+      ([pathElement, countElement]) => {
+        const animalImg: HTMLElement = Render.elementFactory('img', {
+          className: 'bank__board__img',
+          src: `${pathElement}`,
+        });
+        const animalCount: HTMLElement = Render.elementFactory(
+          'div',
+          { className: 'bank__board__count' },
+          `x${countElement}`,
+        );
+
+        return [animalImg, animalCount];
+      },
+    );
+
+    Render.childrenInjector(
+      bankView,
+      ...flatten(bankImagesAndCounts),
+    );
+    return bankView;
+  }
+}

src/app/manuals/PlayerPanelDemo.ts

@@ -16,4 +16,4 @@ export class PlayerPanelDemo {
       new PlayerPanel(player, view).createPlayerPanel(),
     );
   }
-}
+}

styles/components/_bankBoard.scss

@@ -0,0 +1,11 @@
+.bank__board {
+  display: flex;
+  align-items: center;
+  &__img {
+    width: 100px;
+    margin-left: 50px;
+  }
+  &__count {
+    font-size: 30px;
+  }
+}

styles/components/_components.scss

@@ -5,3 +5,4 @@
 @import './menu';
 @import './tradeModal';
 @import './playerPanel';
+@import './bankBoard';

styles/components/_playerPanel.scss

@@ -1,12 +1,12 @@
 .player-panel {
   display: flex;
-  flex-grow: 1 1 1;
-  min-height: 40vh;
   width: 100vw;
+  min-height: 40vh;
+  flex-grow: 1 1 1;
 
   &__board {
-    width: 60vw;
     position: relative;
+    width: 60vw;
     padding: 0.5rem;
     border-right: 1px solid black;
   }
@@ -29,16 +29,16 @@
   }
 
   &__herd {
+    display: inline-flex;
     width: 100%;
     height: 80%;
-    display: inline-flex;
-    justify-content: space-around;
     align-items: center;
+    justify-content: space-around;
   }
 
   &__image {
-    height: 4rem;
     width: auto;
+    height: 4rem;
   }
 
   &__result {
@@ -47,8 +47,8 @@
   }
 
   &__buttons {
-    width: 10vw;
     display: flex;
+    width: 10vw;
     flex-direction: column;
   }
 }
@@ -61,4 +61,4 @@
 .avatar-icon {
   display: inline;
   height: 3rem;
-}
+}