Assign the style to the table cell minesweeper
authorJaroslav Tulach <jtulach@netbeans.org>
Fri, 07 Feb 2014 15:40:56 +0100
branchminesweeper
changeset 658e31706fc5da
parent 64 3a82f9e6eddd
child 66 9cf895cde4bd
Assign the style to the table cell
minesweeper/src/main/java/org/apidesign/demo/minesweeper/MinesModel.java
minesweeper/src/main/webapp/pages/index.html
minesweeper/src/main/webapp/pages/mines.css
     1.1 --- a/minesweeper/src/main/java/org/apidesign/demo/minesweeper/MinesModel.java	Fri Feb 07 15:21:54 2014 +0100
     1.2 +++ b/minesweeper/src/main/java/org/apidesign/demo/minesweeper/MinesModel.java	Fri Feb 07 15:40:56 2014 +0100
     1.3 @@ -63,6 +63,10 @@
     1.4              }
     1.5              return "" + state.ordinal();
     1.6          }
     1.7 +        
     1.8 +        @ComputedProperty static String style(SquareType state) {
     1.9 +            return state == null ? null : state.toString();
    1.10 +        }
    1.11      }
    1.12      
    1.13      enum SquareType {
     2.1 --- a/minesweeper/src/main/webapp/pages/index.html	Fri Feb 07 15:21:54 2014 +0100
     2.2 +++ b/minesweeper/src/main/webapp/pages/index.html	Fri Feb 07 15:40:56 2014 +0100
     2.3 @@ -41,8 +41,8 @@
     2.4                  <!-- ko foreach: rows -->
     2.5                  <tr>
     2.6                      <!-- ko foreach: columns -->
     2.7 -                    <td data-bind="click: $parents[1].click" >
     2.8 -                        <span data-bind='css: state, text: text'></span>
     2.9 +                    <td data-bind="css: style, click: $parents[1].click" >
    2.10 +                        <span data-bind='text: text'></span>
    2.11                      </td>
    2.12                      <!-- /ko -->
    2.13                  </tr>
     3.1 --- a/minesweeper/src/main/webapp/pages/mines.css	Fri Feb 07 15:21:54 2014 +0100
     3.2 +++ b/minesweeper/src/main/webapp/pages/mines.css	Fri Feb 07 15:40:56 2014 +0100
     3.3 @@ -44,15 +44,12 @@
     3.4      margin:10px;
     3.5  }
     3.6  
     3.7 -table.field td span.UNKNOWN {
     3.8 +table.field td.UNKNOWN {
     3.9      background-color: #D0D0D0;
    3.10      cursor: pointer;
    3.11  }
    3.12 -table.field td span.N_0 {
    3.13 -    background-color: #A0A0A0;
    3.14 -}
    3.15 -table.field td span.MINE {
    3.16 -    background-color: #bce8f1;
    3.17 +table.field td.MINE {
    3.18 +    background-color: #f1100c;
    3.19  }
    3.20  .but-orientation {
    3.21      margin-top:20px;