From: Benjamin Auder Date: Wed, 1 Jun 2022 18:52:06 +0000 (+0200) Subject: Fix rescale() instability. TODO: hex rotation vertical board X-Git-Url: https://git.auder.net/doc/html/scripts/current/gitweb.css?a=commitdiff_plain;h=a1b45f4c9f254fad73af06b4123b7208247bbba4;p=xogo.git Fix rescale() instability. TODO: hex rotation vertical board --- diff --git a/base_rules.js b/base_rules.js index 33411f0..3117506 100644 --- a/base_rules.js +++ b/base_rules.js @@ -787,9 +787,10 @@ export default class ChessRules { if (newHeight > window.innerHeight) newHeight = window.innerHeight; const newRatio = newWidth / newHeight; - if (newRatio > self.size.ratio) + const epsilon = 1e-4; //arbitrary small value to avoid instabilities + if (newRatio - self.size.ratio > epsilon) newWidth = newHeight * self.size.ratio; - else if (newRatio < self.size.ratio) + else if (newRatio - self.size.ratio < -epsilon) newHeight = newWidth / self.size.ratio; chessboard.style.width = newWidth + "px"; chessboard.style.height = newHeight + "px"; diff --git a/variants/Hex/class.js b/variants/Hex/class.js index 37bd53c..ab634b8 100644 --- a/variants/Hex/class.js +++ b/variants/Hex/class.js @@ -78,14 +78,14 @@ export default class HexRules extends ChessRules { return (emptyCount + "/").repeat(this.size.x).slice(0, -1) + " w 0"; } - // TODO: re-enable rotation + // TODO: enable vertical board (rotate?) getSvgChessboard() { // NOTE: with small margin seems nicer let width = 173.2 * this.size.y + 173.2 * (this.size.y-1) / 2 + 30, height = 50 + Math.floor(150 * this.size.x) + 30, min_x = -86.6 - 15, min_y = -100 - 15; -// if (this.size.rotate) { +// if (this.size.ratio < 1) { // [width, height] = [height, width]; // [min_x, min_y] = [min_y, min_x]; // } @@ -93,7 +93,7 @@ export default class HexRules extends ChessRules { @@ -177,14 +177,14 @@ export default class HexRules extends ChessRules { document.addEventListener("touchstart", mousedown, {passive: false}); } + // TODO: enable rotation get size() { const baseRatio = 1.619191; // 2801.2 / 1730, "widescreen" - const rotate = window.innerWidth < window.innerHeight; //"vertical screen" + const rotate = false; //window.innerWidth < window.innerHeight; //"vertical screen" return { x: this.options["bsize"], y: this.options["bsize"], - ratio: rotate ? 1 / baseRatio : baseRatio, - rotate: rotate + ratio: (rotate ? 1 / baseRatio : baseRatio) }; }