X-Git-Url: https://git.auder.net/?p=vchess.git;a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=eb9e6e4cdcc56ec412c6099917fe12fe92ca8c99;hp=914b3c3f36769adbceddc588ac3ab34ca8e34a97;hb=7b3cf1b79954a47000527dd0c3f0fc1cecb5315d;hpb=06e79b0783d6e9962ca6b2a25f62d46f46fa5c8b diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 914b3c3f..eb9e6e4c 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -21,7 +21,15 @@ export default { }, render(h) { if (!this.vr) - return; + { + // Return empty div of class 'game' to avoid error when setting size + return h("div", + { + "class": { + "game": true, + }, + }); + } const [sizeX,sizeY] = [V.size.x,V.size.y]; // Precompute hints squares to facilitate rendering let hintSquares = ArrayFun.init(sizeX, sizeY, false); @@ -30,9 +38,9 @@ export default { let incheckSq = ArrayFun.init(sizeX, sizeY, false); this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; }); - let firstRow = document.querySelector(".game > .row"); - const squareWidth = (!!firstRow - ? document.querySelector(".game > .row").offsetWidth / sizeY + let boardElt = document.querySelector(".game"); + const squareWidth = (!!boardElt + ? boardElt.offsetWidth / sizeY : 40); //arbitrary value (not relevant) const choices = h( 'div', @@ -252,6 +260,12 @@ export default { elementArray ); }, + mounted: function() { + // NOTE (TODO?): could also be dependent on page type (game, analyze, variant) + const boardSize = localStorage.getItem("boardSize"); + if (!!boardSize) + document.querySelector(".game").style.width = boardSize + "px"; + }, methods: { mousedown: function(e) { e = e || window.event; @@ -386,7 +400,7 @@ div.board11 padding-bottom: 9.1% .game - width: #{'min(80vw, 500px)'} + //width: #{'min(80vw, 500px)'} margin: 0 auto .board cursor: pointer