From fcede3ef85cbb36a05220033cdd318af68e0084c Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Thu, 2 Jun 2022 22:48:48 +0200 Subject: [PATCH] Hex rotation OK --- common.css | 5 +++++ variants/Hex/class.js | 31 ++++++++++++++++--------------- 2 files changed, 21 insertions(+), 15 deletions(-) diff --git a/common.css b/common.css index c1ba77c..bf4e1a8 100644 --- a/common.css +++ b/common.css @@ -117,6 +117,11 @@ h4 { margin: 10px 0; } +#gameInfos > .rules > a { + padding-bottom: 1px; + border-bottom: 1px dotted black; +} + #gameStopped > h1 { margin-bottom: 10px; } diff --git a/variants/Hex/class.js b/variants/Hex/class.js index 91a0fe6..db60da7 100644 --- a/variants/Hex/class.js +++ b/variants/Hex/class.js @@ -78,24 +78,21 @@ export default class HexRules extends ChessRules { return (emptyCount + "/").repeat(this.size.x).slice(0, -1) + " w 0"; } - // 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.ratio < 1) { -// [width, height] = [height, width]; -// [min_x, min_y] = [min_y, min_x]; -// } + if (this.size.ratio < 1) { + // Rotate by 30 degrees to display vertically + [width, height] = [height, width]; + [min_x, min_y] = [min_y, min_x]; + } let board = ` <svg viewBox="${min_x} ${min_y} ${width} ${height}" - class="chessboard_SVG"`; -// if (this.size.ratio < 1) -// board += ` transform="rotate(90 ${min_x} ${min_y})"` - board += `> + class="chessboard_SVG"> <defs> <g id="hexa"> <polygon @@ -104,7 +101,10 @@ export default class HexRules extends ChessRules { /> </g> </defs>`; - board += "<g>"; + board += "<g"; + if (this.size.ratio < 1) + board += ` transform="rotate(30)"` + board += ">"; for (let i=0; i < this.size.x; i++) { for (let j=0; j < this.size.y; j++) { board += ` @@ -117,9 +117,11 @@ export default class HexRules extends ChessRules { />`; } } - board += `</g><g style="fill:none;stroke-width:10">`; + board += `</g><g style="fill:none;stroke-width:10"`; + if (this.size.ratio < 1) + board += ` transform="rotate(30)"` // Goals: up/down/left/right - board += `<polyline style="stroke:red" points="` + board += `><polyline style="stroke:red" points="` for (let i=0; i<=2*this.size.y; i++) board += ((i-1)*86.6) + ',' + (i % 2 == 0 ? -50 : -100) + ' '; board += `"/><polyline style="stroke:red" points="`; @@ -180,10 +182,9 @@ 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 = false; //window.innerWidth < window.innerHeight; //"vertical screen" + const baseRatio = 1.6191907514450865; //2801.2 / 1730, "widescreen" + const rotate = window.innerWidth < window.innerHeight; //"vertical screen" return { x: this.options["bsize"], y: this.options["bsize"], -- 2.44.0