From: Benjamin Auder <benjamin.auder@somewhere>
Date: Sat, 14 Mar 2020 23:05:22 +0000 (+0100)
Subject: Draft Eightpieces rules. Fix display: PNG images + promotions on 2 lines
X-Git-Url: https://git.auder.net/variants/Baroque/current/%7B%7B%20asset%28%27mixstore/images/favicon.png%27%29%20%7D%7D?a=commitdiff_plain;h=14edde727da93d5b51dfd4dcd34472dca55a35c2;p=vchess.git

Draft Eightpieces rules. Fix display: PNG images + promotions on 2 lines
---

diff --git a/client/public/images/pieces/Eightpieces/bc.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/bc.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/bc.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/bc.svg
diff --git a/client/public/images/pieces/Eightpieces/bd.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/bd.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/bd.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/bd.svg
diff --git a/client/public/images/pieces/Eightpieces/be.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/be.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/be.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/be.svg
diff --git a/client/public/images/pieces/Eightpieces/bf.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/bf.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/bf.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/bf.svg
diff --git a/client/public/images/pieces/Eightpieces/bg.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/bg.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/bg.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/bg.svg
diff --git a/client/public/images/pieces/Eightpieces/bh.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/bh.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/bh.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/bh.svg
diff --git a/client/public/images/pieces/Eightpieces/bj.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/bj.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/bj.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/bj.svg
diff --git a/client/public/images/pieces/Eightpieces/bm.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/bm.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/bm.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/bm.svg
diff --git a/client/public/images/pieces/Eightpieces/bo.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/bo.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/bo.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/bo.svg
diff --git a/client/public/images/pieces/Eightpieces/bs.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/bs.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/bs.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/bs.svg
diff --git a/client/public/images/pieces/Eightpieces/wc.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/wc.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/wc.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/wc.svg
diff --git a/client/public/images/pieces/Eightpieces/wd.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/wd.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/wd.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/wd.svg
diff --git a/client/public/images/pieces/Eightpieces/we.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/we.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/we.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/we.svg
diff --git a/client/public/images/pieces/Eightpieces/wf.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/wf.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/wf.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/wf.svg
diff --git a/client/public/images/pieces/Eightpieces/wg.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/wg.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/wg.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/wg.svg
diff --git a/client/public/images/pieces/Eightpieces/wh.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/wh.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/wh.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/wh.svg
diff --git a/client/public/images/pieces/Eightpieces/wj.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/wj.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/wj.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/wj.svg
diff --git a/client/public/images/pieces/Eightpieces/wm.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/wm.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/wm.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/wm.svg
diff --git a/client/public/images/pieces/Eightpieces/wo.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/wo.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/wo.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/wo.svg
diff --git a/client/public/images/pieces/Eightpieces/ws.svg b/client/public/images/pieces/Eightpieces/SVG_TODO/ws.svg
similarity index 100%
rename from client/public/images/pieces/Eightpieces/ws.svg
rename to client/public/images/pieces/Eightpieces/SVG_TODO/ws.svg
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/bb.png b/client/public/images/pieces/Eightpieces/tmp_png/bb.png
new file mode 100644
index 00000000..77675f45
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/bb.png
@@ -0,0 +1 @@
+#$# git-fat 9c52566d58ad295865614ad8cef9d7d1ce653a06                 1929
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/bc.png b/client/public/images/pieces/Eightpieces/tmp_png/bc.png
new file mode 100644
index 00000000..d0972343
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/bc.png
@@ -0,0 +1 @@
+#$# git-fat 04326d5a5c48bd5cc09a0813fb4eaef356d65bec                58427
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/bd.png b/client/public/images/pieces/Eightpieces/tmp_png/bd.png
new file mode 100644
index 00000000..ffd0f88a
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/bd.png
@@ -0,0 +1 @@
+#$# git-fat b6d42b75663feee7e82ecb25af460c2fb35856ac                86937
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/be.png b/client/public/images/pieces/Eightpieces/tmp_png/be.png
new file mode 100644
index 00000000..84d8dd48
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/be.png
@@ -0,0 +1 @@
+#$# git-fat 6faf9fcf73eb1decace8e5b184584b7dee407474                61515
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/bf.png b/client/public/images/pieces/Eightpieces/tmp_png/bf.png
new file mode 100644
index 00000000..f1dc5d7a
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/bf.png
@@ -0,0 +1 @@
+#$# git-fat 5d1becd4ca9f78f23a31c9aff08445fa0049bfe9                83373
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/bg.png b/client/public/images/pieces/Eightpieces/tmp_png/bg.png
new file mode 100644
index 00000000..d8f5fb59
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/bg.png
@@ -0,0 +1 @@
+#$# git-fat 9835efedfdf1ea4608f5a3e614805080a5626080                56194
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/bh.png b/client/public/images/pieces/Eightpieces/tmp_png/bh.png
new file mode 100644
index 00000000..e5f3b254
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/bh.png
@@ -0,0 +1 @@
+#$# git-fat efa009b523c9171675cdae9fd7efe5ab927474aa                76100
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/bj.png b/client/public/images/pieces/Eightpieces/tmp_png/bj.png
new file mode 100644
index 00000000..5dad695c
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/bj.png
@@ -0,0 +1 @@
+#$# git-fat 3c7dbfb71ec750c22838bd9dcbe5439911740e5e                68704
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/bk.png b/client/public/images/pieces/Eightpieces/tmp_png/bk.png
new file mode 100644
index 00000000..25914fc7
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/bk.png
@@ -0,0 +1 @@
+#$# git-fat c2ef9bd3b4d64fa70e457dbca6c6c137ecaf9fa6                 3636
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/bm.png b/client/public/images/pieces/Eightpieces/tmp_png/bm.png
new file mode 100644
index 00000000..7f7a226e
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/bm.png
@@ -0,0 +1 @@
+#$# git-fat 133f69ee12f653f937c61df5b56622425748e5b1                59440
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/bn.png b/client/public/images/pieces/Eightpieces/tmp_png/bn.png
new file mode 100644
index 00000000..d362738c
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/bn.png
@@ -0,0 +1 @@
+#$# git-fat 0ffa52517f08bf09a72be978978168b57b8e88a6                 2412
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/bo.png b/client/public/images/pieces/Eightpieces/tmp_png/bo.png
new file mode 100644
index 00000000..689f204a
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/bo.png
@@ -0,0 +1 @@
+#$# git-fat 801ab41f8ec97c1df188d2a51dce3547d3e8e1d6                82812
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/bp.png b/client/public/images/pieces/Eightpieces/tmp_png/bp.png
new file mode 100644
index 00000000..8040b8be
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/bp.png
@@ -0,0 +1 @@
+#$# git-fat c05fd1d54fd9f810df6617d0c075f6cb4f444885                 1282
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/bq.png b/client/public/images/pieces/Eightpieces/tmp_png/bq.png
new file mode 100644
index 00000000..3b6e8cce
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/bq.png
@@ -0,0 +1 @@
+#$# git-fat dc2b64b09642ceacaa081f9d929cfc6cf2e08c5c                 3262
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/br.png b/client/public/images/pieces/Eightpieces/tmp_png/br.png
new file mode 100644
index 00000000..e60e838c
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/br.png
@@ -0,0 +1 @@
+#$# git-fat a00737b9a9386590b0bff43defa54d2898f15842                 1126
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/bs.png b/client/public/images/pieces/Eightpieces/tmp_png/bs.png
new file mode 100644
index 00000000..d01f610b
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/bs.png
@@ -0,0 +1 @@
+#$# git-fat 020e7011f8189468b877bf8a2eaa28e4d8d35fad                36927
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/wb.png b/client/public/images/pieces/Eightpieces/tmp_png/wb.png
new file mode 100644
index 00000000..e1bfe00b
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/wb.png
@@ -0,0 +1 @@
+#$# git-fat c42d884d03ab602eaaed93f9122956f12f927b1f                 2727
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/wc.png b/client/public/images/pieces/Eightpieces/tmp_png/wc.png
new file mode 100644
index 00000000..fa791a5a
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/wc.png
@@ -0,0 +1 @@
+#$# git-fat 8fe31cc37dbcd20df8b0709bb5726ace486b0c52                63809
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/wd.png b/client/public/images/pieces/Eightpieces/tmp_png/wd.png
new file mode 100644
index 00000000..51278601
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/wd.png
@@ -0,0 +1 @@
+#$# git-fat 35e1050c7d274c8ea0ee1344d0bbd2c30c460cd3                97525
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/we.png b/client/public/images/pieces/Eightpieces/tmp_png/we.png
new file mode 100644
index 00000000..18b5b131
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/we.png
@@ -0,0 +1 @@
+#$# git-fat c677edab8c0dde132cac60daacbab94da3f5fdc5                69790
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/wf.png b/client/public/images/pieces/Eightpieces/tmp_png/wf.png
new file mode 100644
index 00000000..a129fb11
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/wf.png
@@ -0,0 +1 @@
+#$# git-fat 2d533c6fd5c39055daf54c0ab9c293854ed7cc09                89046
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/wg.png b/client/public/images/pieces/Eightpieces/tmp_png/wg.png
new file mode 100644
index 00000000..f12c75e8
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/wg.png
@@ -0,0 +1 @@
+#$# git-fat 93867ecc93215c19310e73107c3769d5a74a207a                81093
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/wh.png b/client/public/images/pieces/Eightpieces/tmp_png/wh.png
new file mode 100644
index 00000000..d6f26345
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/wh.png
@@ -0,0 +1 @@
+#$# git-fat ea2c640c7e457290a91aa47e0a95571e7cca5d20                98557
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/wj.png b/client/public/images/pieces/Eightpieces/tmp_png/wj.png
new file mode 100644
index 00000000..b3ee05f5
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/wj.png
@@ -0,0 +1 @@
+#$# git-fat 76c3a4bf8fc92ea846ee4cf1c10c1442a59641d9                73774
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/wk.png b/client/public/images/pieces/Eightpieces/tmp_png/wk.png
new file mode 100644
index 00000000..38786f59
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/wk.png
@@ -0,0 +1 @@
+#$# git-fat bc3cb320b359ac6bfaf255f42b53db5eeb5e5824                 3187
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/wm.png b/client/public/images/pieces/Eightpieces/tmp_png/wm.png
new file mode 100644
index 00000000..0f7eea8f
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/wm.png
@@ -0,0 +1 @@
+#$# git-fat 4cc90b50bdb09424a09fc09d184cebb240bbdcab                81539
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/wn.png b/client/public/images/pieces/Eightpieces/tmp_png/wn.png
new file mode 100644
index 00000000..93eb68f5
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/wn.png
@@ -0,0 +1 @@
+#$# git-fat 79b8998056839809721dd2b6553dea5234472d77                 2841
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/wo.png b/client/public/images/pieces/Eightpieces/tmp_png/wo.png
new file mode 100644
index 00000000..b5fc561d
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/wo.png
@@ -0,0 +1 @@
+#$# git-fat 434f5e0b47e01f9571f8629fadcb05348ae7b673               100569
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/wp.png b/client/public/images/pieces/Eightpieces/tmp_png/wp.png
new file mode 100644
index 00000000..5c5b23b9
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/wp.png
@@ -0,0 +1 @@
+#$# git-fat 538eede50c8d051294f736b27dd3ab1967f2eb76                 1904
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/wq.png b/client/public/images/pieces/Eightpieces/tmp_png/wq.png
new file mode 100644
index 00000000..df71d17b
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/wq.png
@@ -0,0 +1 @@
+#$# git-fat 5057d7628965459e86a1448549d7d69f89485399                 4333
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/wr.png b/client/public/images/pieces/Eightpieces/tmp_png/wr.png
new file mode 100644
index 00000000..0b1bd97e
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/wr.png
@@ -0,0 +1 @@
+#$# git-fat 829a06618eaa0e3fe0780f75657534cc45167b76                 1321
diff --git a/client/public/images/pieces/Eightpieces/tmp_png/ws.png b/client/public/images/pieces/Eightpieces/tmp_png/ws.png
new file mode 100644
index 00000000..0524f50f
--- /dev/null
+++ b/client/public/images/pieces/Eightpieces/tmp_png/ws.png
@@ -0,0 +1 @@
+#$# git-fat 2ead14fd56360b53874674543b0c5732ad2e5c95               121829
diff --git a/client/src/base_rules.js b/client/src/base_rules.js
index 326da6ed..752d8ee9 100644
--- a/client/src/base_rules.js
+++ b/client/src/base_rules.js
@@ -73,6 +73,11 @@ export const ChessRules = class ChessRules {
     return V.CanFlip;
   }
 
+  static get IMAGE_EXTENSION() {
+    // All pieces should be in the SVG format
+    return ".svg";
+  }
+
   // Turn "wb" into "B" (for FEN)
   static board2fen(b) {
     return b[0] == "w" ? b[1].toUpperCase() : b[1];
diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index c2de1769..447040f9 100644
--- a/client/src/components/Board.vue
+++ b/client/src/components/Board.vue
@@ -119,7 +119,7 @@ export default {
                         this.userColor,
                         this.score,
                         this.orientation) +
-                      ".svg"
+                      V.IMAGE_EXTENSION
                   }
                 })
               );
@@ -284,65 +284,76 @@ export default {
       // No choices to show at first drawing
       const squareWidth = boardElt.offsetWidth / sizeY;
       const offset = [boardElt.offsetTop, boardElt.offsetLeft];
-      // TODO: multi-rows if more than V.size.y pieces (as inEightpieces)
+      const maxNbeltsPerRow = Math.min(this.choices.length, sizeY);
+      let topOffset = offset[0] + (sizeY / 2) * squareWidth - squareWidth / 2;
+      let choicesHeight = squareWidth;
+      if (this.choices.length >= sizeY) {
+        // A second row is required (Eightpieces variant)
+        topOffset -= squareWidth / 2;
+        choicesHeight *= 2;
+      }
       const choices = h(
         "div",
         {
           attrs: { id: "choices" },
           class: { row: true },
           style: {
-            top: offset[0] + (sizeY / 2) * squareWidth - squareWidth / 2 + "px",
+            top: topOffset + "px",
             left:
               offset[1] +
-              (squareWidth * (sizeY - this.choices.length)) / 2 +
+              (squareWidth * Math.max(sizeY - this.choices.length, 0)) / 2 +
               "px",
-            width: this.choices.length * squareWidth + "px",
-            height: squareWidth + "px"
+            width: (maxNbeltsPerRow * squareWidth) + "px",
+            height: choicesHeight + "px"
           }
         },
-        this.choices.map(m => {
-          // A "choice" is a move
-          const applyMove = (e) => {
-            e.stopPropagation();
-            // Force a delay between move is shown and clicked
-            // (otherwise a "double-click" bug might occur)
-            if (Date.now() - this.clickTime < 200) return;
-            this.play(m);
-            this.choices = [];
-          };
-          const onClick =
-            this.mobileBrowser
-              ? { touchend: applyMove }
-              : { mouseup: applyMove };
-          return h(
-            "div",
-            {
-              class: {
-                board: true,
-                ["board" + sizeY]: true
-              },
-              style: {
-                width: 100 / this.choices.length + "%",
-                "padding-bottom": 100 / this.choices.length + "%"
-              }
-            },
-            [
-              h("img", {
-                attrs: {
-                  src:
-                    "/images/pieces/" +
-                    this.vr.getPPpath(
-                      m.appear[0].c + m.appear[0].p,
-                      // Extra arg useful for some variants:
-                      this.orientation) +
-                    ".svg"
+        [ h(
+          "div",
+          { },
+          this.choices.map(m => {
+            // A "choice" is a move
+            const applyMove = (e) => {
+              e.stopPropagation();
+              // Force a delay between move is shown and clicked
+              // (otherwise a "double-click" bug might occur)
+              if (Date.now() - this.clickTime < 200) return;
+              this.play(m);
+              this.choices = [];
+            };
+            const onClick =
+              this.mobileBrowser
+                ? { touchend: applyMove }
+                : { mouseup: applyMove };
+            return h(
+              "div",
+              {
+                class: {
+                  board: true,
+                  ["board" + sizeY]: true
                 },
-                class: { "choice-piece": true },
-                on: onClick
-              })
-            ]
-          );
-        })
+                style: {
+                  width: (100 / maxNbeltsPerRow) + "%",
+                  "padding-bottom": (100 / maxNbeltsPerRow) + "%"
+                }
+              },
+              [
+                h("img", {
+                  attrs: {
+                    src:
+                      "/images/pieces/" +
+                      this.vr.getPPpath(
+                        m.appear[0].c + m.appear[0].p,
+                        // Extra arg useful for some variants:
+                        this.orientation) +
+                      V.IMAGE_EXTENSION
+                  },
+                  class: { "choice-piece": true },
+                  on: onClick
+                })
+              ]
+            );
+          })
+        ) ]
       );
       elementArray.unshift(choices);
     }
diff --git a/client/src/translations/rules/Eightpieces/en.pug b/client/src/translations/rules/Eightpieces/en.pug
index 3a33838b..9a00364f 100644
--- a/client/src/translations/rules/Eightpieces/en.pug
+++ b/client/src/translations/rules/Eightpieces/en.pug
@@ -1,2 +1,42 @@
 p.boxed
-  | TODO
+  | Three new pieces appear. All pieces are unique.
+
+p.
+  There are only one rook, one bishop and one knight per side in this variant.
+  That explains the name. The king and queen are still there,
+  and the three remaining slots are taken by new pieces:
+
+ul
+  li.
+    The lancer 'L' is oriented and can only move in the direction it points,
+    by any number of squares as long as an enemy isn't met
+    (it can jump over friendly pieces). If an opponent' piece is found,
+    it can be captured. After moving you can reorient the lancer.
+  li.
+    The sentry 'S' moves like a bishop but doesn't capture directly.
+    It "pushes" enemy pieces instead, either on an empty square or on other
+    enemy pieces which are thus (self-)captured.
+  li.
+    The jailer 'J' moves like a rook but also doesn't capture.
+    It immobilizes enemy pieces which are vertically or horizontally adjacent.
+
+p.
+  On the following diagram the white sentry can push the black lancer to
+  capture the black pawn on b4. The lancer is then immobilized
+  by the white jailer at a4.
+
+figure.diagram-container
+  .diagram.diag12
+    | fen:7k/8/8/8/Jp3m2/8/3S4/K7:
+  .diagram.diag22
+    | fen:7k/8/8/8/Jm3S2/8/8/K7:
+  figcaption Left: before white move S"push"f4. Right: after this move.
+
+h3 Complete rules
+
+p
+  | The rules were invented by Jeff Kubach (2020), who described them much
+  | more precisely on the 
+  a(href="https://www.chessvariants.com/rules/8-piece-chess") chessvariants page
+  | . While the summary given above may suffice to start playing,
+  | you should read the complete rules to fully understand this variant.
diff --git a/client/src/translations/rules/Eightpieces/es.pug b/client/src/translations/rules/Eightpieces/es.pug
index 3a33838b..27bdf936 100644
--- a/client/src/translations/rules/Eightpieces/es.pug
+++ b/client/src/translations/rules/Eightpieces/es.pug
@@ -1,2 +1,49 @@
 p.boxed
-  | TODO
+  | Aparecen tres nuevas piezas. Cada pieza es única.
+
+p.
+  Solo hay una torre, un alfil y un caballo por lado en esta variante.
+  Esto explica el nombre. El rey y la dama también están presentes.
+  Las tres ubicaciones restantes están ocupadas por nuevas piezas:
+
+ul
+  li.
+    La lanza 'L' está orientada y solo puede moverse en la dirección
+    como señala, tantas casillas como desee, siempre que lo haga
+    no encontrar pieza opuesta.
+    Si se encuentra dicha pieza, se puede capturar.
+    Después de mover puedes redirigir la lanza.
+  li.
+    La centinela 'S' (del término inglés "Sentry") se mueve como un alfil
+    pero no puede capturar directamente.
+    Por otro lado, puede "empujar" piezas opuestas sobre
+    una casilla vacía o en otra pieza enemiga, que luego termina
+    (auto-)capturado.
+  li.
+    El carcelero 'J' (del término inglés "Jailer") se mueve como una torre
+    pero tampoco captura. Inmoviliza cualquier pieza opuesta adyacente
+    vertical u horizontalmente.
+
+p.
+  En el siguiente diagrama, la centinela blanca puede empujar la lanza negra
+  para capturar el peón negro en b4. Entonces, la lanza es inmovilizada por el
+  carcelero blanco en a4.
+
+figure.diagram-container
+  .diagram.diag12
+    | fen:7k/8/8/8/Jp3m2/8/3S4/K7:
+  .diagram.diag22
+    | fen:7k/8/8/8/Jm3S2/8/8/K7:
+  figcaption.
+    Izquierda: antes del movimiento blanco S"empuja"f4.
+    Derecha: después de esta jugada.
+
+h3 Reglas completas
+
+p
+  | Las reglas fueron inventadas por Jeff Kubach (2020), quien las describió
+  | mucho más específicamente en la 
+  a(href="https://www.chessvariants.com/rules/8-piece-chess") página chessvariants
+  | . El resumen anterior puede ser suficiente para comenzar a jugar,
+  | pero deberías leer todas las reglas para entender completamente
+  | esta variante.
diff --git a/client/src/translations/rules/Eightpieces/fr.pug b/client/src/translations/rules/Eightpieces/fr.pug
index 3a33838b..f904b7db 100644
--- a/client/src/translations/rules/Eightpieces/fr.pug
+++ b/client/src/translations/rules/Eightpieces/fr.pug
@@ -1,2 +1,46 @@
 p.boxed
-  | TODO
+  | Trois nouvelles pièces apparaissent. Chaque pièces est unique.
+
+p.
+  Il n'y a qu'une tour, un fou et un cavalier par camp dans cette variante.
+  Ceci explique le nom. Le roi et la dame sont également présents,
+  les trois emplacements restants étant pris par de nouvelles pièces :
+
+ul
+  li.
+    Le lancier 'L' est orienté et ne peut se déplacer que dans la direction
+    qu'il pointe, d'autant de cases qu'il le souhaite tant qu'il ne
+    rencontre pas de pièce adverse.
+    Si une telle pièce est trouvée, elle peut être capturée.
+    Après le déplacement vous pouvez réorienter le lancier.
+  li.
+    La sentinelle 'S' se déplace comme un fou mais ne peut pas capturer
+    directement. Elle peut en revanche "pousser" les pièces adverses sur
+    une case vide ou sur une autre pièce ennemie, qui se retrouve alors
+    (auto-)capturée.
+  li.
+    Le geôlier 'J' (du terme anglais "Jailer") se déplace comme une tour mais
+    ne capture pas non plus. Il immobilise toute pièce adverse adjacente
+    verticalement ou horizontalement.
+
+p.
+  Sur le diagramme suivant la sentinelle blanche peut pousser le lancier noir
+  pour capturer le pion noir en b4. Le lancier est alors immobilisé par le
+  geôlier blanc en a4.
+
+figure.diagram-container
+  .diagram.diag12
+    | fen:7k/8/8/8/Jp3m2/8/3S4/K7:
+  .diagram.diag22
+    | fen:7k/8/8/8/Jm3S2/8/8/K7:
+  figcaption Gauche : avant le coup blanc S"pousse"f4. Droite : après ce coup.
+
+h3 Règles complètes
+
+p
+  | Les règles ont été inventées par Jeff Kubach (2020), qui les a décrites
+  | beaucoup plus précisément sur la 
+  a(href="https://www.chessvariants.com/rules/8-piece-chess") page chessvariants
+  | . Le résumé donné ci-dessus peut suffire pour commencer à jouer,
+  | mais vous devriez lire l'intégralité des règles afin de bien comprendre
+  | cette variante.
diff --git a/client/src/utils/printDiagram.js b/client/src/utils/printDiagram.js
index d4562bf2..cc97939a 100644
--- a/client/src/utils/printDiagram.js
+++ b/client/src/utils/printDiagram.js
@@ -88,8 +88,8 @@ export function getDiagram(args) {
         boardDiv +=
           "<img " +
           "src='/images/pieces/" +
-          vr.getPpath(board[i][j]) +
-          ".svg' " +
+          vr.getPpath(board[i][j], null, null, orientation) +
+          V.IMAGE_EXTENSION + "' " +
           "class='piece'/>";
       }
       if (markArray.length > 0 && markArray[i][j])
diff --git a/client/src/variants/Eightpieces.js b/client/src/variants/Eightpieces.js
index 46fe6b8f..1b2e9a7d 100644
--- a/client/src/variants/Eightpieces.js
+++ b/client/src/variants/Eightpieces.js
@@ -13,6 +13,11 @@ export const VariantRules = class EightpiecesRules extends ChessRules {
     return "l";
   }
 
+  static get IMAGE_EXTENSION() {
+    // Temporarily, for the time SVG pieces are being designed:
+    return ".png";
+  }
+
   // Lancer directions *from white perspective*
   static get LANCER_DIRS() {
     return {
@@ -41,9 +46,9 @@ export const VariantRules = class EightpiecesRules extends ChessRules {
   }
 
   getPpath(b, color, score, orientation) {
-    if ([V.JAILER, V.SENTRY].includes(b[1])) return "Eightpieces/" + b;
+    if ([V.JAILER, V.SENTRY].includes(b[1])) return "Eightpieces/tmp_png/" + b;
     if (Object.keys(V.LANCER_DIRS).includes(b[1])) {
-      if (orientation == 'w') return "Eightpieces/" + b;
+      if (orientation == 'w') return "Eightpieces/tmp_png/" + b;
       // Find opposite direction for adequate display:
       let oppDir = '';
       switch (b[1]) {
@@ -72,9 +77,10 @@ export const VariantRules = class EightpiecesRules extends ChessRules {
           oppDir = 'f';
           break;
       }
-      return "Eightpieces/" + b[0] + oppDir;
+      return "Eightpieces/tmp_png/" + b[0] + oppDir;
     }
-    return b;
+    // TODO: after we have SVG pieces, remove the folder and next prefix:
+    return "Eightpieces/tmp_png/" + b;
   }
 
   getPPpath(b, orientation) {