add locked and spectatable

2 files changed, 15 insertions, 4 deletions

diff --git a/webAO/client.css b/webAO/client.css
index f2bf434..c91d643 100644
--- a/webAO/client.css
+++ b/webAO/client.css
@@ -144,10 +144,6 @@ img {
 	width: 100%;
 }
 
-.area_btn {
-	width: 20%;
-}
-
 #client_court {
 	position: absolute;
 	height: 100%;
@@ -524,6 +520,7 @@ img {
 .area-button:hover {
 	border-color: #FFD081;
 }
+
 .area-default {
 	background-color: rgb(54,198,68);
 }
@@ -546,4 +543,12 @@ img {
 
 .area-gaming {
 	background-color: rgb(55,255,255);
+}
+
+.area-locked {
+	background-color: rgb(127,127,127);
+}
+
+.area-spectatable {
+	background-color: rgb(54,198,68);
 }
\ No newline at end of file
diff --git a/webAO/client.js b/webAO/client.js
index 4898ef4..493598d 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -906,6 +906,9 @@ class Client extends EventEmitter {
 					const thisarea = document.getElementById("area" + i);
 
 					switch (args[i]) {
+						case "LOCKED":
+							thisarea.classList = "area-button area-locked";
+							break;
 						case "LOOKING-FOR-PLAYERS":
 							thisarea.classList = "area-button area-looking";
 							break;
@@ -921,6 +924,9 @@ class Client extends EventEmitter {
 						case "GAMING":
 							thisarea.classList = "area-button area-gaming";
 							break;
+						case "SPECTATABLE":
+							thisarea.classList = "area-button area-spectatable";
+							break;
 						default:
 							thisarea.classList = "area-button area-default";
 							break;