From f4edbef2f7220ef820d4308c01cd322ab0a2f469 Mon Sep 17 00:00:00 2001
From: Guangcong Luo <guangcongluo@gmail.com>
Date: Mon, 8 Feb 2021 23:07:13 -0500
Subject: [PATCH] Improve indications of PS loading

New PS now makes it much clearer when it's still connecting to the server,
and when it's connected.
---
 src/client-main.ts     |  8 +++----
 src/panel-mainmenu.tsx | 52 +++++++++++++++++++++++++++---------------
 src/panel-topbar.tsx   | 20 ++++++++++++----
 3 files changed, 53 insertions(+), 27 deletions(-)

diff --git a/src/client-main.ts b/src/client-main.ts
index 5b8c5a11c..08f23c367 100644
--- a/src/client-main.ts
+++ b/src/client-main.ts
@@ -263,9 +263,9 @@ class PSTeams extends PSStreamModel<'team' | 'format'> {
  *********************************************************************/
 
 class PSUser extends PSModel {
-	name = "Guest";
+	name = "";
 	group = '';
-	userid = "guest" as ID;
+	userid = "" as ID;
 	named = false;
 	registered = false;
 	avatar = "1";
@@ -294,9 +294,9 @@ class PSUser extends PSModel {
 		PS.connection?.disconnect();
 
 		alert("You have been logged out and disconnected.\n\nIf you wanted to change your name while staying connected, use the 'Change Name' button or the '/nick' command.");
-		this.name = "Guest";
+		this.name = "";
 		this.group = '';
-		this.userid = "guest" as ID;
+		this.userid = "" as ID;
 		this.named = false;
 		this.registered = false;
 		this.update();
diff --git a/src/panel-mainmenu.tsx b/src/panel-mainmenu.tsx
index 99e096819..97093d4a1 100644
--- a/src/panel-mainmenu.tsx
+++ b/src/panel-mainmenu.tsx
@@ -307,27 +307,41 @@ class MainMenuPanel extends PSRoomPanel<MainMenuRoom> {
 			</div>;
 		});
 	}
-	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>
-			:
-				<p class="error"><strong>Pok&eacute;mon Showdown is offline due to technical difficulties!</strong></p>
-			}
-			<p>
-				<div style={{textAlign: 'center'}}>
-					<img width="96" height="96" src={`//${Config.routes.client}/sprites/gen5/teddiursa.png`} alt="" />
-				</div>
-				Bear with us as we freak out.
-			</p>
-			<p>(We'll be back up in a few hours.)</p>
-		</div> : <TeamForm class="menugroup" onSubmit={this.submit}>
-			<button class={"mainmenu1 big" + onlineButton} name="search">
+	renderSearchButton() {
+		if (PS.down) {
+			return <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>
+				:
+					<p class="error"><strong>Pok&eacute;mon Showdown is offline due to technical difficulties!</strong></p>
+				}
+				<p>
+					<div style={{textAlign: 'center'}}>
+						<img width="96" height="96" src={`//${Config.routes.client}/sprites/gen5/teddiursa.png`} alt="" />
+					</div>
+					Bear with us as we freak out.
+				</p>
+				<p>(We'll be back up in a few hours.)</p>
+			</div>;
+		}
+
+		if (!PS.user.userid || PS.isOffline) {
+			return <TeamForm class="menugroup" onSubmit={this.submit}>
+				<button class="mainmenu1 big button disabled" name="search">
+					<em>{PS.isOffline ? "Disconnected" : "Connecting..."}</em>
+				</button>
+			</TeamForm>;
+		}
+
+		return <TeamForm class="menugroup" onSubmit={this.submit}>
+			<button class="mainmenu1 big button" name="search">
 				<strong>Battle!</strong><br />
 				<small>Find a random opponent</small>
 			</button>
-		</TeamForm>);
+		</TeamForm>;
+	}
+	render() {
+		const onlineButton = ' button' + (PS.isOffline ? ' disabled' : '');
 		return <PSPanelWrapper room={this.props.room} scrollable>
 			<div class="mainmenuwrapper">
 				<div class="leftmenu">
@@ -335,7 +349,7 @@ class MainMenuPanel extends PSRoomPanel<MainMenuRoom> {
 						{this.renderMiniRooms()}
 					</div>
 					<div class="mainmenu">
-						{searchButton}
+						{this.renderSearchButton()}
 
 						<div class="menugroup">
 							<p><button class="mainmenu2 button" name="joinRoom" value="teambuilder">Teambuilder</button></p>
diff --git a/src/panel-topbar.tsx b/src/panel-topbar.tsx
index 7118fa5e9..b5042dc95 100644
--- a/src/panel-topbar.tsx
+++ b/src/panel-topbar.tsx
@@ -201,8 +201,22 @@ class PSHeader extends preact.Component<{style: {}}> {
 			{closeButton}
 		</li>;
 	}
-	render() {
+	renderUser() {
+		if (!PS.connected) {
+			return <button class="button disabled" disabled><em>Offline</em></button>;
+		}
+		if (!PS.user.userid) {
+			return <button class="button disabled" disabled><em>Connecting...</em></button>;
+		}
+		if (!PS.user.named) {
+			return <a class="button" href="login">Choose name</a>;
+		}
 		const userColor = window.BattleLog && {color: BattleLog.usernameColor(PS.user.userid)};
+		return <span class="username" data-name={PS.user.name} style={userColor}>
+			<i class="fa fa-user" style="color:#779EC5"></i> {PS.user.name}
+		</span>;
+	}
+	render() {
 		return <div id="header" class="header" style={this.props.style}>
 			<img
 				class="logo"
@@ -224,9 +238,7 @@ class PSHeader extends preact.Component<{style: {}}> {
 				</ul>
 			</div></div>
 			<div class="userbar">
-				<span class="username" data-name={PS.user.name} style={userColor}>
-					<i class="fa fa-user" style="color:#779EC5"></i> {PS.user.name}
-				</span> {}
+				{this.renderUser()} {}
 				<button class="icon button" name="joinRoom" value="volume" title="Sound" aria-label="Sound">
 					<i class={PS.prefs.mute ? 'fa fa-volume-off' : 'fa fa-volume-up'}></i>
 				</button> {}