From: Benjamin Auder <benjamin.auder@somewhere>
Date: Tue, 27 Nov 2018 09:22:58 +0000 (+0100)
Subject: Adjust squares size for bigger boards
X-Git-Url: https://git.auder.net/doc/html/css/%7B%7B%20targetUrl%20%7D%7D?a=commitdiff_plain;h=c94bc81252c82c9caf7570b4c8c7f139e124ff85;p=vchess.git

Adjust squares size for bigger boards
---

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 1b216efa..fcae2f11 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -20,7 +20,7 @@ Vue.component('my-game', {
 		};
 	},
 	render(h) {
-		let [sizeX,sizeY] = VariantRules.size;
+		const [sizeX,sizeY] = VariantRules.size;
 		// Precompute hints squares to facilitate rendering
 		let hintSquares = doubleArray(sizeX, sizeY, false);
 		this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
@@ -127,7 +127,10 @@ Vue.component('my-game', {
 				this.choices.map( m => { //a "choice" is a move
 					return h('div',
 						{
-							'class': { 'board': true },
+							'class': {
+								'board': true,
+								['board'+sizeX]: true,
+							},
 							style: {
 								'width': (100/this.choices.length) + "%",
 								'padding-bottom': (100/this.choices.length) + "%",
@@ -137,7 +140,7 @@ Vue.component('my-game', {
 							{
 								attrs: { "src": '/images/pieces/' +
 									VariantRules.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
-								'class': { 'choice-piece': true, 'board': true },
+								'class': { 'choice-piece': true },
 								on: { "click": e => { this.play(m); this.choices=[]; } },
 							})
 						]
@@ -204,6 +207,7 @@ Vue.component('my-game', {
 								{
 									'class': {
 										'board': true,
+										['board'+sizeX]: true,
 										'light-square': (i+j)%2==0 && (this.expert || !highlight),
 										'dark-square': (i+j)%2==1 && (this.expert || !highlight),
 										'highlight': !this.expert && highlight,
diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index 7e530f69..e28bc84c 100644
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -71,15 +71,24 @@ figure.diagram-container > .diagram
 .black-turn
   background-color: black
 
-// TODO: div.board, board9, board10, board11, board12
 div.board
   float: left
-  width: 12.5%
   height: 0
-  padding-bottom: 12.5%
   display: inline-block
   position: relative
 
+div.board8
+  width: 12.5%
+  padding-bottom: 12.5%
+
+div.board10
+  width: 10%
+  padding-bottom: 10%
+
+div.board11
+  width: 9.1%
+  padding-bottom: 9.1%
+
 .game
   clear: both