tetris-visualizer documentation
  1. Components
  2. PlayByPlayComponent

File

src/app/layout/wizard/view-game/play-by-play/play-by-play.component.ts

Metadata

selector app-play-by-play
styleUrls ./play-by-play.component.scss
templateUrl ./play-by-play.component.html

Index

Properties

Constructor

constructor(data: GameResultDataService, engine: GameEngineService)
Defined in src/app/layout/wizard/view-game/play-by-play/play-by-play.component.ts:18
Parameters :
Name Type Optional
data GameResultDataService No
engine GameEngineService No

Properties

boardCells
Type : []
Default value : [...Array(10).keys()]
Defined in src/app/layout/wizard/view-game/play-by-play/play-by-play.component.ts:13
Public data
Type : GameResultDataService
Defined in src/app/layout/wizard/view-game/play-by-play/play-by-play.component.ts:20
displayedColumns
Type : []
Default value : ['move', 'board', 'rows']
Defined in src/app/layout/wizard/view-game/play-by-play/play-by-play.component.ts:15
Public engine
Type : GameEngineService
Defined in src/app/layout/wizard/view-game/play-by-play/play-by-play.component.ts:20
length
Type : number
Default value : 100
Defined in src/app/layout/wizard/view-game/play-by-play/play-by-play.component.ts:16
pageSize
Type : number
Default value : 25
Defined in src/app/layout/wizard/view-game/play-by-play/play-by-play.component.ts:17
pageSizeOptions
Type : number[]
Default value : [5, 10, 25, 100]
Defined in src/app/layout/wizard/view-game/play-by-play/play-by-play.component.ts:18
 
import { AfterViewInit, Component } from '@angular/core';

import { GameEngineService } from 'src/app/services/game-engine.service';
import { GameResultDataService } from 'src/app/services/game-result-data.service';

@Component({
  selector: 'app-play-by-play',
  templateUrl: './play-by-play.component.html',
  styleUrls: ['./play-by-play.component.scss']
})
export class PlayByPlayComponent {

  boardCells = [...Array(10).keys()];

  displayedColumns = ['move', 'board', 'rows'];
  length = 100;
  pageSize = 25;
  pageSizeOptions: number[] = [5, 10, 25, 100];

  constructor(public data: GameResultDataService, public engine: GameEngineService) {
  }


}
Copy
<div class="mat-elevation-z8">
  <table mat-table [dataSource]="data.selectedGamePlayByPlayDataSource" style="width: 100%">
    <ng-container matColumnDef="move">
      <th mat-header-cell *matHeaderCellDef style="color: white; width: 200px">
        move
      </th>
      <td mat-cell *matCellDef="let element" style="text-align: center">
        {{ element.move }}
      </td>
    </ng-container>

    <ng-container matColumnDef="board">
      <th
        mat-header-cell
        *matHeaderCellDef
        style="color: white; width: 90%; padding-left: 10px"
      >
        board after move
      </th>
      <td mat-cell *matCellDef="let element" style="padding-left: 10px">
        <table>
          <tr>
            <td
              *ngFor="let board of element.board; let i = index"
              style="vertical-align: top"
            >
              <div
                *ngIf="element.board.length > 1"
                style="width: 100; text-align: left"
              >
                <span colspan="10" *ngIf="i === 0">Before </span>
                <span colspan="10" *ngIf="i === 1">After </span>
                {{
                  engine.boardRows(element.board[0]).length -
                    engine.boardRows(element.board[1]).length
                }}
                row<span
                  *ngIf="
                    engine.boardRows(element.board[0]).length -
                      engine.boardRows(element.board[1]).length !==
                    1
                  "
                  >s</span
                >
                removed:
              </div>

              <div
                *ngIf="!board || board.length == 0"
                style="
                  width: 250px;
                  height: 47px;
                  background-color: rgba(0, 0, 0, 0.344);
                  color: white;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
                class="bevel"
              >
                Board is Empty
              </div>

              <table
                style="padding: 0; border-collapse: collapse"
                cellspacing="0"
                cellpadding="0"
              >
                <tr *ngFor="let row of engine.rowNumbers(board).reverse()">
                  <td
                    *ngFor="let cell of boardCells"
                    style="
                      border: 1px solid rgba(111, 103, 103, 0.35);
                      width: 22px;
                      min-width: 22px;
                      height: 22px;
                      min-height: 22px;
                      text-align: center;
                    "
                    class="bevel"
                    [ngStyle]="{ 'background-color': board[row * 10 + cell] }"
                  >
                    {{ row * 10 + cell }}
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </ng-container>

    <ng-container matColumnDef="rows">
      <th mat-header-cell *matHeaderCellDef style="color: white; width: 60px">
        rows
      </th>
      <td mat-cell *matCellDef="let element" style="text-align: right">
        <div style="display: flex; justify-content: space-between; width: 100%">
          <span *ngIf="element.board.length === 1"></span>
          <span *ngIf="element.board.length > 1">
            {{ engine.boardRows(element.board[0]).length }} / </span
          ><span
            >{{
              engine.boardRows(element.board[element.board.length - 1]).length
            }}
          </span>
        </div>
      </td>
    </ng-container>

    <tr
      mat-header-row
      *matHeaderRowDef="displayedColumns"
      style="
        font-weight: bolder;
        color: white;
        background-color: #2b5876;

      "
    ></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>

</div>
Copy

./play-by-play.component.scss

Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""