From 549ca151c2c1a5d0c76cc1ab249d1687c5a18f62 Mon Sep 17 00:00:00 2001 From: Benjamin Auder Date: Thu, 30 Jun 2022 09:56:05 +0200 Subject: [PATCH] Improve diagraming abilities, fix Chakart full rules --- base_rules.js | 26 ++++------- common.css | 69 ++++++++++++---------------- utils/drawDiagrams.js | 56 ++++++++++++++-------- variants/Chakart/complete_rules.html | 37 ++++++++------- 4 files changed, 92 insertions(+), 96 deletions(-) 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

- 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:

-
+ 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.Bxe4. Right: after the move, ending on d6.
+
Left: before 1.fxe4. Right: after the move, ending on d6.
-- 2.44.0