X-Git-Url: https://git.auder.net/assets/icon_infos.svg?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=2da7ad050f2f92dfb1ed7f3de3eac5bb6cc35a31;hb=b8a0ec4a8182967f25179f60ad9a4b989684d422;hp=11ec4c91a5ce529b0fccb27c0bc9e0908acd0840;hpb=2748531f7dbe3202b29c911eede36a0069a33528;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 11ec4c91..2da7ad05 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -22,6 +22,7 @@ Vue.component('my-game', {
 	},
 	render(h) {
 		const [sizeX,sizeY] = VariantRules.size;
+		const smallScreen = (screen.width <= 500);
 		// Precompute hints squares to facilitate rendering
 		let hintSquares = doubleArray(sizeX, sizeY, false);
 		this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
@@ -30,23 +31,21 @@ Vue.component('my-game', {
 		this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; });
 		let elementArray = [];
 		let actionArray = [];
-		if (["idle","human"].includes(this.mode))
-		{
-			actionArray.push(
-				h('button',
-				{
-					on: { click: this.clickGameSeek },
-					attrs: { "aria-label": 'New online game' },
-					'class': {
-						"tooltip": true,
-						"bottom": true, //display below
-						"seek": this.seek,
-						"playing": this.mode == "human",
-					},
+		actionArray.push(
+			h('button',
+			{
+				on: { click: this.clickGameSeek },
+				attrs: { "aria-label": 'New online game' },
+				'class': {
+					"tooltip": true,
+					"bottom": true, //display below
+					"seek": this.seek,
+					"playing": this.mode == "human",
+					"small": smallScreen,
 				},
-				[h('i', { 'class': { "material-icons": true } }, "accessibility")])
-			);
-		}
+			},
+			[h('i', { 'class': { "material-icons": true } }, "accessibility")])
+		);
 		if (["idle","computer"].includes(this.mode))
 		{
 			actionArray.push(
@@ -58,6 +57,7 @@ Vue.component('my-game', {
 						"tooltip":true,
 						"bottom": true,
 						"playing": this.mode == "computer",
+						"small": smallScreen,
 					},
 				},
 				[h('i', { 'class': { "material-icons": true } }, "computer")])
@@ -74,6 +74,7 @@ Vue.component('my-game', {
 						"tooltip":true,
 						"bottom": true,
 						"playing": this.mode == "friend",
+						"small": smallScreen,
 					},
 				},
 				[h('i', { 'class': { "material-icons": true } }, "people")])
@@ -132,6 +133,7 @@ Vue.component('my-game', {
 						"indic-right": true,
 						"expert-switch": true,
 						"expert-mode": this.expert,
+						"small": smallScreen,
 					},
 				},
 				[h('i', { 'class': { "material-icons": true } }, "visibility_off")]
@@ -258,6 +260,7 @@ Vue.component('my-game', {
 							'class': {
 								"tooltip":true,
 								"bottom": true,
+								"small": smallScreen,
 							},
 						},
 						[h('i', { 'class': { "material-icons": true } }, "flag")])
@@ -272,12 +275,14 @@ Vue.component('my-game', {
 							style: { "margin-left": "30px" },
 							on: { click: e => this.undo() },
 							attrs: { "aria-label": 'Undo' },
+							"class": { "small": smallScreen },
 						},
 						[h('i', { 'class': { "material-icons": true } }, "fast_rewind")]),
 					h('button',
 						{
 							on: { click: e => this.play() },
 							attrs: { "aria-label": 'Play' },
+							"class": { "small": smallScreen },
 						},
 						[h('i', { 'class': { "material-icons": true } }, "fast_forward")]),
 					]
@@ -292,6 +297,7 @@ Vue.component('my-game', {
 							style: { "margin-left": "30px" },
 							on: { click: this.undoInGame },
 							attrs: { "aria-label": 'Undo' },
+							"class": { "small": smallScreen },
 						},
 						[h('i', { 'class': { "material-icons": true } }, "undo")]
 					),
@@ -299,6 +305,7 @@ Vue.component('my-game', {
 						{
 							on: { click: () => { this.mycolor = this.vr.getOppCol(this.mycolor) } },
 							attrs: { "aria-label": 'Flip' },
+							"class": { "small": smallScreen },
 						},
 						[h('i', { 'class': { "material-icons": true } }, "cached")]
 					),