From: Benjamin Auder <benjamin.auder@somewhere>
Date: Tue, 31 Mar 2026 20:29:39 +0000 (+0200)
Subject: Improve 8-pieces drawings
X-Git-Url: https://git.auder.net/css/doc/html/%7B%7B%20path('fos_user_registration_register')%20%7D%7D?a=commitdiff_plain;p=xogo.git

Improve 8-pieces drawings
---

diff --git a/base_rules.js b/base_rules.js
index 83a3c7b..daeb337 100644
--- a/base_rules.js
+++ b/base_rules.js
@@ -922,7 +922,7 @@ export default class ChessRules {
             e.preventDefault();
             start = cd;
             curPiece = startPiece.cloneNode();
-            curPiece.style.transform = "none";
+            curPiece.style.translate = "0 0";
             curPiece.style.zIndex = 5;
             curPiece.style.width = pieceWidth + "px";
             curPiece.style.height = pieceWidth + "px";
diff --git a/pieces/Eightpieces/black_jailer.svg b/pieces/Eightpieces/black_jailer.svg
index c79f44c..3324368 100644
--- a/pieces/Eightpieces/black_jailer.svg
+++ b/pieces/Eightpieces/black_jailer.svg
@@ -1,11 +1,11 @@
 <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
   <g fill="black" stroke="black" stroke-width="2">
-    <rect x="5" y="38" width="40" height="8" rx="1" />
-    <rect x="10" y="15" width="30" height="23" />
-    <rect x="7" y="5" width="36" height="10" rx="1" />
-    <line x1="14" y1="5" x2="14" y2="15" stroke="white" fill="none" stroke-width="1.5" />
-    <line x1="21" y1="5" x2="21" y2="15" stroke="white" fill="none" stroke-width="1.5" />
-    <line x1="29" y1="5" x2="29" y2="15" stroke="white" fill="none" stroke-width="1.5" />
-    <line x1="36" y1="5" x2="36" y2="15" stroke="white" fill="none" stroke-width="1.5" />
+    <rect x="7" y="36" width="36" height="8" rx="1" />
+    <rect x="12" y="16" width="26" height="20" />
+    <rect x="9" y="6" width="32" height="10" rx="1" />
+    <line x1="14" y1="6" x2="14" y2="16" stroke="white" fill="none" stroke-width="1.5" />
+    <line x1="21" y1="6" x2="21" y2="16" stroke="white" fill="none" stroke-width="1.5" />
+    <line x1="29" y1="6" x2="29" y2="16" stroke="white" fill="none" stroke-width="1.5" />
+    <line x1="36" y1="6" x2="36" y2="16" stroke="white" fill="none" stroke-width="1.5" />
   </g>
 </svg>
diff --git a/pieces/Eightpieces/black_lancer.svg b/pieces/Eightpieces/black_lancer.svg
index 2156e03..60a06e3 100644
--- a/pieces/Eightpieces/black_lancer.svg
+++ b/pieces/Eightpieces/black_lancer.svg
@@ -1,8 +1,8 @@
 <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
   <g id="lancer-black-shape" fill="black" stroke="black" stroke-width="2" >
-    <path d="M 25,35 L 5,45 L 45,45 Z" />
-    <rect x="15" y="25" width="20" height="10" />
-    <path d="M 25,5 L 35,20 L 15,20 Z" />
-    <line x1="25" y1="20" x2="25" y2="25" stroke-width="3" />
+    <path d="M 25,38 L 10,43 L 40,43 Z" />
+    <rect x="15" y="28" width="20" height="10" />
+    <path d="M 25,6 L 35,23 L 15,23 Z" />
+    <line x1="25" y1="23" x2="25" y2="28" stroke-width="3" />
   </g>
 </svg>
diff --git a/pieces/Eightpieces/black_sentry.svg b/pieces/Eightpieces/black_sentry.svg
index a3937d4..f3d963b 100644
--- a/pieces/Eightpieces/black_sentry.svg
+++ b/pieces/Eightpieces/black_sentry.svg
@@ -1,8 +1,8 @@
 <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
   <g fill="black" stroke="black" stroke-width="2">
-    <path d="M 25,38 L 8,46 L 42,46 Z" />
-    <rect x="18" y="28" width="14" height="10" />
-    <path d="M 25,12 C 15,18 15,30 25,35 C 35,30 35,18 25,12 Z" />
-    <path d="M 25,5 L 30,12 L 20,12 Z" fill="white" stroke="white" stroke-width="1.5"/>
+    <path d="M 25,37 L 8,45 L 42,45 Z" />
+    <rect x="15" y="28" width="20" height="10" />
+    <path d="M 25,12 C 15,18 9,30 25,35 C 41,30 35,18 25,12 Z" stroke="darkgrey" stroke-width="1.5"/>
+    <path d="M 25,5 L 32,9 L 25,14 L 18,9 Z"/>
   </g>
 </svg>
diff --git a/pieces/Eightpieces/white_jailer.svg b/pieces/Eightpieces/white_jailer.svg
index 5e07c24..600ba2f 100644
--- a/pieces/Eightpieces/white_jailer.svg
+++ b/pieces/Eightpieces/white_jailer.svg
@@ -1,11 +1,11 @@
 <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
   <g fill="white" stroke="black" stroke-width="2">
-    <rect x="5" y="38" width="40" height="8" rx="1" />
-    <rect x="10" y="15" width="30" height="23" />
-    <rect x="7" y="5" width="36" height="10" rx="1" />
-    <line x1="14" y1="5" x2="14" y2="15" fill="none" stroke-width="1.5" />
-    <line x1="21" y1="5" x2="21" y2="15" fill="none" stroke-width="1.5" />
-    <line x1="29" y1="5" x2="29" y2="15" fill="none" stroke-width="1.5" />
-    <line x1="36" y1="5" x2="36" y2="15" fill="none" stroke-width="1.5" />
+    <rect x="7" y="36" width="36" height="8" rx="1" />
+    <rect x="12" y="16" width="26" height="20" />
+    <rect x="9" y="6" width="32" height="10" rx="1" />
+    <line x1="14" y1="6" x2="14" y2="16" fill="none" stroke-width="1.5" />
+    <line x1="21" y1="6" x2="21" y2="16" fill="none" stroke-width="1.5" />
+    <line x1="29" y1="6" x2="29" y2="16" fill="none" stroke-width="1.5" />
+    <line x1="36" y1="6" x2="36" y2="16" fill="none" stroke-width="1.5" />
   </g>
 </svg>
diff --git a/pieces/Eightpieces/white_lancer.svg b/pieces/Eightpieces/white_lancer.svg
index 6273d6b..b8fe10a 100644
--- a/pieces/Eightpieces/white_lancer.svg
+++ b/pieces/Eightpieces/white_lancer.svg
@@ -1,8 +1,8 @@
 <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
   <g fill="white" stroke="black" stroke-width="2">
-    <path d="M 25,35 L 5,45 L 45,45 Z" />
-    <rect x="15" y="25" width="20" height="10" />
-    <path d="M 25,5 L 35,20 L 15,20 Z" />
-    <line x1="25" y1="20" x2="25" y2="25" stroke-width="3" />
+    <path d="M 25,38 L 10,43 L 40,43 Z" />
+    <rect x="15" y="28" width="20" height="10" />
+    <path d="M 25,6 L 35,23 L 15,23 Z" />
+    <line x1="25" y1="23" x2="25" y2="28" stroke-width="3" />
   </g>
 </svg>
diff --git a/pieces/Eightpieces/white_sentry.svg b/pieces/Eightpieces/white_sentry.svg
index da6f197..3fd37b4 100644
--- a/pieces/Eightpieces/white_sentry.svg
+++ b/pieces/Eightpieces/white_sentry.svg
@@ -1,8 +1,8 @@
 <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
   <g fill="white" stroke="black" stroke-width="2">
-    <path d="M 25,38 L 8,46 L 42,46 Z" />
-    <rect x="18" y="28" width="14" height="10" />
-    <path d="M 25,12 C 15,18 15,30 25,35 C 35,30 35,18 25,12 Z" />
-    <path d="M 25,5 L 30,12 L 20,12 Z" fill="black" stroke="black" stroke-width="1.5"/>
+    <path d="M 25,37 L 8,45 L 42,45 Z" />
+    <rect x="15" y="28" width="20" height="10" />
+    <path d="M 25,12 C 15,18 9,30 25,35 C 41,30 35,18 25,12 Z" stroke="grey"/>
+    <path d="M 25,5 L 32,9 L 25,14 L 18,9 Z" stroke="black" stroke-width="1.5"/>
   </g>
 </svg>
diff --git a/variants/Eightpieces/class.js b/variants/Eightpieces/class.js
index 0627b64..527d2b0 100644
--- a/variants/Eightpieces/class.js
+++ b/variants/Eightpieces/class.js
@@ -68,6 +68,7 @@ export default class EightpiecesRules extends ChessRules {
   // TODO: FEN utils pushFrom et afterPush
 
   pieces(color, x, y) {
+    const mirror = (this.playerColor == 'b');
     return Object.assign({
       'j': {
         "class": "jailer",
@@ -83,49 +84,49 @@ export default class EightpiecesRules extends ChessRules {
         ]
       },
       'c': {
-        "class": "lancer_N",
+        "class": mirror ? "lancer_S" : "lancer_N",
         both: [
           {steps: [[-1, 0]]}
         ]
       },
       'd': {
-        "class": "lancer_NE",
+        "class": mirror ? "lancer_SO" : "lancer_NE",
         both: [
           {steps: [[-1, 1]]}
         ]
       },
       'e': {
-        "class": "lancer_E",
+        "class": mirror ? "lancer_O" : "lancer_E",
         both: [
           {steps: [[0, 1]]}
         ]
       },
       'f': {
-        "class": "lancer_SE",
+        "class": mirror ? "lancer_NO" : "lancer_SE",
         both: [
           {steps: [[1, 1]]}
         ]
       },
       'g': {
-        "class": "lancer_S",
+        "class": mirror ? "lancer_N" : "lancer_S",
         both: [
           {steps: [[1, 0]]}
         ]
       },
       'h': {
-        "class": "lancer_SO",
+        "class": mirror ? "lancer_NE" : "lancer_SO",
         both: [
           {steps: [[1, -1]]}
         ]
       },
       'm': {
-        "class": "lancer_O",
+        "class": mirror ? "lancer_E" : "lancer_O",
         both: [
           {steps: [[0, -1]]}
         ]
       },
       'o': {
-        "class": "lancer_NO",
+        "class": mirror ? "lancer_SE" : "lancer_NO",
         both: [
           {steps: [[-1, -1]]}
         ]
diff --git a/variants/Eightpieces/style.css b/variants/Eightpieces/style.css
index f49b54e..0ff0c7a 100644
--- a/variants/Eightpieces/style.css
+++ b/variants/Eightpieces/style.css
@@ -19,31 +19,31 @@ piece.white.lancer_N {
 }
 piece.white.lancer_NE {
   background-image: url('/pieces/Eightpieces/white_lancer.svg');
-  transform: rotate(45deg);
+  rotate: 45deg;
 }
 piece.white.lancer_E {
   background-image: url('/pieces/Eightpieces/white_lancer.svg');
-  transform: rotate(90deg);
+  rotate: 90deg;
 }
 piece.white.lancer_SE {
   background-image: url('/pieces/Eightpieces/white_lancer.svg');
-  transform: rotate(135deg);
+  rotate: 135deg;
 }
 piece.white.lancer_S {
   background-image: url('/pieces/Eightpieces/white_lancer.svg');
-  transform: rotate(180deg);
+  rotate: 180deg;
 }
 piece.white.lancer_SO {
   background-image: url('/pieces/Eightpieces/white_lancer.svg');
-  transform: rotate(225deg);
+  rotate: 225deg;
 }
 piece.white.lancer_O {
   background-image: url('/pieces/Eightpieces/white_lancer.svg');
-  transform: rotate(270deg);
+  rotate: 270deg;
 }
 piece.white.lancer_NO {
   background-image: url('/pieces/Eightpieces/white_lancer.svg');
-  transform: rotate(315deg);
+  rotate: 315deg;
 }
 
 piece.black.lancer_N {
@@ -51,29 +51,29 @@ piece.black.lancer_N {
 }
 piece.black.lancer_NE {
   background-image: url('/pieces/Eightpieces/black_lancer.svg');
-  transform: rotate(45deg);
+  rotate: 45deg;
 }
 piece.black.lancer_E {
   background-image: url('/pieces/Eightpieces/black_lancer.svg');
-  transform: rotate(90deg);
+  rotate: 90deg;
 }
 piece.black.lancer_SE {
   background-image: url('/pieces/Eightpieces/black_lancer.svg');
-  transform: rotate(135deg);
+  rotate: 135deg;
 }
 piece.black.lancer_S {
   background-image: url('/pieces/Eightpieces/black_lancer.svg');
-  transform: rotate(180deg);
+  rotate: 180deg;
 }
 piece.black.lancer_SO {
   background-image: url('/pieces/Eightpieces/black_lancer.svg');
-  transform: rotate(225deg);
+  rotate: 225deg;
 }
 piece.black.lancer_O {
   background-image: url('/pieces/Eightpieces/black_lancer.svg');
-  transform: rotate(270deg);
+  rotate: 270deg;
 }
 piece.black.lancer_NO {
   background-image: url('/pieces/Eightpieces/black_lancer.svg');
-  transform: rotate(315deg);
+  rotate: 315deg;
 }