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