import { ArrayFun } from "@/utils/array";
+import { store } from "@/store";
// Turn (human) marks into coordinates
function getMarkArray(marks) {
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;
// 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(); //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/" +
- V.getPpath(board[i][j]) +
- ".svg' " +
+ 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 += "<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]
+ });
+}