randomness: this.options["randomness"],
         between: [{p1: 'k', p2: 'r'}],
         diffCol: ['b'],
-        flags: ['r', 'k']
+        flags: ['r']
       }
     );
     return {
       else
         this[arrName] = ArrayFun.init(this.size.x, this.size.y, null);
       if (arrName == "d_pieces")
-        this.marks.forEach(([i, j]) => addPiece(i, j, arrName, "mark"));
+        this.marks.forEach((m) => {
+          const formattedSquare =
+            (this.size.x - parseInt(m.substring(1), 10)).toString(36) +
+            (m.charCodeAt(0) - 97).toString(36);
+          const mCoords = V.SquareToCoords(formattedSquare);
+          addPiece(mCoords.x, mCoords.y, arrName, "mark");
+        });
     };
     if (this.marks)
       conditionalReset("d_pieces");
 
   padding: 0 10px;
   overflow: auto;
 }
+.full-rules figure.show-pieces {
+  max-width: 90%;
+  text-align: center;
+  margin: 0 auto;
+}
+.full-rules figure.show-pieces > img {
+  max-width: 100px;
+}
 .full-rules > div {
   margin-bottom: 20px;
 }
 .full-rules .right {
   float: right;
 }
+@media screen and (max-width: 550px) {
+  .full-rules .left {
+    float: none;
+    margin-bottom: 10px;
+  }
+  .full-rules .right {
+    float: none;
+    margin-top: 10px;
+  }
+}
 .full-rules figcaption {
   display: block;
   text-align: center;
 .chessboard {
   position: absolute;
   cursor: pointer;
-  min-width: 200px;
-  min-height: 200px;
 }
 piece {
   position: absolute;
 
 function getDiagSize(elt) {
   const baseWidth = Math.min(window.innerWidth, 800);
   let multFact = 1;
-  if (elt.classList.contains("left") || elt.classList.contains("right"))
-    multFact = 0.45;
+  if (elt.classList.contains("left") || elt.classList.contains("right")) {
+    if (baseWidth >= 551)
+      multFact = 0.45;
+    else
+      multFact = 0.7;
+  }
   else if (baseWidth > 630)
     multFact = 0.5;
   else
         element: "diag_" + i,
         fen: diagrams[i].dataset.fen,
         marks: diagrams[i].dataset.mks
-                 ? JSON.parse('[' + diagrams[i].dataset.mks + ']')
+                 ? diagrams[i].dataset.mks.split(',')
                  : undefined,
         color: diagrams[i].dataset.col || 'w',
         options: {},
 
         randomness: this.options["randomness"],
         between: [{p1: 'k', p2: 'r'}],
         diffCol: ['b'],
-        flags: ['r', 'k']
+        flags: ['r']
       }
     );
     let pawnLines = {
 
 
 <h3>The Colorbound Clobberers</h3>
 
-<figure class="showPieces text-center"><img src="/images/pieces/Cwda/bd.svg"/><img src="/images/pieces/Cwda/ww.svg"/><img src="/images/pieces/Cwda/bf.svg"/><img src="/images/pieces/Cwda/wc.svg"/></figure>
+<figure class="show-pieces"><img src="/pieces/Cwda/c_black_rook.svg"/><img src="/pieces/Cwda/c_white_knight.svg"/><img src="/pieces/Cwda/c_black_bishop.svg"/><img src="/pieces/Cwda/c_white_queen.svg"/></figure>
 
 <ul>
   <li>Rook = bishop + dabbabah = "bede" (D),</li>
 
 <figure>
   <div class="diag left"
-       data-fen='8/8/8/3D4/8/8/8/8 ...',
-       data-mks='a8,b7,c6,e4,f3,g2,h1,c4,b3,a2,e6,f7,g8,f5,d3,b5,d7'>
+       data-fen='8/8/8/3D4/8/8/8/8 w 0 {"armies":"CC","flags":"8888","enpassant":"-"}',
+       data-mks="a8,b7,c6,e4,f3,g2,h1,c4,b3,a2,e6,f7,g8,f5,d3,b5,d7">
   </div>
   <div class="diag right"
-       data-fen='8/8/8/4w3/8/8/8/8 ...',
+       data-fen='8/8/8/4w3/8/8/8/8 w 0 {"armies":"CC","flags":"8888","enpassant":"-"}',
        data-mks="e6,f5,e4,d5,c7,g7,g3,c3">
   </div>
   <figcaption>