Implement stub Main Menu and Rooms panels

.gitignore

@@ -27,5 +27,6 @@ package-lock.json
 /js/client-frame.js
 /js/client-main.js
 /js/panel-mainmenu.js
+/js/panel-rooms.js
 
 .vscode

src/client-frame.tsx

@@ -102,6 +102,7 @@ class PSRoomPanel extends preact.Component<{style: {}, room: PSRoom}> {
 class PSMain extends preact.Component {
 	constructor() {
 		super();
+		PS.subscribe(() => this.forceUpdate());
 	}
 	posStyle(pos: PanelPosition) {
 		if (!pos) return {display: 'none'};
@@ -150,6 +151,9 @@ class PSMain extends preact.Component {
 		if (room.type === 'mainmenu') {
 			return <MainMenuPanel style={this.posStyle(pos)} room={room} />;
 		}
+		if (room.type === 'rooms') {
+			return <RoomsPanel style={this.posStyle(pos)} room={room} />;
+		}
 		return <PSRoomPanel style={this.posStyle(pos)} room={room} />;
 	}
 	render() {

src/client-main.ts

@@ -184,7 +184,7 @@ const PS = new class extends PSModel {
 		this.rightRoomList.push('rooms' as RoomID);
 
 		this.updateLayout();
-		window.addEventListener('resize', () => this.updateLayout);
+		window.addEventListener('resize', () => this.updateLayout());
 	}
 
 	// Panel layout
@@ -216,9 +216,10 @@ const PS = new class extends PSModel {
 			};
 		case 'chat':
 		case 'rooms':
+		case 'battles':
 			return {
 				minWidth: 320,
-				width: 640,
+				width: 570,
 				maxWidth: 640,
 			};
 		case 'battle':
@@ -259,7 +260,7 @@ const PS = new class extends PSModel {
 		const right = this.getWidthFor(this.rightRoom);
 		const available = document.body.offsetWidth;
 
-		let excess = available - left.width + right.width;
+		let excess = available - (left.width + right.width);
 		if (excess >= 0) {
 			// both fit in full size
 			const leftStretch = left.maxWidth - left.width;

src/panel-mainmenu.tsx

@@ -9,7 +9,7 @@
 
 class MainMenuPanel extends preact.Component<{style: {}, room: PSRoom}> {
 	render() {
-		return <div class="ps-room" id={`room-${this.props.room.id}`} style={this.props.style}>
+		return <div class="ps-room scrollable" id={`room-${this.props.room.id}`} style={this.props.style}>
 			<div class="mainmenuwrapper">
 				<div class="leftmenu">
 					<div class="activitymenu">
@@ -23,7 +23,7 @@ class MainMenuPanel extends preact.Component<{style: {}, room: PSRoom}> {
 						</div>
 					</div>
 					<div class="mainmenu">
-						<div id="loading-message" class="mainmessage">Initializing... <noscript>FAILED<br /><br />Pok&eacute;mon Showdown requires JavaScript.</noscript></div>
+						<div id="loading-message" class="mainmessage">[insert main menu here]</div>
 					</div>
 				</div>
 				<div class="rightmenu">

src/panel-rooms.tsx

@@ -0,0 +1,16 @@
+/**
+ * Room-list panel (default right-panel)
+ *
+ * @author Guangcong Luo <guangcongluo@gmail.com>
+ * @license AGPLv3
+ */
+
+// The main menu doesn't really have state, right? We'll just use no model for now
+
+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></div>
+		</div>;
+	}
+}

testclient-beta.html

@@ -54,6 +54,7 @@
 	<script src="js/client-main.js"></script>
 	<script src="js/lib/preact.min.js"></script>
 	<script src="js/panel-mainmenu.js"></script>
+	<script src="js/panel-rooms.js"></script>
 	<script src="js/client-frame.js"></script>
 
 </body></html>