1.1 --- a/chess/src/main/java/org/apidesign/html/demo/chess/BoardModel.java Thu Jul 25 15:09:49 2013 +0200
1.2 +++ b/chess/src/main/java/org/apidesign/html/demo/chess/BoardModel.java Thu Jul 25 15:57:52 2013 +0200
1.3 @@ -23,6 +23,7 @@
1.4 */
1.5 package org.apidesign.html.demo.chess;
1.6
1.7 +import java.util.Locale;
1.8 import net.java.html.json.ComputedProperty;
1.9 import net.java.html.json.Function;
1.10 import net.java.html.json.Model;
1.11 @@ -39,7 +40,27 @@
1.12 }
1.13
1.14 enum PieceType {
1.15 - PAWN, ROCK, KNIGHT, BISHOP, QUEEN, KING;
1.16 + PAWN(5), ROCK(2), KNIGHT(4), BISHOP(3), QUEEN(1), KING(0);
1.17 +
1.18 + final int entityIndex;
1.19 +
1.20 + PieceType(int ei) {
1.21 + this.entityIndex = ei;
1.22 + }
1.23 +
1.24 + String computeEntity(ColorType color) {
1.25 + if (color == null) {
1.26 + color = ColorType.WHITE;
1.27 + }
1.28 + int base;
1.29 + switch (color) {
1.30 + case WHITE: base = 12; break;
1.31 + case BLACK: base = 18; break;
1.32 + default:
1.33 + throw new AssertionError();
1.34 + }
1.35 + return "b" + String.valueOf(base + entityIndex) + ";";
1.36 + }
1.37 }
1.38 enum ColorType {
1.39 WHITE, BLACK;
1.40 @@ -57,14 +78,21 @@
1.41 s.setPiece(PieceType.PAWN);
1.42 }
1.43
1.44 - @ComputedProperty static String imageURL(PieceType piece) {
1.45 + @ComputedProperty static String pieceEntity(
1.46 + PieceType piece, ColorType pieceColor
1.47 + ) {
1.48 if (piece == null) {
1.49 return "";
1.50 }
1.51 - if (piece == PieceType.BISHOP) {
1.52 - return "bishop.png";
1.53 + return piece.computeEntity(pieceColor);
1.54 + }
1.55 +
1.56 + @ComputedProperty static String squareColor(ColorType color) {
1.57 + if (color == null) {
1.58 + return "";
1.59 + } else {
1.60 + return color.toString().toLowerCase(Locale.US);
1.61 }
1.62 - return "knight.jpg";
1.63 }
1.64 }
1.65
1.66 @@ -82,7 +110,7 @@
1.67 Square s = new Square();
1.68 s.setX(j);
1.69 s.setY(i);
1.70 - s.setColor((i + j) % 2 == 0 ? ColorType.WHITE : ColorType.BLACK);
1.71 + s.setColor((i + j) % 2 == 1 ? ColorType.WHITE : ColorType.BLACK);
1.72 r.getColumns().add(s);
1.73 if (i == 2) {
1.74 s.setPiece(PieceType.PAWN);
1.75 @@ -91,7 +119,7 @@
1.76 s.setPiece(PieceType.PAWN);
1.77 s.setPieceColor(ColorType.BLACK);
1.78 } else if (i == 8 || i == 1) {
1.79 - s.setColor(i == 1 ? ColorType.WHITE : ColorType.BLACK);
1.80 + s.setPieceColor(i == 1 ? ColorType.WHITE : ColorType.BLACK);
1.81 PieceType t;
1.82 switch (j) {
1.83 case 'A': case 'H': t = PieceType.ROCK; break;
2.1 --- a/chess/src/main/web/pages/index.html Thu Jul 25 15:09:49 2013 +0200
2.2 +++ b/chess/src/main/web/pages/index.html Thu Jul 25 15:57:52 2013 +0200
2.3 @@ -64,86 +64,15 @@
2.4 <div class="span9">
2.5 <h1>My game</h1>
2.6 <table class="board">
2.7 - <tr>
2.8 - <td class="white"><span class="figure">♖</span></td>
2.9 - <td class="black"><span class="figure">♘</span></td>
2.10 - <td class="white"><span class="figure">♗</span></td>
2.11 - <td class="black"><span class="figure">♕</span></td>
2.12 - <td class="white"><span class="figure">♔</span></td>
2.13 - <td class="black"><span class="figure">♗</span></td>
2.14 - <td class="white"><span class="figure">♘</span></td>
2.15 - <td class="black"><span class="figure">♖</span></td>
2.16 - </tr>
2.17 - <tr>
2.18 - <td class="black"><span class="figure">♙</span></td>
2.19 - <td class="white"><span class="figure">♙</span></td>
2.20 - <td class="black"><span class="figure">♙</span></td>
2.21 - <td class="white"><span class="figure">♙</span></td>
2.22 - <td class="black"><span class="figure">♙</span></td>
2.23 - <td class="white"><span class="figure">♙</span></td>
2.24 - <td class="black"><span class="figure">♙</span></td>
2.25 - <td class="white"><span class="figure">♙</span></td>
2.26 - </tr>
2.27 - <tr>
2.28 - <td class="white snap"></td>
2.29 - <td class="black"></td>
2.30 - <td class="white"></td>
2.31 - <td class="black"></td>
2.32 - <td class="white"></td>
2.33 - <td class="black"></td>
2.34 - <td class="white"></td>
2.35 - <td class="black"></td>
2.36 - </tr>
2.37 - <tr>
2.38 - <td class="black"></td>
2.39 - <td class="white"></td>
2.40 - <td class="black"></td>
2.41 - <td class="white"></td>
2.42 - <td class="black"></td>
2.43 - <td class="white"></td>
2.44 - <td class="black"></td>
2.45 - <td class="white"></td>
2.46 - </tr>
2.47 - <tr>
2.48 - <td class="white"></td>
2.49 - <td class="black"></td>
2.50 - <td class="white"></td>
2.51 - <td class="black"></td>
2.52 - <td class="white"></td>
2.53 - <td class="black"></td>
2.54 - <td class="white"></td>
2.55 - <td class="black"></td>
2.56 - </tr>
2.57 - <tr>
2.58 - <td class="black"></td>
2.59 - <td class="white"></td>
2.60 - <td class="black"></td>
2.61 - <td class="white"></td>
2.62 - <td class="black"></td>
2.63 - <td class="white"></td>
2.64 - <td class="black"></td>
2.65 - <td class="white"></td>
2.66 - </tr>
2.67 - <tr>
2.68 - <td class="white"><span class="figure">♟</span></td>
2.69 - <td class="black"><span class="figure">♟</span></td>
2.70 - <td class="white"><span class="figure">♟</span></td>
2.71 - <td class="black"><span class="figure">♟</span></td>
2.72 - <td class="white"><span class="figure">♟</span></td>
2.73 - <td class="black"><span class="figure">♟</span></td>
2.74 - <td class="white"><span class="figure">♟</span></td>
2.75 - <td class="black"><span class="figure">♟</span></td>
2.76 - </tr>
2.77 - <tr>
2.78 - <td class="black"><span class="figure">♜</span></td>
2.79 - <td class="white"><span class="figure">♞</span></td>
2.80 - <td class="black"><span class="figure">♝</span></td>
2.81 - <td class="white"><span class="figure">♛</span></td>
2.82 - <td class="black"><span class="figure">♚</span></td>
2.83 - <td class="white"><span class="figure">♝</span></td>
2.84 - <td class="black"><span class="figure">♞</span></td>
2.85 - <td class="white"><span class="figure">♜</span></td>
2.86 - </tr>
2.87 + <tbody data-bind="foreach: rows">
2.88 + <tr >
2.89 + <!-- ko foreach: columns -->
2.90 + <td data-bind="click: changeToPawn, css: squareColor" >
2.91 + <span data-bind='html: pieceEntity'></span>
2.92 + </td>
2.93 + <!-- /ko -->
2.94 + </tr>
2.95 + </tbody>
2.96 </table>
2.97 </div>
2.98 <div class="span2 offset1">