X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=17f3b18d6570a75ade64a3482d4a7842017f1c53;hb=2807f530f7d9d7675497974fa95aa7ecdd5d144c;hp=8f34be22c437d6638d05f6ed018102430bf73f01;hpb=56a683cd685eceeff44560c060c9c97605429ee1;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 8f34be22..17f3b18d 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -127,53 +127,50 @@ Vue.component('my-game', {
 				);
 				elementArray.push(connectedIndic);
 			}
-			const menuElt = h('div', { }, [
-				h('label',
+			if (this.mode == "chat")
+			{
+				const chatButton = h(
+					'button',
 					{
-						attrs: { for: "drawer-control" },
-						"class": {
-							"drawer-toggle": true,
-							"persistent": true,
-							"button": true,
+						on: { click: this.startChat },
+						attrs: {
+							"aria-label": 'Start chat',
+							"id": "chatBtn",
 						},
-					}
-				),
-				h('input',
+						'class': {
+							"tooltip": true,
+							"topindicator": true,
+							"indic-left": true,
+							"settings-btn": !smallScreen,
+							"settings-btn-small": smallScreen,
+						},
+					},
+					[h('i', { 'class': { "material-icons": true } }, "chat")]
+				);
+				elementArray.push(chatButton);
+			}
+			else if (this.mode == "computer")
+			{
+				const clearButton = h(
+					'button',
 					{
-						attrs: { type: "checkbox", id: "drawer-control" },
-						"class": { "drawer": true, "persistent": true },
-					}
-				),
-				h('div',
-					{ },
-					[
-						h('label',
-							{
-								attrs: { for: "drawer-control" },
-								"class": { "drawer-close": true }
-							}
-						),
-						h('a',
-							{
-								attrs: { "href": "#" },
-								domProps: { innerHTML: "Home" },
-							}
-						),
-						h('a',
-							{
-								attrs: { "href": "#" },
-								domProps: { innerHTML: "....." },
-							}
-						),
-					]
-				)
-			]);
-			elementArray.push(menuElt);
-
-			// TODO: chat available only in "chat" mode...
-			//						on: {
-//							"click": () => { document.getElementById("modal-chat").checked = true; },
-
+						on: { click: this.clearComputerGame },
+						attrs: {
+							"aria-label": 'Clear computer game',
+							"id": "clearBtn",
+						},
+						'class': {
+							"tooltip": true,
+							"topindicator": true,
+							"indic-left": true,
+							"settings-btn": !smallScreen,
+							"settings-btn-small": smallScreen,
+						},
+					},
+					[h('i', { 'class': { "material-icons": true } }, "clear")]
+				);
+				elementArray.push(clearButton);
+			}
 			const turnIndic = h(
 				'div',
 				{
@@ -260,7 +257,11 @@ Vue.component('my-game', {
 								attrs: { "src": '/images/pieces/' +
 									VariantRules.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
 								'class': { 'choice-piece': true },
-								on: { "click": e => { this.play(m); this.choices=[]; } },
+								on: {
+									"click": e => { this.play(m); this.choices=[]; },
+									// NOTE: add 'touchstart' event to fix a problem on smartphones
+									"touchstart": e => { this.play(m); this.choices=[]; },
+								},
 							})
 						]
 					);
@@ -1170,7 +1171,6 @@ Vue.component('my-game', {
 			setTimeout(() => { modalBox.checked = false; }, 2000);
 		},
 		endGame: function(score) {
-			console.log("call " + score + " " + this.mode);
 			this.score = score;
 			if (["human","computer"].includes(this.mode))
 			{
@@ -1233,6 +1233,15 @@ Vue.component('my-game', {
 			elt.style.visibility = "hidden";
 			setTimeout(() => { elt.style.visibility="visible"; }, 100);
 		},
+		startChat: function(e) {
+			this.getRidOfTooltip(e.currentTarget);
+			document.getElementById("modal-chat").checked = true;
+		},
+		clearComputerGame: function(e) {
+			this.getRidOfTooltip(e.currentTarget);
+			this.clearStorage(); //this.mode=="computer" (already checked)
+			location.reload(); //to see clearing effects
+		},
 		showSettings: function(e) {
 			this.getRidOfTooltip(e.currentTarget);
 			document.getElementById("modal-settings").checked = true;
@@ -1311,7 +1320,8 @@ Vue.component('my-game', {
 				const storageVariant = localStorage.getItem("comp-variant");
 				if (!!storageVariant)
 				{
-					if (storageVariant !== variant)
+					const score = localStorage.getItem("comp-score");
+					if (storageVariant !== variant && score == "*")
 					{
 						if (!confirm("Unfinished " + storageVariant +
 							" computer game will be erased"))
@@ -1319,12 +1329,8 @@ Vue.component('my-game', {
 							return;
 						}
 					}
-					else
-					{
-						const score = localStorage.getItem("comp-score");
-						if (score == "*")
-							return this.continueGame("computer");
-					}
+					else if (score == "*")
+						return this.continueGame("computer");
 				}
 			}
 			this.vr = new VariantRules(fen, []);