From d7083722aa521da7a63a9d402db99f3348e8582c Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Wed, 6 Feb 2019 19:38:03 +0100 Subject: [PATCH] Start to revert to previous way of handling rules + diagrams --- client/src/components/Diagrammer.vue | 181 --------------------------- client/src/rules/Alice/en.pug | 4 +- client/src/rules/Chess960/fr.pug | 3 +- client/src/utils/printDiagram.js | 111 ++++++++++++++++ 4 files changed, 114 insertions(+), 185 deletions(-) delete mode 100644 client/src/components/Diagrammer.vue create mode 100644 client/src/utils/printDiagram.js diff --git a/client/src/components/Diagrammer.vue b/client/src/components/Diagrammer.vue deleted file mode 100644 index 04767dfe..00000000 --- a/client/src/components/Diagrammer.vue +++ /dev/null @@ -1,181 +0,0 @@ -<script> -import { store } from "@/store"; -import { ArrayFun } from "@/utils/array"; -export default { - name: "my-diagrammer", - props: ["fen","vname"], - data: { - function() { - return { - st: store.state, - // args: object with position (mandatory), and - // orientation, marks, shadow (optional) - args: this.parseFen(this.fen), - }; - } - }, - render(h) { - if (!window.V) - return; - // Obtain the array of pieces images names: - const board = V.GetBoard(this.args.position); - const orientation = this.args.orientation || "w"; - const markArray = this.getMarkArray(this.args.marks); - const shadowArray = this.getShadowArray(this.args.shadow); -// const [startX,startY,inc] = orientation == 'w' -// ? [0, 0, 1] -// : [V.size.x-1, V.size.y-1, -1]; - const diagDiv = h( - 'div', - { - 'class': { - 'diagram': true, - }, - }, - [...Array(V.size.x).keys()].map(i => { - let ci = (orientation=='w' ? i : sizeX-i-1); - return h( - 'div', - { - 'class': { - 'row': true, - }, - }, - [...Array(V.size.y).keys()].map(j => { - let cj = (orientation=='w' ? j : sizeY-j-1); - let elems = []; - if (board[ci][cj] != V.EMPTY) - { - elems.push( - h( - 'img', - { - 'class': { - 'piece': true, - }, - attrs: { - src: require("@/assets/images/pieces/" + - V.getPpath(board[ci][cj]) + ".svg"), - }, - } - ) - ); - } - if (markArray.length > 0 && markArray[ci][cj]) - { - elems.push( - h( - 'img', - { - 'class': { - 'mark-square': true, - }, - attrs: { - src: "/images/mark.svg", - }, - } - ) - ); - } - return h( - 'div', - { - 'class': { - 'board': true, - ['board'+V.size.y]: true, - 'light-square': (i+j)%2==0, - 'dark-square': (i+j)%2==1, - [this.st.bcolor]: true, - 'in-shadow': shadowArray.length > 0 && shadowArray[ci][cj], - }, - }, - elems - ); - }) - ); - }) - ); - return diagDiv; - }, - methods: { - parseFen: function(fen) { - const fenParts = fen.split(" "); - return { - position: fenParts[0], - marks: fenParts[1], - orientation: fenParts[2], - shadow: fenParts[3], - }; - }, - // Turn (human) marks into coordinates - getMarkArray: function(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 - getShadowArray: function(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; - }, - }, -}; -</script> diff --git a/client/src/rules/Alice/en.pug b/client/src/rules/Alice/en.pug index 6bba6407..5ef85f6e 100644 --- a/client/src/rules/Alice/en.pug +++ b/client/src/rules/Alice/en.pug @@ -20,9 +20,7 @@ ul li King : L figure.diagram-container - // TODO: sub-component + use pug-loader instead of raw-loader - Diagram(fen="rnbqkbnr/ppp1pppp/8/8/2p5/5O2/PP1PPPPP/RNBQKB1R" vname="Alice") - //.diagram + .diagram | fen:rnbqkbnr/ppp1pppp/8/8/2p5/5O2/PP1PPPPP/RNBQKB1R: figcaption After the moves 1.Nf3 Pd5 2.Pc4 Sxc4 diff --git a/client/src/rules/Chess960/fr.pug b/client/src/rules/Chess960/fr.pug index 3325f810..9b62de16 100644 --- a/client/src/rules/Chess960/fr.pug +++ b/client/src/rules/Chess960/fr.pug @@ -16,7 +16,8 @@ p. en arrivant sur une case occupée (avec une seule exception, détaillée plus bas). figure.diagram-container - Diagrammer(fen="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR" vname="Chess960") + .diagram + | fen:rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR: figcaption Position de départ habituelle. p. diff --git a/client/src/utils/printDiagram.js b/client/src/utils/printDiagram.js new file mode 100644 index 00000000..0d8d9ae3 --- /dev/null +++ b/client/src/utils/printDiagram.js @@ -0,0 +1,111 @@ +import { ArrayFun } from "@/utils/array"; + +// 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; +} + +// 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; +} + +// 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' " + + "class='piece'/>"; + } + if (markArray.length > 0 && markArray[i][j]) + boardDiv += "<img src='/images/mark.svg' class='mark-square'/>"; + boardDiv += "</div>"; + } + boardDiv += "</div>"; + } + return boardDiv; +} -- 2.44.0