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

diff --git a/client/src/utils/printDiagram.js b/client/src/utils/printDiagram.js
index 0d8d9ae3..4239688a 100644
--- a/client/src/utils/printDiagram.js
+++ b/client/src/utils/printDiagram.js
@@ -1,111 +1,127 @@
 import { ArrayFun } from "@/utils/array";
+import { store } from "@/store";
 
 // Turn (human) marks into coordinates
-function getMarkArray(marks)
-{
-	if (!marks || marks == "-")
-		return [];
-	let markArray = ArrayFun.init(V.size.x, V.size.y, false);
-	const squares = marks.split(",");
-	for (let i=0; i<squares.length; i++)
-	{
-		const coords = V.SquareToCoords(squares[i]);
-		markArray[coords.x][coords.y] = true;
-	}
-	return markArray;
+function getMarkArray(marks) {
+  if (!marks || marks == "-") return [];
+  let markArray = ArrayFun.init(V.size.x, V.size.y, false);
+  const squares = marks.split(",");
+  for (let i = 0; i < squares.length; i++) {
+    const coords = V.SquareToCoords(squares[i]);
+    markArray[coords.x][coords.y] = true;
+  }
+  return markArray;
 }
 
 // Turn (human) shadow indications into coordinates
-function getShadowArray(shadow)
-{
-	if (!shadow || shadow == "-")
-		return [];
-	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]);
-		if (!isNaN(rownum))
-		{
-			// Shadow a full row
-			for (let i=0; i<V.size.y; i++)
-				shadowArray[rownum][i] = true;
-			continue;
-		}
-		if (squares[i].length == 1)
-		{
-			// Shadow a full column
-			const colnum = V.ColumnToCoord(squares[i]);
-			for (let i=0; i<V.size.x; i++)
-				shadowArray[i][colnum] = true;
-			continue;
-		}
-		if (squares[i].indexOf("-") >= 0)
-		{
-			// Shadow a range of squares, horizontally or vertically
-			const firstLastSq = squares[i].split("-");
-			const range =
-			[
-				V.SquareToCoords(firstLastSq[0]),
-				V.SquareToCoords(firstLastSq[1])
-			];
-			const step =
-			[
-				range[1].x == range[0].x
-					? 0
-					: (range[1].x - range[0].x) / Math.abs(range[1].x - range[0].x),
-				range[1].y == range[0].y
-					? 0
-					: (range[1].y - range[0].y) / Math.abs(range[1].y - range[0].y)
-			];
-			// Convention: range always from smaller to larger number
-			for (let x=range[0].x, y=range[0].y; x <= range[1].x && y <= range[1].y;
-				x += step[0], y += step[1])
-			{
-				shadowArray[x][y] = true;
-			}
-			continue;
-		}
-		// Shadow just one square:
-		const coords = V.SquareToCoords(squares[i]);
-		shadowArray[coords.x][coords.y] = true;
-	}
-	return shadowArray;
+function getShadowArray(shadow) {
+  if (!shadow || shadow == "-") return [];
+  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], 10);
+    if (!isNaN(rownum)) {
+      // Shadow a full row
+      for (let i = 0; i < V.size.y; i++) shadowArray[rownum][i] = true;
+      continue;
+    }
+    if (squares[i].length == 1) {
+      // Shadow a full column
+      const colnum = V.ColumnToCoord(squares[i]);
+      for (let i = 0; i < V.size.x; i++) shadowArray[i][colnum] = true;
+      continue;
+    }
+    if (squares[i].indexOf("-") >= 0) {
+      // Shadow a range of squares, horizontally or vertically
+      const firstLastSq = squares[i].split("-");
+      const range = [
+        V.SquareToCoords(firstLastSq[0]),
+        V.SquareToCoords(firstLastSq[1])
+      ];
+      const step = [
+        range[1].x == range[0].x
+          ? 0
+          : (range[1].x - range[0].x) / Math.abs(range[1].x - range[0].x),
+        range[1].y == range[0].y
+          ? 0
+          : (range[1].y - range[0].y) / Math.abs(range[1].y - range[0].y)
+      ];
+      // Convention: range always from smaller to larger number
+      for (
+        let x = range[0].x, y = range[0].y;
+        x <= range[1].x && y <= range[1].y;
+        x += step[0], y += step[1]
+      ) {
+        shadowArray[x][y] = true;
+      }
+      continue;
+    }
+    // Shadow just one square:
+    const coords = V.SquareToCoords(squares[i]);
+    shadowArray[coords.x][coords.y] = true;
+  }
+  return shadowArray;
 }
 
 // args: object with position (mandatory), and
 // orientation, marks, shadow (optional)
-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);
-	let boardDiv = "";
-	const [startX,startY,inc] = orientation == 'w'
-		? [0, 0, 1]
-		: [V.size.x-1, V.size.y-1, -1];
-	for (let i=startX; i>=0 && i<V.size.x; i+=inc)
-	{
-		boardDiv += "<div class='row'>";
-		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" : "") +
-				"'>";
-			if (board[i][j] != V.EMPTY)
-			{
-				boardDiv += "<img " +
-          "src='/images/pieces/" + V.getPpath(board[i][j]) + ".svg' " +
+// 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(); //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";
+    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 + " ";
+      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], args.color, args.score, orientation) +
+          V.IMAGE_EXTENSION + "' " +
           "class='piece'/>";
-			}
-			if (markArray.length > 0 && markArray[i][j])
-				boardDiv += "<img src='/images/mark.svg' class='mark-square'/>";
-			boardDiv += "</div>";
-		}
-		boardDiv += "</div>";
-	}
-	return boardDiv;
+      }
+      if (markArray.length > 0 && markArray[i][j])
+        boardDiv += "<img src='/images/diag_mark.svg' class='mark-square'/>";
+      boardDiv += "</div>";
+    }
+    boardDiv += "</div>";
+  }
+  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]
+  });
 }