From 5b4e72d70522eb61fd8cf2bbd619bb7ed4da2cfb Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Sun, 31 Jul 2022 19:51:07 -0400 Subject: Add table toggle --- client.html | 2 ++ scripts/client.js | 6 +++++- scripts/gui/table.js | 13 +++++++++++-- styles/client/base.css | 15 +++++++++++++++ 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 @@ + + \ 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); -- cgit v1.2.3