on the way to checking which moves are possible

Author: stephanrauh

Chess/ApplicationComponent.html

@@ -1,4 +1,37 @@
-<h1>AngularJS 2.0 plays Chess!</h1>
+<div class="container">
+  <div class="row">
+    <div class="col-md-12">
+      <h1>AngularJS 2.0 plays Chess!</h1>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-8">
+      <div class="panel panel-primary">
+        <div class="panel-heading">
+          <h3 class="panel-title">{{title}}</h3>
+        </div>
+        <div class="panel-body">
+          <div class="row">
+            <div class="col-md-10">
+              <chessboard></chessboard>
+            </div>
+            <div class="col-md-2">
+              <captured-pieces />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
 
-
-<chessboard></chessboard>
+    <div class="col-md-4">
+      <div class="panel panel-primary">
+        <div class="panel-heading">
+          <h3 class="panel-title">History</h3>
+        </div>
+        <div class="panel-body">
+          <history></history>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

Chess/CapturedPiecesComponent.html

@@ -0,0 +1,2 @@
+<img src="wikimediaimages/w_pawn.png" style="height:68px; width:68px" />
+<img src="wikimediaimages/w_bishop.png" style="height:68px; width:68px" />

Chess/FieldComponent.html

@@ -1,4 +1,4 @@
-<div style="position: relative; left: 0px; top: 0px; width: 70px; height: 70px;margin-right:-4px; display: inline-block" >
+<div style="position: relative; left: 0px; top: 0px; width: 70px; height: 70px;margin-right:-6px; margin-bottom:-1px; display: inline-block" >
   <div style="position: relative; top: 0px; left: 0px" >
         <img class="{{borderClass(row,col)}}" src="{{backgroundFileName(row,col)}}" />
   </div>

Chess/HistoryComponent.html

@@ -0,0 +1 @@
+In a future version, this will show the move history.

Chess/applicationcomponent.js

@@ -2,7 +2,9 @@
 /// <reference path="chessboard.ts" />
 import {Component, View, bootstrap} from 'angular2/angular2';
 import {ChessBoardComponent} from "./chessboardcomponent";
+import {CapturedPiecesComponent} from './capturedpiecescomponent';
 import {Engine} from "./engine/chessboard";
+import {HistoryComponent} from './historycomponent';
 
 // Annotation section
 @Component({
@@ -11,10 +13,13 @@ import {Engine} from "./engine/chessboard";
 })
 @View({
     templateUrl: 'ApplicationComponent.html',
-    directives: [ChessBoardComponent]
+    directives: [ChessBoardComponent, HistoryComponent, CapturedPiecesComponent]
 })
 // Component controller
 class ApplicationComponent {
+  constructor(private chessboard:Engine.ChessboardUI) {}
+
+  public get title(): String { return this.chessboard.isWhitePlaying?"White move":"Black move"}
 }
 
 bootstrap(ApplicationComponent);

Chess/applicationcomponent.js.map

@@ -0,0 +1,14 @@
+/// <reference path="typings/angular2/angular2.d.ts" />
+import {Component, View, NgFor, bootstrap, Query, QueryList} from 'angular2/angular2';
+import {Engine} from './engine/chessboard';
+
+@Component({
+    selector: 'captured-pieces'
+})
+@View({
+    directives: [NgFor],
+    templateUrl: 'CapturedPiecesComponent.html'
+})
+export class CapturedPiecesComponent {
+    constructor(private chessboard:Engine.ChessboardUI) { console.log("Cap  ")}
+}

Chess/applicationcomponent.ts

@@ -64,6 +64,7 @@ EmberJS vs. Backbone.js vs. Angular:
 Atom:
   install package atomatigit for full GIT support (open the panel by hitting cmd-alt-g)
   install atom-typescript
+  install atom-beautify (optional)
 
 Error messages:
   "The selector "chessboard" did not match any elements" means that the HTML file doesn't contain a widget corresponding to the
@@ -75,6 +76,10 @@ Dependency Injection:
       add the service implementation class to the app's list of component bindings,
       and add the service to the parameter list of the component that needs the service.
 
+Everything is a tree!
+  * You always have to define the component you want to use as child components in the parent component. Otherwise,
+    they simply won't be rendered. More precisely, their source code or pseudo tag will be rendered.
+
 Links:
   http://www.angular2.com/
   https://github.com/stephanrauh/ExploringAngular

Chess/capturedpiecescomponent.js

@@ -1,11 +1,11 @@
 .field {
   border: 1px solid black;
-  width:68px;height:68px;
+  width:69px;height:69px;
 }
 
 .selectedField { border: 2px solid red;
-  width:66px;
-  height:64px;
-  top:-2px;
+  width:68px;
+  height:68px;
+  top:0px;
   position:relative;
 }