Fix 3D coordinate training, closes #4069

app/views/coordinate/home.scala.html

@@ -62,9 +62,8 @@ zoomable = true) {
     </form>
   </div>
   <div class="board_and_ground">
-    <div class="boards">
-      <div class="white board cg-512"></div>
-      <div class="black board cg-512"></div>
+    <div class="boards cg-512">
+      <div class="cg-board-wrap"></div>
     </div>
     <div class="right">
       <div class="explanation">

public/javascripts/coordinate.js

@@ -1,7 +1,7 @@
 $(function() {
   $('#trainer').each(function() {
     var $trainer = $(this);
-    var $board = $trainer.find('.board');
+    var $board = $trainer.find('.cg-board-wrap');
     var ground;
     var $side = $trainer.find('.side');
     var $right = $trainer.find('.board_and_ground > .right');
@@ -30,7 +30,8 @@ $(function() {
           free: false,
           color: null
         },
-        orientation: color
+        orientation: color,
+        addPieceZIndex: $('#top').hasClass('is3d')
       });
       else if (color !== ground.state.orientation) ground.toggleOrientation();
       $trainer.removeClass('white black').addClass(color);

public/stylesheets/coordinate.css

@@ -92,6 +92,9 @@ form.color .color_3 i {
   width: 514px;
   height: 10px;
 }
+.is3d #trainer .progress_bar_container {
+  margin-top: 20px;
+}
 #trainer .progress_bar {
   width: 100%;
   height: 10px;