Add simple WebSocket multiplayer

styles.css

@@ -96,6 +96,12 @@ h1 {
   transition: transform 150ms ease, background 150ms ease;
 }
 
+.icon-button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+}
+
 .icon-button:hover {
   background: #eee6d6;
   transform: translateY(-1px);
@@ -136,6 +142,32 @@ h1 {
   text-align: right;
 }
 
+.network-status {
+  margin: 0 0 18px;
+  padding: 10px 12px;
+  border: 1px solid rgba(37, 37, 37, 0.14);
+  border-radius: 8px;
+  color: var(--muted);
+  background: var(--panel);
+  font-weight: 800;
+}
+
+.network-status.paired {
+  color: #31592d;
+  background: #e5f3df;
+}
+
+.network-status.waiting,
+.network-status.connecting {
+  color: #665019;
+  background: #fff3c7;
+}
+
+.network-status.error {
+  color: #8d2525;
+  background: #ffe1df;
+}
+
 .board {
   aspect-ratio: 1;
   width: min(100%, 620px);
@@ -307,4 +339,3 @@ h1 {
     max-height: 180px;
   }
 }
-