static chessboard finished

Author: stephanrauh

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 *.xcodeproj
 .settings
+typings/

Chess/application.ts

@@ -1,4 +1,4 @@
-/// <reference path="../typings/angular2/angular2.d.ts" />
+/// <reference path="typings/angular2/angular2.d.ts" />
 /// <reference path="chessboard.ts" />
 import {Component, View, bootstrap} from 'angular2/angular2';
 import {ChessUI} from "./chessboard";

Chess/cheat.sheet

@@ -1,3 +1,7 @@
+
+npm install -g tsd@^0.6.0
+tsd install angular2 es6-promise rx rx-lite
+
 Compilation:
 - built-in with Visual Studio Code
 - built-in with Atom

Chess/chessboard.html

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

Chess/chessboard.js

@@ -1,20 +1,16 @@
-/// <reference path="../typings/angular2/angular2.d.ts" />
+/// <reference path="typings/angular2/angular2.d.ts" />
 /// <reference path="field.ts" />
 import {Component, View, NgFor, bootstrap} from 'angular2/angular2';
+import {FieldComponent} from './field';
 
 export module ChessUI {
   // Annotation section
   @Component({
     selector: 'chessboard'
   })
   @View({
-    directives: [NgFor],
-    template: '<div *ng-for="#row of fields; var rowindex=index" style="width: 630px; height: 68px; overflow: hidden;" >\
-                    <div *ng-for="#col of row; var colindex=index" style="position: relative; left: 0; top: 0; width: 68px; height: 68px; margin-right:-4px; display: inline-block" >\
-                         <div style="position: relative; top: 0; left: 0;"><img style="width:70px;height:70px" src="{{backgroundFileName(rowindex,colindex)}}" /></div>\
-                         <div style="position: absolute; top: 0px; left: 0px;"><img style="width:70px;height:70px" src="{{fileName(col)}}" /></div>\
-                    </div>\
-               </div>'
+    directives: [NgFor, FieldComponent],
+    templateUrl: 'chessboard.html'
   })
   // Component controller
   export class ChessBoardComponent {
@@ -37,7 +33,6 @@ export module ChessUI {
            return "wikimediaimages/b_empty.png"
         else
            return "wikimediaimages/w_empty.png"
-
       }
 
       private fileName(piece: number) {
@@ -57,10 +52,7 @@ export module ChessUI {
         return "wikimediaimages/" + prefix + pieceName + ".png";
       }
 
-
-
     constructor() {
-
     }
   }
 }

Chess/chessboard.js.map

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

Chess/chessboard.ts

@@ -1,30 +1,19 @@
-/// <reference path="../typings/angular2/angular2.d.ts" />
+/// <reference path="typings/angular2/angular2.d.ts" />
 import {Component, Attribute, View, NgFor, bootstrap} from 'angular2/angular2';
 
-
 // Annotation section
 @Component({
   selector: 'field',
-  properties: ['title: title','row: row']
+  properties: ['piece','row: row', 'col']
 })
 @View({
   directives: [NgFor],
-  template: '\
-      <div style="position: relative; left: 0; top: 0; width: 68px; height: 68px; margin-right:-4px; display: inline-block" >\
-           <div style="position: relative; top: 0; left: 0;">\
-                <img style="width:70px;height:70px" src="{{backgroundFileName(row,col)}}" />\
-           </div>\
-           <div style="position: absolute; top: 0px; left: 0px;">\
-                piece={{piece}}<img style="width:70px;height:70px" src="{{fileName(piece)}}" />\
-            </div>\
-     </div>'
+  templateUrl: 'field.html'
 })
-// Component controller
 export class FieldComponent {
-      title: string = "Hallo Welt"
       _row: string;
-      set row(val:string) {this._row=val; console.log("Setter!");}
-      get row(): string { console.log(this.title); console.log("getter!"); return this._row;}
+      set row(val:string) {this._row=val; }
+      get row(): string   {return this._row;}
       piece: string;
       col: string;
 
@@ -52,7 +41,3 @@ export class FieldComponent {
       return "wikimediaimages/" + prefix + pieceName + ".png";
     }
 }
-
-
-
-// bootstrap(Chess.ChessBoardComponent);

Chess/field.html

@@ -4,13 +4,11 @@
   <title>AngularJS 2.0 learns to play chess!</title>
   <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
   <script src="https://jspm.io/[email protected]"></script>
-  <script src="https://code.angularjs.org/2.0.0-alpha.35/angular2.dev.js"></script>
+  <script src="https://code.angularjs.org/2.0.0-alpha.36/angular2.dev.js"></script>
 </head>
   <body>
     <application>
     </application>
-    <script>System.import('chessboard');</script>
-    <!-- <script>System.import('field');</script> -->
     <script>System.import('application');</script>
   </body>
 </html>