X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Futils%2FprintDiagram.js;h=4239688accb921b2814c44cb19df5ce35aa39cf1;hb=81452d4dd5d64d93322c6ba090c6e357e65a68fb;hp=9ebdeed6d227d7abf816f76f7e28b2036e51041e;hpb=2f8dce6a81063289d9d4cbca7971f80b1b194b84;p=vchess.git

diff --git a/client/src/utils/printDiagram.js b/client/src/utils/printDiagram.js
index 9ebdeed6..4239688a 100644
--- a/client/src/utils/printDiagram.js
+++ b/client/src/utils/printDiagram.js
@@ -1,4 +1,5 @@
 import { ArrayFun } from "@/utils/array";
+import { store } from "@/store";
 
 // Turn (human) marks into coordinates
 function getMarkArray(marks) {
@@ -18,7 +19,7 @@ function getShadowArray(shadow) {
   let shadowArray = ArrayFun.init(V.size.x, V.size.y, false);
   const squares = shadow.split(",");
   for (let i = 0; i < squares.length; i++) {
-    const rownum = V.size.x - parseInt(squares[i]);
+    const rownum = V.size.x - parseInt(squares[i], 10);
     if (!isNaN(rownum)) {
       // Shadow a full row
       for (let i = 0; i < V.size.y; i++) shadowArray[rownum][i] = true;
@@ -64,31 +65,44 @@ function getShadowArray(shadow) {
 
 // args: object with position (mandatory), and
 // orientation, marks, shadow (optional)
+// TODO: in time, find a strategy to draw middle lines (weiqi, xianqi...)
+//       and maybe also some diagonals (fanorona...)
+// https://stackoverflow.com/questions/40697231/horizontal-line-in-the-middle-of-divs
+// + CSS rotate?
 export function getDiagram(args) {
   // Obtain the array of pieces images names:
   const board = V.GetBoard(args.position);
   const orientation = args.orientation || "w";
   const markArray = getMarkArray(args.marks);
   const shadowArray = getShadowArray(args.shadow);
-  const vr = new V(); //just for pieces images paths
+  const vr = new V(); //TODO: just for pieces images paths
   let boardDiv = "";
   const [startX, startY, inc] =
     orientation == "w" ? [0, 0, 1] : [V.size.x - 1, V.size.y - 1, -1];
+  let lightOddity = (V.size.x + V.size.y) % 2;
+  if (V.DarkBottomRight) lightOddity = 1 - lightOddity;
   for (let i = startX; i >= 0 && i < V.size.x; i += inc) {
-    boardDiv += "<div class='row'>";
+    boardDiv += "<div class='row";
+    if (i == startX && V.Monochrome) boardDiv += " border-top";
+    boardDiv += "'>";
     for (let j = startY; j >= 0 && j < V.size.y; j += inc) {
-      boardDiv +=
-        "<div class='board board" +
-        V.size.y +
-        " " +
-        ((i + j) % 2 == 0 ? "light-square-diag" : "dark-square-diag") +
-        (shadowArray.length > 0 && shadowArray[i][j] ? " in-shadow" : "") +
-        "'>";
+      boardDiv += "<div class='board board" + V.size.y + " ";
+      if (V.Monochrome) {
+        boardDiv += "monochrome " +
+          (V.Notoodark ? "middle-square" : "dark-square");
+        if (j == startY) boardDiv += " border-left";
+      }
+      else if ((i + j) % 2 == lightOddity) boardDiv += "light-square";
+      else boardDiv += "dark-square";
+      boardDiv += " " + store.state.settings.bcolor;
+      if (shadowArray.length > 0 && shadowArray[i][j])
+        boardDiv += " in-shadow";
+      boardDiv += "'>";
       if (board[i][j] != V.EMPTY) {
         boardDiv +=
           "<img " +
           "src='/images/pieces/" +
-          vr.getPpath(board[i][j], null, null, orientation) +
+          vr.getPpath(board[i][j], args.color, args.score, orientation) +
           V.IMAGE_EXTENSION + "' " +
           "class='piece'/>";
       }
@@ -100,3 +114,14 @@ export function getDiagram(args) {
   }
   return boardDiv;
 }
+
+// Method to replace diagrams in loaded HTML
+export function replaceByDiag(match, p1, p2) {
+  const diagParts = p2.split(" ");
+  return getDiagram({
+    position: diagParts[0],
+    marks: diagParts[1],
+    orientation: diagParts[2],
+    shadow: diagParts[3]
+  });
+}