X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=base_rules.js;h=16f6d7a733c6e0c3b664c57391af29a02c2e2478;hb=549ca151c2c1a5d0c76cc1ab249d1687c5a18f62;hp=ced3eedd28d6bf560c48c5161f228fa24f0dd265;hpb=6b9320bb6e42ece7694df32f85aab4d2989f6a13;p=xogo.git diff --git a/base_rules.js b/base_rules.js index ced3eed..16f6d7a 100644 --- a/base_rules.js +++ b/base_rules.js @@ -415,6 +415,7 @@ export default class ChessRules { // Graphical (can use variables defined above) this.containerId = o.element; + this.isDiagram = o.diagram; this.graphicalInit(); } @@ -453,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); @@ -557,49 +558,52 @@ export default class ChessRules { // VISUAL METHODS graphicalInit() { - // NOTE: not window.onresize = this.re_drawBoardElts because scope (this) - window.onresize = () => this.re_drawBoardElements(); - this.re_drawBoardElements(); - this.initMouseEvents(); - const chessboard = - document.getElementById(this.containerId).querySelector(".chessboard"); + const g_init = () => { + this.re_drawBoardElements(); + if (!this.isDiagram && !this.mouseListeners && !this.touchListeners) + this.initMouseEvents(); + }; + let container = document.getElementById(this.containerId); + this.windowResizeObs = new ResizeObserver(g_init); + this.windowResizeObs.observe(container); } re_drawBoardElements() { const board = this.getSvgChessboard(); const oppCol = C.GetOppCol(this.playerColor); - let chessboard = - document.getElementById(this.containerId).querySelector(".chessboard"); + const container = document.getElementById(this.containerId); + const rc = container.getBoundingClientRect(); + let chessboard = container.querySelector(".chessboard"); chessboard.innerHTML = ""; chessboard.insertAdjacentHTML('beforeend', board); // Compare window ratio width / height to aspectRatio: - const windowRatio = window.innerWidth / window.innerHeight; + const windowRatio = rc.width / rc.height; let cbWidth, cbHeight; const vRatio = this.size.ratio || 1; if (windowRatio <= vRatio) { // Limiting dimension is width: - cbWidth = Math.min(window.innerWidth, 767); + cbWidth = Math.min(rc.width, 767); cbHeight = cbWidth / vRatio; } else { // Limiting dimension is height: - cbHeight = Math.min(window.innerHeight, 767); + 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. - if ((window.innerHeight - cbHeight) / 2 < sqSize + 5) { - cbHeight = window.innerHeight - 2 * (sqSize + 5); + if ((rc.height - cbHeight) / 2 < sqSize + 5) { + cbHeight = rc.height - 2 * (sqSize + 5); cbWidth = cbHeight * vRatio; } } chessboard.style.width = cbWidth + "px"; chessboard.style.height = cbHeight + "px"; // Center chessboard: - const spaceLeft = (window.innerWidth - cbWidth) / 2, - spaceTop = (window.innerHeight - cbHeight) / 2; + const spaceLeft = (rc.width - cbWidth) / 2, + spaceTop = (rc.height - cbHeight) / 2; chessboard.style.left = spaceLeft + "px"; chessboard.style.top = spaceTop + "px"; // Give sizes instead of recomputing them, @@ -643,6 +647,7 @@ 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 window.innerWidth) { - newWidth = window.innerWidth; + if (newWidth > rc.width) { + newWidth = rc.width; newHeight = newWidth / vRatio; } - if (newHeight > window.innerHeight) { - newHeight = window.innerHeight; + if (newHeight > rc.height) { + newHeight = rc.height; newWidth = newHeight * vRatio; } chessboard.style.width = newWidth + "px"; chessboard.style.height = newHeight + "px"; - const newX = (window.innerWidth - newWidth) / 2; + const newX = (rc.width - newWidth) / 2; chessboard.style.left = newX + "px"; - const newY = (window.innerHeight - newHeight) / 2; + const newY = (rc.height - newHeight) / 2; chessboard.style.top = newY + "px"; const newR = {x: newX, y: newY, width: newWidth, height: newHeight}; const pieceWidth = this.getPieceWidth(newWidth); @@ -811,7 +817,7 @@ export default class ChessRules { } } } - if (this.hasReserve) + if (this.hasReserve && !this.isDiagram) this.rescaleReserve(newR); } @@ -966,22 +972,51 @@ export default class ChessRules { curPiece.remove(); }; + const resize = (e) => this.rescale(e.deltaY < 0 ? "up" : "down"); + if ('onmousedown' in window) { - document.addEventListener("mousedown", mousedown); - document.addEventListener("mousemove", mousemove); - document.addEventListener("mouseup", mouseup); - document.addEventListener("wheel", - (e) => this.rescale(e.deltaY < 0 ? "up" : "down")); + this.mouseListeners = [ + {type: "mousedown", listener: mousedown}, + {type: "mousemove", listener: mousemove}, + {type: "mouseup", listener: mouseup}, + {type: "wheel", listener: resize} + ]; + this.mouseListeners.forEach(ml => { + document.addEventListener(ml.type, ml.listener); + }); } if ('ontouchstart' in window) { - // https://stackoverflow.com/a/42509310/12660887 - document.addEventListener("touchstart", mousedown, {passive: false}); - document.addEventListener("touchmove", mousemove, {passive: false}); - document.addEventListener("touchend", mouseup, {passive: false}); + this.touchListeners = [ + {type: "touchstart", listener: mousedown}, + {type: "touchmove", listener: mousemove}, + {type: "touchend", listener: mouseup} + ]; + this.touchListeners.forEach(tl => { + // https://stackoverflow.com/a/42509310/12660887 + document.addEventListener(tl.type, tl.listener, {passive: false}); + }); } // TODO: onpointerdown/move/up ? See reveal.js /controllers/touch.js } + removeListeners() { + let container = document.getElementById(this.containerId); + this.windowResizeObs.unobserve(container); + if (this.isDiagram) + return; //no listeners in this case + if ('onmousedown' in window) { + this.mouseListeners.forEach(ml => { + document.removeEventListener(ml.type, ml.listener); + }); + } + if ('ontouchstart' in window) { + this.touchListeners.forEach(tl => { + // https://stackoverflow.com/a/42509310/12660887 + document.removeEventListener(tl.type, tl.listener); + }); + } + } + showChoices(moves, r) { let container = document.getElementById(this.containerId); let chessboard = container.querySelector(".chessboard");