X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=3474ea84834f90018a992afaf08221a625d21a7d;hb=388e4c401f05b1f6a4c54e33c9da9114969a53c0;hp=e2e908a0fb487266bd102d195e57215ef1bbeb28;hpb=a5d5668613d9a3d04c9a4f8b69122d02b7322137;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index e2e908a0..3474ea84 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -52,11 +52,10 @@ Vue.component('my-game', {
 			h('button',
 			{
 				on: { click: this.clickGameSeek },
-				attrs: { "aria-label": 'New online game' },
+				attrs: { "aria-label": translations['New live game'] },
 				'class': {
 					"tooltip": true,
 					"play": true,
-					"bottom": true, //display below
 					"seek": this.seek,
 					"playing": this.mode == "human",
 					"spaceright": true,
@@ -64,17 +63,16 @@ Vue.component('my-game', {
 			},
 			[h('i', { 'class': { "material-icons": true } }, "accessibility")])
 		);
-		if (["idle","chat","computer"].includes(this.mode))
+		if (variant!="Dark" && ["idle","chat","computer"].includes(this.mode))
 		{
 			actionArray.push(
 				h('button',
 				{
 					on: { click: this.clickComputerGame },
-					attrs: { "aria-label": 'New game VS computer' },
+					attrs: { "aria-label": translations['New game versus computer'] },
 					'class': {
 						"tooltip":true,
 						"play": true,
-						"bottom": true,
 						"playing": this.mode == "computer",
 						"spaceright": true,
 					},
@@ -82,17 +80,16 @@ Vue.component('my-game', {
 				[h('i', { 'class': { "material-icons": true } }, "computer")])
 			);
 		}
-		if (["idle","chat","friend"].includes(this.mode))
+		if (variant!="Dark" && ["idle","chat","friend"].includes(this.mode))
 		{
 			actionArray.push(
 				h('button',
 				{
 					on: { click: this.clickFriendGame },
-					attrs: { "aria-label": 'New IRL game' },
+					attrs: { "aria-label": translations['Analysis mode'] },
 					'class': {
 						"tooltip":true,
 						"play": true,
-						"bottom": true,
 						"playing": this.mode == "friend",
 						"spaceright": true,
 					},
@@ -142,7 +139,7 @@ Vue.component('my-game', {
 					{
 						on: { click: this.startChat },
 						attrs: {
-							"aria-label": 'Start chat',
+							"aria-label": translations['Start chat'],
 							"id": "chatBtn",
 						},
 						'class': {
@@ -163,7 +160,7 @@ Vue.component('my-game', {
 					{
 						on: { click: this.clearComputerGame },
 						attrs: {
-							"aria-label": 'Clear computer game',
+							"aria-label": translations['Clear game versus computer'],
 							"id": "clearBtn",
 						},
 						'class': {
@@ -197,7 +194,7 @@ Vue.component('my-game', {
 				{
 					on: { click: this.showSettings },
 					attrs: {
-						"aria-label": 'Settings',
+						"aria-label": translations['Settings'],
 						"id": "settingsBtn",
 					},
 					'class': {
@@ -279,7 +276,7 @@ Vue.component('my-game', {
 			);
 			// Create board element (+ reserves if needed by variant or mode)
 			const lm = this.vr.lastMove;
-			const showLight = this.hints &&
+			const showLight = this.hints && variant!="Dark" &&
 				(!["idle","chat"].includes(this.mode) || this.cursor==this.vr.moves.length);
 			const gameDiv = h('div',
 				{
@@ -301,7 +298,8 @@ Vue.component('my-game', {
 						_.range(sizeY).map(j => {
 							let cj = (this.mycolor=='w' ? j : sizeY-j-1);
 							let elems = [];
-							if (this.vr.board[ci][cj] != VariantRules.EMPTY)
+							if (this.vr.board[ci][cj] != VariantRules.EMPTY && (variant!="Dark"
+								|| this.score!="*" || this.vr.enlightened[this.mycolor][ci][cj]))
 							{
 								elems.push(
 									h(
@@ -345,6 +343,8 @@ Vue.component('my-game', {
 										'light-square': (i+j)%2==0,
 										'dark-square': (i+j)%2==1,
 										[this.color]: true,
+										'in-shadow': variant=="Dark" && this.score=="*"
+											&& !this.vr.enlightened[this.mycolor][ci][cj],
 										'highlight': showLight && !!lm && _.isMatch(lm.end, {x:ci,y:cj}),
 										'incheck': showLight && incheckSq[ci][cj],
 									},
@@ -364,11 +364,10 @@ Vue.component('my-game', {
 					h('button',
 						{
 							on: { click: this.resign },
-							attrs: { "aria-label": 'Resign' },
+							attrs: { "aria-label": translations['Resign'] },
 							'class': {
 								"tooltip":true,
 								"play": true,
-								"bottom": true,
 							},
 						},
 						[h('i', { 'class': { "material-icons": true } }, "flag")])
@@ -381,7 +380,7 @@ Vue.component('my-game', {
 					h('button',
 						{
 							on: { click: e => this.undo() },
-							attrs: { "aria-label": 'Undo' },
+							attrs: { "aria-label": translations['Undo'] },
 							"class": {
 								"play": true,
 								"spaceleft": true,
@@ -391,7 +390,7 @@ Vue.component('my-game', {
 					h('button',
 						{
 							on: { click: e => this.play() },
-							attrs: { "aria-label": 'Play' },
+							attrs: { "aria-label": translations['Play'] },
 							"class": {
 								"play": true,
 								"spaceleft": true,
@@ -408,7 +407,7 @@ Vue.component('my-game', {
 					h('button',
 						{
 							on: { click: this.undoInGame },
-							attrs: { "aria-label": 'Undo' },
+							attrs: { "aria-label": translations['Undo'] },
 							"class": {
 								"play": true,
 								"spaceleft": true,
@@ -419,7 +418,7 @@ Vue.component('my-game', {
 					h('button',
 						{
 							on: { click: () => { this.mycolor = this.vr.getOppCol(this.mycolor) } },
-							attrs: { "aria-label": 'Flip' },
+							attrs: { "aria-label": translations['Flip board'] },
 							"class": {
 								"play": true,
 								"spaceleft": true,
@@ -518,7 +517,12 @@ Vue.component('my-game', {
 					[
 						h('div',
 							{
-								"class": { "card": true, "smallpad": true },
+								"class": {
+									"card": true,
+									"smallpad": true,
+									"small-modal": true,
+									"text-center": true,
+								},
 							},
 							[
 								h('label',
@@ -567,7 +571,7 @@ Vue.component('my-game', {
 								{
 									attrs: { "id": "titleFenedit" },
 									"class": { "section": true },
-									domProps: { innerHTML: "Position + flags (FEN):" },
+									domProps: { innerHTML: translations["Game state (FEN):"] },
 								}
 							),
 							h('input',
@@ -588,7 +592,7 @@ Vue.component('my-game', {
 											this.newGame("friend", fen);
 										}
 									},
-									domProps: { innerHTML: "Ok" },
+									domProps: { innerHTML: translations["Ok"] },
 								}
 							),
 							h('button',
@@ -599,7 +603,7 @@ Vue.component('my-game', {
 												VariantRules.GenRandInitFen();
 										}
 									},
-									domProps: { innerHTML: "Random" },
+									domProps: { innerHTML: translations["Random"] },
 								}
 							),
 						]
@@ -634,7 +638,7 @@ Vue.component('my-game', {
 								{
 									attrs: { "id": "settingsTitle" },
 									"class": { "section": true },
-									domProps: { innerHTML: "Preferences" },
+									domProps: { innerHTML: translations["Preferences"] },
 								}
 							),
 							h('fieldset',
@@ -643,7 +647,7 @@ Vue.component('my-game', {
 									h('label',
 										{
 											attrs: { for: "nameSetter" },
-											domProps: { innerHTML: "My name is..." },
+											domProps: { innerHTML: translations["My name is..."] },
 										},
 									),
 									h('input',
@@ -664,7 +668,7 @@ Vue.component('my-game', {
 									h('label',
 										{
 											attrs: { for: "setHints" },
-											domProps: { innerHTML: "Show hints?" },
+											domProps: { innerHTML: translations["Show hints?"] },
 										},
 									),
 									h('input',
@@ -685,7 +689,7 @@ Vue.component('my-game', {
 									h('label',
 										{
 											attrs: { for: "selectColor" },
-											domProps: { innerHTML: "Board colors" },
+											domProps: { innerHTML: translations["Board colors"] },
 										},
 									),
 									h("select",
@@ -698,7 +702,7 @@ Vue.component('my-game', {
 												{
 													domProps: {
 														"value": "lichess",
-														innerHTML: "brown"
+														innerHTML: translations["brown"]
 													},
 													attrs: { "selected": this.color=="lichess" },
 												}
@@ -707,7 +711,7 @@ Vue.component('my-game', {
 												{
 													domProps: {
 														"value": "chesscom",
-														innerHTML: "green"
+														innerHTML: translations["green"]
 													},
 													attrs: { "selected": this.color=="chesscom" },
 												}
@@ -716,7 +720,7 @@ Vue.component('my-game', {
 												{
 													domProps: {
 														"value": "chesstempo",
-														innerHTML: "blue"
+														innerHTML: translations["blue"]
 													},
 													attrs: { "selected": this.color=="chesstempo" },
 												}
@@ -731,7 +735,7 @@ Vue.component('my-game', {
 									h('label',
 										{
 											attrs: { for: "selectSound" },
-											domProps: { innerHTML: "Play sounds?" },
+											domProps: { innerHTML: translations["Play sounds?"] },
 										},
 									),
 									h("select",
@@ -744,7 +748,7 @@ Vue.component('my-game', {
 												{
 													domProps: {
 														"value": "0",
-														innerHTML: "None"
+														innerHTML: translations["None"]
 													},
 													attrs: { "selected": this.sound==0 },
 												}
@@ -753,7 +757,7 @@ Vue.component('my-game', {
 												{
 													domProps: {
 														"value": "1",
-														innerHTML: "Newgame"
+														innerHTML: translations["New game"]
 													},
 													attrs: { "selected": this.sound==1 },
 												}
@@ -762,7 +766,7 @@ Vue.component('my-game', {
 												{
 													domProps: {
 														"value": "2",
-														innerHTML: "All"
+														innerHTML: translations["All"]
 													},
 													attrs: { "selected": this.sound==2 },
 												}
@@ -789,7 +793,7 @@ Vue.component('my-game', {
 				{
 					attrs: { "id": "titleChat" },
 					"class": { "section": true },
-					domProps: { innerHTML: "Chat with " + this.oppName },
+					domProps: { innerHTML: translations["Chat with "] + this.oppName },
 				}
 			)
 		];
@@ -813,7 +817,7 @@ Vue.component('my-game', {
 					attrs: {
 						"id": "input-chat",
 						type: "text",
-						placeholder: "Type here",
+						placeholder: translations["Type here"],
 					},
 					on: { keyup: this.trySendChat }, //if key is 'enter'
 				}
@@ -822,7 +826,7 @@ Vue.component('my-game', {
 				{
 					attrs: { id: "sendChatBtn"},
 					on: { click: this.sendChat },
-					domProps: { innerHTML: "Send" },
+					domProps: { innerHTML: translations["Send"] },
 				}
 			)
 		]);
@@ -882,7 +886,7 @@ Vue.component('my-game', {
 							{
 								attrs: { "id": "downloadBtn" },
 								on: { click: this.download },
-								domProps: { innerHTML: "Download game" },
+								domProps: { innerHTML: translations["Download game"] },
 							}
 						),
 					]
@@ -904,7 +908,7 @@ Vue.component('my-game', {
 							h('h3',
 								{
 									"class": { clickable: true },
-									domProps: { innerHTML: "Show solution" },
+									domProps: { innerHTML: translations["Show solution"] },
 									on: { click: this.toggleShowSolution },
 								}
 							),
@@ -918,24 +922,27 @@ Vue.component('my-game', {
 					)
 				);
 			}
-			// Show current FEN
-			elementArray.push(
-				h('div',
-					{
-						attrs: { id: "fen-div" },
-						"class": { "section-content": true },
-					},
-					[
-						h('p',
-							{
-								attrs: { id: "fen-string" },
-								domProps: { innerHTML: this.vr.getBaseFen() },
-								"class": { "text-center": true },
-							}
-						)
-					]
-				)
-			);
+			if (variant != "Dark" || this.score!="*")
+			{
+				// Show current FEN
+				elementArray.push(
+					h('div',
+						{
+							attrs: { id: "fen-div" },
+							"class": { "section-content": true },
+						},
+						[
+							h('p',
+								{
+									attrs: { id: "fen-string" },
+									domProps: { innerHTML: this.vr.getBaseFen() },
+									"class": { "text-center": true },
+								}
+							)
+						]
+					)
+				);
+			}
 		}
 		return h(
 			'div',
@@ -966,13 +973,13 @@ Vue.component('my-game', {
 			switch (this.score)
 			{
 				case "1-0":
-					eogMessage = "White win";
+					eogMessage = translations["White win"];
 					break;
 				case "0-1":
-					eogMessage = "Black win";
+					eogMessage = translations["Black win"];
 					break;
 				case "1/2":
-					eogMessage = "Draw";
+					eogMessage = translations["Draw"];
 					break;
 			}
 			return eogMessage;
@@ -1007,14 +1014,15 @@ Vue.component('my-game', {
 					// We opened another tab on the same game
 					this.mode = "idle";
 					this.vr = null;
-					alert("Already playing a game in this variant on another tab!");
+					alert(translations[
+						"Already playing a game in this variant on another tab!"]);
 					break;
 				case "newgame": //opponent found
 					// oppid: opponent socket ID
 					this.newGame("human", data.fen, data.color, data.oppid);
 					break;
 				case "newmove": //..he played!
-					this.play(data.move, "animate");
+					this.play(data.move, (variant!="Dark" ? "animate" : null));
 					break;
 				case "pong": //received if we sent a ping (game still alive on our side)
 					if (this.gameId != data.gameId)
@@ -1209,6 +1217,7 @@ Vue.component('my-game', {
 			delete localStorage[prefix+"score"];
 		},
 		// HACK because mini-css tooltips are persistent after click...
+		// NOTE: seems to work only in chrome/chromium. TODO...
 		getRidOfTooltip: function(elt) {
 			elt.style.visibility = "hidden";
 			setTimeout(() => { elt.style.visibility="visible"; }, 100);
@@ -1277,7 +1286,10 @@ Vue.component('my-game', {
 			{
 				const storageVariant = localStorage.getItem("variant");
 				if (!!storageVariant && storageVariant !== variant)
-					return alert("Finish your " + storageVariant + " game first!");
+				{
+					return alert(translations["Finish your "] +
+							storageVariant + translations[" game first!"]);
+				}
 				// Send game request and wait..
 				try {
 					this.conn.send(JSON.stringify({code:"newgame", fen:fen}));
@@ -1303,8 +1315,8 @@ Vue.component('my-game', {
 					const score = localStorage.getItem("comp-score");
 					if (storageVariant !== variant && score == "*")
 					{
-						if (!confirm("Unfinished " + storageVariant +
-							" computer game will be erased"))
+						if (!confirm(storageVariant +
+							translations[": unfinished computer game will be erased"]))
 						{
 							return;
 						}
@@ -1351,6 +1363,7 @@ Vue.component('my-game', {
 			const fen = localStorage.getItem(prefix+"fen");
 			const score = localStorage.getItem(prefix+"score"); //set in "endGame()"
 			this.fenStart = localStorage.getItem(prefix+"fenStart");
+			this.vr = new VariantRules(fen, moves);
 			if (mode == "human")
 			{
 				this.gameId = localStorage.getItem("gameId");
@@ -1359,8 +1372,11 @@ Vue.component('my-game', {
 					code:"ping",oppid:this.oppid,gameId:this.gameId}));
 			}
 			else
+			{
 				this.compWorker.postMessage(["init",fen]);
-			this.vr = new VariantRules(fen, moves);
+				if (this.mycolor != this.vr.turn)
+					this.playComputerMove();
+			}
 			if (moves.length > 0)
 			{
 				const lastMove = moves[moves.length-1];