Distinguish "connecting" and "disconnected" states

Individual PS rooms actually consider themselves connected while
connecting, so maybe we should do that instead? Until then, this is
the approach we're going with.

src/client-connection.ts

@@ -32,8 +32,9 @@ class PSConnection {
 		};
 		socket.onclose = () => {
 			console.log('\u2705 (DISCONNECTED)');
-			PS.connected = false;
 			this.connected = false;
+			PS.connected = false;
+			PS.isOffline = true;
 			for (const roomid in PS.rooms) {
 				PS.rooms[roomid]!.connected = false;
 			}

src/client-main.ts

@@ -415,6 +415,15 @@ const PS = new class extends PSModel {
 	server = new PSServer();
 	connection: PSConnection | null = null;
 	connected = false;
+	/**
+	 * While PS is technically disconnected while it's trying to connect,
+	 * it still shows UI like it's connected, so you can click buttons
+	 * before the server connection is established.
+	 *
+	 * `isOffline` is only set if PS is neither connected nor trying to
+	 * connect.
+	 */
+	isOffline = false;
 
 	router: PSRouter = null!;
 

src/panel-mainmenu.tsx

@@ -91,6 +91,7 @@ class MainMenuPanel extends PSRoomPanel {
 		(this.base!.querySelector('button.big') as HTMLButtonElement).focus();
 	}
 	render() {
+		const onlineButton = ' button' + (PS.isOffline ? ' disabled' : '');
 		const searchButton = (PS.down ? <div class="menugroup" style="background: rgba(10,10,10,.6)">
 			{PS.down === 'ddos' ?
 				<p class="error"><strong>Pok&eacute;mon Showdown is offline due to a DDoS attack!</strong></p> :
@@ -106,12 +107,11 @@ class MainMenuPanel extends PSRoomPanel {
 			<p>
 				<TeamDropdown format="gen7ou" />
 			</p>
-			<p><button class="button mainmenu1 big" name="search">
+			<p><button class={"mainmenu1 big" + onlineButton} name="search">
 				<strong>Battle!</strong><br />
 				<small>Find a random opponent</small>
 			</button></p>
 		</div>);
-		const onlineButton = ' button' + (PS.connected ? '' : ' disabled');
 		return <PSPanelWrapper room={this.props.room}>
 			<div class="mainmenuwrapper">
 				<div class="leftmenu">
@@ -138,7 +138,7 @@ class MainMenuPanel extends PSRoomPanel {
 
 						<div class="menugroup">
 							<p><button class="mainmenu2 button" name="joinRoom" value="teambuilder">Teambuilder</button></p>
-							<p><button class="mainmenu3 button" name="joinRoom" value="ladder">Ladder</button></p>
+							<p><button class={"mainmenu3" + onlineButton} name="joinRoom" value="ladder">Ladder</button></p>
 						</div>
 
 						<div class="menugroup">

src/panel-rooms.tsx

@@ -160,7 +160,7 @@ class RoomsPanel extends PSRoomPanel {
 					onInput={this.changeSearch} onKeyDown={this.keyDownSearch}
 				/>
 			</div>
-			{rooms.userCount === undefined && <h2>Connecting...</h2>}
+			{PS.isOffline ? <h2>(offline)</h2> : rooms.userCount === undefined && <h2>Connecting...</h2>}
 			{roomList}
 		</div></PSPanelWrapper>;
 	}