+ // Goto move except if click on current move:
+ if (this.cursor != index) this.$emit("goto-move", index);
+ },
+ adjustBoard: function(vertical) {
+ const boardContainer = document.getElementById("boardContainer");
+ if (!boardContainer) return; //no board on page
+ const movesWidth = window.innerWidth >= 768 ? 280 : 0;
+ let gameContainer = document.getElementById("gameContainer");
+ if (vertical) {
+ const bRect =
+ document.getElementById("rootBoardElement").getBoundingClientRect();
+ if (bRect.bottom > window.innerHeight) {
+ const maxHeight = window.innerHeight - 20;
+ gameContainer.style.height = maxHeight + "px";
+ const boardSize = maxHeight * bRect.width / bRect.height;
+ boardContainer.style.width = boardSize + "px";
+ gameContainer.style.width = boardSize + movesWidth + "px";
+ this.$emit("redraw-board");
+ setTimeout( () => window.scroll(0, bRect.top), 1000);
+ }
+ }
+ else {
+ const k = document.getElementById("boardSize").value;
+ // TODO: these 160 and 280 are arbitrary...
+ const minBoardWidth =
+ (window.innerWidth <= 767 || "ontouchstart" in window) ? 160 : 240;
+ // Value of 0 is board min size; 100 is window.width [- movesWidth]
+ const maxWidth =
+ Math.min(window.innerHeight, window.innerWidth - movesWidth);
+ const boardSize =
+ minBoardWidth + (k * (maxWidth - minBoardWidth)) / 100;
+ boardContainer.style.width = boardSize + "px";
+ gameContainer.style.width = boardSize + movesWidth + "px";
+ this.$emit("redraw-board");
+ }