X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=base_rules.js;h=ad30c0a04cd97d376d252adb1a6f0428b0fd3a34;hb=5abaabb3061f9c2927e2204a33a58c309f3a0082;hp=ced3eedd28d6bf560c48c5161f228fa24f0dd265;hpb=6b9320bb6e42ece7694df32f85aab4d2989f6a13;p=xogo.git diff --git a/base_rules.js b/base_rules.js index ced3eed..ad30c0a 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(); } @@ -559,47 +560,60 @@ export default class ChessRules { 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.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(); } 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) { 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 +657,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); @@ -966,22 +982,49 @@ 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() { + 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");