2d miniboards & minimal DOM WIP

app/views/base/layout.scala.html

@@ -47,7 +47,6 @@ openGraph: Map[Symbol, String] = Map.empty)(body: Html)(implicit ctx: Context)
     ctx.pref.highlight ?? "highlight",
     ctx.pref.destination ?? "destination",
     ctx.blindMode ?? "blind_mode",
-    if (ctx.is3d) "is3d" else "is2d",
     "coords_" + ctx.pref.coords).mkString(" ")"
     data-sound-dir="@routes.Assets.at("sound")"
     data-ports="@portsString"
@@ -205,7 +204,7 @@ openGraph: Map[Symbol, String] = Map.empty)(body: Html)(implicit ctx: Context)
       }
       }
     </div>
-    <div class="content">
+    <div class="content @ctx.is3d.fold("is3d", "is2d")">
       <div id="site_header">
         @ctx.me.map { me =>
         <div id="notifications">@notifications(me)</div>

public/javascripts/common.js

@@ -12,11 +12,12 @@ function parseFen($elem) {
     var config = {
       coordinates: false,
       viewOnly: !playable,
+      minimalDom: true,
       fen: $this.data('fen'),
       lastMove: lm ? [lm[0] + lm[1], lm[2] + lm[3]] : null
     };
     if (color) config.orientation = color;
     if (ground) ground.set(config);
-    else $this.data('chessground', Chessground($this[0], config));
+    else $this.addClass('is2d').data('chessground', Chessground($this[0], config));
   });
 }

public/stylesheets/chessground.css

@@ -11,9 +11,7 @@ body.is3d .cg-512 .cg-board-wrap {
   height: 479.08572px;
 }
 .cg-board {
-  position: absolute;
-  left: 0;
-  top: 0;
+  position: relative;
   width: 100%;
   height: 100%;
   -webkit-user-select: none;
@@ -132,7 +130,7 @@ body.base .cg-board .cg-square.current-premove {
   height: 100%;
   background-size: cover;
   position: absolute;
-  top: 0;
+  bottom: 0;
   left: 0;
   transform: translate3d(0,0,0);
   -webkit-transform: translate3d(0,0,0);
@@ -166,3 +164,23 @@ body.is3d .cg-piece {
 body.is3d .cg-piece.ghost {
   opacity: 0.4;
 }
+
+/* minimal dom overrides */
+
+.minimal-dom .cg-piece {
+  position: absolute;
+  width: 12.5%;
+  height: 12.5%;
+}
+body.is3d .minimal-dom .cg-board {
+  top: 0;
+  height: 100%;
+}
+body.is3d .minimal-dom .cg-piece {
+  /* original size:
+     width: 140.625%;
+     height: 179.6875%; */
+  /* size on 3D board, with height/width = 90.78571% */
+  width: 100%;
+  height: 100%;
+}

public/stylesheets/common.css

@@ -1743,10 +1743,6 @@ a.mini_board {
   height: 224px;
   position: relative;
 }
-body.is3d .mini_board .cg-board-wrap {
-  margin-top: 8px;
-  height: 209.6px;
-}
 #now_playing {
   margin: 4px 0 0 4px;
   overflow: hidden;
@@ -1786,10 +1782,6 @@ body.is3d .mini_board .cg-board-wrap {
   width: 160px;
   height: 160px;
 }
-body.is3d #now_playing .mini_board .cg-board-wrap {
-  margin-top: 6px;
-  height: 149.7px;
-}
 /* opening.css */
 
 div.game_config button {