From 5e27be422b4d93d8db080c74570dddf3548ee93e Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Wed, 19 Dec 2018 19:48:21 +0100
Subject: [PATCH] Achieved first relatively complete version of the website;
 TODO: styles...

---
 public/javascripts/components/game.js | 94 ++++++++++++++-------------
 1 file changed, 50 insertions(+), 44 deletions(-)

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 8f34be22..91e13e45 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',
 				{
@@ -1233,6 +1230,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;
-- 
2.44.0