Stub chatroom support

.eslintignore

@@ -15,3 +15,4 @@ node_modules/
 /js/panels.js
 /js/panel-mainmenu.js
 /js/panel-rooms.js
+/js/panel-chat.js

.gitignore

@@ -26,5 +26,6 @@ package-lock.json
 /js/panels.js
 /js/panel-mainmenu.js
 /js/panel-rooms.js
+/js/panel-chat.js
 
 .vscode

src/client-connection.ts

@@ -12,7 +12,7 @@ class PSConnection {
  connected = false;
  queue = [] as string[];
  constructor() {
- // this.connect();
+ this.connect();
  }
  connect() {
  const server = PS.server;

src/client-main.ts

@@ -287,6 +287,8 @@ class PlaceholderRoom extends PSRoom {
 type RoomType = {Model: typeof PSRoom, Component: typeof PSRoomPanel};
 
 const PS = new class extends PSModel {
+ down: string | boolean = false;
+
  prefs = new PSPrefs();
  teams = new PSTeams();
  user = new PSUser();

src/panel-chat.tsx

@@ -0,0 +1,57 @@
+/**
+ * Chat panel
+ *
+ * @author Guangcong Luo <guangcongluo@gmail.com>
+ * @license AGPLv3
+ */
+
+class ChatRoom extends PSRoom {
+ readonly classType: string = 'chat';
+ constructor(options: RoomOptions) {
+ super(options);
+ if (!this.connected && PS.connected) {
+ PS.send(`|/join ${this.id}`);
+ this.connected = true;
+ }
+ }
+ receive(line: string) {
+ this.update(line);
+ }
+}
+
+class ChatPanel extends preact.Component<{style: {}, room: PSRoom}> {
+ render() {
+ return <div class="ps-room ps-room-light scrollabel" id={`room-${this.props.room.id}`} style={this.props.style}>
+ <div class="tournament-wrapper hasuserlist"></div>
+ <div class="chat-log hasuserlist">
+ <ChatLog room={this.props.room} />
+ </div>
+ <div class="chat-log-add hasuserlist"></div>
+ <ul class="userlist"></ul>
+ </div>;
+ }
+}
+
+class ChatLog extends preact.Component<{room: PSRoom}> {
+ componentDidMount() {
+ this.props.room.subscribe(msg => {
+ if (!msg) return;
+ this.append(<div class="chat">{msg}</div>);
+ });
+ }
+ append(nodes: preact.ComponentChild) {
+ preact.render(nodes, this.base!);
+ }
+ shouldComponentUpdate() {
+ return false;
+ }
+ render() {
+ return <div class="inner" role="log"></div>;
+ }
+}
+
+PS.roomTypes['chat'] = {
+ Model: ChatRoom,
+ Component: ChatPanel,
+};
+PS.updateRoomTypes();

src/panel-mainmenu.tsx

@@ -7,13 +7,24 @@
 
 class MainMenuRoom extends PSRoom {
  readonly classType: string = 'mainmenu';
- receive(msg: string) {
- //
+ receive(line: string) {
+ const lobby = PS.rooms['lobby'];
+ if (lobby) lobby.receive(line);
  }
 }
 
 class MainMenuPanel extends preact.Component<{style: {}, room: PSRoom}> {
  render() {
+ 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="//play.pokemonshowdown.com/sprites/bw/teddiursa.png" alt="" /></div> Bear with us as we freak out.</p>
+ <p>(We'll be back up in a few hours.)</p>
+ </div> : <div class="menugroup">
+ <p><button class="button mainmenu1 big" name="search"><strong>Battle!</strong><br /><small>Find a random opponent</small></button></p>
+ </div>);
+ const onlineButton = ' button' + (PS.connected ? '' : ' disabled');
  return <div class="ps-room scrollable" id={`room-${this.props.room.id}`} style={this.props.style}>
  <div class="mainmenuwrapper">
  <div class="leftmenu">
@@ -22,16 +33,29 @@ class MainMenuPanel extends preact.Component<{style: {}, room: PSRoom}> {
  <div class="pm-window news-embed" data-newsid="<!-- newsid -->">
  <h3><button class="closebutton" tabIndex={-1}><i class="fa fa-times-circle"></i></button><button class="minimizebutton" tabIndex={-1}><i class="fa fa-minus-circle"></i></button>News</h3>
  <div class="pm-log" style="max-height:none">
- News box!!
+ <div class="newsentry"><h4>Test client</h4><p>Welcome to the test client! You can test client changes here!</p><p>&mdash;<strong>Zarel</strong> <small class="date">on Sep 25, 2015</small></p></div>
  </div>
  </div>
  </div>
  </div>
  <div class="mainmenu">
- <div id="loading-message" class="mainmessage">[insert main menu here]</div>
+ {searchButton}
+
+ <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>
+ </div>
+
+ <div class="menugroup">
+ <p><button class={"mainmenu4" + onlineButton} name="joinRoom" value="battles">Watch a battle</button></p>
+ <p><button class={"mainmenu5" + onlineButton} name="finduser">Find a user</button></p>
+ </div>
  </div>
  </div>
- <div class="rightmenu">
+ <div class="rightmenu" style={{display: PS.leftRoomWidth ? 'none' : 'block'}}>
+ {PS.server.id === 'showdown' ?
+ <div class="menugroup"><p><button class={"mainmenu1" + onlineButton} name="joinRoom" value="rooms">Join chat</button></p></div> :
+ <div class="menugroup"><p><button class={"mainmenu1" + onlineButton} name="joinRoom" value="lobby">Join lobby chat</button></p></div>}
  </div>
  <div class="mainmenufooter">
  <div class="bgcredit"></div>

src/panel-rooms.tsx

@@ -11,8 +11,12 @@ class RoomsRoom extends PSRoom {
 
 class RoomsPanel extends preact.Component<{style: {}, room: PSRoom}> {
  render() {
- return <div class="ps-room ps-room-light scrollabel" id={`room-${this.props.room.id}`} style={this.props.style}>
- <div class="mainmessage"><p>[insert room list here]</p><p><a href="/lobby">Lobby</a></p></div>
+ return <div class="ps-room ps-room-light scrollable" id={`room-${this.props.room.id}`} style={this.props.style}>
+ <div class="mainmessage">
+ <p>[insert room list here]</p>
+ <p><a href="/lobby">Lobby</a></p>
+ <p><a href="/tours">Tours</a></p>
+ </div>
  </div>;
  }
 }

testclient-beta.html

@@ -58,5 +58,6 @@ <h3><button class="closebutton" tabindex="-1" aria-label="Close"><i class="fa fa
  <script src="js/panel-mainmenu.js"></script>
  <script src="js/panel-rooms.js"></script>
  <script src="js/panels.js"></script>
+ <script src="js/panel-chat.js"></script>
 
 </body></html>