From: Benjamin Auder Date: Thu, 30 Jun 2022 11:31:03 +0000 (+0200) Subject: Marks on board for diagrams: done X-Git-Url: https://git.auder.net/%7B%7B%20asset%28%27mixstore/images/assets/current/common.css?a=commitdiff_plain;h=b2fc1259220619ab828a5da79cbbc8894ac5d296;p=xogo.git Marks on board for diagrams: done --- diff --git a/TODO b/TODO index 0bbf333..1e4eda3 100644 --- a/TODO +++ b/TODO @@ -1,5 +1,3 @@ -allow markers on board for diagrams (add d_pieces to base_rules.js --> all the same purple circle) - add variants : Dark Racing Kings ? Checkered-Teleport ? diff --git a/base_rules.js b/base_rules.js index 16f6d7a..54c1220 100644 --- a/base_rules.js +++ b/base_rules.js @@ -416,6 +416,7 @@ export default class ChessRules { // Graphical (can use variables defined above) this.containerId = o.element; this.isDiagram = o.diagram; + this.marks = o.marks; this.graphicalInit(); } @@ -647,43 +648,58 @@ export default class ChessRules { } setupPieces(r) { - // TODO: d_pieces : only markers (for diagrams) / also in rescale() - if (this.g_pieces) { - // Refreshing: delete old pieces first - for (let i=0; i { + this[arrName][i][j] = document.createElement("piece"); + C.AddClass_es(this[arrName][i][j], classes); + this[arrName][i][j].style.width = pieceWidth + "px"; + this[arrName][i][j].style.height = pieceWidth + "px"; + let [ip, jp] = this.getPixelPosition(i, j, r); + // Translate coordinates to use chessboard as reference: + this[arrName][i][j].style.transform = + `translate(${ip - r.x}px,${jp - r.y}px)`; + chessboard.appendChild(this[arrName][i][j]); + }; + const conditionalReset = (arrName) => { + if (this[arrName]) { + // Refreshing: delete old pieces first. This isn't necessary, + // but simpler (this method isn't called many times) + for (let i=0; i addPiece(i, j, arrName, "mark")); + }; + if (this.marks) + conditionalReset("d_pieces"); + conditionalReset("g_pieces"); for (let i=0; i < this.size.x; i++) { for (let j=0; j < this.size.y; j++) { if (this.board[i][j] != "") { const color = this.getColor(i, j); const piece = this.getPiece(i, j); - this.g_pieces[i][j] = document.createElement("piece"); - C.AddClass_es(this.g_pieces[i][j], - this.pieces(color, i, j)[piece]["class"]); + addPiece(i, j, "g_pieces", this.pieces(color, i, j)[piece]["class"]); this.g_pieces[i][j].classList.add(C.GetColorClass(color)); - this.g_pieces[i][j].style.width = pieceWidth + "px"; - this.g_pieces[i][j].style.height = pieceWidth + "px"; - let [ip, jp] = this.getPixelPosition(i, j, r); - // Translate coordinates to use chessboard as reference: - this.g_pieces[i][j].style.transform = - `translate(${ip - r.x}px,${jp - r.y}px)`; if (this.enlightened && !this.enlightened[i][j]) this.g_pieces[i][j].classList.add("hidden"); - chessboard.appendChild(this.g_pieces[i][j]); + } + if (this.marks && this.d_pieces[i][j]) { + let classes = ["mark"]; + if (this.board[i][j] != "") + classes.push("transparent"); + addPiece(i, j, "d_pieces", classes); } } } @@ -817,7 +833,7 @@ export default class ChessRules { } } } - if (this.hasReserve && !this.isDiagram) + if (this.hasReserve) this.rescaleReserve(newR); } diff --git a/common.css b/common.css index 5ad9428..167822b 100644 --- a/common.css +++ b/common.css @@ -203,12 +203,18 @@ main > div { margin: 5px 0; text-align: center; } +piece.mark { + background-image: url('/pieces/mark.svg'); +} +piece.mark.transparent { + opacity: 0.65; +} .full-rules figure { display: block; overflow: visible; margin-top: 20px; } -.full-rules figure:after { +.full-rules figure::after { content: ''; display: block; clear: both; diff --git a/pieces/mark.svg b/pieces/mark.svg new file mode 100644 index 0000000..9c1b930 --- /dev/null +++ b/pieces/mark.svg @@ -0,0 +1,56 @@ + + + + + + image/svg+xml + + + + + + + + diff --git a/utils/drawDiagrams.js b/utils/drawDiagrams.js index ec55d50..9438dd6 100644 --- a/utils/drawDiagrams.js +++ b/utils/drawDiagrams.js @@ -42,6 +42,9 @@ function re_drawDiagrams() { vr[i] = new V({ element: "diag_" + i, fen: diagrams[i].dataset.fen, + marks: diagrams[i].dataset.mks + ? JSON.parse('[' + diagrams[i].dataset.mks + ']') + : undefined, color: diagrams[i].dataset.col || 'w', options: {}, diagram: true diff --git a/variants/Chakart/complete_rules.html b/variants/Chakart/complete_rules.html index da15926..1f64dd6 100644 --- a/variants/Chakart/complete_rules.html +++ b/variants/Chakart/complete_rules.html @@ -46,7 +46,7 @@

The king cannot castle, and pawns don't capture en passant.

+ data-fen='qbbrrnek/pppppppp/5n2/8/1BwP4/3m4/PPP1PPPP/QBNN1KRR b 3 {"flags":"1111"}'>
After 1.d4 Nf6 2.Bb4 (put a bomb on c4).
@@ -81,10 +81,10 @@
+ data-fen='rn1b2qk/pbpp1ppp/1w2wp2/1p1Rm3/3PdnPr/4PPd1/PPP1m2P/NNB1KRQB b 1 {"flags":"1111"}'>
+ data-fen='rn1b2qk/pbpp1ppp/1w3p2/1p1P4/3P1nPr/4P1d1/PPP1m2P/NNB1KRQB w 2 {"flags":"1111"}'>
Left: before 1.fxe4. Right: after the move, ending on d6.
@@ -125,7 +125,7 @@ data-fen='erk2rq1/1m2e1m1/mppmne1m/p1BpppPp/mm1P1QbP/1Nmnw1dm/e1mP2d1/1BwR1RKN b 1 {"flags":"1111"}'>
+ data-fen='erk3Q1/1m2e1d1/mppmnr1m/p1BpppPp/mm1P1QbP/1Nmnw1dm/e1mP2d1/1BwR1RKN w 2 {"flags":"1111"}'>
1...Rxf6*W: Waluigi turns the g8 queen into white.