Add table toggle

4 files changed, 33 insertions, 3 deletions

diff --git a/client.html b/client.html
index 9b92a09..26f3c18 100644
--- a/client.html
+++ b/client.html
@@ -120,6 +120,8 @@
 				<button>Send</button>
 			</div>
 		</div>
+
+		<button class="toggle-table" onclick="game.table.toggleTable()"></button>
 	</body>
 
 </html>
\ No newline at end of file
diff --git a/scripts/client.js b/scripts/client.js
index bceb7a4..92f518c 100644
--- a/scripts/client.js
+++ b/scripts/client.js
@@ -163,7 +163,11 @@ class Client{
 	{
 		let m = e.detail;
 
-		if (TABLE_RPC.includes(m.type))
+		if(m.type == "nojoin") {
+			alert(`Failed to join game. ${m.data}`);
+		} else if (m.type == "join") {
+			console.log("join not impl")
+		} else if (TABLE_RPC.includes(m.type))
 			this.table[m.type](m.data);
 	}
 
diff --git a/scripts/gui/table.js b/scripts/gui/table.js
index 87120e3..f17abb1 100644
--- a/scripts/gui/table.js
+++ b/scripts/gui/table.js
@@ -23,7 +23,7 @@ class Table{
 	openTable ()
 	{
 		let state = this.root.getAttribute("state")
-		if((state == "close" || state == "closed") && state != "") {
+		if(state == "close" || state == "closed") {
 			this.root.setAttribute("state", "closed");
 			setTimeout(this.root.setAttribute.bind(this.root), 50, "state", "open");
 		}
@@ -33,12 +33,21 @@ class Table{
 	closeTable ()
 	{
 		let state = this.root.getAttribute("state")
-		if(state != "close" && state != "closed") {
+		if((state != "close" && state != "closed") && state != "") {
 			this.root.setAttribute("state", "");
 			setTimeout(this.root.setAttribute.bind(this.root), 50, "state", "close");
 		}
 	}
 
+	toggleTable ()
+	{
+		let state = this.root.getAttribute("state")
+		if(state == "close" || state == "closed")
+			this.openTable();
+		else if (state == "open")
+			this.closeTable()
+	}
+
 	// Handle a game closing (expectedly or unexpectedly)
 	handleClose ()
 	{
diff --git a/styles/client/base.css b/styles/client/base.css
index 0ecba9b..51ac5fd 100644
--- a/styles/client/base.css
+++ b/styles/client/base.css
@@ -194,6 +194,21 @@ div.settings {
 	opacity: 0;
 }
 
+button.toggle-table {
+	position: absolute;
+	bottom: 5px;
+	left: 5px;
+	transform-origin: bottom left;
+	z-index: 4;
+}
+
+button.toggle-table::before {
+	font-family: "IcoFont";
+	font-size: xx-large;
+
+	content: '\edb9';
+}
+
 @keyframes slide-in {
 	from {
 		transform: translate(0, -100vh);