fancify the coordinate trainer UI

app/views/coordinate/home.scala.html

@@ -24,6 +24,8 @@ themepicker = true) {
     <div class="white">@board.white()</div>
     <div class="black">@board.black()</div>
   </div>
+  <div id="next_coord"></div>
+  <div class="score_container"><strong class="score">0</strong></div>
   <div class="side">
     <div class="box">
       <h1>@trans.training()</h1>
@@ -68,10 +70,8 @@ themepicker = true) {
       <p>A square name appears next to the board and you must click on the correct square.</p>
       <p>You have 30 seconds to recognize as many squares as possible!</p>
     </div>
-    <div class="coord"></div>
     <button class="start button">@trans.startTraining()</button>
   </div>
   <div class="progress_bar_container"><div class="progress_bar"></div></div>
-  <div class="score_container"><strong class="score">0</strong></div>
 </div>
 }

public/javascripts/coordinate.js

@@ -5,14 +5,13 @@ $(function() {
     var $side = $trainer.find('> .side');
     var $right = $trainer.find('> .right');
     var $bar = $trainer.find('.progress_bar');
-    var $coord = $right.find('.coord');
+    var $coord = $trainer.find('#next_coord').disableSelection();
     var $start = $right.find('.start');
     var $explanation = $right.find('.explanation');
-    var $scoreCont = $trainer.find('.score_container');
-    var $score = $scoreCont.find('strong');
+    var $score = $trainer.find('.score_container strong');
     var scoreUrl = $trainer.data('score-url');
     var colorUrl = $trainer.data('color-url');
-    var duration = 30 * 1000;
+    var duration = 10 * 1000;
     var tickDelay = 50;
     var colorPref = $trainer.data('color-pref');
     var color;
@@ -99,15 +98,18 @@ $(function() {
       else stop();
     };
 
+    $score.click(function() {
+      $start.filter(':visible').click();
+    });
+
     $start.click(function() {
       $explanation.remove();
-      $trainer.addClass('play');
+      $trainer.addClass('play').removeClass('init');
       showColor();
-      $coord.text('--');
+      $coord.text('');
       centerRight();
       score = 0;
       $score.text(score);
-      $scoreCont.show();
       $bar.css('width', 0);
       setTimeout(function() {
         startAt = new Date();

public/stylesheets/coordinate.css

@@ -21,14 +21,26 @@
   background-color: #759900;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12) inset;
 }
-#trainer .coord {
-  font-size: 120px;
+#trainer #next_coord {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 514px;
+  height: 514px;
+  line-height: 512px;
+  text-align: center;
+  font-size: 150px;
   font-family: monospace;
+  font-weight: bold;
   text-transform: uppercase;
   opacity: 1;
+  pointer-events:none;
+  color: #fff;
+  text-shadow: 0 10px 10px #444;
+  opacity: 0.7;
   animate: opacity 0.1s linear;
 }
-#trainer .coord.nope {
+#trainer #next_coord.nope {
   opacity: 0;
 }
 #trainer .explanation {
@@ -43,31 +55,48 @@
 #trainer .start {
   font-size: 30px;
 }
-#trainer .score_container {
+#trainer .score {
+  position: absolute;
+  top: 202px;
+  left: 202px;
   width: 512px;
-  text-align: center;
-}
-#trainer strong.score {
   font-family: monospace;
   font-size: 70px;
   display: block;
   margin: auto;
   width: 110px;
   height: 110px;
+  text-align: center;
   line-height: 110px;
   color: #fff;
   background-color: #759900;
+  transition: all 1s;
+  opacity: 1;
+  box-shadow: 0 0 10px #fff;
+  border-radius: 3px;
+  transform: rotate(360deg);
+  -webkit-transform: rotate(360deg);
+  cursor: pointer;
+}
+#trainer.init .score {
+  opacity: 0;
+}
+#trainer.play .score {
+  opacity: 1;
+  top: 550px;
+  box-shadow: 0 0 1px #fff;
   border-radius: 100px;
+  transform: rotate(0deg);
+  -webkit-transform: rotate(0deg);
 }
 #trainer.wrong .progress_bar, #trainer.wrong strong.score {
   background-color: #ac524f;
 }
 #trainer.play .start,
-#trainer .coord,
-#trainer .score_container,
+#trainer #next_coord,
 #trainer.play form.color {
   display: none;
 }
-#trainer.play .coord {
+#trainer.play #next_coord {
   display: block;
 }