added the move history

Author: stephanrauh

Chess/ChessboardComponent.html

@@ -1,4 +1,4 @@
-<div *ng-for="#row of fields; var rowindex=index" style="width: 630px; height: 62px; overflow: hidden;" >
+<div *ng-for="#row of fields; var rowindex=index" style="width: 630px; height: 52px; overflow: hidden;" >
       <field *ng-for="#col of row; var colindex=index" [row]=rowindex [col]=colindex [piece]=col >
       </div>
 </div>

Chess/FieldComponent.html

@@ -1,9 +1,9 @@
-<div style="position: relative; left: 0px; top: 0px; width: 64px; height: 64px;margin-right:-6px; margin-bottom:-6px; display: inline-block" >
+<div style="position: relative; left: 0px; top: 0px; width: 54px; height: 54px;margin-right:-6px; margin-bottom:-6px; display: inline-block" >
   <div style="position: relative; top: 0px; left: 0px" >
         <img class="{{borderClass(row,col)}}" src="{{backgroundFileName(row,col)}}" />
   </div>
   <div style="position: absolute; top: 0px; left: 0px;">
-        <img style="width:62px;height:62px" src="{{fileName(piece)}}"
+        <img style="width:52px;height:52px" src="{{fileName(piece)}}"
              (dragstart)="ondragstart(row, col)"
              (dragover)="ondragover(row, col)"
              (drop)="ondragdrop(row, col)"

Chess/HistoryComponent.html

@@ -1 +1,5 @@
-In a future version, this will show the move history.
+<div style="height:520px;overflow-y:auto;width:180px" class="row">
+  <div *ng-for="#move of moveHistory();" class="col-md-6">
+    {{move}}
+  </div>
+</div>

Chess/applicationcomponent.js

@@ -3,21 +3,21 @@
 import {Component, View, bootstrap} from 'angular2/angular2';
 import {ChessBoardComponent} from "./chessboardcomponent";
 import {CapturedPiecesComponent} from './capturedpiecescomponent';
-import {Engine} from "./engine/chessboard";
+import {ChessEngineAPI} from "./engine/chessboardUI";
 import {HistoryComponent} from './historycomponent';
 
 // Annotation section
 @Component({
     selector: 'application',
-    bindings: [Engine.ChessboardUI]
+    bindings: [ChessEngineAPI.ChessboardUI]
 })
 @View({
     templateUrl: 'ApplicationComponent.html',
     directives: [ChessBoardComponent, HistoryComponent, CapturedPiecesComponent]
 })
 // Component controller
 class ApplicationComponent {
-  constructor(private chessboard:Engine.ChessboardUI) {}
+  constructor(private chessboard:ChessEngineAPI.ChessboardUI) {}
 
   public get title(): String { return this.chessboard.isWhitePlaying?"White move":"Black move"}
 }

Chess/applicationcomponent.js.map

@@ -1,6 +1,6 @@
 /// <reference path="typings/angular2/angular2.d.ts" />
 import {Component, View, NgFor, bootstrap, Query, QueryList} from 'angular2/angular2';
-import {Engine} from './engine/chessboard';
+import {ChessEngineAPI} from './engine/chessboardUI';
 import {PieceModule} from './engine/pieces'
 
 @Component({
@@ -12,7 +12,7 @@ import {PieceModule} from './engine/pieces'
 })
 export class CapturedPiecesComponent {
 
-    constructor(private chessboard:Engine.ChessboardUI) {}
+    constructor(private chessboard:ChessEngineAPI.ChessboardUI) {}
 
     capturedPiecesFilenames(): Array<string> {
       var sorted: Array<number>  = this.chessboard.capturedPieces.sort((n1,n2)=> this.isBefore(n1, n2))

Chess/applicationcomponent.ts

@@ -1,20 +1,20 @@
 .field {
   border: 1px solid black;
-  width:63px;height:63px;
+  width:53px;height:53px;
 }
 
 .selectedField {
   border: 2px solid blue;
-  width:62px;
-  height:62px;
+  width:52px;
+  height:52px;
   top:0px;
   position:relative;
 }
 
 .fieldInReach {
   border: 2px solid #64CE64;
-  width:62px;
-  height:62px;
+  width:52px;
+  height:52px;
   top:0px;
   position:relative;
 }

Chess/capturedpiecescomponent.js

@@ -1,7 +1,7 @@
 /// <reference path="typings/angular2/angular2.d.ts" />
 import {Component, View, NgFor, bootstrap, Query, QueryList} from 'angular2/angular2';
 import {FieldComponent} from './fieldcomponent';
-import {Engine} from './engine/chessboard';
+import {ChessEngineAPI} from './engine/chessboardUI';
 
 @Component({
     selector: 'chessboard'
@@ -12,9 +12,9 @@ import {Engine} from './engine/chessboard';
     templateUrl: 'ChessboardComponent.html'
 })
 export class ChessBoardComponent {
-    get board(): Engine.ChessboardUI { return this.chessboard }
+    get board(): ChessEngineAPI.ChessboardUI { return this.chessboard }
 
     get fields() { return this.board.fields }
 
-    constructor(private chessboard:Engine.ChessboardUI) {}
+    constructor(private chessboard:ChessEngineAPI.ChessboardUI) {}
 }