Merge branch 'develop' into feature/#68-implement-process-game-2

src/app/View.ts

@@ -165,4 +165,12 @@ export class View {
     modal.addButton();
     Render.render('#sf-app', modal.modal);
   }
+
+  handleTrade(): void {
+    console.log('handle trade');
+  }
+
+  handleRoll(): void {
+    console.log('handle roll');
+  }
 }

src/app/components/PlayerPanel.ts

@@ -0,0 +1,132 @@
+import { Player } from '../../Player';
+import { Render } from '../utils/Render';
+import { View } from '../View';
+import { flatten } from 'lodash';
+import { AnimalNames } from '../../Enums/AnimalNamesEnum';
+
+export class PlayerPanel {
+  /**
+   * Creates PlayerPanel based on data given
+   * @param player accepts instance of current player
+   * @param view accepts instance of View componnet
+   */
+  constructor(private player: Player, private view: View) {}
+
+  createPlayerPanel(): HTMLElement {
+    return Render.elementFactory(
+      'div',
+      {
+        className: 'player-panel',
+        style: `background-color: ${this.player.theColor};`,
+      },
+      this.createPlayerBoard(),
+      this.createResultWindow(),
+      this.createButtonPanel(),
+    );
+  }
+
+  private createPlayerBoard(): HTMLElement {
+    return Render.elementFactory(
+      'div',
+      {
+        className: 'player-panel__board',
+      },
+      Render.elementFactory(
+        'div',
+        { className: 'player-panel__info' },
+        Render.elementFactory('img', {
+          src: this.player.theAvatar,
+          alt: `${this.player.theName}-avatar`,
+          className: 'avatar-icon',
+        }),
+        this.createPlayerDetails(),
+      ),
+      Render.elementFactory(
+        'div',
+        { id: 'time-left', className: 'player-panel__time' },
+        `Time left: ${this.player.theAvatar}`,
+      ),
+      this.createPlayerHerd(),
+    );
+  }
+
+  private createPlayerDetails(): HTMLElement {
+    return Render.elementFactory(
+      'div',
+      { className: 'player-panel__details' },
+      Render.elementFactory('p', {}, 'Current player:'),
+      Render.elementFactory(
+        'p',
+        { className: 'player-panel__name' },
+        `${this.player.theName}`,
+      ),
+    );
+  }
+
+  private createPlayerHerd(): HTMLElement {
+    return Render.elementFactory(
+      'div',
+      { className: 'player-panel__herd' },
+      ...flatten(this.convertHerd()),
+    );
+  }
+
+  private convertHerd(): HTMLElement[] {
+    return this.player.theHerd.theAnimals.map(([animal, count]) => {
+      return Render.elementFactory(
+        'div',
+        { className: 'resources' },
+        Render.elementFactory('img', {
+          className: 'player-panel__image',
+          alt: `${animal.theName}`,
+          src: `./static/images/avatars/${
+            animal.theName === AnimalNames.BIG_DOG ||
+            animal.theName === AnimalNames.SMALL_DOG
+              ? 'dog'
+              : animal.theName
+          }.png`,
+        }),
+        `x${count}`,
+      );
+    });
+  }
+
+  private createResultWindow(): HTMLElement {
+    return Render.elementFactory(
+      'div',
+      {
+        className: 'player-panel__result',
+      },
+      'Results:',
+    );
+  }
+
+  private createButtonPanel(): HTMLElement {
+    return Render.elementFactory(
+      'div',
+      { className: 'player-panel__buttons' },
+      this.createDiceButton(),
+      this.createExchangeButton(),
+    );
+  }
+
+  private createDiceButton(): HTMLElement {
+    const rollBtn = Render.elementFactory(
+      'button',
+      { className: 'btn' },
+      'Roll a dice',
+    );
+    rollBtn.addEventListener('click', () => this.view.handleRoll());
+    return rollBtn;
+  }
+
+  private createExchangeButton(): HTMLElement {
+    const tradeBtn = Render.elementFactory(
+      'button',
+      { className: 'btn' },
+      'Exchange',
+    );
+    tradeBtn.addEventListener('click', () => this.view.handleTrade());
+    return tradeBtn;
+  }
+}

src/app/manuals/PlayerPanelDemo.ts

@@ -0,0 +1,19 @@
+import { Player } from '../../Player';
+import { PlayerPanel } from '../components/PlayerPanel';
+import { Render } from '../utils/Render';
+import { View } from '../View';
+
+export class PlayerPanelDemo {
+  static playDemo(): void {
+    const view = new View();
+    const player = new Player(
+      'Misha',
+      './static/images/avatars/sheep.png',
+      '#44AF95',
+    );
+    Render.render(
+      '#sf-app',
+      new PlayerPanel(player, view).createPlayerPanel(),
+    );
+  }
+}

styles/components/_components.scss

@@ -2,3 +2,4 @@
 @import './components/button';
 @import './components/modal';
 @import './menu';
+@import './playerPanel';

styles/components/_playerPanel.scss

@@ -0,0 +1,64 @@
+.player-panel {
+  display: flex;
+  flex-grow: 1 1 1;
+  min-height: 40vh;
+  width: 100vw;
+
+  &__board {
+    width: 60vw;
+    position: relative;
+    padding: 0.5rem;
+    border-right: 1px solid black;
+  }
+
+  &__details {
+    display: inline-block;
+    margin-left: 1rem;
+  }
+
+  &__name {
+    font-size: 1.7rem;
+    font-weight: 700;
+  }
+
+  &__time {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    display: none;
+  }
+
+  &__herd {
+    width: 100%;
+    height: 80%;
+    display: inline-flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+
+  &__image {
+    height: 4rem;
+    width: auto;
+  }
+
+  &__result {
+    width: 30vw;
+    padding: 0.5rem;
+  }
+
+  &__buttons {
+    width: 10vw;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.btn {
+  width: 100%;
+  height: 50%;
+}
+
+.avatar-icon {
+  display: inline;
+  height: 3rem;
+}