1.1 --- a/minesweeper/src/main/java/org/apidesign/demo/minesweeper/MinesModel.java	Fri Jun 27 15:36:48 2014 +0200
     1.2 +++ b/minesweeper/src/main/java/org/apidesign/demo/minesweeper/MinesModel.java	Fri Jun 27 16:14:57 2014 +0200
     1.3 @@ -44,6 +44,10 @@
     1.4          IN_PROGRESS, MARKING_MINE, WON, LOST;
     1.5      }
     1.6      
     1.7 +    @ComputedProperty static String gameStyle(GameState state) {
     1.8 +        return state == GameState.MARKING_MINE ? "MARKING" : null;
     1.9 +    }
    1.10 +    
    1.11      @Model(className = "Row", properties = {
    1.12          @Property(name = "columns", type = Square.class, array = true)
    1.13      })

     2.1 --- a/minesweeper/src/main/webapp/pages/index.html	Fri Jun 27 15:36:48 2014 +0200
     2.2 +++ b/minesweeper/src/main/webapp/pages/index.html	Fri Jun 27 16:14:57 2014 +0200
     2.3 @@ -71,7 +71,7 @@
     2.4  
     2.5          <script type="text/html" id="field">
     2.6            <center>
     2.7 -            <table class="field">
     2.8 +              <table class="field" data-bind="css: gameStyle">
     2.9                  <tbody>
    2.10                      <!-- ko foreach: rows -->
    2.11                      <tr>

     3.1 --- a/minesweeper/src/main/webapp/pages/mines.css	Fri Jun 27 15:36:48 2014 +0200
     3.2 +++ b/minesweeper/src/main/webapp/pages/mines.css	Fri Jun 27 16:14:57 2014 +0200
     3.3 @@ -51,6 +51,43 @@
     3.4      top: 0;
     3.5  }
     3.6  
     3.7 +@-moz-keyframes blinker {  
     3.8 +    0% { opacity: 0.9; }
     3.9 +    50% { opacity: 0.1; }
    3.10 +    100% { opacity: 0.9; }
    3.11 +}
    3.12 +
    3.13 +@-webkit-keyframes blinker {  
    3.14 +    0% { opacity: 0.9; }
    3.15 +    50% { opacity: 0.1; }
    3.16 +    100% { opacity: 0.9; }
    3.17 +}
    3.18 +
    3.19 +@keyframes blinker {  
    3.20 +    0% { opacity: 0.9; }
    3.21 +    50% { opacity: 0.1; }
    3.22 +    100% { opacity: 0.9; }
    3.23 +} 
    3.24 +table.MARKING td.UNKNOWN div:before {
    3.25 +    content: "\0026a0";
    3.26 +    color: #802420;
    3.27 +    
    3.28 +    -webkit-animation-name: blinker;
    3.29 +    -webkit-animation-duration: 3s;
    3.30 +    -webkit-animation-timing-function: linear;
    3.31 +    -webkit-animation-iteration-count: infinite;
    3.32 +
    3.33 +    -moz-animation-name: blinker;
    3.34 +    -moz-animation-duration: 3s;
    3.35 +    -moz-animation-timing-function: linear;
    3.36 +    -moz-animation-iteration-count: infinite;
    3.37 +
    3.38 +    animation-name: blinker;
    3.39 +    animation-duration: 3s;
    3.40 +    animation-timing-function: linear;
    3.41 +    animation-iteration-count: infinite;
    3.42 +}
    3.43 +
    3.44  table.field td.UNKNOWN {
    3.45      background-color: #D6E4E1;
    3.46      cursor: pointer;