# HG changeset patch
# User Jaroslav Tulach <jaroslav.tulach@apidesign.org>
# Date 1403878497 -7200
# Node ID e6667c8206fc75aeeb3ed2e81f27b6debbde4304
# Parent  276db4d4d7953b021537983b851a929415d1ddb9
Indicate the mine selection mode by blinking the danger sign on all undiscovered squares

diff -r 276db4d4d795 -r e6667c8206fc minesweeper/src/main/java/org/apidesign/demo/minesweeper/MinesModel.java
--- a/minesweeper/src/main/java/org/apidesign/demo/minesweeper/MinesModel.java	Fri Jun 27 15:36:48 2014 +0200
+++ b/minesweeper/src/main/java/org/apidesign/demo/minesweeper/MinesModel.java	Fri Jun 27 16:14:57 2014 +0200
@@ -44,6 +44,10 @@
         IN_PROGRESS, MARKING_MINE, WON, LOST;
     }
     
+    @ComputedProperty static String gameStyle(GameState state) {
+        return state == GameState.MARKING_MINE ? "MARKING" : null;
+    }
+    
     @Model(className = "Row", properties = {
         @Property(name = "columns", type = Square.class, array = true)
     })
diff -r 276db4d4d795 -r e6667c8206fc minesweeper/src/main/webapp/pages/index.html
--- a/minesweeper/src/main/webapp/pages/index.html	Fri Jun 27 15:36:48 2014 +0200
+++ b/minesweeper/src/main/webapp/pages/index.html	Fri Jun 27 16:14:57 2014 +0200
@@ -71,7 +71,7 @@
 
         <script type="text/html" id="field">
           <center>
-            <table class="field">
+              <table class="field" data-bind="css: gameStyle">
                 <tbody>
                     <!-- ko foreach: rows -->
                     <tr>
diff -r 276db4d4d795 -r e6667c8206fc minesweeper/src/main/webapp/pages/mines.css
--- a/minesweeper/src/main/webapp/pages/mines.css	Fri Jun 27 15:36:48 2014 +0200
+++ b/minesweeper/src/main/webapp/pages/mines.css	Fri Jun 27 16:14:57 2014 +0200
@@ -51,6 +51,43 @@
     top: 0;
 }
 
+@-moz-keyframes blinker {  
+    0% { opacity: 0.9; }
+    50% { opacity: 0.1; }
+    100% { opacity: 0.9; }
+}
+
+@-webkit-keyframes blinker {  
+    0% { opacity: 0.9; }
+    50% { opacity: 0.1; }
+    100% { opacity: 0.9; }
+}
+
+@keyframes blinker {  
+    0% { opacity: 0.9; }
+    50% { opacity: 0.1; }
+    100% { opacity: 0.9; }
+} 
+table.MARKING td.UNKNOWN div:before {
+    content: "\0026a0";
+    color: #802420;
+    
+    -webkit-animation-name: blinker;
+    -webkit-animation-duration: 3s;
+    -webkit-animation-timing-function: linear;
+    -webkit-animation-iteration-count: infinite;
+
+    -moz-animation-name: blinker;
+    -moz-animation-duration: 3s;
+    -moz-animation-timing-function: linear;
+    -moz-animation-iteration-count: infinite;
+
+    animation-name: blinker;
+    animation-duration: 3s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+}
+
 table.field td.UNKNOWN {
     background-color: #D6E4E1;
     cursor: pointer;