Leahnaya/pokemon-showdown-client
1
0
Fork 0
mirror of https://github.com/smogon/pokemon-showdown-client.git synced 2026-10-02 15:53:11 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Improve indications of PS loading

Browse Source 
New PS now makes it much clearer when it's still connecting to the server,
and when it's connected.
This commit is contained in:
Guangcong Luo
2021-02-08 23:07:13 -05:00
parent 62a20cade2
commit f4edbef2f7
3 changed files with 53 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/client-main.ts
View File

@@ -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();

52
src/panel-mainmenu.tsx
View File

@@ -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>

20
src/panel-topbar.tsx
View File

@@ -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> {}