improve coordinate trainer

app/templating/TeamHelper.scala

@@ -22,8 +22,9 @@ trait TeamHelper {
     val klass = cssClass.??(c => s""" class="$c"""")
     val href = routes.Team.show(id)
     val content = teamIdToName(id)
-    val icon = if(withIcon) """data-icon="f"""" else ""
-    s"""<a $icon $klass href="$href">&nbsp;$content</a>"""
+    val icon = if (withIcon) """data-icon="f"""" else ""
+    val space = if (withIcon) "&nbsp;" else ""
+    s"""<a $icon $klass href="$href">$space$content</a>"""
   }
 
   def teamForumUrl(id: String) = routes.ForumCateg.show("team-" + id)

app/views/coordinate/home.scala.html

@@ -31,22 +31,43 @@ themepicker = true) {
         <a href="@routes.Puzzle.home()" class="button">@trans.puzzles()</a>
         <a href="@routes.Coordinate.home()" class="button active">@trans.coordinates()</a>
       </div>
+      @if(ctx.isAuth) {
       @scoreOption.map { score =>
       <div class="scores">
         @scoreCharts(score)
       </div>
       }
+      } else {
+      <div class="register">
+        <p>@trans.toTrackYourProgress()</p>
+        <p class="signup">
+          <a class="button" href="@routes.Auth.signup">@trans.signUp()</a>
+        </p>
+      </div>
+      }
     </div>
     <form class="color buttons" action="@routes.Coordinate.color" method="POST">
       @lila.pref.Pref.Color.choices.map {
       case (id, name) => {
-      <button type="submit" name="color" value="@id"
-        @if(id == ctx.pref.coordColor) { class="ui-state-active" disabled }>@name</button>
+      <input type="radio" id="coord_color_@id" name="coord_color" value="@id"
+      @(if(id == ctx.pref.coordColor) "checked" else "") />
+      <label for="coord_color_@id">@name</label>
       }
       }
     </form>
   </div>
   <div class="right">
+    <div class="explanation">
+      <p>Knowing the chessboard coordinates is a very important chess skill:</p>
+      <ul>
+        <li>Most chess courses and exercises use the algebraic notation extensively.</li>
+        <li>It makes it easier to talk to your chess friends, since you both understand the “language of chess.”</li>
+        <li>You can analyse a game more effectively if you don’t need to search for square names.</li>
+      </ul>
+      <br />
+      <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 much squares as possible!</p>
+    </div>
     <div class="coord"></div>
     <button class="start button">@trans.startTraining()</button>
   </div>

app/views/puzzle/playMode.scala.html

@@ -32,7 +32,6 @@
   <div class="right">
     <div class="lichess_table onbg">
       <div class="table_inner">
-
         <div class="lichess_current_player">
           <div class="lichess_player white @puzzle.color.black.fold("", " none")">
             <div class="piece king white"></div>
@@ -43,6 +42,7 @@
             <p>@puzzle.color.black.fold(trans.yourTurn(), trans.waiting())</p>
           </div>
         </div>
+        <p class="findit">@puzzle.color.fold(trans.findTheBestMoveForWhite(), trans.findTheBestMoveForBlack())</p>
         <div class="lichess_control">
           <a class="giveup button">@trans.giveUp()</a>
         </div>

app/views/puzzle/trainingBox.scala.html

@@ -14,15 +14,13 @@
   </div>
   }
   }.getOrElse {
-  @if(isPlay) {
-  <p>@puzzle.color.fold(trans.findTheBestMoveForWhite(), trans.findTheBestMoveForBlack())</p>
-  } else {
-  <p>@trans.toTrackYourProgress()</p>
-  <p class="signup">
-    <a class="button" href="@routes.Auth.signup">@trans.signUp()</a>
-  </p>
-  <p>@trans.trainingSignupExplanation()</p>
-  }
+  <div class="register">
+    <p>@trans.toTrackYourProgress()</p>
+    <p class="signup">
+      <a class="button" href="@routes.Auth.signup">@trans.signUp()</a>
+    </p>
+    <p>@trans.trainingSignupExplanation()</p>
+  </div>
   }
 </div>
 

public/javascripts/coordinate.js

@@ -7,6 +7,7 @@ $(function() {
     var $bar = $trainer.find('.progress_bar');
     var $coord = $right.find('.coord');
     var $start = $right.find('.start');
+    var $explanation = $right.find('.explanation');
     var $scoreCont = $trainer.find('.score_container');
     var $score = $scoreCont.find('strong');
     var scoreUrl = $trainer.data('score-url');
@@ -25,23 +26,20 @@ $(function() {
     };
     showColor();
 
-    $trainer.find('form.color').on('click', 'button', function() {
-      colorPref = {
+    $trainer.find('form.color').on('click', 'input', function() {
+      var c = {
         1: 'white',
         2: 'random',
         3: 'black'
       }[$(this).val()];
-      if (colorUrl) $.ajax({
+      if (colorUrl && c != colorPref) $.ajax({
         url: colorUrl,
         method: 'post',
         data: {
           color: $(this).val()
         }
       });
-      $(this).siblings()
-        .removeClass('ui-state-active').attr('disabled', false).end()
-        .addClass('ui-state-active').attr('disabled', true)
-        .parent().buttonset();
+      colorPref = c;
       showColor();
       return false;
     });
@@ -102,6 +100,7 @@ $(function() {
     };
 
     $start.click(function() {
+      $explanation.remove();
       $trainer.addClass('play');
       showColor();
       $coord.text('--');

public/stylesheets/coordinate.css

@@ -26,6 +26,15 @@
   font-family: monospace;
   text-transform: uppercase;
 }
+#trainer .explanation {
+  text-align: justify;
+  margin-bottom: 20px;
+}
+#trainer .explanation li {
+  list-style: inside disc;
+  margin-top: 1em;
+}
+
 #trainer .start {
   font-size: 30px;
 }

public/stylesheets/dark.css

@@ -28,7 +28,7 @@ body.dark #crosstable td {
 }
 body.dark #reconnecting,
 body.dark #chessboard .board-b72b1,
-body.dark #trainer .lichess_board {
+body.dark #trainer .lichess_board,
 body.dark .mini_board,
 body.dark #nb_connected_players,
 body.dark #chat div.top,

public/stylesheets/puzzle.css

@@ -1,7 +1,3 @@
-#puzzle > .side .signup {
-  margin: 1em auto;
-  text-align: center;
-}
 #puzzle > .side div.comment {
   padding: 10px 5px;
   text-align: center;
@@ -66,6 +62,10 @@
 #puzzle > .right .please_vote.thanks .then {
   display: block;
 }
+#puzzle > .right .findit {
+  display: block;
+  margin: 1em 0 2em 0;
+}
 #puzzle > .right .lichess_control {
   text-align: center;
   font-size: 1.3em;

public/stylesheets/training.css

@@ -37,6 +37,13 @@ div.training > .side div.box {
 div.training div.box > p, div.training div.box > div {
   line-height: 1.8em;
 }
+div.training > .side .register {
+  margin-top: 1em;
+}
+div.training > .side .register .signup {
+  margin: 1em auto;
+  text-align: center;
+}
 
 div.training > .side .user_chart {
   margin: 0 0 -10px -9px;