From: Benjamin Auder <benjamin.auder@somewhere> Date: Thu, 30 Jun 2022 07:56:05 +0000 (+0200) Subject: Improve diagraming abilities, fix Chakart full rules X-Git-Url: https://git.auder.net/%7B%7B%20asset%28%27mixstore/images/assets/doc/img/common.css?a=commitdiff_plain;h=549ca151c2c1a5d0c76cc1ab249d1687c5a18f62;p=xogo.git Improve diagraming abilities, fix Chakart full rules --- diff --git a/base_rules.js b/base_rules.js index ad30c0a..16f6d7a 100644 --- a/base_rules.js +++ b/base_rules.js @@ -454,7 +454,7 @@ export default class ChessRules { this.setFlags(fenParsed.flags); if (this.hasEnpassant) this.epSquare = this.getEpSquare(fenParsed.enpassant); - if (this.hasReserve) + if (this.hasReserve && !this.isDiagram) this.initReserves(fenParsed.reserve); if (this.options["crazyhouse"]) this.initIspawn(fenParsed.ispawn); @@ -558,24 +558,14 @@ export default class ChessRules { // VISUAL METHODS graphicalInit() { - // NOTE: not window.onresize = this.re_drawBoardElts because scope (this) - window.onresize = () => this.re_drawBoardElements(); const g_init = () => { this.re_drawBoardElements(); - if (!this.isDiagram) + if (!this.isDiagram && !this.mouseListeners && !this.touchListeners) this.initMouseEvents(); }; let container = document.getElementById(this.containerId); - if (container.getBoundingClientRect().width == 0) { - // Element not ready yet - let ro = new ResizeObserver(() => { - ro.unobserve(container); - g_init(); - }); - ro.observe(container); - } - else - g_init(); + this.windowResizeObs = new ResizeObserver(g_init); + this.windowResizeObs.observe(container); } re_drawBoardElements() { @@ -600,7 +590,7 @@ export default class ChessRules { cbHeight = Math.min(rc.height, 767); cbWidth = cbHeight * vRatio; } - if (this.hasReserve) { + if (this.hasReserve && !this.isDiagram) { const sqSize = cbWidth / this.size.y; // NOTE: allocate space for reserves (up/down) even if they are empty // Cannot use getReserveSquareSize() here, but sqSize is an upper bound. @@ -697,7 +687,7 @@ export default class ChessRules { } } } - if (this.hasReserve) + if (this.hasReserve && !this.isDiagram) this.re_drawReserve(['w', 'b'], r); } @@ -827,7 +817,7 @@ export default class ChessRules { } } } - if (this.hasReserve) + if (this.hasReserve && !this.isDiagram) this.rescaleReserve(newR); } @@ -1010,6 +1000,8 @@ export default class ChessRules { } removeListeners() { + let container = document.getElementById(this.containerId); + this.windowResizeObs.unobserve(container); if (this.isDiagram) return; //no listeners in this case if ('onmousedown' in window) { diff --git a/common.css b/common.css index aed01ae..5ad9428 100644 --- a/common.css +++ b/common.css @@ -179,18 +179,22 @@ main > div { margin: 20px auto; padding: 0 10px; } -.full-rules h2, .full-rules h3, .full-rules h4 { +.full-rules h1, .full-rules h2, .full-rules h3, .full-rules h4 { font-weight: bold; display: block; } +.full-rules h1 { + font-size: 2.5em; + margin: 10px 0 20px 0; +} .full-rules h2 { color: darkred; - font-size: 2.5em; + font-size: 2em; margin: 10px 0; } .full-rules h3 { color: darkviolet; - font-size: 2em; + font-size: 1.8em; margin: 10px 0; } .full-rules h4 { @@ -199,15 +203,34 @@ main > div { margin: 5px 0; text-align: center; } +.full-rules figure { + display: block; + overflow: visible; + margin-top: 20px; +} +.full-rules figure:after { + content: ''; + display: block; + clear: both; + margin-bottom: 20px; +} .full-rules .diag { position: relative; - margin: -30px auto 0 auto; + margin: 0 auto; +} +.full-rules .left { + float: left; +} +.full-rules .right { + float: right; } .full-rules figcaption { display: block; text-align: center; - margin-top: -50px; - margin-bottom: 30px; + clear: both; + font-size: 0.9em; + color: #0D1C46; + font-weight: bold; } /* TODO: use same CSS for rules and full-rules? */ .full-rules p, .full-rules ul, .full-rules ol { @@ -221,40 +244,6 @@ main > div { list-style-type: numeric; padding-left: 30px; } -/* From vchess to adapt: */ -/* -figure.diagram-container - margin: 15px 0 15px 0 - text-align: center - width: 100% - display: block - .diagram - display: block - width: 50% - margin-left: auto - margin-right: auto - @media screen and (max-width: 630px) - width: 75% - .diag12 - float: left - width: 42% - margin: 0 2% 0 6% - @media screen and (max-width: 630px) - width: 49% - margin: 0 1% 0 0 - .diag22 - float: left - width: 42% - margin: 0 6% 0 2% - @media screen and (max-width: 630px) - width: 49% - margin: 0 0 0 1% - figcaption - display: block - clear: both - padding-top: 5px - font-size: 0.8em -*/ #ng-select { margin-bottom: 20px; diff --git a/utils/drawDiagrams.js b/utils/drawDiagrams.js index 4672643..ec55d50 100644 --- a/utils/drawDiagrams.js +++ b/utils/drawDiagrams.js @@ -3,35 +3,51 @@ function fenToDiag(vname) { window.V = module.default; for (const [k, v] of Object.entries(V.Aliases)) window[k] = v; - drawDiagrams(); + re_drawDiagrams(); }); } // TODO: heuristic to improve for ratio != 1 (how?) -function getDiagSize() { - if (window.innerWidth > 1000) - return 500; - if (window.innerWidth < 800) - return window.innerWidth; - return window.innerWidth / 2; +function getDiagSize(elt) { + const baseWidth = Math.min(window.innerWidth, 800); + let multFact = 1; + if (elt.classList.contains("left") || elt.classList.contains("right")) + multFact = 0.45; + else if (baseWidth > 630) + multFact = 0.5; + else + multFact = 0.7; + return multFact * baseWidth; } -function drawDiagrams() { +let vr = null; +function re_drawDiagrams() { const diagrams = document.getElementsByClassName("diag"); + if (diagrams.length == 0) + return; + const redrawing = !!vr; + if (!redrawing) + vr = new Array(diagrams.length); for (let i=0; i<diagrams.length; i++) { - let chessboard = document.createElement("div"); - chessboard.classList.add("chessboard"); - diagrams[i].appendChild(chessboard); - const diagSize = getDiagSize(); + if (!redrawing) { + let chessboard = document.createElement("div"); + chessboard.classList.add("chessboard"); + diagrams[i].appendChild(chessboard); + diagrams[i].id = "diag_" + i; + } + const diagSize = getDiagSize(diagrams[i]); diagrams[i].style.width = diagSize + "px"; diagrams[i].style.height = diagSize + "px"; - diagrams[i].id = "diag_" + i; - const vr = new V({ - element: "diag_" + i, - fen: diagrams[i].dataset.fen, - color: diagrams[i].dataset.col || 'w', - options: {}, - diagram: true - }); + if (!redrawing) { + vr[i] = new V({ + element: "diag_" + i, + fen: diagrams[i].dataset.fen, + color: diagrams[i].dataset.col || 'w', + options: {}, + diagram: true + }); + } } } + +window.onresize = re_drawDiagrams; diff --git a/variants/Chakart/complete_rules.html b/variants/Chakart/complete_rules.html index b2b1411..da15926 100644 --- a/variants/Chakart/complete_rules.html +++ b/variants/Chakart/complete_rules.html @@ -12,17 +12,17 @@ <div> <p> - Pieces move as usual, but they all hide a special "power" inspired by - Mario Kart: + Pieces move as usual, but they all hide a special "power" + inspired by Mario Kart: </p> <ul> <li> - The pawn (Toad) leaves a "turbo" mushroom on its initial square, or on - the intermediate one in case of a two squares move. + The pawn (Toad) leaves a "turbo" mushroom on its initial square, + or on the intermediate one in case of a two squares move. </li> <li> - The knight (Yoshi) let a surprise egg on its initial square. See about - egg effect below. + The knight (Yoshi) let a surprise egg on its initial square. + See about egg effect below. </li> <li> The rook (Donkey) put a banana on a square diagonally adjacent to the @@ -33,8 +33,8 @@ arrival one, at random, if possible. </li> <li> - The queen (Mario) can play a stealth move once in the game: the opponent - will only know that a queen moved - to an empty square. + The queen (Mario) can play a stealth move once in the game: + the opponent will only know that a queen moved - to an empty square. A promoted queen also has this power if not already used. </li> <li> @@ -63,6 +63,7 @@ A king or a pawn arriving on a mushroom advance one square further, while a knight jump another time in the same direction, if possible. Pawns can "eat" objects diagonally too. + Mushrooms have no effect on sliders (queen, rook, bishop). </li> <li> A piece arriving on a banana (resp. bomb) is redirected at random by one @@ -70,24 +71,22 @@ color!) stands on that square, then it is captured. </li> <li> - The effects can cumulate, as illustrated on the diagram: the bishop - "captures" the banana on e4, and is then redirected twoard e5: mushroom, - it jumps over the black pawn to ends on the bomb on e7, which sends it - on d6 (f6 and f8 were possible too). A bomb is finally put on c6 which - is the only eligible square. A piece may ends on its initial square, - move back, and so on. That being said, a given object can only be used - once on the path. + The effects can cumulate, as illustrated on the diagram: the pawn + "captures" the banana on e4, and is then redirected toward e5: mushroom, + it jumps to the next square, which sends it on d5 eating the white rook. + (We can imagine that the hope was to eat the black knight instead). + A piece may ends on its initial square, move back, and so on. That being + said, a given object can only be used once on the path. </li> </ul> - <!-- TODO: class for left/right + adapt diagrams for new rules --> <figure> <div class="diag left" - data-fen='rn1b2qk/pbppwppp/1w2p3/1p1Rm3/3PdnPr/4P1d1/PPP1mP1P/NNB1KRQB b 1 {"flags":"1111"}'> + data-fen='rn1b2qk/pbpp1ppp/1w2wp2/1p1Rm3/3PdnPr/4PPd1/PPP1m2P/NNB1KRQB b 1 {"flags":"1111"}'> </div> <div class="diag right" - data-fen='rn1b2qk/pbpp1ppp/1wwBp3/1p1R4/3P1nPr/4P1d1/PPP1mP1P/NNB1KRQ1 w 2 {"flags":"1111"}'> + data-fen='rn1b2qk/pbpp1ppp/1w3p2/1p1P4/3P1nPr/4P1d1/PPP1m2P/NNB1KRQB w 2 {"flags":"1111"}'> </div> - <figcaption>Left: before 1.Bxe4. Right: after the move, ending on d6.</figcaption> + <figcaption>Left: before 1.fxe4. Right: after the move, ending on d6.</figcaption> </figure> </div>